동영상에서 캡쳐 화면을 가져 와서 캔버스와 JS에 넣으십시오.

Question

DOM에서 모든 비디오를 가져오고 각 비디오의 스크린 샷을 찍은 다음 각각을 다른 캔버스에 넣으려고합니다. JSFiddle 여기

이 내 시도하지만이 오류 제공합니다

---

Uncaught TypeError: Cannot read property 'getContext' of undefined

---

어떤 생각 나는이 문제를 해결할 수있는 방법을?

var videoArray = []; 
    var canvasArray = []; 
    var c = jQuery('<canvas/>',{'width':373.64,'height':227.88}); //set canvas 

    jQuery('body').append(c); //append canvas to body 

    // push each video into an array 
    jQuery('video').each(function(){ 
     videoArray.push(this); 
    }); 

    //push each canvas into an array 
    jQuery('canvas').each(function(){ 
     canvasArray.push(this); 

    }); 
    //for each video in the array, take a snapshot of the video at position i and draw it 
    for(var i = 0; i < videoArray.length; i++){ 
     canvasArray[i].getContext("2d").drawImage(videoArray[i], 0, 0, 300,200); 

    } 

Answer 1

좋아, 좀 더 노력한 후에 해결책을 찾았습니다. 내 코드에서 변수 C를 만들고 캔버스를 만듭니다. 제가 할 일은이 캔버스를 몸에 넣는 것입니다. 그러나 저는 그것을 한 번 넣었습니다. 그런 다음 동일한 캔버스에 이미지를 모두 그립니다. 새로운 솔루션은 각 비디오에 캔버스를 만드는 것입니다. 업데이트 된 JSFiddle입니다. 이것은 관심의 코드입니다.

var videoArray = []; 
var canvasArray = []; 
var c = jQuery('<canvas/>', { 
    'width': 373.64, 
    'height': 227.88 
}); //set canvas 

//insert a canvas in each div 
jQuery('.wrapper').each(function(){ 
    jQuery('<canvas/>', { 
     'width': 373.64, 
     'height': 227.88 
    }).appendTo('.wrapper');//append canvas to body 
}); 


// push each video into an array 
jQuery('video').each(function() { 
    videoArray.push(this); 
}); 

//push each canvas into an array 
jQuery('canvas').each(function() { 
    canvasArray.push(this); 

}); 
//for each video in the array, take a snapshot of the video at position i and draw it 
for (var i = 0; i < videoArray.length; i++) { 
    canvasArray[i].getContext("2d").drawImage(videoArray[i], 0, 0, 300, 200); 

}