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

我使用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); 
    }

这里是PRINTSCREEN：Google Chrome ran out of memory

反正是有防止循环视频引起 “内存不足” 的错误？

来源

2017-07-15 chengwei

有很多丢失的代码，所以不能说内存在哪里使用。很可能你要么关闭图像数据，以便保留参考，不要让浏览器删除它，或者你特意制作引用的副本，实际上是做同样的事情。

此外，你不应该使用setTimeout来显示视频帧。使用

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

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

来源

2017-07-15 20:12:01 Blindman67

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

回答

相关问题