Table of Contents

Пример плеера, встраиваемого на веб-страницу

Данный пример может использоваться для внедрения на веб-страницу плеера для воспроизведения живых (Live) потоков с веб-камер и IP камер. Поддерживаются следующие технологии воспроизведения:

WebRTCFlash
MSE
WSPlayer (Websocket + HTML5 Canvas)

Интерфейс страницы внедрения:

Image RemovedImage Added

Код примера

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

...

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

https://host:8888/client2/examples/demo/streaming/embed_player/sample.html

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

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

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

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

Flashphoner.init() code

Code Block

language	js
theme	RDark

        Flashphoner.init({
            flashMediaProviderSwfLocation: '../../../../media-provider.swf',
            receiverLocation: '../../dependencies/websocket-player/WSReceiver2.js',
            decoderLocation: '../../dependencies/websocket-player/video-worker2.js',
            preferredMediaProviders: mediaProviders && mediaProviders !== "" ? mediaProviders.split(','): []
        });

...

Flashphoner.createSession() code

Методу createSession() передаются параметры:

...

ConnectionStatusEvent ESTABLISHED code

Code Block

language	js
theme	RDark

    Flashphoner.createSession({urlServer: urlServer, mediaOptions: mediaOptions}).on(SESSION_STATUS.ESTABLISHED, function (session) {
        setStatus(session.status());
        //session connected, start playback
        playStream(session);
    }).on(SESSION_STATUS.DISCONNECTED, function () {
        ...
    }).on(SESSION_STATUS.FAILED, function () {
        ...
    });

...

session.createStream(), play() code

В метод createStream передаются:

имя видеопотока streamName
remoteVideo - div-элемент, в котором будет отображаться видео
признак отображения кнопки полноэкранного режима
разрешение для окна плеера
unmutePlayOnStart: false - отключает автоматическое воспроизведение звука при autoplay для соблюдения требований браузеров

Code Block

language	js
theme	RDark

    var options = {
        name: streamName,
        display: remoteVideo,
        flashShowFullScreenButton: true
    };
    if (resolution_for_wsplayer) {
        options.playWidth = resolution_for_wsplayer.playWidth;
        options.playHeight = resolution_for_wsplayer.playHeight;
    } else if (resolution) {
        options.playWidth = resolution.split("x")[0];
        options.playHeight = resolution.split("x")[1];
    }
    if (autoplay) {
        options.unmutePlayOnStart = false;
    }
 stream   stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
        ...
    });
    stream.play();

...

StreamStatusEvent PENDING code

В обработчике данного события имитируется щелчок мыши по движку громкости, а также при необходимости размер видео масштабируется размер видео масштабируется под размер окна плеера

Code Block

language	js
theme	RDark

    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
        var video = document.getElementById(stream.id());
        if (!video.hasListeners) {
            video.hasListeners = true;
            video.addEventListener('playing', function () {
                $("#preloader").hide();
            });
           if (autoplay && stream.isRemoteAudioMuted())video.addEventListener('resize', function (event) {
                var streamResolution   //WCS-1698. if autoplay = true, then set the volume slider to 0. When you first click on the slider or icon, sound turn on. https://goo.gl/7K7WLu= stream.videoResolution();
                if (Object.keys(streamResolution).length === 0) {
                    $resizeVideo('.volume').click(event.target);
                } else {
  $('.volume').bind('click', volumeEvent);
                 // Change  $('.volume-range-block').bind('mousedown', volumeEvent);
   aspect ratio to prevent video stretching
             }
       var ratio = streamResolution.width /  streamResolution.height;
   if ($('.volume').hasClass('volume-none') && !stream.isRemoteAudioMuted()) {
             var newHeight = 	$('.volume').click(Math.floor(options.playWidth / ratio);
                }    resizeVideo(event.target,        }options.playWidth, newHeight);
             video.addEventListener('resize', function (event) {}
            });
    var streamResolution = stream.videoResolution();
       }
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        ...
   if (Object}).keys(streamResolution).length === 0on(STREAM_STATUS.STOPPED, function () {
         ...
           resizeVideo(event.target);}).on(STREAM_STATUS.FAILED, function () {
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH,    } else function (stream) {
         ...
    });
       // Change aspect ratio to prevent video stretchingstream.play();

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

