Захват видео с альфа-каналом с помощью canvas.captureStream()

Question

Я пытаюсь захватить содержимое элемента canvas с альфа-каналом. Когда я делаю это, я получаю значения RGB правильно, но альфа-канал, кажется, теряется при воспроизведении результирующего видео. Есть ли способ добиться этого?

Я запускаю следующий код:

var stream = canvas.captureStream(60);
var recorder = new MediaRecorder(stream);

recorder.addEventListener('dataavailable', finishCapturing);
recorder.addEventListener('stop', function(e) {
    video.oncanplay = video.play;
    video.src = URL.createObjectURL(new Blob(blobs, {type:"video/webm; codecs=vp9"}));
});
startCapturing();
recorder.start();

Вот plnkr, демонстрирующий проблему: http://plnkr.co/edit/z3UL9ikmn6PtVoAHvY0B?p=preview

Answer 1

В настоящее время нет параметров для включения (канал прозрачности VP8/9) из MediaRecorder API.
Можно было бы открыть вопрос о git-репозитории W3C Mediacapture-Record.

Для этого я могу догадаться по нескольким причинам:

• Из того, что я понимаю, альфа-канал webm в значительной степени является взломом Chrome, и в действительности он не реализован в самом кодеке и не полностью стабилизирован.

• MediaRecorder должен иметь возможность кодировать во многих форматах, даже если текущие реализации поддерживают только видео webm/VP8 и webm/VP9 (только chrome). Так что это будет означать, что им придется каким-то образом сохранить альфа-канал в сыром потоке, только для этого нового canvas.captureStream метод. Исторически MediaStream в основном исходил из интерфейса getUserMedia, и не было необходимости получать прозрачность оттуда.

• Chrome, единственный поддерживаемый веб-дисплеем YUVA в своем стабильном канале (FF поддерживает его в ночных 54), по-прежнему не может включать duration внутри их записанных файлов, давайте исправим это перед добавлением хакерских alpha_mode=true,

Тем не менее, вы можете легко добиться этого самостоятельно:

Если вам действительно нужен прозрачный веб-файл (читается только в Chrome и FF ночью), вы можете использовать второй холст для записи, установить его фон (используя fillRect) в цветность, которая не будет отображаться в других местах на ваших рисунках, нарисуйте оригинал и запишите его поток. После записи используйте ffmpeg для перекодирования записанного видео, на этот раз с альфа-каналом:

// all #00FF00 pixels will become transparent.
ffmpeg -i in.webm -c:v libvpx -vf "chromakey=0x00ff00:0.1:0.1,format=yuva420p" -auto-alt-ref 0 out.webm

^{Я лично нуждался в} -auto-alt-ref 0 ^{флаг, не уверен, что все это нужно, хотя}

Но из-за этой другой ошибки Chrome вам на самом деле придется добавить этот другой холст на экран и скрыть его с помощью css (opacity: 0; width:0px; height:0px; следует сделать).

TL; DR

Реализации этого API далеки от стабилизации, никто еще не сделал запрос на такую ​​функцию, хотя он может появиться в ближайшем будущем, и пока может быть выполнен на стороне сервера.