自定义形状检测javascript画布

编程问答 2022-06-01

问题描述

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

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);
}

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

enter image description here

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvasimage-processingjavascripttracking.jsvideo-processing