防止视频循环导致浏览器内存不足答案

【问题标题】：prevent video on loop cause browser ran out of memory防止视频循环导致浏览器内存不足
【发布时间】：2017-12-20 07:12:38
【问题描述】：

我使用html5创建视频循环并将视频绘制到画布上，我创建了多个画布并在每个画布上绘制视频的每个部分，但一段时间后我发现，这会导致谷歌浏览器内存不足.

这是在画布上绘制视频的代码。

v.addEventListener('play', function(){
      cw = v.clientWidth * convas_rate_width;
      ch = v.clientHeight * convas_rate_height;
      canvas.width = (videoWidth/matrix_x) * canvas_location_x;
      canvas.height = (videoHeight/matrix_y) * canvas_location_y;
      back.width = cw;
      back.height = ch;


      draw(v,context,context,cw,ch,x,y,matrix_x, matrix_y);
    },false);

function draw(v,c,bc,w,h,x,y,matrix_x,matrix_y) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas

    var x_coord = -((w/matrix_x) * x);
    var y_coord = -((h/matrix_y) * y);

    bc.drawImage(v,x_coord,y_coord,w,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,(w),(h));


    var data = idata.data;
    // Loop through the pixels, turning them grayscale

    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(draw,10,v,c,bc,w,h,x,y,matrix_x, matrix_y);
  }

这里是打印屏幕：Google Chrome ran out of memory

有没有办法防止循环视频导致“内存不足”错误？

【问题讨论】：

标签： javascript html canvas video

【解决方案1】：

有很多缺失的代码，所以不能说内存在哪里被使用。很可能您要么关闭图像数据从而保留引用而不让浏览器删除它，要么您专门制作了引用的副本，实际上是在做同样的事情。

您也不应该使用 setTimeout 来显示视频帧。使用requestAnimationFrame

要转换为灰色，您不需要获取图像数据，您可以使用合成操作来执行此操作。

Displaying video in canvas 展示了如何在画布中显示视频。
Canvas filters for realtime video FX 展示了如何使用内置画布 globalCompositeOperation 获得各种视频效果（包括黑白），这比通过 imageData 数组在 JavaScript 中手动处理像素要快得多，并且使用的内存要少得多。李>

【讨论】：