Page History

...

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

Code Block

language	js
theme	RDark

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

...

Flashphoner.init() код

Code Block

language	js
theme	RDark

Flashphoner.init({screenSharingExtensionId: extensionId});

...

Flashphoner.createSession() код

Code Block

language	js
theme	RDark

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

3. Получение от сервера события, подтверждающего успешное соединение.

ConnectionStatusEvent ESTABLISHED код

Code Block

language	js
theme	RDark

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

4. Публикация видеопотока

...

В параметрах видеопотока на публикацию указывается тип 'screen'.

Code Block

language	js
theme	RDark

 var constraints = {
        video: {
            width: parseInt($('#width').val()),
            height: parseInt($('#height').val()),
            frameRate: parseInt($('#fps').val()),
type: "            type: "screen"
        }
    };
    session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
/*
* User can stop sharing screen    /*
         * User can stop sharing screen capture using Chrome "stop" button.
         * Catch onended video track event and stop publishing.
         */
        document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            publishStream.stop();
};
        };
        document.getElementById(publishStream.id()).addEventListener('resize', function(event){
            resizeVideo(event.target);
        });
        setStatus(STREAM_STATUS.PUBLISHING);
        //play preview
        session.createStream({
name: streamName,
            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(){
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(){
/            //preview failed, stop publishStream
            if (publishStream.status() == STREAM_STATUS.PUBLISHING) {
                setStatus(STREAM_STATUS.FAILED);
                publishStream.stop();
}
}).            }
        }).play();
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        setStatus(STREAM_STATUS.UNPUBLISHED);
        //enable start button
        onStopped();
    }).on(STREAM_STATUS.FAILED, function(){
        setStatus(STREAM_STATUS.FAILED);
//enable  start button
      //enable start button
        onStopped();
    }).publish();

5. Получение от сервера события, подтверждающего успешную публикацию потока

...

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

Code Block

language	js
theme	RDark

  session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
/*
* User can stop sharing     /*
         * User can stop sharing screen capture using Chrome "stop" button.
         * Catch onended video track event and stop publishing.
         */
        document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            publishStream.stop();
};
        };
        document.getElementById(publishStream.id()).addEventListener('resize', function(event){
            resizeVideo(event.target);
        });
        setStatus(STREAM_STATUS.PUBLISHING);
        //play preview
        session.createStream({
name: streamName,
display: remoteVideo
           name: streamName,
            display: remoteVideo
        }).on(STREAM_STATUS.PLAYING, function(previewStream){
            document.getElementById(previewStream.id()).addEventListener('resize', function(event){
resizeVideo(event.target);
});
//enable                 resizeVideo(event.target);
            });
            //enable stop button
            onStarted(publishStream, previewStream);
        }).on(STREAM_STATUS.STOPPED, function(){
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(){
.FAILED, function(){
            //preview failed, stop publishStream
            if (publishStream.status() == STREAM_STATUS.PUBLISHING) {
setStatus(STREAM_STATUS.FAILED);
) {
                setStatus(STREAM_STATUS.FAILED);
                publishStream.stop();
            }
        }).play();
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        setStatus(STREAM_STATUS.UNPUBLISHED);
        //enable start button
        onStopped();

    }).on(STREAM_STATUS.FAILED, function(){
        setStatus(STREAM_STATUS.FAILED);
        //enable start button
        onStopped();
    }).publish();

6. Получение от сервера события, подтверждающего успешное воспроизведение превью-потока

StreamStatusEvent PLAYING код

Code Block

language	js
theme	RDark

     session.createStream({
name: streamName,
            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(){
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(){
FAILED, function(){
            //preview failed, stop publishStream
            if (publishStream.status() == STREAM_STATUS.PUBLISHING) {
                setStatus(STREAM_STATUS.FAILED);
publishStream.stop();
}
                publishStream.stop();
            }
        }).play();

7. Остановка воспроизведения видеопотока.

stream.stop() код

Code Block

language	js
theme	RDark

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

...

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

Code Block

language	js
theme	RDark

   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(){
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(){

            //preview failed, stop publishStream
            if (publishStream.status() == STREAM_STATUS.PUBLISHING) {
                setStatus(STREAM_STATUS.FAILED);
                publishStream.stop();
}
}
            }
        }).play();

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

publishStream.stop(). код

Code Block

language	js
theme	RDark

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

10. Получение от сервера события, подтверждающего успешную остановку публикации потока.

StreamStatusEvent UNPUBLISHED код

Code Block

language	js
theme	RDark

session.createStream({
        name: streamName,
        display: localVideo,
        constraints: constraints
 constraints
    }).on(STREAM_STATUS.PUBLISHING, function(publishStream){
        /*
         * User can stop sharing screen capture using Chrome "stop" button.
         * Catch onended video track event and stop publishing.
         */
        document.getElementById(publishStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            publishStream.stop();

        };
        document.getElementById(publishStream.id()).addEventListener('resize', function(event){
            resizeVideo(event.target);
        });
        setStatus(STREAM_STATUS.PUBLISHING);
        //play preview
        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(){
            publishStream.stop();
        }).on(STREAM_STATUS.FAILED, function(){

            //preview failed, stop publishStream
            if (publishStream.status() == STREAM_STATUS.PUBLISHING) {
                setStatus(STREAM_STATUS.FAILED);
                publishStream.stop();
}
}
            }
        }).play();
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        setStatus(STREAM_STATUS.UNPUBLISHED);
        //enable start button
        onStopped();
    }).on(STREAM_STATUS.FAILED, function(){
        setStatus(STREAM_STATUS.FAILED);
        //enable start button
        onStopped();
    }).publish();

Space shortcuts

Page tree

Versions Compared

Old Version 3

New Version 4

Key