Capture d'écran vidéo HTML5

Question

J'essaie de prendre une capture d'écran de la vidéo avec l'heure prédéfinie dans le film. J'ai donc essayé avec l'élément canvas. Le problème est que la vidéo doit être lue lorsque vous dessinez l'image de la vidéo, mais j'ai besoin que l'image soit encore en pause. J'ai donc essayé ceci:

video.play(); 
context.drawImage(video,0,0,canvas.width,canvas.height); 
video.pause(); 

Mais comme vous pouvez probablement imaginer, la vidéo se met en pause avant la toile se fait le dessin, ce qui ne capture d'écran. Y a-t-il une fonction de rappel pour drawImage? Dans mon cas, le processus de dessin prend environ 50ms, mais il ne se sent pas sans danger:

setTimeout(function() { video.pause(); }, 50); 

Answer 1

Hm ... il semble qu'il soit réellement possible de dessiner une image à partir d'une vidéo en pause. Gardez juste l'intervalle qui commence depuis le début.

Answer 2

Je ne suis pas sûr que ce soit ce que vous êtes après, mais avez-vous essayé de prendre la capture d'écran manuellement à l'aide MWSnap? Il fige l'écran pendant que vous prenez la capture d'écran, donc je suppose que cela pourrait fonctionner pour vous.

Answer 3

Plutôt que la pause pourrait essayer de régler la playbackrate de la vidéo à quelque chose de très faible (ou zéro si cela fonctionne?):

video.playbackRate = 0.0001; // or 0 

Cela aura pour effet de mettre en pause la vidéo pour vous.

Vous pouvez également mettre la toile en noir, Tranparency 0,99 et analyser l'image résultante dans votre délai d'attente pour un pixel non-noir:

setTimeout(function() { 
    pixel = context.getImageData(image.width/2, image.height/2, 1, 1); 
    // do something with the pixel, kick off another timeout if it is still has transparency 
}, 50); 

Lorsque vous utilisez la dernière méthode, la vidéo doit être de la même domain comme le script, et ne fonctionnera pas sur les fichiers locaux en raison de contraintes de sécurité.