Versions Compared

Key

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

...


Chrome

Firefox

Safari 11

Edge

Windows

+

+


+

Mac OS

+

+

+


Android

+

+



iOS

-

-+ (iOS 14.4)

+ (iOS 14.4)

+


Схема работы


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

...

Code Block
themeRDark
webrtc_sdp_h264_exclude_profiles=

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

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

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

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

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

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

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

3. Публикация потока с воспроизведением локального видео в Delight Player не работает в MS Edge

Симптомы: при публикации потока в MS Edge не запускается воспроизведение локального видео в Delight Player

Решение: использовать другой браузер для публикации

4. В некоторых случаях в браузере Chrome не работает микрофон при публикации WebRTC

Симптомы: не работает микрофон при публикации WebRTC, в том числе в примерах из комплекта поставки

...

Управление типом публикуемого контента в Chromium браузерах

В некоторых случаях Chromium браузеры, основанные на сборке Chromium 91, агрессивно оценивают качество канала публикации, и сбрасывают разрешение ниже заданного, даже если канал подходит для публикации потока 720p или 1080p. В связи с этим, в сборке WebSDK 2.0.180 добавлена опция videoContentHint:

Code Block
languagejs
themeRDark
    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false,
        videoContentHint: "detail"
        ...
    }).publish();

По умолчанию, эта опция установлена в detail и указывает браузеру удерживать разрешение, заданное в constraints при публикации. Однако, при публикации с некоторых веб камер, подключаемых по USB,  браузер может в этом случае сбрасывать FPS. Если необходимо удерживать FPS, но разрешение публикации при этом не важно, необходимо установить опцию в motion

Code Block
languagejs
themeRDark
    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false,
        videoContentHint: "motion"
        ...
    }).publish();

Управление FPS в браузере Firefox

По умолчанию, Firefox публикует видео с максимальным FPS, который ему показывает драйвер используемой камеры при заданном разрешении. Для большинства современных камер это 30 FPS. При необходимости, можно более точно указать FPS при публикации. Для этого нормализация ограничений должна быть отключена:

Code Block
languagejs
themeRDark
session.createStream({
    ...
    disableConstraintsNormalization: true,
    constraints: {
        video: {
            width: 640,
            height: 360,
            frameRate: { max: 15 }
        },
        audio: true
    }
}).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
    ...
}).publish();

Отметим, что в этом случае Firefox может исключить камеру из списка при запросе доступа к ней, если драйвер камеры при запросе браузером сведений о ней не предоставляет требуемую комбинацию разрешения и FPS. Также Firefox может изменить разрешение публикации, если в сведениях о камере, предоставляемых драйвером, заданному FPS соответствует только одно разрешение.

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

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

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

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

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

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

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

3. Публикация потока с воспроизведением локального видео в Delight Player не работает в MS Edge

Симптомы: при публикации потока в MS Edge не запускается воспроизведение локального видео в Delight Player

Решение: использовать другой браузер для публикации

4. В некоторых случаях в браузере Chrome не работает микрофон при публикации WebRTC

Симптомы: не работает микрофон при публикации WebRTC, в том числе в примерах из комплекта поставки

Решение: отключить создание gain node в Chrome при помощи параметра инициализации createMicGainNode:false

Code Block
languagejs
themeRDark
        Flashphoner.init({
            flashMediaProviderSwfLocation: '../../../../media-provider.swf',
            createMicGainNode: false
        });

При этом не будет работать регулировка усиления микрофона.

5. Кодек G722 не работает в браузере Edge

Симптомы: поток со звуком G722 не публикуется в браузере Edge

Решение: использовать другой кодек или другой браузер. В случае, если использование другого браузера невозможно, исключить кодек G722 при помощи настройки

Code Block
themeRDark
codecs_exclude_streaming=g722,telephone-event

6. Некоторые браузеры, основанные на Chromium, например Opera, Yandex, в зависимости от версии и ОС не поддерживают кодек H264

Симптомы: не работает публикация, не работает воспроизведение частично (только звук) или полностью при трансляции WebRTC потока H264

Решение: разрешить поддержку vp8 на стороне сервера

Code Block
themeRDark
codecs=opus,...,h264,vp8,...

исключить H264 для трансляции или воспроизведения на стороне клиента

Code Block
languagejs
themeRDark
publishStream = session.createStream({
    ...
    stripCodecs: "h264,H264"
}).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
    ...
});
publishStream.publish();

Необходимо отметить, что при трансляции VP8 потока и воспроизведении его как H264 на сервере включается транскодинг.

7. iOS Safari 12.1 не отсылает видео при публикации определенных разрешений

