Захват скриншота видео с помощью canvas

#javascript #html #video #canvas #webrtc

#javascript #HTML #Видео #холст #webrtc

Вопрос:

Раньше я getusermedia() транслировал веб-камеру и микрофон в браузер. Но при захвате видео с помощью canvas выводится черное изображение! ctx.drawImage(video, 0,0,640,480); window.open(canvas.toDataURL('image/jpeg')); почему отображается черное изображение и как это исправить? Ингмарс решил проблему mah.

Теперь, если мне нужно видео продолжительностью не более 10 секунд, я подумал о циклическом просмотре кадров и присоединении к .png один за другим. Возможно ли это? Если нет альтернативы?

1. Вы использовали какой-то цикл для drawImage ? Это не сработает, если вы вызвали его только один раз. Вам необходимо обновить контекст canvas для каждого кадра.

2. Какой цикл следует использовать @Ingmars

3. Проверьте мой ответ ниже

4. @Ingmars setinterval() должен запускаться при запуске потокового видео video.play() или при .takesnapshot нажатии кнопки?

5. Для работы setInterval видео уже должно воспроизводиться. Canvas — это просто зеркало текущего содержимого видеоэлемента. Если видео не воспроизводится, canvas ничего не покажет и впоследствии не сможет toDataURL() .

Ответ №1:

Вам нужен цикл:

 //assuming canvas, ctx and video is set previously and available in all scopes.

var fps = 1000/25; //Approximately 25 frames per second

var videoDrawInterval = setInterval( function() {
    ctx.drawImage(video, 0, 0, 640, 480);
}, fps );


something.onclick = function() {
    clearInterval( videoDrawInterval );

    var snapshotImg = new Image();
    snapshotImg.src = canvas.toDataURL('image/jpeg', 0.5); //Second param is jpg quality

    var win = window.open( '', 'Snapshot', 'width=640, height=480'  );
    win.document.body.appendChild( snapshotImg );
}

Имейте в виду, что сжатие jpeg поддерживается не во всех браузерах, поэтому для тестирования я бы предложил использовать формат png:

 canvas.toDataURL( 'image/png' );