Question 35531 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to apply different filter effect to video using jQuery / JavaScript

I am developing filter effects for video like this website. I am using JavaScript/jQuery, and fabric, but it’s not correctly applying the effect to the video.

This is the code I tried:

$(document).ready(function() {
  canvas = new fabric.Canvas('c');
  canvas.setWidth(480);
  canvas.setHeight(360);

  var video1El = document.getElementById('video1');
  var video1 = new fabric.Image(video1El, {
    left: 0,
    top: 0
  });

  canvas.add(video1);
  video1El.load();

  $(document.body).on('click', '#play', function() {
    video1El.play();
    var filter = new fabric.Image.filters.BlendColor({
      color: 'red',
      mode: 'tint',
      alpha: 0.5
    });
    video1.filters = [filter];
  });

  fabric.util.requestAnimFrame(function render() {
    var image = canvas.item(0);
    var backend = fabric.filterBackend;
    if (backend && backend.evictCachesForKey) {
      backend.evictCachesForKey(image.cacheKey);
      backend.evictCachesForKey(image.cacheKey + '_filtered');
    }
    canvas.item(0).applyFilters();
    canvas.renderAll();
    fabric.util.requestAnimFrame(render);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<button id="play">play</button>
<canvas id="c" width="300" height="300"></canvas>
<video crossorigin="anonymous" id="video1" style="display: none" class="canvas-img" width="480" height="360">
  <source id="video_src1" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

My expectation is to create a video filter. For example, grayscale filter, blur, color filter, RGB filter, shadow, and black and white video. Just like the website link which I added.

i also try below,

ffmpeg -i input.mp4 -vf "gblur=sigma=5:steps=8" -c:v libx264 -crf 22 -c:a aac -strict -2 output.mp4

but how is this command works , can someone give one example of filter with above command. any other technique is https://www.veed.io/tools/video-filters this site uses ffmpeg.

Tags:

2

Answers


  1. 0

    Your code is basically fine. The interesting part is

    var filter = new fabric.Image.filters.BlendColor({
   color:'red',
   mode: 'tint',
   alpha: 0.5
});

    There you are using the filter BlendColor, which is one of many other filters. For instance,

    • BaseFilter
    • Brightness
    • Convolute
    • GradientTransparency
    • Grayscale
    • Invert
    • Mask
    • Noise
    • Pixelate
    • RemoveWhite
    • Sepia
    • Sepia2
    • Tint

    See the documentation.

    However, after fabric.Image.filters you may add a filter. For instance, if you want to add the blur effect, you may use fabric.Image.filters.Blur(). The first parameter of Blur() is an object. In the documentation, you may find, what properties you can pass.

    Example:

     $(document).ready(function() {

   canvas = new fabric.Canvas('c');
   canvas.setWidth(480);
   canvas.setHeight(360);

   var video1El = document.getElementById('video1');
   var video1 = new fabric.Image(video1El, {
     left: 0,
     top: 0
   });

   canvas.add(video1);
   video1El.load();


   $(document.body).on('click', '#play', function() {
     video1El.play();
     var filter = new fabric.Image.filters.Blur({
       blur: 0.5
     });
     video1.filters = [filter];
   });

   fabric.util.requestAnimFrame(function render() {
     var image = canvas.item(0);
     var backend = fabric.filterBackend;
     if (backend && backend.evictCachesForKey) {
       backend.evictCachesForKey(image.cacheKey);
       backend.evictCachesForKey(image.cacheKey + '_filtered');
     }
     canvas.item(0).applyFilters();
     canvas.renderAll();
     fabric.util.requestAnimFrame(render);
   });

 });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<button id="play">play</button>
<canvas id="c" width="300" height="300"></canvas>
<video crossorigin="anonymous" id="video1" style="display: none" class="canvas-img" width="480" height="360">
  <source id="video_src1" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

    The code above is client-side only. So, if you want the user to download the video, you may need to modify the video by the server and then send it to the client.

    Here is an example how you could blur a video, using FFmpeg with the following command:

    ffmpeg -i input.mp4 -vf "gblur=sigma=5:steps=8" -c:v libx264 -crf 22 -c:a aac -strict -2 output.mp4

    This command applies a blur filter with a sigma value of 5 and 8 steps to the video file "input.mp4" and saves the output to "output.mp4" (see the documentation).

    Follow these steps:

    1. Open a command prompt or terminal window on your server.

    2. Use cd <DIRECTORY> to navigate to the directory where the input video file is located.

    3. Enter a FFmpeg command (for instance, the one that you see above) and press enter

    Once the command has finished running, the output video file will be saved in the same directory as the input file.

    Ensure that you have FFmpeg installed on your server, otherwise you may use a library (see the comments).

    Once the video is processed, you may send it to the client.

    Login or Signup to reply.
  2. 0

    It looks like you’re trying to use the fabric.js library to apply filters to a video element. However, fabric.js is a library for working with canvas elements, not video elements. Canvas elements are image-based, whereas video elements are video-based, and they have different capabilities and limitations.

    You cannot directly apply filters to the video element, but one way to achieve a similar effect is to use a canvas element to draw the video, apply the filters to the canvas, and then display the canvas on top of the video.

    You can use the HTML5 canvas API to draw the video on the canvas and set its attributes. You can also use libraries like CamanJS and PixiJS, which both provide an easy way to apply various filters to canvas elements.

    Here is an example of how to use CamanJS to apply grayscale filter to a video:

    <canvas id="canvas"></canvas>
<video id="video" src="your_video.mp4"></video>
<script>
    var canvas = document.getElementById('canvas'),
        video = document.getElementById('video'),
        ctx = canvas.getContext('2d');
    
    video.addEventListener('play', function(){
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        Caman("#canvas", function () {
            this.grayscale();
            this.render();
        });
    }, false);
</script>

    You can apply different filter by replacing the filter name in this example.

    Hope this helps and gives you a starting point.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search