Websocket URL WCS сервера

Image RemovedImage Added

Код примера

Код данного примера находится на WCS-сервере по следующему пути:

...

Для разбора кода возьмем версию файла screen-camera-mixer.js с хешем 32144d942b55d1, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.243247.

1. Инициализация API.

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

}

...

STREAM_STATUS.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

Методу createStream() передаются следующие параметры:

...

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

STREAM_STATUS.PUBLISHING code

По этому событию начинается начинаются сбор статистики WebRTC для публикации экрана и публикация потока с камеры

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

Методу createStream() передаются следующие параметры:

...

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

STREAM_STATUS.PUBLISHING code

По этому событию начинаются сбор статистики WebRTC для публикации камеры

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. Остановка публикации камерыСбор и отображение WebRTC статистики

Stream.stopgetStats(), stats.outboundStream.video.bytesSent, stats.otherStats.availableOutgoingBitrate code

...

Отображаются следующие параметры:

текущий битрейт публикации
максимально возможный битрейт публикации для потока с заданными параметрами, по оценке браузера

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. Остановка публикации экрана

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

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. Остановка публикации экрана

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. Остановка сбора статистики WebRTC

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 4

New Version Current

Key

Код примера

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 4

New Version Current

Key

Код примера