Page History

...

To analyze the code let's take a screen-camera-mixer.js version with hash 32144d9 42b55d1, which is available here and may be downloaded in build 2.0.243247.

1. API initialization.

Flashphoner.init() code

Code Block

language	js
theme	RDark

Flashphoner.init();

...

Flashphoner.createSession() code

Code Block

language	js
theme	RDark

const connect = function() {
    ...
    let url = field("url");
    ...
    console.log("Create new session with url " + url);
    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
        ...
    }).on(SESSION_STATUS.DISCONNECTED, function(){
        ...
    }).on(SESSION_STATUS.FAILED, function(){
        ...
    });

}

3. Receiving the event confirming successful connection

STREAM_STATUS.ESTABLISHED ESTABLISHED code

Code Block

language	js
theme	RDark

const connect = function() {
    ...
    let url = field("url");
    ...
    console.log("Create new session with url " + url);
    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
        //session connected, start streaming
        setStatus("screen", SESSION_STATUS.ESTABLISHED);
        setStatus("camera", SESSION_STATUS.ESTABLISHED);
        onConnected(session);
    }).on(SESSION_STATUS.DISCONNECTED, function(){
        ...
    }).on(SESSION_STATUS.FAILED, function(){
        ...
    });

}

...

Session.createStream(), Stream.publish() code

The following parameters are passed to createStream() method:

...

5. Receiving the event confirming successful screen publishing

STREAM_STATUS.PUBLISHING code

Web Screen sharing stream WebRTC statistics collection and web camera stream publishing starts start on this event

Code Block

language	js
theme	RDark

const startStreamingScreen = function(session) {
    ...
    session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(screenStream) {
        /*
         * User can stop sharing screen capture using Chrome "stop" button.
         * Catch onended video track event and stop publishing.
         */
        document.getElementById(screenStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            screenStream.stop();
        };
        document.getElementById(screenStream.id()).addEventListener('resize', function(event){
            resizeVideo(event.target);
        });
        setStatus("screen", STREAM_STATUS.PUBLISHING, screenStream);
        screenStats = StreamStats("screen", screenStream, STAT_INTERVAL);
        startStreamingCamera(session, screenStream);
    }).on(STREAM_STATUS.UNPUBLISHED, function() {
        ...
    }).on(STREAM_STATUS.FAILED, function(stream) {
        ...
    }).publish();
}

...

Session.createStream(), Stream.publish() code

The following parameters are passed to createStream() method:

...

7. Receiving the event confirming successful camera publishing

STREAM_STATUS.PUBLISHING code

Web camera stream WebRTC statistics collection starts on this event

Code Block

language	js
theme	RDark

const startStreamingCamera = function(session, screenStream) {
    ...
    session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(cameraStream) {
        document.getElementById(cameraStream.id()).addEventListener('resize', function(event){
            resizeVideo(event.target);
        });
        setStatus("camera", STREAM_STATUS.PUBLISHING, cameraStream);
        cameraStats = StreamStats("camera", cameraStream, STAT_INTERVAL);
        onStarted(cameraStream);
    }).on(STREAM_STATUS.UNPUBLISHED, function() {
        ...
    }).on(STREAM_STATUS.FAILED, function(stream) {
        ...
    }).publish();
}

8. Stop camera publishingWebRTC statistics collection and displaying

Stream.stopgetStats() code

...

, stats.outboundStream.video.bytesSent, stats.otherStats.availableOutgoingBitrate code

The following parameters are displayed:

current publishing bitrate
maximum available bitrate for the stream estimated by browser

Code Block

language	js
theme	RDark

const setPublishButtonStreamStats = function(actiontype, sessionstream, cameraStreaminterval) {
     $("#publishBtn").text(action).off('click').click(function()const streamStats = {
        if (action == "Start") {type: type,
        timer: null,
        stream: stream,
   ...
     bytesSent: 0,
    } else if (action === "Stop" start: function(interval) {
            $(this).prop('disabled', true);
if (!streamStats.timer) {
              cameraStream.stop(  streamStats.timer = setInterval(streamStats.displayStats, interval);
            }
     }).prop('disabled', false);
}

9. Stop screen publishing

Stream.stop() code

Code Block

language	js
theme	RDark

const startStreamingCamera = function(session, screenStream) {
    ...
    session.createStream(options   },
        stop: function() {
            if (streamStats.timer) {
                clearInterval(streamStats.timer);
                streamStats.timer = null;
            }
            setBitrate(streamStats.type, "");
            setAvailableBitrate(streamStats.type, "");
        },
        displayStats: function() {
            if (streamStats.stream) {
                streamStats.stream.getStats((stats) => {
                    if (stats) {
                        if (stats.outboundStream && stats.outboundStream.video) {
                            let vBitrate = (stats.outboundStream.video.bytesSent - streamStats.bytesSent) * 8;
                            setBitrate(streamStats.type, vBitrate);
                            streamStats.bytesSent = stats.outboundStream.video.bytesSent;
                        }
                        if (stats.otherStats && stats.otherStats.availableOutgoingBitrate !== undefined) {
                            setAvailableBitrate(streamStats.type, stats.otherStats.availableOutgoingBitrate);
                        }
                    }
                });
            }
        }
    };
    streamStats.start(interval);
    return streamStats;
}

9. Stop camera publishing

Stream.stop() code

Code Block

language	js
theme	RDark

const setPublishButton = function(action, session, cameraStream) {
    $("#publishBtn").text(action).off('click').click(function(){
        if (action == "Start") {
            ...
        } else if (action === "Stop") {
            $(this).prop('disabled', true);
            cameraStream.stop();
        }
    }).prop('disabled', false);
}

10. Stop screen publishing

Stream.stop() code

Code Block

language	js
theme	RDark

const startStreamingCamera = function(session, screenStream) {
    ...
    session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(cameraStream) {
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function() {
        setStatus("camera", STREAM_STATUS.UNPUBLISHED);
        screenStream.stop();
    }).on(STREAM_STATUS.PUBLISHINGFAILED, function(cameraStreamstream) {
        ...
    }).on(STREAM_STATUS.UNPUBLISHED,publish();
}

11. Stop WebRTC statistics collection

code

Code Block

language	js
theme	RDark

const onStopped = function(session) {
       if setStatus("camera", STREAM_STATUS.UNPUBLISHED);(cameraStats) {
        screenStreamcameraStats.stop();
    }).on(STREAM_STATUS.FAILED, function(stream
    if (screenStats) {
        ...screenStats.stop();
    }).publish();
    ...
}

Space shortcuts

Page tree

Versions Compared

Old Version 5

New Version Current

Key