Page History

...

urlServer - URL WCS-сервера
mediaOptions - параметры подключения к серверу через TURN-сервер

Code Block

language	js
theme	RDark

    var mediaOptions = {"iceServers": [{'url': 'turn:turn.flashphoner.com:443?transport=tcp', 'username': 'flashphoner', 'credential': 'coM77EMrV7Cwhyan'}]};
    Flashphoner.createSession({urlServer: urlServer, mediaOptions: mediaOptions}).on(SESSION_STATUS.ESTABLISHED, function (session) {
        setStatus(session.status());...
    });

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

ConnectionStatusEvent ESTABLISHED код

Code Block

language	js
theme	RDark

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

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

ConnectionStatusEvent ESTABLISHED код

...

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

session.createStream(), play() код

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

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

Code Block

language	js
theme	RDark

 Flashphoner.createSession({urlServer: urlServer, mediaOptions: mediaOptions}).on(SESSION_STATUS.ESTABLISHED, function (session) var options = {
        setStatus(session.status());name: streamName,
        //session connected, start playback
display: remoteVideo,
        flashShowFullScreenButton:  playStream(session)true
    };
    if }).on(SESSION_STATUS.DISCONNECTED, function ((resolution_for_wsplayer) {
        setStatus(SESSION_STATUS.DISCONNECTED);
options.playWidth = resolution_for_wsplayer.playWidth;
        options.playHeight  onStopped()= resolution_for_wsplayer.playHeight;
    }).on(SESSION_STATUS.FAILED, function else if (resolution) {
        options.playWidth = setStatus(SESSION_STATUS.FAILED)resolution.split("x")[0];
        onStopped()options.playHeight = resolution.split("x")[1];
    });

...


    stream = session.createStream(options)

...

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

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

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];
    }
    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();
            });
            video.addEventListener('resize', function (event) {
                var streamResolution = stream.videoResolution();
                if (Object.keys(streamResolution).length === 0) {
                    resizeVideo(event.target);
                } else {
                    // Change aspect ratio to prevent video stretching
                    var ratio = streamResolution.width / streamResolution.height;
                    var newHeight = Math.floor(options.playWidth / ratio);
                    resizeVideo(event.target, options.playWidth, newHeight);
                }
            });
        }
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        setStatus(stream.status());
        onStarted(stream);
    }).on(STREAM_STATUS.STOPPED, function () {
        setStatus(STREAM_STATUS.STOPPED);
        onStopped();
    }).on(STREAM_STATUS.FAILED, function () {
        setStatus(STREAM_STATUS.FAILED);
        onStopped();
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
        console.log("Not enough bandwidth, consider using lower video resolution or bitrate. Bandwidth " + (Math.round(stream.getNetworkBandwidth() / 1000)) + " bitrate " + (Math.round(stream.getRemoteBitrate() / 1000)));
    });
    stream.play();

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

StreamStatusEvent PENDING код

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

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();
            });
            video.addEventListener('resize', function (event) {
                var streamResolution = stream.videoResolution();
                if (Object.keys(streamResolution).length === 0) {
                    resizeVideo(event.target);
                } else {
                    // Change aspect ratio to prevent video stretching
                    var ratio = streamResolution.width / streamResolution.height;
                    var newHeight = Math.floor(options.playWidth / ratio);
                    resizeVideo(event.target, options.playWidth, newHeight);
                }
            });
        }
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        setStatus(stream.status());
        onStarted(stream);
    }).on(STREAM_STATUS.STOPPED, function () {
        setStatus(STREAM_STATUS.STOPPED);
        onStopped();
    }).on(STREAM_STATUS.FAILED, function () {
        setStatus(STREAM_STATUS.FAILED);
        onStopped();
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
        console.log("Not enough bandwidth, consider using lower video resolution or bitrate. Bandwidth " + (Math.round(stream.getNetworkBandwidth() / 1000)) + " bitrate " + (Math.round(stream.getRemoteBitrate() / 1000)));
    });
    stream.play();

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

StreamStatusEvent PLAYING код

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();
            });
            video.addEventListener('resize', function (event) {
                var streamResolution = stream.videoResolution();
                if (Object.keys(streamResolution).length === 0) {
                    resizeVideo(event.target);
                } else {
                    // Change aspect ratio to prevent video stretching
                    var ratio = streamResolution.width / streamResolution.height;
                    var newHeight = Math.floor(options.playWidth / ratio);
                    resizeVideo(event.target, options.playWidth, newHeight);
                }
            });.on(STREAM_STATUS.PENDING, function(stream) {
        ...
    });
    stream.play();

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

StreamStatusEvent PENDING код

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

