Pregunta Captura marcos de video con HTML5 y JavaScript


Quiero capturar un fotograma de video cada 5 segundos.

Este es mi código JavaScript:

video.addEventListener('loadeddata', function() {
    var duration = video.duration;
    var i = 0;

    var interval = setInterval(function() {
        video.currentTime = i;
        generateThumbnail(i);
        i = i+5;
        if (i > duration) clearInterval(interval);
    }, 300);
});

function generateThumbnail(i) {     
    //generate thumbnail URL data
    var context = thecanvas.getContext('2d');
    context.drawImage(video, 0, 0, 220, 150);
    var dataURL = thecanvas.toDataURL();

    //create img
    var img = document.createElement('img');
    img.setAttribute('src', dataURL);

    //append img in container div
    document.getElementById('thumbnailContainer').appendChild(img);
}

El problema que tengo es que las primeras dos imágenes generadas son las mismas y la imagen de duración de 5 segundos no se genera. Descubrí que la miniatura se genera antes de que se muestre el marco de video de la hora específica < video> etiqueta.

Por ejemplo, cuando video.currentTime = 5, se genera la imagen del cuadro 0s. Luego, el cuadro de video salta al tiempo 5s. Así que cuando video.currentTime = 10, se genera la imagen del cuadro 5s.


32
2017-10-04 06:59


origen


Respuestas:


Porque

El problema es que buscar video (al configurarlo es currentTime) es asincrónico.

Tienes que escuchar el seeked evento o de lo contrario correrá el riesgo de tomar el fotograma real actual que es probablemente su valor anterior.

Como es asincrónico, no debe usar setInterval() ya que también es asincrónico y no podrás sincronizar correctamente cuando se busque el siguiente cuadro. No hay necesidad de usar setInterval() ya que utilizaremos el seeked evento en cambio que mantendrá todo sincronizado.

Solución

Al volver a escribir el código un poco, puede usar seeked evento para ver el video y capturar el fotograma correcto, ya que este evento nos asegura que estamos en el marco que solicitamos configurando el currentTime propiedad.

Ejemplo

// global or parent scope of handlers
var video = document.getElementById("video"); // added for clarity: this is needed
var i = 0;

video.addEventListener('loadeddata', function() {
    this.currentTime = i;
});

Agregue este controlador de eventos a la fiesta:

video.addEventListener('seeked', function() {

    // now video has seeked and current frames will show
    // at the time as we expect
    generateThumbnail(i);

    // when frame is captured increase, here by 5 seconds
    i += 5;

    // if we are not passed end, seek to next interval
    if (i <= this.duration) {
        // this will trigger another seeked event
        this.currentTime = i;
    }
    else {
        // Done!, next action
    }
});

Demo aquí


41
2017-10-04 07:55