Versions Compared

Key

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

...

Для Chrome ссылка на расширение указывается прямо в файле screen-sharing.html line 17

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

...

1. Инициализация API с указанием идентификатора расширения для Chrome браузера.

Flashphoner.init() code

Code Block
languagejs
themeRDark
Flashphoner.init({screenSharingExtensionId: extensionId});

...

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. Настройка параметров публикации

разрешение и fps code

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

использование микрофона code

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

тип источника видео и возможность публикации в Chrome без расширения code

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

источник медиа в браузере Firefox 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

При получении данного события запускается проигрывание превью в отдельном элементе на странице при помощи session.createStream() и play()

...

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. Остановка воспроизведения видеопотока.

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

При получении этого события останавливается публикация потока при помощи publishStream.stop()

...

10. Остановка публикации видеопотока по кнопке расширения Chrome

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();