Симптомы: при публикации WebRTC H264 потока из iOS Safari 12.1 зритель получает  только аудиопакеты, в статистике WebRTC также отображаются только аудиопакеты

Решение: разрешить поддержку vp8 на стороне сервера

Code Block
themeRDark
codecs=opus,...,h264,vp8,...

исключить H264 для трансляции или воспроизведения на стороне клиента

Code Block
languagejs
themeRDark
publishStream        Flashphoner.init= session.createStream({
            flashMediaProviderSwfLocation: '../../../../media-provider.swf',
            createMicGainNode: false
   stripCodecs: "h264,H264"
}).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
     ...
});

При этом не будет работать регулировка усиления микрофона.

5. Кодек G722 не работает в браузере Edge

Симптомы: поток со звуком G722 не публикуется в браузере Edge

...


publishStream.publish();

Необходимо отметить, что при трансляции H264 потока и воспроизведении его как VP8 на сервере включается транскодинг.

8. iOS Safari 12 и MacOS Safari 12 не публикует видеопоток со встроенной камеры в некоторых разрешениях

Симптомы: поток из браузера не публикуется, в консоли может быть ошибка

Code Block
themeRDark
codecs_exclude_streaming=g722,telephone-event

6. Некоторые браузеры, основанные на Chromium, например Opera, Yandex, в зависимости от версии и ОС не поддерживают кодек H264

Симптомы: не работает публикация, не работает воспроизведение частично (только звук) или полностью при трансляции WebRTC потока H264

Решение: разрешить поддержку vp8 на стороне сервера

Code Block
themeRDark
codecs=opus,...,h264,vp8,...

...

Overconstrained error: width

Решение:

a) использовать только разрешения, которые проходят тест WebRTC Camera Resolution

b) в MacOS Safari использовать внешнюю камеру, поддерживающую необходимые разрешения

c) отключить нормализацию разрешения и задавать ширину и высоту как ideal, см пример выше.

9. При публикации потока необходимо кодирование не-латинских символов в его имени

Симптомы: на стороне сервера при использовании не-латинских символов в имени потока эти символы заменяются на знаки вопроса

Решение: использовать функцию JavaScript encodeURIComponent() при публикации потока

publishStream = session.createStream({
Code Block
languagejs
themeRDark
RDark
    var streamName = encodeURIComponent($('#publishStream').val());    
    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
    ...
    stripCodecsreceiveVideo: "h264false,H264"
}).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        receiveAudio: false
    ...
    });
publishStream.publish();

Необходимо отметить, что при трансляции VP8 потока и воспроизведении его как H264 на сервере включается транскодинг.

7. iOS Safari 12.1 не отсылает видео при публикации определенных разрешений

Симптомы: при публикации WebRTC H264 потока из iOS Safari 12.1 зритель получает  только аудиопакеты, в статистике WebRTC также отображаются только аудиопакеты

Решение: разрешить 10. В некоторых случаях сервер не может разобрать H264 поток, закодированный CABAC

Симптомы: не работает публикация при трансляции WebRTC потока H264

Решение:

a) понизить профиль кодирования

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

...

Code Block
languagejs
themeRDark
publishStream = session.createStream({
    ...
    stripCodecs: "h264,H264"
}).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
    ...
    stripCodecs: "h264,H264"
}).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
    ...
});
publishStream.publish();

Необходимо отметить, что при трансляции H264 потока и воспроизведении его как VP8 на сервере включается транскодинг.

8. iOS Safari 12 и MacOS Safari 12 не публикует видеопоток со встроенной камеры в некоторых разрешениях

Симптомы: поток из браузера не публикуется, в консоли может быть ошибка

Code Block
themeRDark
Overconstrained error: width

Решение:

a) использовать только разрешения, которые проходят тест WebRTC Camera Resolution

b) в MacOS Safari использовать внешнюю камеру, поддерживающую необходимые разрешения

c) отключить нормализацию разрешения и задавать ширину и высоту как ideal, см пример выше.

9. При публикации потока необходимо кодирование не-латинских символов в его имени

Симптомы: на стороне сервера при использовании не-латинских символов в имени потока эти символы заменяются на знаки вопроса

...


});
publishStream.publish();

Необходимо отметить, что при трансляции VP8 потока и воспроизведении его как H264 и наоборот на сервере включается транскодинг.

11. В macOS Catalina при воспроизведении трансляции по WebRTC в Firefox выводится системное предупреждение и запрет на воспроизведение H264 потока.

Симптомы: при воспроизведении трансляции по WebRTC в Firefox на macOS Catalina выводится системное предупреждение "Приложение libgmpopenh264.dylib нельзя открыть, так как не удалось проверить разработчика" и запрет на воспроизведение трансляции H264 потока.

