Versions Compared

Key

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

...

Поддерживаемые платформы и браузеры


Chrome 66+

Firefox 59+

Safari

11.1

MS Edge

Windows

+

+


-

Mac OS

+

+

+

-


Android

+

+

-



iOS

-

-

+

-


Схема работы


  1. Браузер соединяется с сервером по протоколу Websocket и отправляет команду publish.
  2. Браузер захватывает изображение с элемента HTML5 Canvas и отправляет WebRTC поток на сервер.
  3. Второй браузер устанавливает соединение также по Websocket и отправляет команду play.
  4. Второй браузер получает WebRTC поток и воспроизводит этот поток на странице.

...

1. Для теста используем:

...

3. Убедитесь, что поток отправляется на сервер, откройте chrome://webrtc-internals

4. Графики воспроизведения chrome://webrtc-internals

Последовательность выполнения операций (Call Flow)

...

Code Block
languagejs
themeRDark
function stopStreaming() {
    ...
    if (publishStream != null && publishStream.published()) {
        publishStream.stop();
    }
    stopCanvasStream();
}

stopCanvasStream() code

Code Block
languagejs
themeRDark
function stopCanvasStream() {
    if(mockVideoElement) {
        mockVideoElement.pause();
        mockVideoElement.removeEventListener('play', null);
        mockVideoElement = null;
    }
}

...

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

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

Отметим, что при использовании customStream, параметр cacheLocalResources игнорируется, кэширование локальных ресурсов не производится.

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

1) . Захват с элемента HTML5 Video не работает в Firefox и Safari.

Решение: использовать данную возможность только в браузере Chrome.

2) . В примере Media Devices при захвате с HTML5 Canvas:

...

Решение: учитывать особенности поведения браузеров при разработке.

3) . Если веб-приложение расположено внутри iframe элемента, публикация видеопотока может не пройти.

Симптомы: ошибки IceServer error в консоли браузера.

Решение: вынести приложение из iframe на отдельную страницу.

4) . Если публикация потока идет с Windows 10 или Windows 8 и в браузере Google Chrome включено аппаратное ускорение, могут быть проблемы с битрейтом.

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

Решение: отключите аппаратное ускорение в браузере, переключите браузер или сервер на использование кодека VP8.

 code

5. В некоторых сборках Chrome Canary видео H264 не публикуется с канваса при включенном аппаратном ускорении

Симптомы; в опубликованном с канваса потоке нет видео, но есть аудио

Решение: отключить аппаратное ускорение в браузере либо публиковать VP8