Versions Compared

Key

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

Table of Contents

Пример стримера c записью видеопотока

Данный стример может использоваться с Web Call Server для публикации и записи следующих типов потоков WebRTC потока

...

На скриншоте ниже представлен пример с завершенной публикацией потока.

Image RemovedImage Added

Во время публикации в 'My Video' вопроизводится видео с камеры.
По завершении публикации запись видеопотока становится доступной для скачивания и воспроизведения в плеере справа.

Код примера

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

...

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

https://host:8888/client2/examples/demo/streaming/stream_recording/recording.html

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

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

Для разбора кода возьмем версию файла recording.js с хешем 66cc393 ecbadc3, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.5.28.2753.133212.

1. Инициализация API.

Flashphoner.init() code

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

2. Подключение к серверу.

Flashphoner.createSession() code

Code Block
languagejs
themeRDark
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
    setStatus(session.status());
    //session connected, start playback
    publishStream(session);
...
}).on(SESSION_STATUS.DISCONNECTED, function(){
    setStatus(SESSION_STATUS.DISCONNECTED);
    onStopped();...
}).on(SESSION_STATUS.FAILED, function(){
    setStatus(SESSION_STATUS.FAILED);
    onStopped();...
});

3. Получение от сервера события, подтверждающего успешное соединение.

ConnectionStatusEvent ESTABLISHED code

Code Block
languagejs
themeRDark
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
    setStatus(session.status());
    //session connected, start playback
    publishStream(session);
}).on(SESSION_STATUS.DISCONNECTED, function(){
    ...
}).on(SESSION_STATUS.FAILED, function(){
    ...
});

...

session.createStream(), publish() code

При создании передаются параметры

...

StreamStatusEvent PUBLISHING code

Code Block
languagejs
themeRDark
session.createStream({
    ...
}).on(STREAM_STATUS.PUBLISHING, function(stream) {
    setStatus(stream.status());
    onStarted(stream);
}).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
    ...
}).on(STREAM_STATUS.FAILED, function(stream) {
    ...
}).publish();

6. Остановка публикации видеопотока.

stream.stop() code

Code Block
languagejs
themeRDark
function onStarted(stream) {
    $("#publishBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        stream.stop();
    }).prop('disabled', false);
}

...

StreamStatusEvent UNPUBLISHED code

При обработке события вызывается функция формирования ссылки для скачивания файла записи showDownloadLink(), в функцию передается имя записанного файла, получаемое при помощи метода stream.getRecordInfo()

...

8. Формирование ссылки для скачивания.

code

Code Block
languagejs
themeRDark
function showDownloadLink(name) {
    if (name) {
        // Set correct path for records. Stream records are saved to WCS_HOME/records directory.
        // http://flashphoner.com/docs/wcs4/wcs_docs/html/en/wcs-developer-guide/quick_start_recording_streams.htm
        var link = window.location.protocol + "//" + window.location.host + '/client/records/' + name;
        $("#link").attr("href", link);
        $("#recVideo").attr("src", link).attr("controls", true);
        $("#downloadDiv").show();
    }
}

...