Page History

...

To analyze the code, let's take the version of file player.js with hash cf0daabc6b86e21d5a2f9e4605366c8b7f0d27eb66cc393, which is available here and and can be
downloaded with corresponding build 0.5.328.182753.1894133.

1. Initialization of the 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',
            preferredMediaProvider: mediaProvider
        });

2. Connection to server

Flashphoner.createSession() code

Code Block

language	js
theme	RDark

    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();
    });

...

ConnectionStatusEvent ESTABLISHED code

Code Block

language	js
theme	RDark

    Flashphoner.createSession({urlServer: url}).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

When stream is created, the following parameters are passed

...

Code Block

language	js
theme	RDark

    stream = session.createStream({
        name: streamName,
        display: remoteVideo(options).on(STREAM_STATUS.PENDING, function (stream) {
        ...
    });
    stream.play();

5. Receiving the event confirming successful stream playback

...

When stream is created, the following parameters are passed

streamName - name of the stream (rtsp:// address in this case)
remoteVideo - <div> element, in which the video will be displayed
picture reslution to transcode

Code Block

language	js
theme	RDark

    var options = session.createStream({
        name: streamName,
        display: remoteVideo,
        flashShowFullScreenButton: true
    };
    if (Flashphoner.getMediaProviders()[0] === "MSE" && mseCutByIFrameOnly).on(STREAM_STATUS.PLAYING, function(stream) {
 {
        options.mediaConnectionConstraints = {
            cutByIFrameOnly: mseCutByIFrameOnly
        }
    }
    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];
         document.getElementById(stream.id()).addEventListener('resize', function(event)options.playHeight = resolution.split("x")[1];
    }

5. Receiving the event confirming successful stream playback

StreamStatusEvent PLAYING code

Code Block

language	js
theme	RDark

    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) {
        ...
    resizeVideo(event.target);}).on(STREAM_STATUS.PLAYING, function (stream) {
        }$("#preloader").hide();
        setStatus(stream.status());
        onStarted(stream);
    }).on(STREAM_STATUS.STOPPED, function() {
        ...
    }).on(STREAM_STATUS.FAILED, function() {
        ...
    });
    stream.play();

6. Stop of playback.

stream.stop() code

Code Block

language	js
theme	RDark

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

7. Receiving the event confirming successful stream playback stop

StreamStatusEvent STOPPED code

Code Block

language	js
theme	RDark

    stream = session.createStream({
        name: streamName,
        display: remoteVideo
    }options).on(STREAM_STATUS.PLAYINGPENDING, function (stream) {
        ...
    }).on(STREAM_STATUS.STOPPED, function () {
        $("#preloader").hide();
        setStatus(STREAM_STATUS.STOPPED);
        onStopped();
    }).on(STREAM_STATUS.FAILED, function() {
        ...
    }).play();

8. Playback volume control

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

Code Block

language	js
theme	RDark

    $("#volumeControl").slider({
        range: "min",
        min: 0,
        max: 100,
        value: currentVolumeValue,
        step: 10,
        animate: true,
        slide: function(event, ui) {
            //WCS-2375. fixed autoplay in ios safari
            stream.unmuteRemoteAudio();
            currentVolumeValue = ui.value;
            stream.setVolume(currentVolumeValue);
        }
    }).slider("disable");

Space shortcuts

Page tree

Versions Compared

Old Version 4

New Version 5

Key