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^

WebRTC
Flash
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:

/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 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 66cc393 hash 24a69e1 that can be found found here and and is avalable to download in build build 2.0.5.28.2753.133.225.

1. API initializing.

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',
            preferredMediaProviders: mediaProviders && mediaProviders !== "" ? mediaProviders.split(','): []
        });

2. Connection to the server

Flashphoner.createSession() code

These The following parameters are passed to createSession() method:

urlServer - WCS server URL
mediaOptions - parameters to connect through the TURN server

Code Block

language	js
theme	RDark

    varlet 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 SESSION_STATUS.ESTABLISHED code

Code Block

language	js
theme	RDark

    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.

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

These The following parameters are passed to createStream() method:

streamName - name of the stream
remoteVideo - <div>- div element to display stream on page
switch to show/|hide full screen button
player window resolutionresolution to play the stream (transcoding will be enabled on server)
useControls - enables a standard HTML5 video controls
unmutePlayOnStart: false - disables automatic audio unmuting for autoplay to conform browsers requirements

Code Block

language	js
theme	RDark

let useVideoControls   var= true;
...
let options = {
        name: streamName,
        display: remoteVideo,
        flashShowFullScreenButtonuseControls: trueuseVideoControls
    };
    if (resolution_for_wsplayer) {
        options.playWidth = resolution_for_wsplayer.playWidth.split("x")[0];
    playHeight = resolution.split("x")[1];
    options.playHeightconstraints = resolution_for_wsplayer.playHeight;
{
     } else if (resolution)video: {
        options.playWidth = resolution.split("x")[0];
     width: playWidth,
            height: playHeight
        },
       options.playHeight = resolution.split("x")[1];audio: true
    };
}
if (autoplay) {
  stream  options.unmutePlayOnStart = false;
}
playingStream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) {
        ...
    });
    streamplayingStream.play();

5. Receiving the event confirming stream is ready to playback

StreamStatusEvent PENDING STREAM_STATUS.PENDING code

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

hide the custom preloader in Chrome browser because there is a standard one when standard controls are enabled
set up resize video event handler
set up video event handlers separately for Safari and other browsers

Code Block

language	js
theme	RDark

playingStream    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) {
        var video = document.getElementById(stream.idif (Browser.isChrome()); {
        if (!video.hasListeners) {
            video.hasListeners = true;// Hide a custom preloader in Chrome because there is a standard one with standard controls
            video.addEventListenerhideItem('playingpreloader', function () {);
    }
    let video       $("#preloader").hide();
         = document.getElementById(stream.id());
       if (autoplay && stream.isRemoteAudioMuted())!video.hasListeners) {
                    //WCS-1698. if autoplayvideo.hasListeners = true,;
 then set the volume slider to 0. When you first click on the slider or icon, sound turn on. https://goo.gl/7K7WLu setResizeHandler(video, stream, playWidth);
                    $('.volume').click();if (Browser.isSafariWebRTC()) {
                    $('.volume').bind('click', volumeEvent)setWebkitEventHandlers(video);
        } else {
            $('.volume-range-block').bind('mousedown', volumeEventsetEventHandlers(video);
           }
     }
}).on(STREAM_STATUS.PLAYING, function (stream) {
             if ($('.volume').hasClass('volume-none') && !stream.isRemoteAudioMuted())...
}).on(STREAM_STATUS.STOPPED, function () {
                	$('.volume').click();...
}).on(STREAM_STATUS.FAILED, function(stream) {
                }            });
            video.addEventListener('resize', function (event) ...
}).on(STREAM_EVENT, function(streamEvent){
                var streamResolution = stream.videoResolution();
                if (Object.keys(streamResolution).length === 0...
});
playingStream.play();

6. Receiving the event confirming successful stream playback

STREAM_STATUS.PLAYING code

On this event, MSE stream playback is unpaused in Android Firefox browser

Code Block

language	js
theme	RDark

playingStream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) {
                    resizeVideo(event.target);
                } else ...
}).on(STREAM_STATUS.PLAYING, function (stream) {
                    // ChangeAndroid aspectFirefox ratiomay topause preventstream videoplayback stretching
via MSE even if video element is muted
    if (Flashphoner.getMediaProviders()[0] == "MSE" && autoplay    var ratio = streamResolution.width / streamResolution.height;&& Browser.isAndroidFirefox()) {
                    var newHeight = Math.floor(options.playWidth / ratiolet video = document.getElementById(stream.id());
        if (video           resizeVideo(event.target, options.playWidth, newHeight);&& video.paused) {
                }video.play();
            });
        }
    }).onsetStatus(STREAM_STATUS.PLAYING, function (stream) {);
        ...
    onStarted();
}).on(STREAM_STATUS.STOPPED, function () {
        ...
    }).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTHEVENT, function (streamstreamEvent) {
        ...
    });
    streamplayingStream.play();

