...
Захват с canvas-элемента работает в Chrome 66 и , Firefox 59 и Mac OS Safari 11.1:
Code Block | ||||
---|---|---|---|---|
| ||||
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) транскодировать картинку к нужному разрешению на сервере