Программные решения для построения онлайн-вещания


Проигрывание SLDP в HTML5

Проигрывание с ультра-низкой задержкой в JavaScript плеере

SLDP - это протокол потоковой передачи, основанный на WebSockets, поэтому потоки на его основе могут приниматься любым современным браузером.

Основные возможности включают в себя:

  • Задержка проигрывания менее чем на секунду, с использованием buffer offset по необходимости.
  • Видео H.264/AVC, VP8, VP9.
  • H.265/HEVC в Safari.
  • Аудио AAC во всех браузерах.
  • Аудио MP3 в Safari и Firefox.
  • Адаптивный битрейт (ABR) с автоматическим переключением между разрешениями согласно пропускной способности сети. Время переключения ограничено только размером GOP в исходном потоке.
  • Синхронизация проигрывания в нескольких плеерах, браузерах и устройствах. На демо-странице можно попробовать это в работе.
  • Поддержка Offset для уменьшения времени подключения.
  • Средства доставки - HTTP и HTTPS поверх TCP, что означает отсутствие необходимости в специальных сетевых настройках.

Также обратите внимание на часто задаваемые вопросы, в которых раскрываются преимущества и самые интересные техники использования SDLP.

Поддержка в браузерах

Проигрывание SLDP в браузерах происходит через MSE. Плеер создан на Javascript и его можно встраивать в любую страницу на HTML5.

На данный момент эта технология поддерживается в Chrome, Firefox, Safari, Microsoft Edge и Chromium на платформах Windows, Linux, macOS, Android и Safari на iPad iOS.
Проигрывание в обычном iOS пока недоступна. Тем не менее, можно установить SLDP Player для iOS, который открывается при нажатии на ссылки sldp:// и sldps:// в браузере. Можете также создать своё собственное приложение для iOS для проигрывания SLDP с помощью нашего Larix Player SDK.

Браузеры IE 11 и Microsoft Edge требуют в буфере не менее 3х секунд перед началом потока. SLDP плеер будет иметь дополнительную задержку в этом случае.


Скачать и встроить

Плеер SLDP можно бесплатно скачать . Описание релизов можно посмотреть здесь.

Скачав плеер себе на сервер, вы можете встраивать его на страницы как показано ниже.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="sldp-v2.17.3.min.js"></script>
</head>
<body>
<div id="player"></div>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", initPlayer);

function initPlayer(){
sldpPlayer = SLDP.init({
container: 'player',
stream_url: "ws://123.123.123.123:8081/live/stream",
initial_resolution: '240p',
buffering: 500,
autoplay: false,
height: 480,
width: 424
});
};

