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