Versions Compared

Key

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

Table of Contents

Video streaming and playback with debug information output example

The example shows the possibility to get debug information while streaming and put it on the web page. The sessionDebugEnabled option in wcs-core.properties file must be set to true to get debug log and corresponding event in session. This requires server to be restarted.

The example of diagnostic information output while stream is published

Image RemovedImage Added

and when streaming is stopped

Image RemovedImage Added

The code of the example

The source code of the example is on WCS server by this path:

...

where host is your WCS server address.

Analyzing the code

To analyze the code get streamget stream-diagnostic.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({
            flashMediaProviderSwfLocation: '../../../../media-provider.swf',
            createMicGainNode: false
        });

2. Connection to the server

Flashphoner.createSession()   code

Every action will be printed to the special page element by function log() call

...

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED ESTABLISHED code

Code Block
languagejs
themeRDark
        session = Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
            //session connected, start streaming
            startStreaming(session);
        }).on(SESSION_STATUS.DISCONNECTED, function(){
            ...
        }).on(SESSION_STATUS.FAILED, function(){
            ...
        }).on(SESSION_STATUS.DEBUG, function(event){
            ...
        });

...

session.startDebug(), session.createStream(), publish()   code

On stream creation these parameters are passed:

  • streamName - the stream name
  • localVideo - <div>-element to display video from web camera.
Code Block
languagejs
themeRDark
    session.startDebug();
    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false
        ...
    }).publish();

5. Receiving the event confirming successful streaming

StreamStatusEvent PUBLISHING PUBLISHING code

On this event, preview stream is created with createStream(), and play() called to play it

...

6. PreviewsStream playback stop

previewStream.stop()   code

Code Block
languagejs
themeRDark
function onStarted(publishStream, previewStream) {
    $("#publishBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        previewStream.stop();
    }).prop('disabled', false);
    $("#downloadDiv").hide();
}

7. Receiving the event confirming successful playback stop

StreamStatusEvent STOPPED STOPPED code

Code Block
languagejs
themeRDark
        session.createStream({
            name: streamName,
            display: remoteVideo
        }).on(STREAM_STATUS.PLAYING, function(previewStream){
            ...
        }).on(STREAM_STATUS.STOPPED, function(){
            log("Stream " + streamName + " " + STREAM_STATUS.STOPPED);
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(stream){
            ...
        }).play();

8. Streaming stop when playback is stopped

publishStream.stop()   code

Code Block
languagejs
themeRDark
        session.createStream({
            name: streamName,
            display: remoteVideo
        }).on(STREAM_STATUS.PLAYING, function(previewStream){
            ...
        }).on(STREAM_STATUS.STOPPED, function(){
            log("Stream " + streamName + " " + STREAM_STATUS.STOPPED);
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(stream){
            ...
        }).play();

9. Receiving the event confirming successful streaming stop

StreamStatusEvent UNPUBLISHED UNPUBLISHED code

Code Block
languagejs
themeRDark
    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        setStatus(STREAM_STATUS.UNPUBLISHED);
        log("Stream " + streamName + " " + STREAM_STATUS.UNPUBLISHED);
        //enable start button
        onStopped();
    }).on(STREAM_STATUS.FAILED, function(stream){
        ...
    }).publish();

10. Debug information output stop when streaming is stopped

session.stopDebug()   code

Code Block
languagejs
themeRDark
function onStopped() {
    ...
    if (session)
        session.stopDebug();
}

11. Receiving the event the end of debugging session

ConnectionStatusEvent DEBUG DEBUG code

On this event, the link to download session log is forming

...

12. Debug information output to the page element

code

Code Block
languagejs
themeRDark
function log(string) {
    document.getElementById("debug").innerHTML += string + '</br>';
}