function removePlayer(){
sldpPlayer.destroy(function () {
console.log('SLDP Player is destroyed.');
});
</script>
</body>
</html>

Параметры управления

Параметры ниже можно использовать для настройки плеера.

  • container задаёт ID элемента, который будет контейнером плеера.
  • stream_url задаёт URL для соединения с источником контента. Этот источник должен иметь поддержку SLDP на вывод. Например, вы можете использовать Nimble Streamer.
  • autoplay задаёт, проигрывать ли поток сразу после инициализации плеера. Не все современные браузеры позволяют автоматический старт плеера со звуком, поэтому для соответствия этому ограничению на старте можно использовать параметр muted. Если поток не начинает играть автоматически, посмотрите Q8 в SLDP FAQ по этому поводу.
  • muted выключает звук плеера на старте. Может быть полезен для автоматического старта видео в современных браузерах.
  • width задаёт ширину плеера. Допустимые значения: целое число (размер в пикселях), либо строка 'parent' (занимает 100% ширины родительского элемента).
  • height задаёт высоту плеера. Допустимые значения: целое число (размер в пикселях), либо строка 'parent' (занимает 100% высоты родительского элемента).
  • initial_resolution - это разрешение потока по умолчанию в случае использования ABR.
  • buffering задаёт буфер плеера в миллисекундах. Значение по умолчанию 1000 (1 секунда). Минимальное рекомендуемое значение 300-500 мс. Некоторые виды видеоконтента могут требовать больший размер буфера для декодирования, поэтому короткий буфер может привести к подергиваниям в процессе воспроизведению. Пожалуйста, проверьте качество воспроизведения, если вы используете маленький размер буфера.
  • offset позволяет уменьшить время начала проигрывания. Подробнее читайте в этой статье.
  • latency_tolerance параметр сохранения задержки потока, задается в миллисекундах. Когда изначальная задержка становится больше заданной величины (по любой причине, например, задержки сети или производительности процессора), данный параметр позволяет плееру восстановить изначальную задержку в момент, когда это становится возможным. Важно понимать, что сохранение задержки потока имеет свою цену, потому как плеер пропускает часть потока, чтобы уменьшить задержку. Приблизительной аналогией может быть телевизионная трансляция, когда показываются искаженные кадры, при этом видеопоток не задерживается. Подробнее читайте в этой статье. Рекомендуемое минимальное значение 400-500 миллисекунд, 0 - параметр выключен.
  • splash_screen задает URL к изображению заставки.
  • adaptive_bitrate включает или выключет ABR. "true" (по умолчанию) - включено, "false" - выключено.
  • pause_timeout задает период во время паузы, в течение которого соединение с медиа-сервером поддерживается, после чего разрывается. Этот параметр позволяет сократить количество ненужного трафика от сервера к клиенту в случае долгой паузы. Этот период задается в секундах.
  • key_frame_alignment позволяет достичь гладкого переключения между разными качествами, если ключевые кадры во всех качествах имеют одинаковые временные метки. Значение по умолчанию false.
  • controls определяет, будут ли доступны для пользователя элементы управления плеером, такие как старт, пауза, регулятор громкости, и т.д. Значение по умолчанию true.
  • audio_only включает у плеера режим "только звук". В этом режиме воспроизводится только аудио составляющая заданного SLDP потока и пользовательский интерфейс сокращается до панели с кнопками управления. Значение по умолчанию false.
  • audio_title заголовок плеера, который отображается в режиме "только звук". По умолчанию не задан.
  • reconnects количество попыток переподключения, которые SLDP плеер предпринимает при потере соединения с медиа-сервером. Значение должно быть больше 0, по умолчанию 10. Первые пять попыток производятся по одной в секунду, остальные - через каждые 5 секунд.
  • muteable включает автоматическую компенсацию отсутствующего аудиопотока. Данный параметр необходим, если целевой поток не содержит аудио составляющей, когда он заглушен. Значение по умолчанию false.
  • fullscreen задает старт плеера в полноэкранном режиме. По умолчанию false.
  • ios_failback_app_url URL приложения для воспроизведения SLDP потока на iOS. По умолчанию Larix Player. В этой статье можно прочитать об этом подробнее.
  • ios_failback_scheme схема для воспроизведения SLDP потока при незащищенном соединении (ws://). По умолчанию 'sldp'
  • ios_failback_secure_scheme схема для воспроизведения SLDP потока при защищенном соединении (wss://). По умолчанию 'sldps'
  • sync_buffer размер буфера в миллисекундах для синхронизации проигрывания в нескольких плеерах, браузерах и устройствах. Рекомендуемые значения размера от 1000 до 5000. Следует учитывать, что задержка потока возрастает в соответствии с указанным значением. По умолчанию настройка выключена.
  • vu_meter объект с настройками измерителя уровня звука (волюметра). Волюметр показывает уровень звука в децибелах для каждого аудиоканала. Уровень громкости рассчитывается по регулярным значениям 2048 звуковых сэмплов, единовременно доступных в буфере. Таким образом, для звука 48 кГц уровень громкости будет рассчитываться примерно 24 раза в секунду. Уровень громкости рассчитывается в соответствии с заданным режимом mode (см. ниже). Поддерживаются следующие настройки:
    • container - ID контейнера волюметра. Интерфейс волюметра отображается в момент инициализации плеера и занимает все пространство контейнера. Волюметр может иметь вертикальную ориентацию, если высота контейнера больше или равна ширине, либо горизонтальную ориентацию, когда ширина контейнера больше высоты. Этот параметр является необязательным для SLDP Player SDK, потому как там есть колбэк onVUMeterUpdate, который позволяет получить значения волюметра.
    • mode - режим вычисления значений уровня звука. Возможны 3 варианта:
      • peak - уровень звука рассчитывается из максимального значения среди сэмплов, доступных в буфере (рекомендуемый режим).
      • rms - уровень звука рассчитывается из среднеквадратического значения всех сэмплов, доступных в буфере.
      • avg - уровень звука рассчитывается из среднего значения всех сэмплов, доступных в буфере.
    • type - тип показаний уровня звука. Может иметь значение 'input', либо 'output'.
      • output - (по умолчанию) показания берутся из выходного сигнала плеера, таким образом уровень звука зависит от настроек громкости. Волюметр всегда будет показывать минимальный уровень, если звук в плеере заглушен.
      • input - показания берутся из входного сигнала, таким образом уровень звука не зависит от настроек громкости плеера.
    • rate - (опционально) ограничение частоты обновления уровня звука. Определяет максимальное количество обновлений волюметра в секунду. Частота вызовов onVUMeterUpdate() также ограничена этим параметром. Может принимать любые значения от 0.001 до 50. По умолчаниию выключен.
    • db_range - (опционально) диапазон шкалы интерфейса волюметра в децибелах. Минимальное значение (-1) * db_range, максимальное 0. По умолчанию этот параметр равен 100, поэтому шкала по умолчанию составляет от -100 дБ до 0 дБ.
    Если этот параметр не задан, волюметр выключен. Наиболее частый пример настроек волюметра: {container: 'vu-meter-container-id', mode: 'peak'}.
  • aspect_ratio (только SDK) задает соотношение сторон к которому будет приведено видео, например '16:9'.

Интерфейсы плеера SLDP (бесплатная версия)

  • destroy( callback )
    Уничтожает выбранный экземпляр плеера, включая объекты MSE (Media Source Extensions), UI плеера и соединения.
    Параметры:
    • callback - (опционально) колбэк, который будет вызван после того, как данный экземпляр плеера уничтожен
  • refreshVUMeterUI()
    Пересоздает интерфейс волюметра. Следует использовать в том случае, если размер контейнера волюметра был изменен, и нужно обновить содержимое.

Вы можете использовать SLDP плеер бесплатно без ограничений. Однако, техподдержка оказывается только клиентам SDK.

Larix Player SDK

Премиальный пакет SDK содержит JavaScript-библиотеку, у которой есть дополнительный API для управления.
На странице SDK можно узнать больше об SDK.

SDK доступен только для подписчиков. Оформив подписку, вы сможете получать обновления и техподдержку.

Купить SDK

Можно попробовать плеер в работе на этой странице, если SLDP уже настроен у вас в Nimble Streamer.
Демо-страница Nimble Advertizer показывает работу SLDP с вставленной на сервере рекламой через SLDP HTML5 плеер.