Web SDK 2.0 - RU
Space shortcuts
Page tree

Versions Compared

Old Version 4

changes.mady.by.user Flashphoner

Saved on

compared with

New Version 5

changes.mady.by.user admin

Saved on

Key

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

...

Code Block
languagejs
themeRDark
connection = Flashphoner.roomApi.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();...
});


4. Присоединение к конференции.

...

Code Block
languagejs
themeRDark
connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
    var participants = room.getParticipants();
    console.log("Current number of participants in the room: " + participants.length);
    if (participants.length >= _participants) {
        console.warn("Current room is full");
        $("#failedInfo").text("Current room is full.");
        room.leave().then(onLeft, onLeft);
        return false;
    }
    setInviteAddress(room.name());
    if (participants.length > 0) {
        var chatState = "participants: ";
        for (var i = 0; i < participants.length; i++) {
            installParticipant(participants[i]);
            chatState += participants[i].name();
         if (i != participants.length - 1) {
            chatState += ",";
         }
     }
         addMessage("chat", chatState);
     } else {
         addMessage("chat", " room is empty");
     }
     publishLocalMedia(room);
     onJoined(room);
}).on(ROOM_EVENT.JOINED, function(participant){
     installParticipant(participant);
     addMessage(participant.name(), "joined");
}).on(ROOM_EVENT.LEFT, function(participant){
     //remove participant
     removeParticipant(participant);
     addMessage(participant.name(), "left");
}).on(ROOM_EVENT.PUBLISHED, function(participant){
     playParticipantsStream(participant);
}).on(ROOM_EVENT.FAILED, function(room, info){
     connection.disconnect();
     $('#failedInfo').text(info);
}).on(ROOM_EVENT.MESSAGE, function(message){
     addMessage(message.from.name(), message.text);
});

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

RoomStatusEvent STATE код

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

  • определяется количество участников конференции с помощью метода room.getParticipants(), который возвращает массив объектов participant,
  • если к конференции уже присоединилось максимально допустимое количество участников, производится выход из "комнаты" при помощи room.leave()
  • если количество участников меньше максимально допустимого, начинается публикация видеопотока
Code Block
languagejs
themeRDark
connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
    var participants = room.getParticipants();
    console.log("Current number of participants in the room: " + participants.length);
    if (participants.length >= _participants) {
        console.warn("Current room is full");
        $("#failedInfo").text("Current room is full.");
        room.leave().then(onLeft, onLeft);
        return false;
    }
    setInviteAddress(room.name());
    if (participants.length > 0) {
        var chatState = "participants: ";
        for (var i = 0; i < participants.length; i++) {
            installParticipant(participants[i]);
            chatState += participants[i].name();
         if (i != participants.length - 1) {
            chatState += ",";
         }
     }
         addMessage("chat", chatState);
     } else {
         addMessage("chat", " room is empty");
     }
     publishLocalMedia(room);
     onJoined(room);
}).on(ROOM_EVENT.JOINED, function(participant){
     installParticipant(participant);
     addMessage(participant.name(), "joined");
}).on(ROOM_EVENT.LEFT, function(participant){
     //remove participant
     removeParticipant(participant);
     addMessage(participant.name(), "left");
}).on(ROOM_EVENT.PUBLISHED, function(participant){
     playParticipantsStream(participant);
}).on(ROOM_EVENT.FAILED, function(room, info){
     connection.disconnect();
     $('#failedInfo').text(info);
}).on(ROOM_EVENT.MESSAGE, function(message){
     addMessage(message.from.name(), message.text);
});

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

room.publish() код

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

Code Block
languagejs
themeRDark
room.publish(document.getElementById("localDisplay")).on(STREAM_STATUS.FAILED, function (stream) {
    console.warn("Local stream failed!");
    setStatus("#localStatus", stream.status());
    onMediaStopped(room);
}).on(STREAM_STATUS.PUBLISHING, function (stream) {
    setStatus("#localStatus", stream.status());
    onMediaPublished(stream);
}).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
    setStatus("#localStatus", stream.status());
    onMediaStopped(room);
});

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

RoomStatusEvent JOINED код

Code Block
languagejs
themeRDark
connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
    var participants = room.getParticipants();
    console.log("Current number of participants in the room: " + participants.length);
    if (participants.length >= _participants) {
        console.warn("Current room is full");
        $("#failedInfo").text("Current room is full.");
        room.leave().then(onLeft, onLeft);
        return false;
    }
    setInviteAddress(room.name());
    if (participants.length > 0) {
        var chatState = "participants: ";
        for (var i = 0; i < participants.length; i++) {
            installParticipant(participants[i]);
            chatState += participants[i].name();
         if (i != participants.length - 1) {
            chatState += ",";
         }
     }
         addMessage("chat", chatState);
     } else {
         addMessage("chat", " room is empty");
     }
     publishLocalMedia(room);
     onJoined(room);
}).on(ROOM_EVENT.JOINED, function(participant){
     installParticipant(participant);
     addMessage(participant.name(), "joined");
}).on(ROOM_EVENT.LEFT, function(participant){
     //remove participant
     removeParticipant(participant);
     addMessage(participant.name(), "left");
}).on(ROOM_EVENT.PUBLISHED, function(participant){
     playParticipantsStream(participant);
}).on(ROOM_EVENT.FAILED, function(room, info){
     connection.disconnect();
     $('#failedInfo').text(info);
}).on(ROOM_EVENT.MESSAGE, function(message){
     addMessage(message.from.name(), message.text);
});

