Пример стримера

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

• WebRTC
• RTMFP
• RTMP

WebRTC потоков.

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

Image RemovedImage Added

В URL в поле ввода на скриншоте

• test.flashphoner.com localhost:8080 - адрес и Websocket порт WCS-сервера
• 48ad1496 ccf862bb - имя потока

На странице вопроизводятся два видео:

...

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

https://host:8888/client2/examples/demo/streaming/streamer/streamer.html

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

...

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

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

Flashphoner.init() code

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

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

Flashphoner.createSession() code

Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
    //session connected, start streaming
    startStreaming(session);...
}).on(SESSION_STATUS.DISCONNECTED, function(){
    setStatus(SESSION_STATUS.DISCONNECTED);
    $('#url').prop('disabled', false);
    onStopped();...
}).on(SESSION_STATUS.FAILED, function(){
    setStatus(SESSION_STATUS.FAILED);
    $('#url').prop('disabled', false);
    onStopped();...
});

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

ConnectionStatusEvent ESTABLISHED code

Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
    //session connected, start streaming
    startStreaming(session);
}).on(SESSION_STATUS.DISCONNECTED, function(){
    ...
}).on(SESSION_STATUS.FAILED, function(){
    ...
});

...

session.createStream(), publish() code

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

...

StreamStatusEvent PUBLISHING code

При получении данного события создается превью-видеопоток при помощи createStream() и вызывается play() для его воспроизведения.

session.createStream({
    name: streamName,
    display: localVideo,
    cacheLocalResources: true
    ...
}).on(STREAM_STATUS.PUBLISHING, function(publishStream){
    setStatus(STREAM_STATUS.PUBLISHING);
    //play preview
    session.createStream({
        name: streamName,
        display: remoteVideo
        ...
    }).play();
    ...
}).publish();

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

previewStream.stop() code

function onStarted(publishStream, previewStream) {
    $("#publishBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        previewStream.stop();
    }).prop('disabled', false);
}

...

StreamStatusEvent STOPPED code

    session.createStream({
        name: streamName,
        display: remoteVideo
    }).on(STREAM_STATUS.PLAYING, function(previewStream){
        ...
    }).on(STREAM_STATUS.STOPPED, function(){
        publishStream.stop();
    }).on(STREAM_STATUS.FAILED, function(){
        ...
    }).play();

8. Остановка публикации видеопотока после остановки воспроизведения превью-потока

publishStream.stop() code

    session.createStream({
        name: streamName,
        display: remoteVideo
    }).on(STREAM_STATUS.PLAYING, function(previewStream){
        ...
    }).on(STREAM_STATUS.STOPPED, function(){
        publishStream.stop();
    }).on(STREAM_STATUS.FAILED, function(){
        ...
    }).play();

...

StreamStatusEvent UNPUBLISHED code

session.createStream({
    name: streamName,
    display: localVideo,
    cacheLocalResources: true
}).on(STREAM_STATUS.PUBLISHING, function(publishStream){
    ...
}).on(STREAM_STATUS.UNPUBLISHED, function(){
    setStatus(STREAM_STATUS.UNPUBLISHED);
    //enable start button
    onStopped();
}).on(STREAM_STATUS.FAILED, function(){
    ...
}).publish();