Versions Compared

Key

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

Table of Contents

Example of a player that is embedded on a web page

This example may be used to embed player to the web page for live streams from web and IP cameras playback. These technologies are supported^

  • WebRTCFlash
  • MSE
  • WSPlayer (Websocket + HTML5 Canvas)

Embedding page interface:

Image RemovedImage Added

Code of the example

Source code of the example is on server by this path:

...

where host is your WCS server address

Analyzing the code

...

To analyze code get player.js file version with hash 66cc393 hash ecbadc3 that can be found found here and and is avalable to download in build build 2.0.5.28.2753.133212.

1. API initializing.

Flashphoner.init()   code

Code Block
languagejs
themeRDark
        Flashphoner.init({
            flashMediaProviderSwfLocationreceiverLocation: '../../../../media-provider.swfdependencies/websocket-player/WSReceiver2.js',
            receiverLocationdecoderLocation: '../../dependencies/websocket-player/WSReceiver2video-worker2.js',
            decoderLocation: '../../dependencies/websocket-player/video-worker2.js',
            preferredMediaProviders: mediaProviders preferredMediaProviders: mediaProviders && mediaProviders !== "" ? mediaProviders.split(','): []
        });

...

Flashphoner.createSession()   code

These parameters are passed to createSession() method:

...

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED ESTABLISHED code

Code Block
languagejs
themeRDark
    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

These parameters are passed to createStream() method:

  • streamName - name of the stream
  • remoteVideo - <div>-element to display stream on page
  • switch to show/|hide full screen button
  • player window resolution
  • unmutePlayOnStart: false - disables automatic audio unmuting for autoplay to conform browsers requirements
Code Block
languagejs
themeRDark
    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 = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
        ...
    });
    stream.play();

5. Receiving the event confirming stream is ready to playback

StreamStatusEvent PENDING PENDING code

On this event, mouse click on the volume slider is emulated, and video size and aspect ratio are changed if need picture size aspect ratio is changing to conform player window size.

Code Block
languagejs
themeRDark
    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('event.volume').click()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(});
        }
        if (Object.keys(streamResolution).length === 0  }).on(STREAM_STATUS.PLAYING, function (stream) {
        ...
    }).on(STREAM_STATUS.STOPPED, function () {
        resizeVideo(event.target);
    ...
    }).on(STREAM_STATUS.FAILED, function () {
        ...
    } else).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
        ...
    });
    stream.play();

6. Receiving the event confirming successful stream playback

StreamStatusEvent PLAYING code

Code Block
languagejs
themeRDark
    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
        ...
    }).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) {
     // Change aspect ratio...
 to prevent video stretching});
    stream.play();

7. Stream playback stop

stream.stop() code

Code Block
languagejs
themeRDark
                 var ratio = streamResolution.width / streamResolution.height;
      $that.find('.play-pause').bind('click', function () {
              var newHeight = Math.floor(options.playWidth // ratio);
          If playing, etc, change classes to show pause or play button
           resizeVideo(event.target, options.playWidth, newHeight);
   if (!$(this).prop('disabled')) {
           }
         if (stopped) {
 });
        }
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        ...
    }).on(STREAM_STATUS.STOPPED, function () {
        ...
    }).on(STREAM_STATUS.FAILED, function () {
    } else {
  ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
        ...
    });
   if (stream.play();

6. Receiving the event confirming successful stream playback

StreamStatusEvent PLAYING code

Code Block
languagejs
themeRDark
    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
 {
             ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        setStatus(stream.statusstop());
                        }
         onStarted(stream);
    }).on(STREAM_STATUS.STOPPED, function () {
        ...
     }).on(STREAM_STATUS.FAILED, function () {
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {

            ...
    });

            stream.play(});

7. Stream 8. Receiving the event confirming successful playback stop

stream.stop() StreamStatusEvent STOPPED code

Code Block
languagejs
themeRDark
    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. Playback volume setting

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

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

8. Receiving the event confirming successful playback stop

StreamStatusEvent STOPPED code

Code Block
languagejs
themeRDark
}
      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. Automatic playback start on page load

code

Code Block
languagejs
themeRDark
    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();
    }