जावास्क्रिप्ट: वीडियो फ्रेम को विश्वसनीय रूप से

Question

निकालें मैं क्लाइंट-साइड प्रोजेक्ट पर काम कर रहा हूं जो उपयोगकर्ता को वीडियो फ़ाइल की आपूर्ति करने और इसमें बुनियादी कुशलता लागू करने देता है। मैं विश्वसनीय रूप से वीडियो से फ्रेम निकालने की कोशिश कर रहा हूं।

1. शुरुआत
2. पर सीक वीडियो रोकें
3. एक <canvas>
को ड्रा <video>: इस समय मैं एक <video> जो मैं में चयनित वीडियो लोड हो रहा है कर रहा हूँ, और फिर प्रत्येक फ्रेम बाहर खींच के रूप में निम्नानुसार है
4. .toDataUrl()
5. के साथ कैनवास से फ्रेम को कैप्चर करें 1/30 सेकंड (1 फ्रेम) द्वारा आगे की तलाश करें।
6. रिंस और दोहराने

यह एक नहीं बल्कि अक्षम प्रक्रिया है, और अधिक विशेष रूप से, अविश्वसनीय साबित के रूप में मैं अक्सर हूँ हो रही फ्रेम फंस गया है। ऐसा लगता है कि यह कैनवास पर आकर्षित होने से पहले वास्तविक <video> तत्व अद्यतन नहीं कर रहा है।

मुझे फ़्रेम को विभाजित करने के लिए सर्वर पर मूल वीडियो अपलोड करने की आवश्यकता नहीं है, और फिर उन्हें क्लाइंट पर वापस डाउनलोड करना होगा।

ऐसा करने के बेहतर तरीके के लिए कोई सुझाव बहुत सराहना की जाती है। एकमात्र चेतावनी यह है कि मुझे ब्राउजर का समर्थन करने वाले किसी प्रारूप के साथ काम करने की आवश्यकता है (जेएस में डीकोडिंग एक अच्छा विकल्प नहीं है)।

Answer 1

GameAlchemist द्वारा Mostly taken from this great answer:

ब्राउज़रों वीडियो 'फ़्रेमदर सम्मान नहीं करता है के बाद से, लेकिन इसके बजाय "कुछ चाल के उपयोग फिल्म के फ्रेम दर और स्क्रीन के ताज़ा दर के बीच एक मैच बनाने के लिए" , आपकी धारणा है कि एक सेकंड के हर 30 वें, एक नया फ्रेम चित्रित किया जाएगा काफी गलत है।
हालांकि, वर्तमान समय बदलने पर timeupdate event आग लगनी चाहिए, और हम मान सकते हैं कि एक नया फ्रेम चित्रित किया गया था। बजाय मांग 1/30 के आगे, आप `वीडियो के timeupdate` घटना पर एक समारोह देते हैं चाहिए की

document.querySelector('input').addEventListener('change', extractFrames, false); 
 

 
function extractFrames() { 
 
    var video = document.createElement('video'); 
 
    var array = []; 
 
    var canvas = document.createElement('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var pro = document.querySelector('#progress'); 
 

 
    function initCanvas(e) { 
 
    canvas.width = this.videoWidth; 
 
    canvas.height = this.videoHeight; 
 
    } 
 

 
    function drawFrame(e) { 
 
    this.pause(); 
 
    ctx.drawImage(this, 0, 0); 
 
    /* 
 
    this will save as a Blob, less memory consumptive than toDataURL 
 
    a polyfill can be found at 
 
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill 
 
    */ 
 
    canvas.toBlob(saveFrame, 'image/jpeg'); 
 
    pro.innerHTML = ((this.currentTime/this.duration) * 100).toFixed(2) + ' %'; 
 
    if (this.currentTime < this.duration) { 
 
     this.play(); 
 
    } 
 
    } 
 

 
    function saveFrame(blob) { 
 
    array.push(blob); 
 
    } 
 

 
    function revokeURL(e) { 
 
    URL.revokeObjectURL(this.src); 
 
    } 
 
    
 
    function onend(e) { 
 
    var img; 
 
    // do whatever with the frames 
 
    for (var i = 0; i < array.length; i++) { 
 
     img = new Image(); 
 
     img.onload = revokeURL; 
 
     img.src = URL.createObjectURL(array[i]); 
 
     document.body.appendChild(img); 
 
    } 
 
    // we don't need the video's objectURL anymore 
 
    URL.revokeObjectURL(this.src); 
 
    } 
 
    
 
    video.autoplay = true; 
 
    video.muted = true; 
 

 
    video.addEventListener('loadedmetadata', initCanvas, false); 
 
    video.addEventListener('timeupdate', drawFrame, false); 
 
    video.addEventListener('ended', onend, false); 
 

 
    video.src = URL.createObjectURL(this.files[0]); 
 
}

<input type="file" accept="video/*" /> 
 
<p id="progress"></p>