StreamStatusEvent PLAYING code

Code Block

language	js
theme	RDark

    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
        ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
     var ratio = streamResolution.width / streamResolution.heightsetStatus(stream.status());
        onStarted(stream);
    }).on(STREAM_STATUS.STOPPED, function () {
        ...
 var newHeight = Math}).flooron(options.playWidth / ratio);STREAM_STATUS.FAILED, function () {
        ...
            resizeVideo(event.target, options.playWidth, newHeight);}).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
                }
      ...
      });
        }
    }).on(STREAM_STATUS.PLAYING, function (stream) {
stream.play();

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

stream.stop() code

Code Block

language	js
theme	RDark

        ...
    })$that.on(STREAM_STATUS.STOPPEDfind('.play-pause').bind('click', function () {
        ...
    }).on(STREAM_STATUS.FAILED, function () {
 // If playing, etc, change classes to ...
show pause or  }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (streamplay button
                if (!$(this).prop('disabled')) {
        ...
     });
    stream.play();

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

StreamStatusEvent PLAYING code

Code Block

language	js
theme	RDark

    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
   if (stopped) {
                        ...
                    } else {
                        if (stream) {
                            ...stream.stop();
    }).on(STREAM_STATUS.PLAYING, function (stream) {
            setStatus(stream.status());
        onStarted(stream);
}
        }).on(STREAM_STATUS.STOPPED, function () {
                ...
      }).on(STREAM_STATUS.FAILED, function () {
              ...}
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
            ...
}
        });
    stream.play(});

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

stream.stop() 8. Получение от сервера события, подтверждающего успешную остановку воспроизведения потока

StreamStatusEvent STOPPED code

Code Block

language	js
theme	RDark

    stream        $that.find('.play-pause').bind('click', function (= session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
                // If playing, etc, change classes to show pause or play button
     ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        ...
   if (!$(this).prop('disabled')}).on(STREAM_STATUS.STOPPED, function () {
        setStatus(STREAM_STATUS.STOPPED);
        onStopped();
       if}).on(STREAM_STATUS.FAILED, function (stopped) {
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
         ...
        });
    stream.play();

9. Регулировка громкости воспроизведения

stream.unmuteRemoteAudio(), stream.setVolume(currentVolumeValue) code

Code Block

language	js
theme	RDark

    if (stream) {
  } else {
    if (volume > 0) {
            if (!firstUnmuted && slider if&& Browser.isAndroid(stream)) {
                console.error("User should click volume unmute button to enable audio");
    stream.stop();
            return(false);
            }
 else if (stream.isRemoteAudioMuted()) {
                    ...stream.unmuteRemoteAudio();
                firstUnmuted =   }
  true;
              }
            });

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

StreamStatusEvent STOPPED code

Code Block

language	js
theme	RDark

}
      stream = sessionstream.createStreamsetVolume(options).on(STREAM_STATUS.PENDING, function(stream) {
        ...volume);
    }
    // Save current volume in page element to restore it when mute/unmute
    $('#volume-range').val(volume);
    }).on(STREAM_STATUS.PLAYING, function (stream...

10. Автозапуск воспроизведения при загрузке страницы

code

Code Block

language	js
theme	RDark

    if (autoplay ) {
         ...
    }).on(STREAM_STATUS.STOPPED, function () {
        setStatus(STREAM_STATUS.STOPPED);
// Autoplay will start for muted video tag only, adjust mute button and slider view
        firstUnmuted = onStopped()false;
        }$('.volume').on(STREAM_STATUS.FAILED, function () {addClass('volume-none');
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {$('.volume').html(HTML_VOLUME_MUTE);
        ...
    }$('#slider').slider( "value", 1 );
     stream   $(".play-pause").click();
    }

Space shortcuts

Page tree

Versions Compared

Old Version 5

New Version 6

Key

Пример плеера, встраиваемого на веб-страницу

Код примера

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

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 5

New Version 6

Key

Пример плеера, встраиваемого на веб-страницу

Код примера

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