Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Захват с canvas-элемента работает в Chrome 66 и , Firefox 59 и Mac OS Safari 11.1:

Code Block
languagejs
themeRDark
constraints.customStream = canvas.captureStream(30);

...

Данный способ является более современным по отношению к отрисовке по таймеру, однако требует, чтобы вкладка браузера, в которой происходит захват видео потока с канваса, всегда была активной. Если переключиться на другую вкладку или свернуть окно браузера в фон, браузер останавливает работу requestAnimationFrame API. Отрисовка по таймеру в таких случаях не останавливается, за исключением мобильных браузеров.

Известные проблемы

1. Захват с элемента HTML5 Video не работает в Firefox на определенных платформах и в старых версиях Safari.

...

Симптомы: качество видео плохое, мутное, битрейт в chrome://webrtc-internals показывает меньше 100 kbps.

Решение: отключите отключить аппаратное ускорение в браузере , переключите , установив флаг chrome://flags/#disable-accelerated-video-encode в Disable, переключить браузер или сервер на использование кодека VP8 для публикации.

5. В некоторых сборках Chrome Canary видео H264 браузерах на базе Chromium (Chrome, MS Edge) видео не публикуется с канваса при включенном аппаратном ускорении кодирования видео

Симптомы; в опубликованном с канваса потоке нет видео, но есть аудиоРешение: отключить аппаратное ускорение в браузере либо публиковать VP8, публикация завершается с сообщением Failed by Video RTP activity 

Решение: отключить аппаратное ускорение кодирования видео в браузере, установив флаг chrome://flags/#disable-accelerated-video-encode в Disable, переключить браузер или сервер на использование кодека VP8 для публикации, или использовать другой браузер

6. При переключении на другую вкладку или сворачивании браузера в фон трансляция с канваса может останавливаться

...

Решение: удерживать вкладку, с которой транслируется канвас, на переднем плане.

7. Разрешение публикуемого потока не превышает размеры канваса

Симптомы: размер картинки потока при публикации равен или меньше размера (ширина x высота) HTML5 Canvas элемента на странице

Решение:

a) для публикации картинки в нужном размере использовать HTML5 Canvas соответствующего размера на странице

b) транскодировать картинку к нужному разрешению на сервере