@flashphoner/websdk 2.0.224 → 2.0.226

package/examples/demo/streaming/embed_player/sample.html

@@ -60,10 +60,6 @@
                                   <label class="check-label" for="MSE"><input id="MSE" type="checkbox" checked/>
                                    MSE</label>
                                 </li>
-                                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
-                                   <label class="check-label" for="WSPlayer"><input id="WSPlayer" type="checkbox" checked/>
-                                  WSPlayer</label>
-                                </li>
                             </ul>
                         </div>
                     </div>

package/examples/demo/streaming/embed_player/utils.js

@@ -0,0 +1,80 @@
+//Set WCS URL
+function setURL() {
+    let proto;
+    let url;
+    let port;
+    if (window.location.protocol == "http:") {
+        proto = "ws://";
+        port = "8080";
+    } else {
+        proto = "wss://";
+        port = "8443";
+    }
+
+    url = proto + window.location.hostname + ":" + port;
+    return url;
+}
+
+function getUrlParam(name) {
+    let url = window.location.href;
+    name = name.replace(/[\[\]]/g, "\\$&");
+    let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
+/**
+ * Resize video object to fit parent div.
+ * Div structure: div WxH -> div wrapper (display) -> video
+ * @param video HTML element from resize event target
+ */
+function resizeVideo(video, width, height) {
+    if (!video.parentNode) {
+        return;
+    }
+    if (video instanceof HTMLCanvasElement) {
+        video.videoWidth = video.width;
+        video.videoHeight = video.height;
+    }
+    let display = video.parentNode;
+    let parentSize = {
+        w: display.parentNode.clientWidth,
+        h: display.parentNode.clientHeight
+    };
+    let newSize;
+    if (width && height) {
+        newSize = downScaleToFitSize(width, height, parentSize.w, parentSize.h);
+    } else {
+        newSize = downScaleToFitSize(video.videoWidth, video.videoHeight, parentSize.w, parentSize.h);
+    }
+    display.style.width = newSize.w + "px";
+    display.style.height = newSize.h + "px";
+
+    //vertical align
+    let margin = 0;
+    if (parentSize.h - newSize.h > 1) {
+        margin = Math.floor((parentSize.h - newSize.h) / 2);
+    }
+    display.style.margin = margin + "px auto";
+    console.log("Resize from " + video.videoWidth + "x" + video.videoHeight + " to " + display.offsetWidth + "x" + display.offsetHeight);
+}
+
+
+function downScaleToFitSize(videoWidth, videoHeight, dstWidth, dstHeight) {
+    let newWidth, newHeight;
+    let videoRatio = videoWidth / videoHeight;
+    let dstRatio = dstWidth / dstHeight;
+    if (dstRatio > videoRatio) {
+        newHeight = dstHeight;
+        newWidth = Math.floor(videoRatio * dstHeight);
+    } else {
+        newWidth = dstWidth;
+        newHeight = Math.floor(dstWidth / videoRatio);
+    }
+    return {
+        w: newWidth,
+        h: newHeight
+    };
+}

package/examples/demo/streaming/player/player.js

@@ -53,16 +53,19 @@ function init_page() {
         }
     }).slider("disable");
     onStopped();
+    if (Browser.isSafari()) {
+        // Enable video controls for fullscreen mode to work in Safari 16
+        useVideoControls = true;
+        $("#fullScreen").hide();
+        if (Browser.isiOS()) {
+            $("#volume").hide();
+        }
+    }
     if (autoplay) {
         // We can start autoplay with muted audio only, so set volume slider to 0 #WCS-2425
         $("#volumeControl").slider('value', 0);
         $("#playBtn").click();
     }
