Page History

...

• Server url - Websocket URL WCS сервера
• Stream name - имя потока
• h, s, m Auto, 240p send, 480p send, 720p send - кнопки переключения принимаемого качества по именам профилей из файла /usr/local/FlashphonerWebCallServer/conf/wcs_sfu_bridge_profiles.yml 

Image RemovedImage Added

Обратите внимание, что аудио дорожка проигрывается в отдельном элементе

...

Для работы с исходным кодом примера возьмем версию файла player.js, доступную здесь

1. Локальные переменные

Объявление локальных переменных для работы с константами, SFU SDK, для отображения видео и работы с конфигурацией клиента

code

const constants = SFU.constants;
const sfu = SFU;
const PRELOADER_URL="../commons/media/silence.mp3";
const playStatus = "playStatus";
const playErrorInfo = "playErrorInfo";

...

Хранит данные Websocket сессии, WebRTC соединения, SFU комнаты и объекта для отображения аудио и видео

code

const CurrentState = function() {
    let state = {
        pc: null,
        session: null,
        room: null,
        remoteDisplaydisplay: null,
        roomEnded: false,
        set: function(pc, session, room) {
            state.pc = pc;
            state.session = session;
            state.room = room;
            state.roomEnded = false;
        },
        clear: function() {
            state.room = null;
            state.session = null;
            state.pc = null;
            state.roomEnded = false;
        },
        setRoomEnded: function() {
            state.roomEnded = true;
        },
        isRoomEnded: function() {
            return state.roomEnded;
        },
        isConnected: function() {
            return (state.session && state.session.state() === constants.SFU_STATE.CONNECTED);
        },
        isActive: function() {
            return (state.room && !state.roomEnded && state.pc);
        },
        setDisplay: function (display) {
            state.remoteDisplaydisplay = display;
        },
        disposeDisplay: function () {
            if (state.remoteDisplaydisplay) {
                state.remoteDisplaydisplay.stop();
                state.remoteDisplaydisplay = null;
            }
        }
    };
    return state;
}

3. Инициализация

init() code

Функция init() вызывается после того, как страница загрузится:

...

RTCPeerConnection(), SFU.createRoom() code

Функция connect() вызывается по нажатию кнопки Play:

...

5. Запуск проигрывания при установке соединения

onConnected() code

Функция onConnected():

• настраивает действия по нажатию кнопки Stop
• подписывается на событие SFU_ROOM_EVENT.PARTICIPANT_LIST для проверки, опубликован ли поток в SFU комнате
• подписывается на события об ошибках комнаты
• вызывает функцию проигрывания

...

initRemoteDisplay(), SFURoom.join() code

Функция playStreams():

• инициализирует базовый элемент для отображения входящих медиа потоков
• настраивает параметры отображения информации о входящих потоках
• настраивает ABR для переключения между доступными качествами видео при изменении параметров канала
• настраивает WebRTC соедиение в SFU комнате

const playStreams = async function (state) {
    try {
        // Create remote display item to show remote streams
        const display = initRemoteDisplay(state.setDisplay(initRemoteDisplay({
    room, document.getElementById("remoteVideo"), {quality:true, autoAbr: true}, {thresholds: [
        div: document.getElementById("remoteVideo"),
   {parameter:         room: state.room"nackCount", maxLeap: 10},
        {parameter:    peerConnection: state.pc"freezeCount", maxLeap: 10},
        {parameter:    displayOptions"packetsLost", maxLeap: {10}
    ],            publisher: false,
                quality: true,
                type: false,
                abr: true,
                abrKeepOnGoodQuality: 20000,
                abrTryForUpperQuality: 30000
            }abrKeepOnGoodQuality: ABR_KEEP_ON_QUALITY, abrTryForUpperQuality: ABR_TRY_UPPER_QUALITY, interval: ABR_QUALITY_CHECK_PERIOD},createDefaultMeetingController, createDefaultMeetingModel, createDefaultMeetingView, oneToOneParticipantFactory(remoteTrackProvider(state.room)));
        })state.setDisplay(display);
        // Start WebRTC negotiation
        await state.room.join(state.pc, null, null, 1);
    } catch(e) {
        if (e.type === constants.SFU_ROOM_EVENT.OPERATION_FAILED) {
            onOperationFailed(state, e);
        } else {
            console.error("Failed to play streams: " + e);
            setStatus(playErrorInfo, e.name, "red");
            onStopClick(state);
        }
    }

}

...

CurrentState.disposeDisplay() code

const stopStreams = function(state) {
    state.disposeDisplay();
}

...

onStartClick(), playFirstSound(), connect() code

Функция onStartClick():

• проверяет правильность заполнения полей ввода
• перед стартом воспроизведения, в браузере Safari  вызывает функцию playFirstSound() для автоматического проигрывания аудио
• вызывает функцию connect()

...

onStopClick(), Session.disconnect() code

Функция onStopClick():

• останавливает публикацию или воспроизведение
• разрывает Websocket сессию

...

10. Действия при разрыве Websocket сессии

onDisconnected() code

Функция onDisconnected():

...