Можно ли добавить поток в качестве источника в элемент HTML-холста, как в элемент HTML-видео? - PullRequest
Новая
       117

Можно ли добавить поток в качестве источника в элемент HTML-холста, как в элемент HTML-видео?

1 голос
/ 11 мая 2019

Согласно MDN:

Интерфейс HTMLMediaElement добавляет к HTMLElement свойства и методы, необходимые для поддержки основных связанных со СМИ возможностей, которые являются общими для аудио и видео.

HTMLMediaElement.captureStream(). Он может использоваться с элементами <video> и <canvas> для захвата их потока.

И наоборот, можно добавить видеопоток как srcObject к элементу <video>, затем он показывает его. Возможно ли это для элемента <canvas> тоже?

Можно ли добавить поток в качестве источника к элементу html <canvas>?

Ответы [ 2 ]

2 голосов
/ 12 мая 2019

Нет, ни в одном из API Canvas нет ничего, что могло бы использовать MediaStream.

API-интерфейсы Canvas работают только с необработанными пикселями и не содержат никаких декодеров.Вы должны использовать либо объекты javascript, которые могут выполнять это декодирование (например, ImageBitmap), либо HTMLElements.

Таким образом, в случае MediaStream в настоящее время единственным объектом, способным декодировать свой видеоконтент, будет HTMLVideoElement, который вы сможете легко рисовать на холсте .

1 голос
/ 12 мая 2019

@ Кайидо прав в том, что нет никакого способа сделать это напрямую. Итак, вот что вы должны сделать: 

function onFrame() {
  window.requestAnimationFrame(onFrame);
  canvasContext.drawImage(video, 0, 0);
}
onFrame();

Несколько ошибок, с которыми вы столкнетесь:

  • Ваше исходное видео может изменить разрешение в среднем потоке. Это очень распространено в вызовах WebRTC, где источник может масштабировать фактическое разрешение пикселей из-за пропускной способности или ограничений процессора. Одним из способов решения этой проблемы является проверка размера видео каждого кадра, который вы рисуете, и масштабирование соответственно на холсте.
  • Этот кадр цикла не работает на скорости, когда вкладка не имеет фокуса. Если вы также полагаетесь на captureStream с этого холста, из-за политики регулирования он не будет работать, если на вкладке нет фокуса.
  • Буфер холста не обновляется, когда вкладка не имеет фокуса, поэтому даже если вы решите проблему таймера с узлом аудио-скрипта или чем-то еще, он не будет работать, если вы захотите использовать captureStream из холст тоже.
  • Помните, что здесь нет "генлока". Для каждого кадра, который вы копируете на холст, произвольное количество кадров (возможно, ноль!) Могло пройти мимо видео. Это может не иметь значения для вашей ситуации.
...