canvas画视频

Question

有rgb数据，用canvas ImageData往上画图 隔多少毫秒执行一次用来实现视频效果

想问问这种方法靠谱么 有缓存后期会不会很卡 没用过canvas求大神指教

代码

    setInterval(function(){
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      var imgData=ctx.createImageData(100,100);
      for (var i=0;i<rgbpic.length;i+=4)
        {
        imgData.data[i+0]=rgbpic[i+0];
        imgData.data[i+1]=rgbpic[i+1];
        imgData.data[i+2]=rgbpic[i+2];
        imgData.data[i+3]=rgbpic[i+3];
        }
      ctx.putImageData(imgData,0,0);
    }, 50)

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

自然必须是特别卡的，按一秒钟 24 帧计，楼主可以尝试一下看看浏览器是什么表现。如果按照楼主的方式，连 js 这种高级语言都能流畅地处理视频，那市面上大量的视频编码器播放器存在的意义是什么呢？对于这种数据密集型的场景，js 就不是很适用。

Answer 2

使用 requestAnimationFrame 来代替 setInterval 做动画，参见： https://developer.mozilla.org... 。
上 github 找找，也许有相应的开源库可以更加方便地解决题主的需求。

Answer 3

参考这个库jsmpeg