Versions Compared

Key

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

...

For Chrome, link to the extension is specified directly in file screen-sharing.html html line 17

Code Block
languagejs
themeRDark
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nlbaajplpmleofphigmgaifhoikjmbkg">

...

1. Initialization of the API.

Flashphoner.init() code

Chrome extension ID is passed to the init() method.

...

Flashphoner.createSession() code

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

...

ConnectionStatusEvent ESTABLISHED code

Code Block
languagejs
themeRDark
    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(){
        ...
    });

4. Stream constraints setting

resolution and fps fps code

Code Block
languagejs
themeRDark
    var constraints = {
        video: {
            width: parseInt($('#width').val()),
            height: parseInt($('#height').val()),
            //WCS-2014. fixed window/tab sharing
            frameRate: {max: parseInt($('#fps').val())}
        }
    };

michrophone usage code

Code Block
languagejs
themeRDark
    if ($("#useMic").prop('checked')) {
        constraints.audio = {
            deviceId: $('#audioInput').val()
        };
    }

video source type and Chrome screen sharing without extension code

Code Block
languagejs
themeRDark
    constraints.video.type = "screen";
    if ($("#woChromeExtension").prop('checked')) {
        constraints.video.withoutExtension = true;
    }

Firefox media source code

Code Block
languagejs
themeRDark
    if (Browser.isFirefox()){
        constraints.video.mediaSource = $('#mediaSource').val();
    }

...

session.createStream(), publish() code

Code Block
languagejs
themeRDark
    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
        ...
    }).publish();

...

StreamStatusEvent PUBLISHING code

When the screen sharing stream is published, preview video stream is created with method session.createStream(), and function play() is called to start playback of the stream in <div> element 'remoteVideo'.

...

StreamStatusEvent PLAYING code

Code Block
languagejs
themeRDark
        session.createStream({
            name: streamName,
            display: remoteVideo
        }).on(STREAM_STATUS.PLAYING, function(previewStream){
            document.getElementById(previewStream.id()).addEventListener('resize', function(event){
                resizeVideo(event.target);
            });
            //enable stop button
            onStarted(publishStream, previewStream);
        }).on(STREAM_STATUS.STOPPED, function(){
            ...
        }).on(STREAM_STATUS.FAILED, function(){
            ...
        }).play();

8. Preview stream playback stop

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

...

StreamStatusEvent STOPPED code

On receiving the event, publishStream.stop() is called to stop screen sharing streaming

...

10. Screen sharing streaming stop by click on Chrome extension button

publishStream.stop(). code

Code Block
languagejs
themeRDark
        document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            publishStream.stop();
        };

...

StreamStatusEvent UNPUBLISHED code

Code Block
languagejs
themeRDark
    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        setStatus(STREAM_STATUS.UNPUBLISHED);
        //enable start button
        onStopped();
    }).on(STREAM_STATUS.FAILED, function(){
        ...
    }).publish();