防止視頻循環導致瀏覽器內存不足

我使用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

防止視頻循環導致瀏覽器內存不足

回答

相關問題