• • bounty将在6天后过期**。回答此问题可获得+50声望奖励。MAYUR SANCHETI希望引起更多人关注此问题。

我正在为https://www.veed.io/tools/video-filters等视频开发滤镜效果，我正在使用JavaScript/jQuery，Fabric。
但它不能正确地将效果应用到视频中。
有人能给一些建议或什么是下面的代码错误或可用库应用过滤器或一些有用的链接。
如果需要更清楚的说明，请评论。
我也试过下面的代码，

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

我的期望是创建视频过滤器，例如-灰度过滤器，模糊，彩色过滤器，RGB过滤器，阴影，黑白视频。像我添加的网站链接。