@flashphoner/websdk 2.0.223 → 2.0.224

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flashphoner/websdk",
-  "version": "2.0.223",
+  "version": "2.0.224",
   "description": "Official Flashphoner WebCallServer WebSDK package",
   "main": "./src/flashphoner-core.js",
   "types": "./src/flashphoner-core.d.ts",

package/src/flashphoner-core.js

@@ -819,6 +819,7 @@ var createSession = function (options) {
      * @param {Array<string>=} options.sipSDP Array of custom SDP params (ex. bandwidth (b=))
      * @param {Array<string>=} options.sipHeaders Array of custom SIP headers
      * @param {string=} options.videoContentHint Video content hint for browser ('detail' by default to maintain resolution), {@link Flashphoner.constants.CONTENT_HINT_TYPE}
+     * @param {Boolean=} options.useControls Use a standard HTML5 video controls (play, pause, fullscreen). May be a workaround for fullscreen mode to work in Safari 16
      * @param {Object=} options.logger Call logger options
      * @param {sdpHook} sdpHook The callback that handles sdp from the server
      * @returns {Call} Call
@@ -883,6 +884,7 @@ var createSession = function (options) {
         var sipSDP = options.sipSDP;
         var sipHeaders = options.sipHeaders;
         var videoContentHint = options.videoContentHint;
+        var useControls = options.useControls;
         /**
          * Represents sip call.
          *
@@ -979,6 +981,7 @@ var createSession = function (options) {
                     connectionConfig: mediaOptions,
                     audioOutputId: audioOutputId,
                     videoContentHint: videoContentHint,
+                    useControls: useControls,
                     logger: logger
                 }).then(function (newConnection) {
                     mediaConnection = newConnection;
@@ -1117,7 +1120,8 @@ var createSession = function (options) {
                     login: cConfig.sipLogin,
                     constraints: constraints,
                     connectionConfig: mediaOptions,
-                    audioOutputId: audioOutputId
+                    audioOutputId: audioOutputId,
+                    useControls: useControls
                 }).then(function (newConnection) {
                     mediaConnection = newConnection;
                     return mediaConnection.setRemoteSdp(sdp);
@@ -1595,6 +1599,7 @@ var createSession = function (options) {
      * @param {string=} options.useCanvasMediaStream EXPERIMENTAL: when publish bind browser's media stream to the canvas. It can be useful for image filtering
      * @param {string=} options.videoContentHint Video content hint for browser ('detail' by default to maintain resolution), {@link Flashphoner.constants.CONTENT_HINT_TYPE}
      * @param {Boolean=} options.unmutePlayOnStart Unmute playback on start. May be used after user gesture only, so set 'unmutePlayOnStart: false' for autoplay
+     * @param {Boolean=} options.useControls Use a standard HTML5 video controls (play, pause, fullscreen). May be a workaround for fullscreen mode to work in Safari 16
      * @param {Object=} options.logger Stream logger options
      * @param {sdpHook} sdpHook The callback that handles sdp from the server
      * @returns {Stream} Stream
@@ -1705,6 +1710,7 @@ var createSession = function (options) {
         var useCanvasMediaStream = options.useCanvasMediaStream;
         var videoContentHint = options.videoContentHint;
         var unmutePlayOnStart = options.unmutePlayOnStart;
+        var useControls = options.useControls;
 
         var audioState_;
         var videoState_;
@@ -1890,6 +1896,7 @@ var createSession = function (options) {
                 remoteVideo: remoteVideo,
                 playoutDelay: playoutDelay,
                 unmutePlayOnStart: unmutePlayOnStart,
+                useControls: useControls,
                 logger: logger
             }, streamRefreshHandlers[id_]).then(function (newConnection) {
                 mediaConnection = newConnection;
@@ -1979,6 +1986,7 @@ var createSession = function (options) {
                     connectionConstraints: mediaConnectionConstraints,
                     customStream: constraints && constraints.customStream ? constraints.customStream : false,
                     videoContentHint: videoContentHint,
+                    useControls: useControls,
                     logger: logger
                 }).then(function (newConnection) {
                     mediaConnection = newConnection;

package/src/util.js

@@ -92,7 +92,7 @@ const Browser = {
         return !!window.chrome && /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent);
     },
     isEdge: function () {
-        return !isIE && !!window.StyleMedia;
+        return !this.isIE() && !!window.StyleMedia;
     },
     isOpera: function () {
         return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
@@ -118,6 +118,33 @@ const Browser = {
     },
     isChromiumEdge: function () {
         return /Chrome/i.test(navigator.userAgent) && /Edg/i.test(navigator.userAgent);
+    },
+    version: function () {
+        var version = navigator.userAgent.match(/version\/(\d+)/i);
+        if (version) {
+            return version[1];
+        } else {
+            if (this.isEdge()) {
+                version = /\brv[ :]+(\d+)/g.exec(navigator.userAgent) || [];
+            }
+            if (this.isOpera()) {
+                version = navigator.userAgent.match(/\b(OPR)\/(\d+)/) || [];
+            }
+            if (this.isChromiumEdge()) {
+                version = navigator.userAgent.match(/\b(Edg)\/(\d+)/) || [];
+            }
+            if (this.isSamsungBrowser()) {
+                version = navigator.userAgent.match(/\b(SamsungBrowser)\/(\d+)/) || [];
+            }
+            if (this.isChrome()) {
+                version = navigator.userAgent.match(/\b(Chrome)\/(\d+)/) || [];
+            }
+            if (this.isFirefox()) {
+                version = navigator.userAgent.match(/\b(Firefox)\/(\d+)/) || [];
+            }
+            return version[2] || 0;
+        }
+        return 0;
     }
 };
 
@@ -384,6 +411,16 @@ const getCurrentCodecAndSampleRate = function(sdp, mediaType) {
     return ret;
 };
 
+const isPromise = function(object) {
+    if (object !== null &&
+        typeof object === 'object' &&
+        typeof object.then === 'function' &&
+        typeof object.catch === 'function') {
+        return true;
+    }
+    
+    return false;
+};
 
 module.exports = {
     isEmptyObject,
@@ -394,5 +431,6 @@ module.exports = {
     SDP,
     logger,
     stripCodecs,
-    getCurrentCodecAndSampleRate
+    getCurrentCodecAndSampleRate,
+    isPromise
 };

package/src/webrtc-media-provider.js

@@ -1,4 +1,4 @@
-'use strict';
+-'use strict';
 
 var browserDetails = require('webrtc-adapter').default.browserDetails;
 const { v1: uuid_v1 } = require('uuid');
@@ -59,6 +59,8 @@ var createConnection = function (options) {
         var videoContentHint = options.videoContentHint ? options.videoContentHint : 'detail';
         // Pass the option to unmute automatically (true by default) #WCS-2425
         var unmutePlayOnStart = options.unmutePlayOnStart !== undefined ? options.unmutePlayOnStart : true;
+        // Use a standard HTML5 video controls if needed (to enable fullscreen in Safari 16 for example) #WCS-3606
+        var useControls = options.useControls || false;
 
         if (bidirectional) {
             localVideo = getCacheInstance(localDisplay);
@@ -74,7 +76,7 @@ var createConnection = function (options) {
             }
             remoteVideo = getCacheInstance(remoteDisplay);
             if (!remoteVideo) {
-                remoteVideo = createVideoElement();
+                remoteVideo = createVideoElement(useControls);
                 remoteDisplay.appendChild(remoteVideo);
             }
             remoteVideo.id = id + "-remote";
@@ -95,7 +97,7 @@ var createConnection = function (options) {
                     if (cachedVideo) {
                         remoteVideo = cachedVideo;
                     } else {
-                        remoteVideo = createVideoElement();
+                        remoteVideo = createVideoElement(useControls);
                         display.appendChild(remoteVideo);
                     }
                     remoteVideo.id = id;
@@ -113,9 +115,18 @@ var createConnection = function (options) {
                     setContentHint(localVideo.srcObject, videoContentHint);
                     connection.addStream(localVideo.srcObject);
                 }
+            } else {
+                // There is a custom video element, get its id if set #WCS-3606
+                if (remoteVideo.id) {
+                    id = remoteVideo.id;
+                }
             }
         }
         if (localVideo) {
+            // Enable local video controls if option requires #WCS-3606
+            if (useControls) {
+                enableVideoControls(localVideo);
+            }
             var videoTrack = localVideo.srcObject.getVideoTracks()[0];
             if (videoTrack) {
                 videoCams.forEach((cam, index) => {
@@ -133,6 +144,12 @@ var createConnection = function (options) {
                 });
             }
         }
+        if (remoteVideo) {
+            // Enable remote video  controls if option requires #WCS-3606
+            if (useControls) {
+                enableVideoControls(remoteVideo);
+            }
+        }
         function setContentHint(stream, hint) {
             stream.getVideoTracks().forEach(function(track) {
                 if(track.contentHint === undefined) {
@@ -480,7 +497,13 @@ var createConnection = function (options) {
                 if (!document.fullscreenElement && !document.mozFullScreenElement &&
                     !document.webkitFullscreenElement && !document.msFullscreenElement) {
                     if (video.requestFullscreen) {
-                        video.requestFullscreen();
+                        var result = video.requestFullscreen();
+                        // Chromium based browsers return a promise which is rejected although user click is present #WCS-3606
+                        if (util.isPromise(result)) {
+                            result.catch(function(e) {
+                                logger.debug(LOG_PREFIX, e);
+                            });
+                        }
                     } else if (video.msRequestFullscreen) {
                         video.msRequestFullscreen();
                     } else if (video.mozRequestFullScreen) {
@@ -489,10 +512,18 @@ var createConnection = function (options) {
                         video.webkitRequestFullscreen();
                     } else if (video.webkitEnterFullscreen) {
                         video.webkitEnterFullscreen();
-                        //hack for iOS safari. Video is getting paused when switching from fullscreen to normal mode.
+                        // iOS (all versions)/MacOS (since 15) Safari hack: video is paused when leaving fullscreen mode #WCS-3606
+                        var needRestart = false;
                         video.addEventListener("pause", function () {
-                            video.play();
+                            if(needRestart) {
+                                video.play();
+                                needRestart = false;
+                            }
                         });
+                        video.addEventListener("webkitendfullscreen", function () {
+                            video.play();
+                            needRestart = true;
+                        });                
                     }
                 } else {
                     if (document.exitFullscreen) {
@@ -868,7 +899,9 @@ var loadOrdinaryVideo = function(display, stream, screenShare, constraints, vide
         vEl = createVideoElement();
         display.appendChild(vEl);
     }
-    vEl.id = uuid_v1() + LOCAL_CACHED_VIDEO;
+    if (!vEl.id) {
+        vEl.id = uuid_v1() + LOCAL_CACHED_VIDEO;
+    }
     vEl.srcObject = stream;
     vEl.onloadedmetadata = function (e) {
         //WCS-2751 Add screen capture using getDisplayMedia in Safari
@@ -896,7 +929,9 @@ var loadCanvasVideo = function (display, stream, video) {
             vEl = canvas;
         }
     }
-    vEl.id = uuid_v1() + LOCAL_CACHED_VIDEO;
+    if (!vEl.id) {
+        vEl.id = uuid_v1() + LOCAL_CACHED_VIDEO;
+    }
 
     let child = vEl.children[0];
     child.srcObject = stream;
@@ -1203,13 +1238,16 @@ function getCacheInstance(display) {
     }
 }
 
-function createVideoElement() {
+function createVideoElement(useControls = false) {
     let video = document.createElement('video');
     // Prepare video tag to auto play and add specific Safari tweaks #WCS-2425
     video.muted = true;
-    if(util.Browser.isSafariWebRTC()) {
-       video.setAttribute("playsinline", "");
-       video.setAttribute("webkit-playsinline", "");
+    if (util.Browser.isSafariWebRTC()) {
+        video.setAttribute("playsinline", "");
+        video.setAttribute("webkit-playsinline", "");
+    }
+    if (useControls) {
+        enableVideoControls(video);
     }
     return(video);
 }
@@ -1235,6 +1273,12 @@ function removeVideoElement(video) {
     }
 }
 
+function enableVideoControls(video) {
+    if(video && !video.controls) {
+        video.setAttribute("controls", "controls");
+    }
+}
+
 /**
  * Check WebRTC available
  *
@@ -1405,12 +1449,10 @@ var playFirstSound = function () {
     return false;
 };
 
-var playFirstVideo = function (display, isLocal, src) {
+var playFirstVideo = function (display, isLocal, src, useControls = false) {
     return new Promise(function (resolve, reject) {
         if (!getCacheInstance(display)) {
-            var video = document.createElement('video');
-            video.setAttribute("playsinline", "");
-            video.setAttribute("webkit-playsinline", "");
+            var video = createVideoElement(useControls);
             //Mute video tag to prevent local audio playback in Safari #WCS-3430
             video.muted = true;
             video.id = uuid_v1() + (isLocal ? LOCAL_CACHED_VIDEO : REMOTE_CACHED_VIDEO);
@@ -1421,6 +1463,7 @@ var playFirstVideo = function (display, isLocal, src) {
                 video.src = src;
                 video.play().then(function () {
                     display.appendChild(video);
+                    video.removeAttribute("src");
                     resolve();
                 }).catch(function () {
                     //WCS-2375. fixed autoplay in ios safari
@@ -1428,6 +1471,7 @@ var playFirstVideo = function (display, isLocal, src) {
                     video.muted = true;
                     video.play().then(function () {
                         display.appendChild(video);
+                        video.removeAttribute("src");
                         resolve();
                     });
                     //WCS-2375. low power mode suspends video play