Versions Compared

Key

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

...

Для разбора кода возьмем версию файла video-chat-and-screen-sharing.js с хешем 35a4234456b1c7, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.177201.

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

Flashphoner.init() code

Code Block
languagejs
themeRDark
    try {
        Flashphoner.init();
    } catch(e) {
        $("#notifyFlash").text("Your browser doesn't support WebRTC technology needed for this example");
        return;
    }

2. Подключение к серверу.

Flashphoner.roomApiRoomApi.connect() code

Code Block
languagejs
themeRDark
    connection = Flashphoner.roomApiRoomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.FAILED, function(session){
        setStatus('#status', session.status());
        onLeft();
    }).on(SESSION_STATUS.DISCONNECTED, function(session) {
        setStatus('#status', session.status());
        onLeft();
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        setStatus('#status', session.status());
        joinRoom();
    });

...

ConnectionStatusEvent ESTABLISHED code

Code Block
languagejs
themeRDark
    connection = Flashphoner.roomApiRoomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.FAILED, function(session){
        ...
    }).on(SESSION_STATUS.DISCONNECTED, function(session) {
        ...
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        setStatus('#status', session.status());
        joinRoom();
    });

4. Присоединение к комнате.

connection.join() code

При присоединении передается имя "комнаты" конференции (берется из параметра в URL страницы клиента, или генерируется случайное имя).

...

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

RoomStatusEvent STATE STATE code

При получении данного события:

...


6. Публикация видеопотока с экрана.

room.publish() code

При публикации передаются параметры:

...

Code Block
languagejs
themeRDark
    var constraints = {
        video: {
            width: parseInt($('#width').val()),
            height: parseInt($('#height').val()),
            frameRate: parseInt($('#fps').val()),
            withoutExtension: true
        },
        audio: $("#useMic").prop('checked')
    };
    constraints.video.type = "screen";
    if (Browser.isFirefox()){
        constraints.video.mediaSource = "screen";
    }
    var  room.publish(options = {
        name: "screenShare",
        display: document.getElementById("preview"),
        constraints: constraints,
        name: "screenShare",cacheLocalResources: false
    }
    if (isSafariMacOS()) {
        cacheLocalResources: false options.disableConstraintsNormalization = true;
    }
    room.publish(options).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    });

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

RoomStatusEvent JOINED code

Code Block
languagejs
themeRDark
    connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
        ...
    }).on(ROOM_EVENT.JOINED, function(participant){
        installParticipant(participant);
        addMessage(participant.name(), "joined");
    }).on(ROOM_EVENT.LEFT, function(participant){
        ...
    }).on(ROOM_EVENT.PUBLISHED, function(participant){
        ...
    }).on(ROOM_EVENT.FAILED, function(room, info){
        ...
    }).on(ROOM_EVENT.MESSAGE, function(message){
        ...
    });

...

RoomStatusEvent PUBLISHED code

Code Block
languagejs
themeRDark
    connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
        ...
    }).on(ROOM_EVENT.JOINED, function(participant){
        ...
    }).on(ROOM_EVENT.LEFT, function(participant){
        ...
    }).on(ROOM_EVENT.PUBLISHED, function(participant){
        playParticipantsStream(participant);
    }).on(ROOM_EVENT.FAILED, function(room, info){
        ...
    }).on(ROOM_EVENT.MESSAGE, function(message){
        ...
    });


9. Воспроизведение видеопотока от другого участника

participant.play() code

Параметром передается div-элемент, в котором будет отображаться видео, в зависимости от источника - веб-камера или экран

...

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

stream.stop() code

Code Block
languagejs
themeRDark
    room.publish(options).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
        /*
         * User can stop sharing screen capture using Chrome "stop" button.
         * Catch onended video track event and stop publishing.
         */
        document.getElementById(stream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
            stream.stop();
        };
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
        ...
    });

...

StreamStatusEvent UNPUBLISHED code

Code Block
languagejs
themeRDark
    room.publish(options).on(STREAM_STATUS.FAILED, function (stream) {
        ...
    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
        ...
    }).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
        onStopSharing();
    });

12. Выход из комнаты чата.

room.leave() code

Code Block
languagejs
themeRDark
function onJoined(room) {
    $("#joinBtn").text("Leave").off('click').click(function(){
        $(this).prop('disabled', true);
        room.leave().then(onLeft, onLeft);
    }).prop('disabled', false);
    ...
}