Решение: Firefox для работы с H264 использует стороннюю библиотеку, не подписанную разработчиком, которая по политикам безопасности macOS Catalina запрещается к выполнению. Для добавления исключения перейдите в System Preferences > Security & Privacy > General > Allow apps downloaded from > App Store and identified developers > "libgmpopenh264.dylib" was blocked from opening because it is not from an identified developer > выберите Open Anyway.

12. Начиная со сборки 5.2.672, настройка

Code Block
themeRDark
ice_keep_alive_enabled=true

не применяется. Отсчет интервала ICE keep alive активируется автоматически, если WCS начинает первым высылать STUN keep alive пакеты, например, при входящем звонке или при публикации WebRTC потока на на другой сервер

13. MacOS Safari 14.0.2 (MacOS 11) не публикует поток со встроенной камеры MacBook с соотношением сторон 4:3

Симптомы: в примере Two Way Streaming, Stream Recording и других публикация начинается, но в течение 10 секунд прекращается отправка видео пакетов, при проигрывании потока виден черный экран, публикация завершается по отсутствию видео трафика

Решение:

a) Публиковать поток с соотношением сторон 16:9 (например, 320x180, 640x360 и т.д.)

Code Block
languagejs
themeRDark
publishStream = session.createStream({
  var streamName = encodeURIComponent($('#publishStream').val());...
    constraints: {
        session.createStream(video: {
            namewidth: streamName640,
            displayheight: localVideo,360
        cacheLocalResources: true},
        receiveVideoaudio: false,true
    }
}).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
 receiveAudio: false
    ...
    }).publish();

10. В некоторых случаях сервер не может разобрать H264 поток, закодированный CABAC

Симптомы: не работает публикация при трансляции WebRTC потока H264

Решение:

a) понизить профиль кодирования

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

Code Block
themeRDark
codecs=opus,...,h264,vp8,...

исключить H264 для трансляции или воспроизведения на стороне клиента

Code Block
languagejs
themeRDark
publishStream = session.createStream({
    ...
    stripCodecs: "h264,H264"
}).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
    ...
});
publishStream.publish();

Необходимо отметить, что при трансляции VP8 потока и воспроизведении его как H264 и наоборот на сервере включается транскодинг.

11. В macOS Catalina при воспроизведении трансляции по WebRTC в Firefox выводится системное предупреждение и запрет на воспроизведение H264 потока.

Симптомы: при воспроизведении трансляции по WebRTC в Firefox на macOS Catalina выводится системное предупреждение "Приложение libgmpopenh264.dylib нельзя открыть, так как не удалось проверить разработчика" и запрет на воспроизведение трансляции H264 потока.

Решение: Firefox для работы с H264 использует стороннюю библиотеку, не подписанную разработчиком, которая по политикам безопасности macOS Catalina запрещается к выполнению. Для добавления исключения перейдите в System Preferences > Security & Privacy > General > Allow apps downloaded from > App Store and identified developers > "libgmpopenh264.dylib" was blocked from opening because it is not from an identified developer > выберите Open Anyway.

12. Начиная со сборки 5.2.672, настройка

Code Block
themeRDark
ice_keep_alive_enabled=true

...

  ...
});
publishStream.publish();

b) Обновить Web SDK до сборки 0.5.28.2753.153, где разрешение по умолчанию для Safari приведено к 16:9

c) Обновить MacOS до 11.3.1, Safari до 14.1 (16611.1.21.161.6)

14. При исключении профилей кодирования H264 потоки, опубликованные на Origin сервере в CDN, не играют на Edge

Симптомы: WebRTC поток H264, опубликованный на Origin, играет на Edge как аудио поток, в метриках отображается кодек VP8

Решение: при исключении профилей кодирования на Origin

Code Block
themeRDark
webrtc_sdp_h264_exclude_profiles=4d,64

указать на Edge разрешенные профили в настройке

Code Block
themeRDark
profiles=42e01f

15. MacOS Safari 14.0.* после того, как видео заглушено, затем снова включено, перестает высылать видео пакеты из-за бага Webkit

Симптомы: после применения muteVideo(), затем unmuteVideo() публикация прекращается через минуту с ошибкой Failed by Video RTP activity

Решение: обновить MacOS до 11.3.1, Safari до 14.1 (16611.1.21.161.6), в данной сборке баг Webkit исправлен, проблема не воспроизводится

16. При публикации с телефона Google Pixel 3/3XL,  в некоторых разрешениях изображение сильно искажено

Симптомы: локальное видео отображается нормально, но при проигрывании сильно искажено (поперечные полосы)

Решение: избегать публикации следующих разрешений с телефона Google Pixel 3/3XL:

  • 160x120
  • 1920x1080