Пример конвертации видеопотока в HLS и отображения его в браузере при помощи VideoJS

Данный плеер демонстрирует возможности WCS по преобразованию опубликованного на сервере потока в HLS и воспроизведению его в браузере. Нарезка потока в HLS запускается автоматически, при обращении к потоку, опубликованному на сервере, по HLS URL, например, для потока на рисунке ниже httpshttp://demo.flashphoner.com:8445localhost:8082/test/test.m3u8

Image RemovedImage Added

Код примера

Код данного примера находится на сервере по следующему пути:

...

Тестировать данный пример можно по следующему адресу:

https://host:8888/client2/examples/demo/streaming/hls-player/hls-player.html

Здесь host - адрес вашего WCS-сервера.

Работа с кодом примера

Для разбора кода возьмем версию файла hls-player.js с хешем 51703a2 ecbadc3, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.5.28.2753.141.212.

1. Определение HLS URL сервера

getHLSUrl() code

function initPage() {
    $("#header").text("HLS VideoJS Player Minimal");
    $("#urlServer").val(getHLSUrl());
    ...
}

2. Инициализация плеера

videojs() code

Плееру передается имя div-элемента, в котором должен быть проигран поток.

...

3. Определение имени потока (должен быть опубликован на сервере)

encodeURIComponent() code

function playBtnClick() {
    if (validateForm()) {
        var streamName = $('#playStream').val();
        streamName = encodeURIComponent(streamName);
        ...
    }
}

4. Формирование URL HLS-потока и запуск плеера

player.play() code

Если указаны ключ и токен авторизации, они будут включены в URL потока

...

5. Остановка воспроизведения

player.pausedispose() code

Этот метод удаляет со страницы div элемент, в котором был ранее инициализирован плеер

function stopBtnClick() {
    if (player != null) {
        console.log("Stop VideoJS player");
        //player.pause();
        player.dispose();
    }
    onStopped();
}

6. Создание нового div элемента и плеера в нем после остановки предыдущего плеера

code

function createRemoteVideo(parent) {
    remoteVideo = document.createElement("video");
    remoteVideo.id = "remoteVideo";
    remoteVideo.width=852;
    remoteVideo.height=480;
    remoteVideo.controls="controls";
    remoteVideo.autoplay="autoplay";
    remoteVideo.type="application/vnd.apple.mpegurl";
    remoteVideo.className = "video-js vjs-default-skin";
    parent.appendChild(remoteVideo);
    player = videojs(remoteVideo);
}