@flashphoner/websdk 2.0.223 → 2.0.225

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

@@ -14,6 +14,8 @@ var resolution = getUrlParam("resolution");
 var mediaProvider = getUrlParam("mediaProvider") || null;
 var mseCutByIFrameOnly = getUrlParam("mseCutByIFrameOnly");
 
+var useVideoControls = false;
+
 function init_page() {
 
     //init api
@@ -51,6 +53,14 @@ 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);
@@ -86,8 +96,8 @@ function playBtnClick() {
         $("#streamName").prop('disabled', true);
         if (Flashphoner.getMediaProviders()[0] === "WSPlayer") {
             Flashphoner.playFirstSound();
-        } else if (Browser.isSafariWebRTC() || Flashphoner.getMediaProviders()[0] === "MSE") {
-            Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(function() {
+        } else if (Browser.isSafari()) {
+            Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL, useVideoControls).then(function() {
                 start();
             }).catch(function () {
                 onStopped();
@@ -101,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) {
@@ -134,7 +145,7 @@ function playStream(session) {
     var options = {
         name: streamName,
         display: remoteVideo,
-        flashShowFullScreenButton: true
+        useControls: useVideoControls
     };
     if (Flashphoner.getMediaProviders()[0] === "MSE" && mseCutByIFrameOnly) {
         options.mediaConnectionConstraints = {
@@ -152,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;
@@ -171,17 +181,40 @@ function playStream(session) {
                     }
                 });
             }
+            if (useVideoControls && Browser.isSafariWebRTC()) {
+                // iOS hack when using standard controls to leave fullscreen mode
+                var needRestart = false;
+                video.addEventListener("pause", function () {
+                    if(needRestart) {
+                        console.log("Video paused after fullscreen, continue...");
+                        video.play();
+                        needRestart = false;
+                    }
+                });
+                video.addEventListener("webkitendfullscreen", function () {
+                    video.play();
+                    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){