Skip to end of metadata
Go to start of metadata

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^

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

Embedding page interface:

Code of the example

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

/usr/local/FlashphonerWebCallServer/client2/examples/demo/streaming/embed_player

player.css - CSS style file
player.html - player page
player.js - script for player to work
sample.css - CSS style file for embedding  interface page
sample.html - embedding  interface page
sample.js - script to form embedding code

The example can be tested on this URL:

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

where host is your WCS server address

Analyzing the code

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

1. API initializing.

Flashphoner.init() code

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

2. Connection to the server

Flashphoner.createSession() code

These parameters are passed to createSession() method:

  • urlServer - WCS server URL
  • mediaOptions - parameters to connect through the TURN server
    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) {
        ...
    });

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED code

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


4. Video stream playback.

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
    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 code

On this event, picture size aspect ratio is changing to conform player window size.

    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) {
        ...
    }).on(STREAM_STATUS.STOPPED, function () {
        ...
    }).on(STREAM_STATUS.FAILED, function () {
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
        ...
    });
    stream.play();

6. Receiving the event confirming successful stream playback

StreamStatusEvent PLAYING code

    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) {
        ...
    });
    stream.play();

7. Stream playback stop

stream.stop() code

            $that.find('.play-pause').bind('click', function () {
                // If playing, etc, change classes to show pause or play button
                if (!$(this).prop('disabled')) {
                    if (stopped) {
                        ...
                    } else {
                        if (stream) {
                            stream.stop();
                        }
                        ...
                    }
                }
            });

8. Receiving the event confirming successful playback stop

StreamStatusEvent STOPPED code

    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {
        ...
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        ...
    }).on(STREAM_STATUS.STOPPED, function () {
        setStatus(STREAM_STATUS.STOPPED);
        onStopped();
    }).on(STREAM_STATUS.FAILED, function () {
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
        ...
    });
    stream.play();

9. Playback volume setting

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

    if (stream) {
        if (volume > 0) {
            if (!firstUnmuted && slider && Browser.isAndroid()) {
                console.error("User should click volume unmute button to enable audio");
                return(false);
            } else if (stream.isRemoteAudioMuted()) {
                stream.unmuteRemoteAudio();
                firstUnmuted = true;
            }
        }
        stream.setVolume(volume);
    }
    // Save current volume in page element to restore it when mute/unmute
    $('#volume-range').val(volume);
    ...

10. Automatic playback start on page load

code

    if (autoplay ) {
        // Autoplay will start for muted video tag only, adjust mute button and slider view
        firstUnmuted = false;
        $('.volume').addClass('volume-none');
        $('.volume').html(HTML_VOLUME_MUTE);
        $('#slider').slider( "value", 1 );
        $(".play-pause").click();
    }
  • No labels