How to effect to video in fabric.js

Question

I want use image-filters to video. (http://fabricjs.com/image-filters)

but It's stops video. How to effect to video in fabric.js?

For example, how do I change the color of a video?

https://codepen.io/html5andblog/pen/dmKJH

↑I do not use CSS filter. Can someone explain please?

Thanks.

<!DOCTYPE html>
<html>
<head>
<meta charset="SHIFT-JIS">
<title>sample</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<script>


$(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);
    video1.getElement().load();


    $(document.body).on('click', '#play' ,function(){
        video1.getElement().play();

        //↓It's stops video.
        /*
        var filter = new fabric.Image.filters.BlendColor({
            color:'red',
            mode: 'tint',
            alpha: 0.5
        });
            canvas.item(0).filters.push(filter);
        canvas.item(0).applyFilters();
        */


    });




    fabric.util.requestAnimFrame(function render() {
      canvas.renderAll();
      fabric.util.requestAnimFrame(render);
    });

});
</script>

</head>
<body>
<button id="play">play</button>
<canvas id="c" width="300" height="300"></canvas>

<video id="video1" style="display: none" class="canvas-img" width="480" height="360">
  <source id="video_src1" src="https://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>

</body>
</html>

If webgl is not available it wil be terribly slow, just that you know it. — AndreaBogazzi, Apr 29 '18 at 09:28

AndreaBogazzi · Accepted Answer · 2018-04-30T06:12:54.933

Ok so it can be done, the problem is that fabricJS to be faster cache textures and avoid pulling them in the video card every applyfilters to save time.

In this case i had to modify your code n 2 places:

1) applyFilters need to be run each animation frame

2) the cache for the texture must be deleted each time

The hardest part was finding a video with cors enabled.

$(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>

is it possible to download/export that video with applied effects? If yes, then how can I download/Export it? — Umesh Patadiya, Jan 17 '19 at 04:01
there is an api in the browsers that let you create a video from a canvas. — AndreaBogazzi, Jan 17 '19 at 07:19
@AndreaBogazzi Please check this question I have added, https://stackoverflow.com/questions/54266023/how-to-export-fabricjs-canvas-in-video-format-like-mp4-with-sound — Umesh Patadiya, Jan 21 '19 at 06:15
@AndreaBogazzi is it possible to add video as canvas background? — Umesh Patadiya, Jan 29 '19 at 08:40
Yes. that would be canvas.backgroundImage = videoObject. Still you have to render continuosly. — AndreaBogazzi, Feb 02 '19 at 21:18
@UmeshPatadiya checkout https://github.com/ffmpegwasm/ffmpeg.wasm/ for canvas recording — Chris Chen, Jan 01 '22 at 22:10

How to effect to video in fabric.js

1 Answers1