@flashphoner/websdk 2.0.246 → 2.0.248

package/docTemplate/README.md

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

package/examples/demo/streaming/media_devices_manager/manager.js

@@ -140,6 +140,12 @@ function init_page() {
         $("#notifyFlash").text("Failed to get media devices");
     });
 
+    if (Browser.isiOS() && Browser.isSafariWebRTC()) {
+        document.addEventListener('visibilitychange', () => {
+            onVisibilityChanged();
+        });
+    }
+
     $("#urlServer").val(setURL());
     var streamName = createUUID(4);
     $("#publishStream").val(streamName);
@@ -217,6 +223,7 @@ function onPublishing(stream) {
     }).prop('disabled', false);
     $("#switchBtn").text("Switch").off('click').click(function () {
         stream.switchCam().then(function(id) {
+            console.log("Switched by button to camera " + id);
             $('#videoInput option:selected').prop('selected', false);
             $("#videoInput option[value='"+ id +"']").prop('selected', true);
         }).catch(function(e) {
@@ -272,6 +279,21 @@ function onDisconnected() {
     onStopped();
 }
 
+function onVisibilityChanged() {
+    if (Browser.isiOS() && Browser.isSafariWebRTC() && document.hidden !== undefined) {
+        // iOS Safari may change camera when rising from the background, use chosen one explicitly
+        if (publishStream && !document.hidden) {
+            publishStream.switchCam($('#videoInput').val()).then(function(id) {
+                console.log("Switched explicitly to camera " + id);
+                $('#videoInput option:selected').prop('selected', false);
+                $("#videoInput option[value='"+ id +"']").prop('selected', true);
+            }).catch(function(e) {
+                console.log("Error " + e);
+            });
+        }
+    }
+}
+
 function connect() {
     var url = $('#urlServer').val();
     var tm = parseInt($('#timeout').val());
@@ -433,6 +455,7 @@ function publish() {
         stripCodecs: strippedCodecs,
         videoContentHint: contentHint
     }).on(STREAM_STATUS.PUBLISHING, function (stream) {
+        publishConnectionQualityStat.connectionQualityUpdateTimestamp = new Date().valueOf();
         $("#testBtn").prop('disabled', true);
         var video = document.getElementById(stream.id());
         //resize local if resolution is available
@@ -891,33 +914,39 @@ function readyControls() {
 function loadPublishStats() {
     if (publishStream) {
         publishStream.getStats(function (stats) {
-            if (stats && stats.outboundStream) {
-                if (stats.outboundStream.video) {
-                    showStat(stats.outboundStream.video, "outVideoStat");
-                    let vBitrate = (stats.outboundStream.video.bytesSent - videoBytesSent) * 8;
-                    if ($('#outVideoStatBitrate').length == 0) {
-                        let html = "<div>Bitrate: " + "<span id='outVideoStatBitrate' style='font-weight: normal'>" + vBitrate + "</span>" + "</div>";
-                        $("#outVideoStat").append(html);
-                    } else {
-                        $('#outVideoStatBitrate').text(vBitrate);
-                    }
-                    videoBytesSent = stats.outboundStream.video.bytesSent;
+            if (stats) {
+                if (stats.outboundStream) {
+                    if (stats.outboundStream.video) {
+                        showStat(stats.outboundStream.video, "outVideoStat");
+                        let vBitrate = (stats.outboundStream.video.bytesSent - videoBytesSent) * 8;
+                        if ($('#outVideoStatBitrate').length == 0) {
+                            let html = "<div>Bitrate: " + "<span id='outVideoStatBitrate' style='font-weight: normal'>" + vBitrate + "</span>" + "</div>";
+                            $("#outVideoStat").append(html);
+                        } else {
+                            $('#outVideoStatBitrate').text(vBitrate);
+                        }
+                        videoBytesSent = stats.outboundStream.video.bytesSent;
 
-                    if(new Date().valueOf() - CONNECTION_QUALITY_UPDATE_TIMEOUT_MS > publishConnectionQualityStat.connectionQualityUpdateTimestamp) {
-                        publishConnectionQualityStat.quality = CONNECTION_QUALITY.UNKNOWN;
+                        if(new Date().valueOf() - CONNECTION_QUALITY_UPDATE_TIMEOUT_MS > publishConnectionQualityStat.connectionQualityUpdateTimestamp) {
+                            publishConnectionQualityStat.quality = CONNECTION_QUALITY.UNKNOWN;
+                        }
                     }
-                }
 
-                if (stats.outboundStream.audio) {
-                    showStat(stats.outboundStream.audio, "outAudioStat");
-                    let aBitrate = (stats.outboundStream.audio.bytesSent - audioBytesSent) * 8;
-                    if ($('#outAudioStatBitrate').length == 0) {
-                        let html = "<div>Bitrate: " + "<span id='outAudioStatBitrate' style='font-weight: normal'>" + aBitrate + "</span>" + "</div>";
-                        $("#outAudioStat").append(html);
-                    } else {
-                        $('#outAudioStatBitrate').text(aBitrate);
+                    if (stats.outboundStream.audio) {
+                        showStat(stats.outboundStream.audio, "outAudioStat");
+                        let aBitrate = (stats.outboundStream.audio.bytesSent - audioBytesSent) * 8;
+                        if ($('#outAudioStatBitrate').length == 0) {
+                            let html = "<div>Bitrate: " + "<span id='outAudioStatBitrate' style='font-weight: normal'>" + aBitrate + "</span>" + "</div>";
+                            $("#outAudioStat").append(html);
+                        } else {
+                            $('#outAudioStatBitrate').text(aBitrate);
+                        }
+                        audioBytesSent = stats.outboundStream.audio.bytesSent;
                     }
-                    audioBytesSent = stats.outboundStream.audio.bytesSent;
+
+                }
+                if (stats.otherStats) {
+                    showStat(stats.otherStats, "outConnectionStat");
                 }
             }
             if (publishConnectionQualityStat.quality !== undefined) {
@@ -931,47 +960,52 @@ function loadPublishStats() {
 function loadPlayStats() {
     if (previewStream) {
         previewStream.getStats(function (stats) {
-            if (stats && stats.inboundStream) {
-                if (stats.inboundStream.video) {
-                    showStat(stats.inboundStream.video, "inVideoStat");
-                    let vBitrate = (stats.inboundStream.video.bytesReceived - videoBytesReceived) * 8;
-                    if ($('#inVideoStatBitrate').length == 0) {
-                        let html = "<div>Bitrate: " + "<span id='inVideoStatBitrate' style='font-weight: normal'>" + vBitrate + "</span>" + "</div>";
-                        $("#inVideoStat").append(html);
-                    } else {
-                        $('#inVideoStatBitrate').text(vBitrate);
-                    }
-                    videoBytesReceived = stats.inboundStream.video.bytesReceived;
+            if (stats) {
+                if (stats.inboundStream) {
+                    if (stats.inboundStream.video) {
+                        showStat(stats.inboundStream.video, "inVideoStat");
+                        let vBitrate = (stats.inboundStream.video.bytesReceived - videoBytesReceived) * 8;
+                        if ($('#inVideoStatBitrate').length == 0) {
+                            let html = "<div>Bitrate: " + "<span id='inVideoStatBitrate' style='font-weight: normal'>" + vBitrate + "</span>" + "</div>";
+                            $("#inVideoStat").append(html);
+                        } else {
+                            $('#inVideoStatBitrate').text(vBitrate);
+                        }
+                        videoBytesReceived = stats.inboundStream.video.bytesReceived;
 
-                    if(new Date().valueOf() - CONNECTION_QUALITY_UPDATE_TIMEOUT_MS > playConnectionQualityStat.connectionQualityUpdateTimestamp) {
-                        playConnectionQualityStat.quality = CONNECTION_QUALITY.UNKNOWN;
+                        if (new Date().valueOf() - CONNECTION_QUALITY_UPDATE_TIMEOUT_MS > playConnectionQualityStat.connectionQualityUpdateTimestamp) {
+                            playConnectionQualityStat.quality = CONNECTION_QUALITY.UNKNOWN;
+                        }
                     }
-                }
 
-                if (stats.inboundStream.audio) {
-                    if (stats.inboundStream.audio.audioLevel) {
-                        // Round audio level to 6 decimal places
-                        stats.inboundStream.audio.audioLevel = stats.inboundStream.audio.audioLevel.toFixed(6);
-                    }
-                    showStat(stats.inboundStream.audio, "inAudioStat");
-                    let aBitrate = (stats.inboundStream.audio.bytesReceived - audioBytesReceived) * 8;
-                    if ($('#inAudioStatBitrate').length == 0) {
-                        let html = "<div style='font-weight: bold'>Bitrate: " + "<span id='inAudioStatBitrate' style='font-weight: normal'>" + aBitrate + "</span>" + "</div>";
-                        $("#inAudioStat").append(html);
-                    } else {
-                        $('#inAudioStatBitrate').text(aBitrate);
+                    if (stats.inboundStream.audio) {
+                        if (stats.inboundStream.audio.audioLevel) {
+                            // Round audio level to 6 decimal places
+                            stats.inboundStream.audio.audioLevel = stats.inboundStream.audio.audioLevel.toFixed(6);
+                        }
+                        showStat(stats.inboundStream.audio, "inAudioStat");
+                        let aBitrate = (stats.inboundStream.audio.bytesReceived - audioBytesReceived) * 8;
+                        if ($('#inAudioStatBitrate').length == 0) {
+                            let html = "<div style='font-weight: bold'>Bitrate: " + "<span id='inAudioStatBitrate' style='font-weight: normal'>" + aBitrate + "</span>" + "</div>";
+                            $("#inAudioStat").append(html);
+                        } else {
+                            $('#inAudioStatBitrate').text(aBitrate);
+                        }
+                        audioBytesReceived = stats.inboundStream.audio.bytesReceived;
                     }
-                    audioBytesReceived = stats.inboundStream.audio.bytesReceived;
                 }
-                if (playConnectionQualityStat.quality !== undefined) {
-                    showStat({"quality": playConnectionQualityStat.quality}, "inConnectionStat");
+                if (stats.otherStats) {
+                    showStat(stats.otherStats, "inConnectionStat");
                 }
             }
+            if (playConnectionQualityStat.quality !== undefined) {
+                showStat({"quality": playConnectionQualityStat.quality}, "inConnectionStat");
+            }
         });
     }
 }
 
-// Helper funcltion to display stats
+// Helper function to display stats
 function showStat(stat, type) {
     Object.keys(stat).forEach(function(key) {
         if (typeof stat[key] !== 'object') {

package/examples/demo/streaming/media_devices_manager/media_device_manager.html

@@ -29,12 +29,12 @@
     </div>
     <div class="row">
         <h2 id="notifyFlash" class="text-danger"></h2>
-        <div class="col-sm-2" style="width: auto">
-            <label id="outVideoStat">Video stats</label>
-            <div></div>
-            <label id="outAudioStat">Audio stats</label>
-            <div></div>
-            <label id="outConnectionStat">Connection</label>
+        <div class="col-sm-2">
+                <label id="outVideoStat">Video stats</label>
+                <div></div>
+                <label id="outAudioStat">Audio stats</label>
+                <div></div>
+                <label id="outConnectionStat">Connection</label>
         </div>
         <div class="col-sm-4">
             <div class="text-center text-muted">Local</div>
@@ -68,16 +68,16 @@
                 <div id="playStatus"></div>
             </div>
         </div>
-        <div class="col-sm-2" style="width: auto">
-            <label id="inVideoStat">Video stats</label>
-            <div></div>
-            <label id="inAudioStat">Audio stats</label>
-            <div></div>
-            <label id="inConnectionStat">Connection</label>
+        <div class="col-sm-2">
+                <label id="inVideoStat">Video stats</label>
+                <div></div>
+                <label id="inAudioStat">Audio stats</label>
+                <div></div>
+                <label id="inConnectionStat">Connection</label>
         </div>
     </div>
     <div class="row row-space">
-        <div class="col-sm-4 col-sm-offset-3">
+        <div class="col-sm-4 col-sm-offset-4">
             <div id="connectionForm" class="input-group form-group">
                 <input class="form-control" id="urlServer" type="text">
                 <div class="input-group-btn">
@@ -98,7 +98,7 @@
     </div>
     <div class="row">
         <form id="form" class="form-horizontal" role="form" style="margin-top: 10px; margin-left: 10px">
-            <div class="col-sm-4 col-sm-offset-1">
+            <div class="col-sm-4 col-sm-offset-2">
                 <div class="form-group" id="sendAudioGroup">
                     <div class="form-group">
                         <label class="col-sm-2 control-label"></label>

package/examples/demo/streaming/screen-camera-mixer/screen-camera-mixer.html

@@ -82,6 +82,8 @@
                     <div id="screenName"></div>
                     <div id="screenStatus"></div>
                     <div id="screenInfo"></div>
+                    <div id="screenBitrate"></div>
+                    <div id="screenAvailableBitrate"></div>
                 </div>
             </div>
             <div class="col-sm-6 text-center">
@@ -93,6 +95,8 @@
                     <div id="cameraName"></div>
                     <div id="cameraStatus"></div>
                     <div id="cameraInfo"></div>
+                    <div id="cameraBitrate"></div>
+                    <div id="cameraAvailableBitrate"></div>
                 </div>
             </div>
             <div class="row row-space text-center" style="margin-top: 20px">

package/examples/demo/streaming/screen-camera-mixer/screen-camera-mixer.js

@@ -1,8 +1,11 @@
 const SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
 const STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
 const Browser = Flashphoner.Browser;
+const STAT_INTERVAL = 1000;
 let localVideoScreen;
 let localVideoCamera;
+let screenStats;
+let cameraStats;
 
 const init_page =  function() {
     //init api
@@ -61,6 +64,12 @@ const onStarted = function(cameraStream) {
 }
 
 const onStopped = function(session) {
+    if (cameraStats) {
+        cameraStats.stop();
+    }
+    if (screenStats) {
+        screenStats.stop();
+    }
     setPublishButton("Start", session, null);
     $("#connectBtn").prop('disabled', false);
 }
@@ -152,6 +161,7 @@ const startStreamingScreen = function(session) {
             resizeVideo(event.target);
         });
         setStatus("screen", STREAM_STATUS.PUBLISHING, screenStream);
+        screenStats = StreamStats("screen", screenStream, STAT_INTERVAL);
         startStreamingCamera(session, screenStream);
     }).on(STREAM_STATUS.UNPUBLISHED, function() {
         setStatus("screen", STREAM_STATUS.UNPUBLISHED);
@@ -175,6 +185,7 @@ const startStreamingCamera = function(session, screenStream) {
             resizeVideo(event.target);
         });
         setStatus("camera", STREAM_STATUS.PUBLISHING, cameraStream);
+        cameraStats = StreamStats("camera", cameraStream, STAT_INTERVAL);
         onStarted(cameraStream);
     }).on(STREAM_STATUS.UNPUBLISHED, function() {
         setStatus("camera", STREAM_STATUS.UNPUBLISHED);
@@ -188,7 +199,6 @@ const startStreamingCamera = function(session, screenStream) {
     }).publish();
 }
 
-//show connection or local stream status
 const setStatus = function(type, status, stream) {
     let nameField = $("#"+type+"Name");
     let statusField = $("#"+type+"Status");
@@ -211,6 +221,24 @@ const setStatus = function(type, status, stream) {
     }
 }
 
+const setBitrate = function(type, bitrate) {
+    let bitrateField = $("#" + type + "Bitrate");
+    let text = bitrate;
+    if (bitrate !== "") {
+        text = "Bitrate: " + bitrate;
+    }
+    bitrateField.text(text);
+}
+
+const setAvailableBitrate = function(type, bitrate) {
+    let bitrateField = $("#" + type + "AvailableBitrate");
+    let text = bitrate;
+    if (bitrate !== "") {
+        text = "Available bitrate: " + bitrate;
+    }
+    bitrateField.text(text);
+}
+
 const muteInputs = function() {
     $(":input").each(function() {
        $(this).prop('disabled',true);
@@ -250,7 +278,7 @@ const removeHighlight = function(input) {
     input.closest('.form-group').removeClass("has-error");
 }
 
-function getStreamName(type, url) {
+const getStreamName = function(type, url) {
     let streamName = url.endsWith('/') === false ? url.split('/')[3] : "";
     if (streamName) {
         streamName += "-" + type;
@@ -262,4 +290,44 @@ function getStreamName(type, url) {
         }
     }
     return streamName;
+}
+
+const StreamStats = function(type, stream, interval) {
+    const streamStats = {
+        type: type,
+        timer: null,
+        stream: stream,
+        bytesSent: 0,
+        start: function(interval) {
+            if (!streamStats.timer) {
+                streamStats.timer = setInterval(streamStats.displayStats, interval);
+            }
+        },
+        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;
 }