Web SDK 2.0 - RU
Space shortcuts
Page tree

Versions Compared

Old Version 3

changes.mady.by.user Flashphoner

Saved on

compared with

New Version Current

changes.mady.by.user admin

Saved on

Key

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

Table of Contents

Пример плеера

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

  • RTSP
  • WebRTC
  • RTMPRTMFP
  • SIP

Ниже представлен пример воспроизведения RTSP-потока в web-плеере.

Image RemovedImage Added

Код примера

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

...

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

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

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

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

Для разбора кода возьмем версию файла player.js с хешем cf0daabc6b86e21d5a2f9e4605366c8b7f0d27eb 7fff01f, которая находится здесь и доступна для
скачивания в соответствующей сборке 2.0.3.18219.1894.

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

Flashphoner.init() код code

Code Block
languagejs
themeRDark
        Flashphoner.init({flashMediaProviderSwfLocation
            receiverLocation: '../../dependencies/websocket-player/WSReceiver2.js',
            decoderLocation: '../../media-provider.swf'/dependencies/websocket-player/video-worker2.js',
            preferredMediaProvider: mediaProvider
        });

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
        playStream(session);
    }).on(SESSION_STATUS.DISCONNECTED, function(){
        setStatus(SESSION_STATUS.DISCONNECTED);
        onStopped();...
    }).on(SESSION_STATUS.FAILED, function(){
        setStatus(SESSION_STATUS.FAILED);
        onStopped();...
    });

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

SESSION_STATUS.ConnectionStatusEvent ESTABLISHED код code

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

4. Воспроизведение видеопотока

Session.createStream(), Stream.play() code

Code Block
languagejs
themeRDark
    stream = session.createStream(options).on(SESSIONSTREAM_STATUS.FAILEDPENDING, function (stream) {
        setStatus(SESSION_STATUS.FAILED);...
        onStopped(});
    });

...

stream.play()

...

;

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

  • streamName - имя видеопотока

...

  • remoteVideo - div

...

  • элемент, в котором будет отображаться видео

...

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

code

Code Block
languagejs
themeRDark
session.createStream(    var options = {
        name: streamName,
        display: remoteVideo,
        flashShowFullScreenButton: true
    }).on(STREAM_STATUS.PLAYING, function(stream;
    if (Flashphoner.getMediaProviders()[0] === "MSE" && mseCutByIFrameOnly) {
        options.mediaConnectionConstraints = {
            cutByIFrameOnly: mseCutByIFrameOnly
        }
    }
    if (resolution_for_wsplayer) {
        document.getElementById(stream.id()).addEventListener('resize', function(event)options.playWidth = resolution_for_wsplayer.playWidth;
        options.playHeight = resolution_for_wsplayer.playHeight;
    } else if (resolution) {
        options.playWidth = resolution.split("x")[0];
        options.playHeight = resizeVideo(event.target)resolution.split("x")[1];
    }
    })if (autoplay) {
        options.unmutePlayOnStart = false;
    }

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

STREAM_STATUS.PLAYING code

Code Block
languagejs
themeRDark
    setStatus(stream = session.statuscreateStream(options));.on(STREAM_STATUS.PENDING, function (stream) {
        onStarted(stream);...
    }).on(STREAM_STATUS.STOPPEDPLAYING, function (stream) {
        $("#preloader").hide();
        setStatus(STREAM_STATUS.STOPPEDstream.status());
        onStoppedonStarted(stream);
    }).on(STREAM_STATUS.FAILEDSTOPPED, function() {
        ...
   setStatus }).on(STREAM_STATUS.FAILED);, function() {
        onStopped(...
    });
    })stream.play();

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

STREAM_EVENT, STREAM_EVENT_TYPE.NOT_ENOUGH_BANDWIDTH code

Code Block
languagejs
themeRDark
session.createStream(    }).on(STREAM_EVENT, function(streamEvent){
        if (STREAM_EVENT_TYPE.NOT_ENOUGH_BANDWIDTH  name: streamName,
=== streamEvent.type) {
         display: remoteVideo
  var  }).on(STREAM_STATUS.PLAYING, function(stream) {
info = streamEvent.payload.info.split("/");
            var  document.getElementById(stream.id()).addEventListener('resize', function(event){
remoteBitrate = info[0];
            var networkBandwidth  resizeVideo(event.target);
        });
        setStatus(stream.status());
        onStarted(stream);
    }).on(STREAM_STATUS.STOPPED, function() {
= info[1];
            console.log("Not enough bandwidth, consider using lower video resolution or bitrate. Bandwidth " + (Math.round(networkBandwidth / 1000)) + " bitrate " + (Math.round(remoteBitrate / 1000)));
        } else if (STREAM_EVENT_TYPE.RESIZE === streamEvent.type) {
            setStatus(STREAM_STATUS.STOPPED);
...
        }
   onStopped();
 });

7. Обработка события об изменении размера картинки потока

STREAM_EVENT, STREAM_EVENT_TYPE.RESIZE code

Code Block
languagejs
themeRDark
    }).on(STREAM_STATUS.FAILEDEVENT, function(streamEvent) {{
            ...
        setStatus} else if (STREAM_STATUS.FAILED);
EVENT_TYPE.RESIZE === streamEvent.type) {
            onStopped(console.log("New video size: " + streamEvent.payload.streamerVideoWidth + "x" + streamEvent.payload.streamerVideoHeight);
        }).play()
    });

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

streamStream.stop() код code

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

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

StreamStatusEvent STOPPED кодSTREAM_STATUS.STOPPED code

Code Block
languagejs
themeRDark
    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) {
        ...
   name: streamName, }).on(STREAM_STATUS.STOPPED, function () {
        $("#preloader").hide();
        display: remoteVideosetStatus(STREAM_STATUS.STOPPED);
        onStopped();
    }).on(STREAM_STATUS.PLAYINGFAILED, function(stream) {
        document.getElementById(stream.id()).addEventListener('resize', function(event)...
    }).play();

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

Stream.unmuteRemoteAudio(), Stream.setVolume() code

Code Block
languagejs
themeRDark
    $("#volumeControl").slider({
        range: "min",
        min: 0,
        max: 100,
        value: currentVolumeValue,
        step: 10,
        animate: true,
        slide: function(event, ui) {
            resizeVideo(event.target);
   //WCS-2375. fixed autoplay in ios safari
     });
       if setStatus(stream.statusisRemoteAudioMuted()); {
          onStarted(stream      stream.unmuteRemoteAudio();
          }).on(STREAM_STATUS.STOPPED, function() {}
            currentVolumeValue = setStatus(STREAM_STATUS.STOPPED)ui.value;
            onStoppedstream.setVolume(currentVolumeValue);
        }
    }).on(STREAM_STATUS.FAILED, function() {
        setStatus(STREAM_STATUS.FAILEDslider("disable");

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

code

Code Block
languagejs
themeRDark
    if (autoplay) {
        // We can start autoplay with muted audio only, so set volume slider to 0 #WCS-2425
        $("#volumeControl").slider('value', 0);
        onStopped$("#playBtn").click();
    }).play();