...

RoomStatusEvent PUBLISHED код

Code Block
languagejs
themeRDark
connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
    var participants = room.getParticipants();
    console.log("Current number of participants in the room: " + participants.length);
    if (participants.length >= _participants) {
        console.warn("Current room is full");
        $("#failedInfo").text("Current room is full.");
        room.leave().then(onLeft, onLeft);
        return false;
    }
    setInviteAddress(room.name());
    if (participants.length > 0) {
        var chatState = "participants: ";
        for (var i = 0; i < participants.length; i++) {
            installParticipant(participants[i]);
            chatState += participants[i].name();
         if (i != participants.length - 1) {
            chatState += ",";
         }
     }
         addMessage("chat", chatState);
     } else {
         addMessage("chat", " room is empty...
});


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

RoomStatusEvent STATE код

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

  • определяется количество участников конференции с помощью метода room.getParticipants(), который возвращает массив объектов participant,
  • если к конференции уже присоединилось максимально допустимое количество участников, производится выход из "комнаты" при помощи room.leave()
  • если количество участников меньше максимально допустимого, начинается публикация видеопотока
Code Block
languagejs
themeRDark
connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
    var participants = room.getParticipants();
    console.log("Current number of participants in the room: " + participants.length);
    if (participants.length >= _participants) {
        console.warn("Current room is full");
        $("#failedInfo").text("Current room is full.");
     }
     publishLocalMedia(room);
     onJoined(room);
}).on(ROOM_EVENT.JOINED, function(participant){room.leave().then(onLeft, onLeft);
     installParticipant(participant)   return false;
    }
    addMessagesetInviteAddress(participantroom.name(), "joined");
}).on(ROOM_EVENT.LEFT, function(participant){
    if (participants.length > 0) {
      //remove participant
 var chatState =  removeParticipant(participant)"participants: ";
        for addMessage(participant.name(), "left");
}).on(ROOM_EVENT.PUBLISHED, function(participant)(var i = 0; i < participants.length; i++) {
     playParticipantsStream(participant);
}).on(ROOM_EVENT.FAILED, function(room, info){
     connection.disconnect(installParticipant(participants[i]);
     $('#failedInfo').text(info);
}).on(ROOM_EVENT.MESSAGE, function(message){
        addMessage(message.from.name(), message.text);
});

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

participant.play() код

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

Code Block
languagejs
themeRDark
function playParticipantsStream(participant) {
    if (participant.play) {
chatState += participants[i].name();
         if (i != participants.length - 1) {
            chatState += ",";
         }
     }
         $addMessage("[id$=Name]").each(function (index, value)chat", chatState);
     } else {
         addMessage("chat", " room if ($(value).text() == participant.name()) {is empty");
     }
     publishLocalMedia(room);
       onJoined(room);
}).on(ROOM_EVENT.JOINED, function(participant){
    var p = value.id.replace('Name', ''); ...
}).on(ROOM_EVENT.LEFT, function(participant){
     ...
}).on(ROOM_EVENT.PUBLISHED, function(participant){
          var pDisplay = p + 'Display';
                participant.play(document.getElementById(pDisplay)).on(STREAM_STATUS.PLAYING, function (playingStream) {
                    document.getElementById(playingStream.id()).addEventListener('resize', function (event...
}).on(ROOM_EVENT.FAILED, function(room, info){
     ...
}).on(ROOM_EVENT.MESSAGE, function(message){
     ...
});


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

room.publish() код

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

Code Block
languagejs
themeRDark
room.publish(document.getElementById("localDisplay")).on(STREAM_STATUS.FAILED, function (stream) {
                        resizeVideo(event.target);
                    });
                });
            }
        }console.warn("Local stream failed!");
    setStatus("#localStatus", stream.status());
    onMediaStopped(room);
}).on(STREAM_STATUS.PUBLISHING, function (stream) {
    setStatus("#localStatus", stream.status());
    onMediaPublished(stream);
}).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
    setStatus("#localStatus", stream.status());
    }onMediaStopped(room);
});

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


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

RoomStatusEvent JOINED код

