HTML5 video captura de pantalla

Question

Estoy tratando de tomar una captura de pantalla de video con tiempo predefinido en la película. Así que lo intenté con el elemento canvas. El problema es que el video debe estar reproduciéndose cuando dibujas la imagen del video, pero necesito que la imagen se pause. Así que he intentado esto:

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

Pero como podrán imaginar, el video hace una pausa antes de que el lienzo se realiza el dibujo, lo que resulta en ninguna pantalla. Entonces, ¿hay una función de devolución de llamada para drawImage? En mi caso, el proceso de dibujo toma alrededor de 50 ms, pero no se siente seguro hacerlo:

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

Answer 1

Hm ... parece que en realidad es posible dibujar una imagen de un video en pausa. Solo mantén el intervalo desde el principio.

Answer 2

no estoy seguro de que esto es lo que está buscando, pero ¿ha tratado de tomar la captura de pantalla de forma manual utilizando MWSnap? Congela la pantalla mientras está tomando la captura de pantalla, así que supongo que podría funcionar para usted.

Answer 3

En lugar de hacer una pausa podría intentar configurar playbackrate del vídeo a algo muy bajo (o cero si funciona?):

video.playbackRate = 0.0001; // or 0 

Esto hará una pausa de manera efectiva el video para usted.

También podría establecer el lienzo de negro, TRANSPARENCIA 0.99 y luego escanear la imagen resultante en el tiempo de espera para un píxel no negro:

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); 

Cuando se utiliza el último método el video debe ser de la misma dominio como script, y no funcionará en los archivos locales debido a restricciones de seguridad.