Kanvas - Diğer videolardan alfa verileri içeren maskeleme videosu yavaş

Question

Sayfamda, döngüsel bir video oynatım var. Oynat'a basarken, bunun üstünde başka bir video maskelenir ve yavaşça görünür. Kısacası, başka video ile bir video maskeleme am (siyah/beyaz maske Tuval tarafından alphadata dönüştü)

The tutorial is adapted from here

Bu çalışır, ancak geçiş/video tüm pikseller yoluyla tuval döngü çünkü yavaş inanılmaz . Bunu gerçekleştirmenin başka bir yolu üzerinde herhangi bir işaretçi var mı, yoksa süreci hızlandırıyor mu?

A working demo of this code can be found here

HTML:

//Buffer canvas (stacked video's: result + alpha mask) 
<canvas style="display:none" width="1920" height="2160" id="buffer">  
</canvas> 

//Output canvas (combines mask with video) 
<canvas class="video__output " width="1920" height="1080" id="output"> 
</canvas> 

//buffer canvas uses this video to extract data 
<video class="" id="video" preload="auto" style="display:none" > 
    <source src="assets/video/masking.mp4" type='video/mp4;codecs="avc1.42E01E"' /> 
</video> 


//Video loop always playing 
<video poster="assets/video/poster_desktop.jpg" class="video--top loop" autoplay loop> 
    <source src="assets/video/loop.mp4" type='video/mp4; codecs="avc1.42E01E"' /> 
</video> 

JS:

function processFrame() { 
    buffer.drawImage(video, 0, 0); 

    //Get alphadata 
    let image = buffer.getImageData(0, 0, width, height), 
    imageData = image.data, 
    alphaData = buffer.getImageData(0, height, width, height).data; 

    //Loop through pixels, replace data with alpha channel 
    for (let i = 3, len = imageData.length; i < len; i = i + 4) { 
     imageData[i] = alphaData[i-1]; 
    } 

    //Output to second canvas 
    output.putImageData(image, 0, 0, 0, 0, width, height); 
    requestAnimationFrame(processFrame) 
} 

Answer 1

Birinci seçenek Tek bir çağrı için iki getImageData() s azaltmaktır. Tam bitmap'i alın, ardından RGB verisine işaret eden ve ikincisi mat verilerinin başlangıcına kadar iki işaretçi kullanın. İkinci seçenek webm video formatını kullanmayı düşünmektir. Bu, support for alpha channel BUT'a sahiptir ve şu anda yalnızca Chrome tarayıcısında (ve daha yeni Opera düşünürken) desteklenmektedir.