HLS.js Player¶
Пример конвертации видеопотока в HLS и отображения его в браузере при помощи HLS.js¶
Данный плеер демонстрирует возможности WCS по преобразованию опубликованного на сервере потока в HLS и воспроизведению его в браузере. Нарезка потока в HLS запускается автоматически, при обращении к потоку, опубликованному на сервере, по HLS URL, например, для потока на рисунке ниже http://localhost:8082/test/test.m3u8
Код примера¶
Код данного примера находится на сервере по следующему пути:
/usr/local/FlashphonerWebCallServer/client2/examples/demo/streaming/hls-js-player
- hls-js-player.css - файл стилей страницы с плеером
- hls-js-player.html - страница с плеером
- hls.js - скрипт, обеспечивающий работу плеера (https://github.com/video-dev/hls.js/, Apache License Version 2.0)
- hls-js-player.js - скрипт, обеспечивающий запуск плеера
- hls.min.js - скрипт, обеспечивающий работу плеера (минимизированная версия)
Тестировать данный пример можно по следующему адресу:
https://host:8888/client2/examples/demo/streaming/hls-js-player/hls-js-player.html
Здесь host - адрес вашего WCS-сервера.
Работа с кодом примера¶
Для разбора кода возьмем версию файла hls-js-player.js
с хешем ecbadc3
, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.212.
1. Определение HLS URL сервера¶
getHLSUrl()
code
function initPage() {
$("#header").text("HLS.JS Player Minimal");
$("#urlServer").val(getHLSUrl());
...
}
2. Настройка div
элемента для передачи плееру¶
Плееру передается имя div-элемента, в котором должен быть проигран поток.
function initPage() {
...
remoteVideo = document.getElementById('remoteVideo');
remoteVideo.style ="background-color: lightgrey;";
}
3. Определение имени потока (должен быть опубликован на сервере)¶
encodeURIComponent()
code
function playBtnClick() {
if (validateForm()) {
var streamName = $('#playStream').val();
streamName = encodeURIComponent(streamName);
...
}
}
4. Формирование URL HLS-потока¶
Если указаны ключ и токен авторизации, они будут включены в URL потока
function playBtnClick() {
if (validateForm()) {
...
var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8';
var key = $('#key').val();
var token = $("#token").val();
if (key.length > 0 && token.length > 0) {
videoSrc += "?" + key + "=" + token;
}
...
}
}
5. Запуск плеера¶
Если браузер не поддерживает технологию MSE, плеер не запустится, будет выведено предупреждение
function playBtnClick() {
if (validateForm()) {
...
if (Hls.isSupported()) {
console.log("Low Latency HLS: "+llHlsEnabled)
hlsPlayer = new Hls(getHlsConfig(llHlsEnabled));
hlsPlayer.loadSource(videoSrc);
hlsPlayer.attachMedia(remoteVideo);
hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function() {
console.log("Play with HLS.js");
remoteVideo.play();
onStarted();
});
}
else {
$("#notifyFlash").text("Your browser doesn't support MSE technology required to play video");
}
}
}
6. Остановка воспроизведения¶
function stopBtnClick() {
if (hlsPlayer != null) {
console.log("Stop HLS segments loading");
hlsPlayer.stopLoad();
hlsPlayer = null;
}
if (remoteVideo != null) {
console.log("Stop HTML5 player");
remoteVideo.pause();
remoteVideo.currentTime = 0;
remoteVideo.removeAttribute('src');
remoteVideo.load();
}
onStopped();
}
7. Настройка HLS.js плеера¶
function getHlsConfig(llHlsEnabled) {
var config = {
lowLatencyMode: false,
enableWorker: true,
backBufferLength: 90
};
if(llHlsEnabled) {
// Here we configure HLS.JS for lower latency
config = {
lowLatencyMode: llHlsEnabled,
enableWorker: true,
backBufferLength: 90,
liveBackBufferLength: 0,
liveSyncDuration: 0.5,
liveMaxLatencyDuration: 5,
liveDurationInfinity: true,
highBufferWatchdogPeriod: 1,
};
}
return config;
}