Code Block
languagejs
themeRDark
function onMediaPublished(stream) connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
    $("#localStopBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true); ...
}).on(ROOM_EVENT.JOINED, function(participant){
     installParticipant(participant);
     addMessage(participant.name(), "joined");
}).on(ROOM_EVENT.LEFT, function(participant){
        stream.stop();...
}).on(ROOM_EVENT.PUBLISHED, function(participant){
     ...
}).prop('disabled', false);
.on(ROOM_EVENT.FAILED, function(room, info){
     $("#localAudioToggle").text("Mute A").off('click').click(function(...
}).on(ROOM_EVENT.MESSAGE, function(message){
        if (stream.isAudioMuted()) ...
});


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

RoomStatusEvent PUBLISHED код

Code Block
languagejs
themeRDark
connection.join({name: getRoomName()}).on(ROOM_EVENT.STATE, function(room){
            $(this).text("Mute A");...
}).on(ROOM_EVENT.JOINED, function(participant){
            stream.unmuteAudio();
        } else ...
}).on(ROOM_EVENT.LEFT, function(participant){
            $(this).text("Unmute A");...
}).on(ROOM_EVENT.PUBLISHED, function(participant){
     playParticipantsStream(participant);
}).on(ROOM_EVENT.FAILED,       stream.muteAudio();function(room, info){
        }
    ...
}).prop('disabled', false);
on(ROOM_EVENT.MESSAGE, function(message){
     $("#localVideoToggle").text("Mute V").off('click').click(function() {
        if (stream.isVideoMuted()) {
  ...
});


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

participant.play() код

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

Code Block
languagejs
themeRDark
function playParticipantsStream(participant) {
    if (participant.play) {
          $(this"[id$=Name]").text("Mute V");
each(function (index, value) {
            if ($(value).text() == streamparticipant.unmuteVideoname()); {
        } else {
      var p     $(this).text("Unmute V");
   = value.id.replace('Name', '');
         stream.muteVideo();
       var }
pDisplay = p + }).prop('disabled',false);
}

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

StreamStatusEvent UNPUBLISHED код

Code Block
languagejs
themeRDark
room.publish'Display';
                participant.play(document.getElementById("localDisplay"pDisplay)).on(STREAM_STATUS.FAILEDPLAYING, function (streamplayingStream) {
        console.warn("Local stream failed!");
    setStatus("#localStatus", stream.status());
      onMediaStopped(room);
}).on(STREAM_STATUS.PUBLISHINGdocument.getElementById(playingStream.id()).addEventListener('resize', function (streamevent) {
       setStatus("#localStatus", stream.status());
           onMediaPublished(stream);
}).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
    setStatus("#localStatus", stream.status());
resizeVideo(event.target);
                    onMediaStopped(room});
});

12. Выход из комнаты конференции.

room.leave() код

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


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

stream.stop() код

Code Block
languagejs
themeRDark
function onMediaPublished(stream) {
    $('#sendMessageBtn'("#localStopBtn").text("Stop").off('click').click(function(){
        var message = field('message');(function(){
        addMessage$(connectionthis).usernameprop()'disabled', messagetrue);
        $('#message').val(""stream.stop();
    }).prop('disabled', false);
   //broadcast message
        var participants = room.getParticipants();
        for (var i = 0; i < participants.length; i++ ...
}


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

StreamStatusEvent UNPUBLISHED код

Code Block
languagejs
themeRDark
room.publish(document.getElementById("localDisplay")).on(STREAM_STATUS.FAILED, function (stream) {
    ...
}).on(STREAM_STATUS.PUBLISHING, function (stream) {
     participants[i].sendMessage(message);...
}).on(STREAM_STATUS.UNPUBLISHED, function(stream) {
    setStatus("#localStatus", stream.status());
   }
    }).prop('disabled',false); onMediaStopped(room);
});


12. Выход из комнаты конференции.

room.leave() код

Code Block
languagejs
themeRDark
function onJoined(room) {
    $('#failedInfo'"#joinBtn").text("Leave");
}

13. Включение/выключение аудио и видео для публикуемого потока. line 187, line 196

stream.isAudioMuted(), stream.isVideoMuted(), stream.muteAudio(), stream.unmuteAudio(), stream.muteVideo(), stream.unmuteVideo() код

Code Block
languagejs
themeRDark
function onMediaPublished(stream) {
    $("#localStopBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        stream.stop();
    }).prop('disabled', false);.off('click').click(function(){
        $(this).prop('disabled', true);
        room.leave().then(onLeft, onLeft);
    }).prop('disabled', false);
    ...
}


13. Включение/выключение аудио и видео для публикуемого потока. line 187, line 196

stream.isAudioMuted(), stream.isVideoMuted(), stream.muteAudio(), stream.unmuteAudio(), stream.muteVideo(), stream.unmuteVideo() код

Code Block
languagejs
themeRDark
function onMediaPublished(stream) {
    ...
    $("#localAudioToggle").text("Mute A").off('click').click(function(){
        if (stream.isAudioMuted()) {
            $(this).text("Mute A");
            stream.unmuteAudio();
        } else {
            $(this).text("Unmute A");
            stream.muteAudio();
        }
    }).prop('disabled', false);
    $("#localVideoToggle").text("Mute V").off('click').click(function() {
        if (stream.isVideoMuted()) {
            $(this).text("Mute V");
            stream.unmuteVideo();
        } else {
            $(this).text("Unmute V");
            stream.muteVideo();
        }
    }).prop('disabled',false);
}

...