Code Block

language	js
theme	RDark

    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
        }
var video =  })document.ongetElementById(STREAM_STATUS.PLAYING, function (stream) {
stream.id());
        if setStatus(stream!video.status());hasListeners) {
        onStarted(stream);
    }).on(STREAM_STATUS.STOPPED, function () {
video.hasListeners = true;
            setStatus(STREAM_STATUS.STOPPED);
video.addEventListener('playing', function () {
            onStopped();
    }$("#preloader").on(STREAM_STATUS.FAILED, function () {
hide();
            setStatus(STREAM_STATUS.FAILED});
        onStopped();
    })video.on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTHaddEventListener('resize', function (streamevent) {
        console.log("Not enough bandwidth, consider using lower video resolution orvar bitrate. Bandwidth " + (Math.round(stream.getNetworkBandwidth() / 1000)) + " bitrate " + (Math.round(stream.getRemoteBitrate() / 1000)));
    });
    stream.play();

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

stream.stop() код

Code Block

language	js
theme	RDark

 $that.find('.play-pause').bind('click', function (streamResolution = stream.videoResolution();
                if (Object.keys(streamResolution).length === 0) {
                // If playing, etc, change classes to show pause or play button
 resizeVideo(event.target);
                } else {
     if (!$(this).prop('disabled')) {
             // Change aspect ratio to   if (stopped) {
prevent video stretching
                    var ratio = streamResolution.width  start()/ streamResolution.height;
                    var newHeight =  $(this).addClass('pause').removeClass('play').prop('disabled', trueMath.floor(options.playWidth / ratio);
                        $('#play').css('display', 'none'resizeVideo(event.target, options.playWidth, newHeight);
                    }
 else {
          });
        }
      if}).on(STREAM_STATUS.PLAYING, function (stream) {
        ...
           }).on(STREAM_STATUS.STOPPED, function () {
         stream.stop();...
    }).on(STREAM_STATUS.FAILED, function () {
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function    }(stream) {
          ...
    });
    stream.play();

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

StreamStatusEvent PLAYING код

Code Block

language	js
theme	RDark

    stream = $(this).addClass('play').removeClass('pause').prop('disabled', true);session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
        ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
         $("#preloader").hide(setStatus(stream.status());
        onStarted(stream);
            }}).on(STREAM_STATUS.STOPPED, function () {
        ...
    }).on(STREAM_STATUS.FAILED, function ()  }{
            });

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

StreamStatusEvent STOPPED код

Code Block

language	js
theme	RDark

 stream = session.createStream(options...
    }).on(STREAM_STATUS.PENDINGNOT_ENOUGH_BANDWIDTH, function (stream) {
         var video = document.getElementById(stream.id());
...
    });
    stream.play();

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

stream.stop() код

Code Block

language	js
theme	RDark

           if (!video.hasListeners$that.find('.play-pause').bind('click', function () {
            video.hasListeners = true;
  // If playing, etc, change classes to    video.addEventListener('playing', function () {
show pause or play button
                if (!$("#preloader"this).hideprop();'disabled')) {
            });
            video.addEventListener('resize', function (eventif (stopped) {
                var streamResolution = stream.videoResolution();
          ...
      if (Object.keys(streamResolution).length === 0) {
          } else {
        resizeVideo(event.target);
                }if else(stream) {
                     // Change aspect ratio to prevent video stretching stream.stop();
                    var ratio = streamResolution.width / streamResolution.height;
    }
                     var newHeight = Math..floor(options.playWidth
  / ratio);
                 }
   resizeVideo(event.target, options.playWidth, newHeight);
           }
     }
       });

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

StreamStatusEvent STOPPED код

Code Block

language	js
theme	RDark

    stream });
        }
    }= session.createStream(options).on(STREAM_STATUS.PLAYINGPENDING, function (stream) {
        setStatus(stream.status());
        onStarted(stream);...
    }).on(STREAM_STATUS.STOPPEDPLAYING, function (stream) {
        setStatus(STREAM_STATUS.STOPPED);
        onStopped();...
    }).on(STREAM_STATUS.FAILEDSTOPPED, function () {
        setStatus(STREAM_STATUS.FAILEDSTOPPED);
        onStopped();
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTHFAILED, function (stream) {
        console.log("Not enough bandwidth, consider using lower video resolution or bitrate...
 Bandwidth " + (Math.round(stream.getNetworkBandwidth() / 1000)) + " bitrate " + (Math.round(stream.getRemoteBitrate() / 1000)));}).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
        ...
    });
    stream.play();

Space shortcuts

Page tree

Versions Compared

Old Version 3

New Version 4

Key