@flashphoner/websdk 2.0.210 → 2.0.215

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-Web SDK - 2.0.210
+Web SDK - 2.0.215
 
 [Download builds](https://docs.flashphoner.com/display/WEBSDK2EN/Web+SDK+release+notes)
 

package/examples/demo/streaming/conference/conference.html

@@ -66,6 +66,11 @@
                 <div class="text-center" style="margin-top: 20px">
                     <div id="participant1Status"></div>
                 </div>
+                <div class="input-group text-center" style="margin: 5px auto 0 auto;">
+                    <button id="participant1Btn" type="button" class="btn btn-default">Play</button>
+                    <button id="participant1AudioBtn" type="button" class="btn btn-default">Audio</button>
+                    <div id="participant1AudioState"></div>
+                </div>
             </div>
 
             <div class="col-sm-6">
@@ -76,6 +81,11 @@
                 <div class="text-center" style="margin-top: 20px">
                     <div id="participant2Status"></div>
                 </div>
+                <div class="input-group text-center" style="margin: 5px auto 0 auto;">
+                    <button id="participant2Btn" type="button" class="btn btn-default">Play</button>
+                    <button id="participant2AudioBtn" type="button" class="btn btn-default">Audio</button>
+                    <div id="participant2AudioState"></div>
+                </div>
             </div>
 
         </div>

package/examples/demo/streaming/conference/conference.js

@@ -5,6 +5,7 @@ var ROOM_EVENT = RoomApi.events;
 var PRELOADER_URL = "../../dependencies/media/preloader.mp4";
 var Browser = Flashphoner.Browser;
 var connection;
+var participantStateList;
 
 //initialize interface
 function init_page() {
@@ -21,6 +22,7 @@ function init_page() {
         $("#notifyFlash").text("Your browser doesn't support WebRTC technology needed for this example");
         return;
     }
+    participantStateList = new ParticipantLocalStateList();
     $("#url").val(setURL());
     onLeft();
 }
@@ -47,6 +49,10 @@ function onLeft() {
     $("[id$=Name]").not(":contains('NONE')").each(function(index,value) {
         $(value).text('NONE');
     });
+    participantStateList.clean();
+    for (var i = 0; i < _participants; i++) {
+        resetParticipantButtons("participant" + i);
+    };
     $("#joinBtn").text("Join").off('click').click(function(){
         if (validateForm()) {
             $(this).prop('disabled', true);
@@ -75,14 +81,6 @@ function start() {
             return;
         }
     }
-    if (Browser.isSafariWebRTC()) {
-        for (var i = 1; i < _participants; i++){
-            Flashphoner.playFirstVideo(document.getElementById("participant" + i + "Display"), false, PRELOADER_URL).then(function() {
-                createConnection(url, username);
-            });
-            return;
-        }
-    }
     createConnection(url, username);
 }
 
@@ -123,14 +121,7 @@ function joinRoom() {
         } else {
             addMessage("chat", " room is empty");
         }
-        if (Browser.isSafariWebRTC()) {
-            Flashphoner.playFirstVideo(document.getElementById("localDisplay"), true, PRELOADER_URL).then(function() {
-                publishLocalMedia(room);
-                onJoined(room);
-            });
-            return;
-        }
-        publishLocalMedia(room);
+        publishLocalStream(room);
         onJoined(room);
     }).on(ROOM_EVENT.JOINED, function(participant){
         installParticipant(participant);
@@ -162,38 +153,131 @@ function installParticipant(participant) {
     if (($("[id$=Name]").not(":contains('NONE')").length + 1) == _participants) {
         console.warn("More than " + _participants + " participants, ignore participant " + participant.name());
     } else {
-        var p = $("[id$=Name]:contains('NONE')")[0].id.replace('Name','');
-        var pName = '#' + p + 'Name';
-        var pDisplay = p + 'Display';
+        var pBase = $("[id$=Name]:contains('NONE')")[0].id.replace('Name','');
+        var pName = '#' + pBase + 'Name';
         $(pName).text(participant.name());
+        participantStateList.add(participant, pBase);
         playParticipantsStream(participant);
     }
 }
 
 function removeParticipant(participant) {
-    $("[id$=Name]").each(function(index,value) {
-       if ($(value).text() == participant.name()) {
-           $(value).text('NONE');
-       }
-    });
+    var participantState = participantStateList.getState(participant);
+    if (participantState) {
+        participantStateList.remove(participant);
+        $(participantState.getName()).text('NONE');
+        resetParticipantButtons(participantState.getBaseId());
+    } else {
+        console.log("Cannot remove " + participant.name() + " from participants list: not found");
+    }
 }
 
 function playParticipantsStream(participant) {
-    if (participant.getStreams().length > 0) {
-        $("[id$=Name]").each(function (index, value) {
-            if ($(value).text() == participant.name()) {
-                var p = value.id.replace('Name', '');
-                var pDisplay = p + 'Display';
-                participant.getStreams()[0].play(document.getElementById(pDisplay)).on(STREAM_STATUS.PLAYING, function (playingStream) {
-                    document.getElementById(playingStream.id()).addEventListener('resize', function (event) {
-                        resizeVideo(event.target);
-                    });
-                });
+    var participantState = participantStateList.getState(participant);
+    if (participantState && participant.getStreams().length > 0) {
+        var pDisplay = participantState.getDisplay();
+        if (Browser.isSafariWebRTC()) {
+            Flashphoner.playFirstVideo(pDisplay, false, PRELOADER_URL).then(function() {
+                playStream(participant, pDisplay);
+            }).catch(function (error) {
+                // Low Power Mode detected, user action is needed to start playback in this mode #WCS-2639
+                console.log("Can't atomatically play participant" + participant.name() + " stream, use Play button");
+                for (var i = 0; i < pDisplay.children.length; i++) {
+                    if (pDisplay.children[i]) {
+                        console.log("remove cached instance id " + pDisplay.children[i].id);
+                        pDisplay.removeChild(pDisplay.children[i]);
+                    }
+                }
+                onParticipantStopped(participant);
+            });
+        } else {
+            playStream(participant, pDisplay);
+        }
+    } else {
+        console.log("Cannot play participant " + participant.name() + " stream: participant not found");
+    }
+}
+
+function playStream(participant, display) {
+    var participantState = participantStateList.getState(participant);
+    if (participantState) {
+        var playBtn = participantState.getPlayButton();
+        var audioBtn = participantState.getAudioButton();
+        var options = {
+            unmutePlayOnStart: true,
+            constraints: {
+                audio: {
+                    deviceId: 'default'
+                }
+            }
+        };
+        // Leave participant stream muted in Android Edge browser #WCS-3445
+        if (Browser.isChromiumEdge() && Browser.isAndroid()) {
+            options.unmutePlayOnStart = false;
+        }
+        participant.getStreams()[0].play(display, options).on(STREAM_STATUS.PLAYING, function (playingStream) {
+            var video = document.getElementById(playingStream.id())
+            video.addEventListener('resize', function (event) {
+                resizeVideo(event.target);
+            });
+            // Set up participant Stop/Play button
+            if (playBtn) {
+                $(playBtn).text("Stop").off('click').click(function() {
+                    $(this).prop('disabled', true);
+                    playingStream.stop();
+                }).prop('disabled', false);
             }
+            // Set up participant audio toggle button #WCS-3445
+            if (audioBtn) {
+                $(audioBtn).text("Audio").off('click').click(function() {
+                    if (playingStream.isRemoteAudioMuted()) {
+                        playingStream.unmuteRemoteAudio();
+                    } else {
+                        playingStream.muteRemoteAudio();
+                    }
+                }).prop('disabled', false);
+            }
+            // Start participant audio state checking timer #WCS-3445
+            participantState.startMutedCheck(playingStream);
+        }).on(STREAM_STATUS.STOPPED, function () {
+            onParticipantStopped(participant);
+        }).on(STREAM_STATUS.FAILED, function () {
+            onParticipantStopped(participant);
         });
+    } else {
+        console.log("Cannot play stream: participant " + participant.name() + " not found");
+    }
+}
+
+function onParticipantStopped(participant) {
+    var participantState = participantStateList.getState(participant);
+    if (participantState) {
+        var playBtn = participantState.getPlayButton();
+        var audioBtn = participantState.getAudioButton();
+        var audioState = participantState.getAudioState();
+        if (playBtn) {
+            $(playBtn).text("Play").off('click').click(function() {
+                playParticipantsStream(participant);
+            }).prop('disabled', false);
+        }
+        if (audioBtn) {
+            $(audioBtn).text("Audio").off('click').prop('disabled', true);
+        }
+        if (audioState) {
+            participantState.stopMutedCheck();
+            $(audioState).text("");
+        }
+    } else {
+        console.log("Cannot perfom onStopped actions: " + participant.name() + " not found");
     }
 }
 
+function resetParticipantButtons(id) {
+    $("#" + id + 'Btn').text("Play").off('click').prop('disabled', true);
+    $("#" + id + 'AudioBtn').text("Audio").off('click').prop('disabled', true);
+    $("#" + id + 'AudioState').text("");
+}
+
 function getRoomName() {
     var name = getUrlParam("roomName");
     if (name && name !== '') {
@@ -239,7 +323,7 @@ function onMediaPublished(stream) {
 function onMediaStopped(room) {
     $("#localStopBtn").text("Publish").off('click').click(function(){
         $(this).prop('disabled', true);
-        publishLocalMedia(room);
+        publishLocalStream(room);
     }).prop('disabled', (connection.getRooms().length == 0));
     $("#localAudioToggle").prop("disabled", true);
     $("#localVideoToggle").prop("disabled", true);
@@ -274,6 +358,26 @@ function publishLocalMedia(room) {
     });
 }
 
+function publishLocalStream(room) {
+    if (Browser.isSafariWebRTC()) {
+        var display = document.getElementById("localDisplay");
+        Flashphoner.playFirstVideo(display, true, PRELOADER_URL).then(function() {
+            publishLocalMedia(room);
+        }).catch(function (error) {
+            console.log("Can't atomatically publish local stream, use Publish button");
+            for (var i = 0; i < display.children.length; i++) {
+                if (display.children[i]) {
+                    console.log("remove cached instance id " + display.children[i].id);
+                    display.removeChild(display.children[i]);
+                }
+            }
+            onMediaStopped(room);
+        });
+    } else {
+        publishLocalMedia(room);
+    }
+}
+
 function muteConnectInputs() {
     $(':text').each(function(){
         $(this).prop('disabled', true);
@@ -317,3 +421,100 @@ function setStatus(selector, status) {
         statusField.attr("class","text-danger");
     }
 }
+
+// Object to store local state to display participant #WCS-3445
+function ParticipantLocalState(participant, id) {
+    var state = {
+        participant: participant,
+        baseId: id,
+        audioTimer: null,
+        getBaseId: function() {
+            return state.baseId;
+        },
+        getName: function() {
+            return document.getElementById(state.baseId + 'Name');
+        },
+        getDisplay: function() {
+            return document.getElementById(state.baseId + 'Display');
+        },
+        getPlayButton: function() {
+            return document.getElementById(state.baseId + 'Btn');
+        },
+        getAudioButton: function() {
+            return document.getElementById(state.baseId + 'AudioBtn');
+        },
+        getAudioState: function() {
+            return document.getElementById(state.baseId + 'AudioState');
+        },
+        startMutedCheck: function(stream) {
+            var audioState = state.getAudioState();
+            state.stopMutedCheck();
+            state.audioTimer = setInterval(function () {
+                if (stream.isRemoteAudioMuted()) {
+                    $(audioState).text("Muted");
+                } else {
+                    $(audioState).text("Unmuted");
+                }
+            }, 500);
+        },
+        stopMutedCheck: function() {
+            if (state.audioTimer) {
+                clearInterval(state.audioTimer);
+                state.audioTimer = null;
+            }
+        }
+    }
+
+    return state;
+}
+
+// Array object to store local participant states #WCS-3445
+function ParticipantLocalStateList() {
+    var stateList = {
+        list: [],
+        add: function(participant, id) {
+            var state = new ParticipantLocalState(participant, id);
+            stateList.list.push(state);
+        },
+        remove: function(participant) {
+            for (var i = 0; i < stateList.list.length; i++) {
+                if (stateList.list[i].participant && (stateList.list[i].participant.name() === participant.name())) {
+                    stateList.list[i].stopMutedCheck();
+                    stateList.list.splice(i, 1);
+                }
+            }
+        },
+        clean: function() {
+            while (stateList.list.length) {
+                var state = stateList.list.pop();
+                state.stopMutedCheck();
+            }
+        },
+        getState: function(participant) {
+            for (var i = 0; i < stateList.list.length; i++) {
+                if (stateList.list[i].participant && (stateList.list[i].participant.name() === participant.name())) {
+                    return stateList.list[i];
+                }
+            }
+            return null;
+        },
+        startMutedCheck: function(participant, stream) {
+            var item = stateList.getState(participant);
+            if (item) {
+                item.startMutedCheck(stream);
+            } else {
+                console.error("Cannot start muted check timer for participant " + participant);
+            }
+        },
+        stopMutedCheck: function(participant) {
+            var item = stateList.getState(participant);
+            if (item) {
+                item.stopMutedCheck();
+            } else {
+                console.error("Cannot stop muted check timer for participant " + participant);
+            }
+        }
+    }
+
+    return stateList;
+}

package/examples/demo/streaming/video-chat/video-chat.html

@@ -61,6 +61,11 @@
             <div class="text-center" style="margin-top: 20px">
                 <div id="participant1Status"></div>
             </div>
+            <div class="input-group text-center" style="margin: 5px auto 0 auto;">
+                <button id="participant1Btn" type="button" class="btn btn-default">Play</button>
+                <button id="participant1AudioBtn" type="button" class="btn btn-default">Audio</button>
+                <div id="participant1AudioState"></div>
+            </div>
         </div>
 
         <div class="col-sm-7">