-    // Enable video controls for fullscreen mode to work in Safari 16
-    if (Browser.isSafariWebRTC() && Browser.version() > 13) {
-        useVideoControls = true;
-        $("#fullScreen").hide();
-    }
 }
 
 function onStarted(stream) {
@@ -93,7 +96,7 @@ function playBtnClick() {
         $("#streamName").prop('disabled', true);
         if (Flashphoner.getMediaProviders()[0] === "WSPlayer") {
             Flashphoner.playFirstSound();
-        } else if (Browser.isSafariWebRTC() || Flashphoner.getMediaProviders()[0] === "MSE") {
+        } else if (Browser.isSafari()) {
             Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL, useVideoControls).then(function() {
                 start();
             }).catch(function () {
@@ -108,6 +111,7 @@ function playBtnClick() {
 function start() {
     var url = $('#url').val();
     //check if we already have session
+    $("#preloader").show();
     if (Flashphoner.getSessions().length > 0) {
         var session = Flashphoner.getSessions()[0];
         if (session.getServerUrl() == url) {
@@ -141,7 +145,6 @@ function playStream(session) {
     var options = {
         name: streamName,
         display: remoteVideo,
-        flashShowFullScreenButton: true,
         useControls: useVideoControls
     };
     if (Flashphoner.getMediaProviders()[0] === "MSE" && mseCutByIFrameOnly) {
@@ -160,7 +163,6 @@ function playStream(session) {
         options.unmutePlayOnStart = false;
     }
     stream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) {
-        $("#preloader").show();
         var video = document.getElementById(stream.id());
         if (!video.hasListeners) {
             video.hasListeners = true;
@@ -194,17 +196,25 @@ function playStream(session) {
                     needRestart = true;
                 });                
             }
+            // Hide preloader when playing video
+            video.addEventListener("playing", function () {
+                $("#preloader").hide();
+            });
         }
     }).on(STREAM_STATUS.PLAYING, function (stream) {
-        $("#preloader").hide();
+        // Android Firefox may pause stream playback via MSE even if video element is muted
+        if (Flashphoner.getMediaProviders()[0] == "MSE" && autoplay && Browser.isAndroidFirefox()) {
+            let video = document.getElementById(stream.id());
+            if (video && video.paused) {
+                video.play();
+            }
+        }
         setStatus(stream.status());
         onStarted(stream);
     }).on(STREAM_STATUS.STOPPED, function () {
-        $("#preloader").hide();
         setStatus(STREAM_STATUS.STOPPED);
         onStopped();
     }).on(STREAM_STATUS.FAILED, function(stream) {
-        $("#preloader").hide();
         setStatus(STREAM_STATUS.FAILED, stream);
         onStopped();
     }).on(STREAM_EVENT, function(streamEvent){

package/examples/demo/streaming/screen-sharing/screen-sharing.js

@@ -6,6 +6,8 @@ var remoteVideo;
 var extensionId = "nlbaajplpmleofphigmgaifhoikjmbkg";
 var extensionNotInstalled;
 
+var askExtension = getUrlParam("askExtension") || false;
+
 function init_page() {
     //init api
     try {
@@ -29,20 +31,22 @@ function init_page() {
 
     } else if (Browser.isChrome() && !Browser.isAndroid() && !Browser.isiOS()) {
         interval = setInterval(function() {
-            chrome.runtime.sendMessage(extensionId, {type: "isInstalled"}, function (response) {
-                if (chrome.runtime.lastError) {         //WCS-2369 - cacth runtime.lastError
-                    (inIframe()) ? $("#installFromMarket").show() : $("#installExtensionButton").show();
-                    clearInterval(interval);
-                    onExtensionAvailable();
-                    $('#woChromeExtension').prop('checked', true);
-                    $('#woChromeExtension').prop('disabled', true);
-                    extensionNotInstalled = true;
-                } else {
-                    $("#extension").hide();
+            try {
+                chrome.runtime.sendMessage(extensionId, {type: "isInstalled"}, function (response) {
+                    if (chrome.runtime.lastError) {         //WCS-2369 - catch runtime.lastError
+                        onExtensionNotFound();
+                    } else {
+                        $("#extension").hide();
+                        onExtensionAvailable();
+                    }
                     clearInterval(interval);
-                    onExtensionAvailable();
-                }
-            });
+                });
+            } catch (e) {
+                // Catch chrome.runtime.sendMessage undefined exception #WCS-3638
+                console.log("Can't detect screen sharing extension: "+e);
+                onExtensionNotFound();
+                clearInterval(interval);
+            }
         }, 500);
     } else if(isSafariMacOS()) {
         $("#extension").hide();
@@ -84,6 +88,22 @@ function isSafariMacOS() {
     return Browser.isSafari() && !Browser.isAndroid() && !Browser.isiOS();
 }
 
+function onExtensionNotFound() {
+    if (askExtension === true) {
+        if (inIframe()) {
+            $("#installFromMarket").show();
+        } else {
+            $("#installExtensionButton").show();
+        }
+    } else {
+        $("#extension").hide();
+    }
+    onExtensionAvailable();
+    $('#woChromeExtension').prop('checked', true);
+    $('#woChromeExtension').prop('disabled', true);
+    extensionNotInstalled = true;
+}
+
 function onExtensionAvailable() {
     localVideo = document.getElementById("localVideo");
     remoteVideo = document.getElementById("remoteVideo");