...

7. Stream playback stop

Stream.stop() code

Code Block

language	js
theme	RDark

playingStream.stop();

8. Receiving the event confirming successful stream playback StreamStatusEvent PLAYING stop

STREAM_STATUS.STOPPED code

Code Block

language	js
theme	RDark

playingStream    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 () {
        ...setStatus(STREAM_STATUS.STOPPED);
    onStopped();
}).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTHEVENT, function (streamstreamEvent) {
        ...
    });
    streamplayingStream.play();

79. Stream playback stop

stream.stop() code

Automatic playback starting if required

code

Code Block

language	js
theme	RDark

if (autoplay) {
    centralButton.click();
}

10. Setting up resize event handler

code

On this event, the container size for video element is changed

Code Block

language	js
theme	RDark

function setResizeHandler(video, stream, playWidth) {
    video.addEventListener('resize', function (event) {
        let streamResolution = $that.find('.play-pause').bind('click', function () {
stream.videoResolution();
        if (Object.keys(streamResolution).length === 0) {
            resizeVideo(event.target);
        } else {
            // If playing, etc, change classes to show pause or play buttonChange aspect ratio to prevent video stretching
            let ratio = streamResolution.width / streamResolution.height;
            let newHeight =  if (!$(this).prop('disabled'))Math.floor(playWidth / ratio);
            resizeVideo(event.target, playWidth, newHeight);
        }
    });
}

11. Setting up event handlers for Safari browser

code

The following events are handled:

playing - hide the custom preloader when stream is playing
webkitbeginfullscreen , webkitendfullscreen - detect full screen mode to unpause stream playback when exiting this mode in iOS Safari
pause - unpause stream playback when exiting full screen mode; stop playback by clicking the standard pause control in windowed mode

Code Block

language	js
theme	RDark

function setWebkitEventHandlers(video) {
    let needRestart = false;
    let isFullscreen = false;
    //  ifHide custom preloader
    video.addEventListener('playing', function (stopped) {
        hideItem('preloader');
    });
    // Use webkitbeginfullscreen event to detect full screen mode in iOS ...Safari
    video.addEventListener("webkitbeginfullscreen", function () {
        isFullscreen = true;
    });    else {
           
    video.addEventListener("pause", function () {
        if (streamneedRestart) {
            console.log("Video paused after fullscreen, continue...");
            streamvideo.stopplay();
            needRestart = false;
        }  }else if (!(isFullscreen || document.webkitFullscreenElement)) {
            // Stop stream by standard play/pause control
            ...
playingStream.stop();
        }
    });
    video.addEventListener("webkitendfullscreen", function () {
  }
      video.play();
        needRestart = }true;
        isFullscreen = false;
    });

8. Receiving the event confirming successful playback stop

StreamStatusEvent STOPPED code

12. Setting up event handlers in other browsers

code

The following events are handled:

playing - hide the custom preloader when stream is playing
pause - stop playback by clicking the standard pause control in windowed mode

Code Block

language	js
theme	RDark

function setEventHandlers(video) {
   stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream // Hide custom preloader
    video.addEventListener('playing', function () {
        ...hideItem('preloader');
    }).on(STREAM_STATUS.PLAYING, function (stream) {
        ...;
    // Use standard pause control to stop playback
    })video.on(STREAM_STATUS.STOPPEDaddEventListener("pause", function () {
        setStatus(STREAM_STATUS.STOPPED);if (!(document.fullscreenElement || document.mozFullscreenElement)) {
        onStopped();
    }).on(STREAM_STATUS.FAILED, function () {
        ...// Stop stream by standard play/pause control if we're not in fullscreen
    }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) {
        playingStream.stop();
    ...
    });
    stream.play(});
}

Space shortcuts

Page tree

Versions Compared

Old Version 2

New Version Current

Key

Example of a player that is embedded on a web page

Code of the example

Analyzing the code

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 2

New Version Current

Key

Example of a player that is embedded on a web page

Code of the example

Analyzing the code