自定义形状检测javascript画布

如何解决自定义形状检测javascript画布

我正在处理一个显示视频流的视频流项目，我想要的是检测视频中出现的自定义形状并将其隐藏。搜索后发现我应该让我的视频在画布元素而不是视频元素上运行以进行一些操作那就是我所做的

index.html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery.min.js"
    ></script>
  </head>
  <body>
    <h1>Paapy streaming</h1>
    <canvas id="c" style="border: 2px red dashed; height: 450px"></canvas>

    <video
      autoplay
      loop
      autobuffer
      muted
      playsinline
      id="video"
      controls
    ></video>


    <script>
      var video = document.getElementById("video");
      var videoSrc = "http://192.168.1.12:8888/live/papy/index.m3u8";
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function () {
          video.play();
        });
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = videoSrc;
        video.addEventListener("loadedMetadata",function () {
          video.play();
        });
      }
    </script>
    <script src="processor.js"></script>
  </body>
</html>

processor.js

document.addEventListener('DOMContentLoaded',function(){
    var v = document.getElementById('video');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');
    var back = document.createElement('canvas');
    var backcontext = back.getContext('2d');

    var cw,ch;

    v.addEventListener('play',function(){
        cw = v.clientWidth;
        ch = v.clientHeight;
        canvas.width = cw;
        canvas.height = ch;
        back.width = cw;
        back.height = ch;
        draw(v,context,backcontext,cw,ch);
    },false);

},false);

function draw(v,c,bc,w,h) {
    if(v.paused || v.ended) return false;
    // First,draw it into the backing canvas
    bc.drawImage(v,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getimageData(0,h);
    var data = idata.data;
    // Loop through the pixels,turning them grayscale
            console.log(data)


    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putimageData(idata,0);
    // Start over!
    setTimeout(function(){ draw(v,h); },0);
}

我想要的是删除这个黑色矩形

我怎么能做这样的事情？提前致谢