@flashphoner/websdk 2.0.241 → 2.0.243

package/examples/demo/streaming/hls-native/hls-native.js

@@ -1,48 +1,67 @@
-var Browser = Flashphoner.Browser;
-var remoteVideo = null;
+const Browser = Flashphoner.Browser;
+const STATS_INTERVAL = 1000;
+let remoteVideo = null;
+let playbackStats = null;
 
-function loadPlayerPage() {
-    $("#playerPage").load("../hls-player/player-page.html", initPage );
+const loadPlayerPage = function() {
+    loadPage("../hls-player/player-page.html", "playerPage", initPage );
 }
 
-function initPage() {
-    $("#header").text("HLS Native Player Minimal");
-    $("#urlServer").val(getHLSUrl());
-    $("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
+const loadPage = function(page, containerId, onLoad) {
+    fetch(page).then(function (response) {
+        if (response.ok) {
+            return response.text();
+        }
+        throw response;
+    }).then(function (text) {
+        let container = document.getElementById(containerId);
+        container.innerHTML = text;
+        onLoad();
+    });
+}
+
+const initPage = function() {
+    setText("header", "HLS Native Player Minimal");
+    setValue("urlServer", getHLSUrl());
+    setText("applyBtn", "Play");
+    setHandler("applyBtn", "click", playBtnClick);
     remoteVideo = document.getElementById('remoteVideo');
     remoteVideo.style ="background-color: lightgrey;";
     if (Browser.isSafariWebRTC() && Browser.isiOS()) {
         // iOS hack when using standard controls to leave fullscreen mode
         setWebkitFullscreenHandlers(remoteVideo);
     }
+    if (remoteVideo.canPlayType('application/vnd.apple.mpegurl') && Browser.isSafariWebRTC()) {
+        enableItem("applyBtn");
+        playbackStats = PlaybackStats(STATS_INTERVAL);
+    } else {
+        setText("notifyFlash", "Your browser doesn't support native HLS playback");
+        disableItem("applyBtn");
+        toggleInputs(false);
+    }
 }
 
-function playBtnClick() {
+const playBtnClick = function() {
     if (validateForm()) {
-        var streamName = $('#playStream').val();
+        let streamName = getValue("playStream");
         streamName = encodeURIComponent(streamName);
-        var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8';
-        var key = $('#key').val();
-        var token = $("#token").val();
+        let videoSrc = getValue("urlServer") + '/' + streamName + '/' + streamName + '.m3u8';
+        let key = getValue('key');
+        let token = getValue("token");
         if (key.length > 0 && token.length > 0) {
             videoSrc += "?" + key + "=" + token;
         }
-        if (remoteVideo.canPlayType('application/vnd.apple.mpegurl')) {
-            remoteVideo.src = videoSrc;
-            remoteVideo.addEventListener('loadedmetadata', function() {
-                console.log("Play native HLS");
-                remoteVideo.play();
-                onStarted();
-            });
-        }
-        else {
-            $("#notifyFlash").text("Your browser doesn't support native HLS playback");
-        }
+        remoteVideo.src = videoSrc;
+        remoteVideo.addEventListener('loadedmetadata', function() {
+            console.log("Play native HLS");
+            remoteVideo.play();
+            onStarted();
+        });
     }
 }
 
 
-function stopBtnClick() {
+const stopBtnClick = function() {
     if (remoteVideo != null) {
         console.log("Stop HTML5 player");
         remoteVideo.pause();
@@ -54,51 +73,124 @@ function stopBtnClick() {
 }
 
 
-function onStarted() {
-    $("#urlServer").prop('disabled', true);
-    $("#playStream").prop('disabled', true);
-    $("#key").prop('disabled', true);
-    $("#token").prop('disabled', true);
-    $("#player").prop('disabled', true);
-    $("#applyBtn").prop('disabled', false).text("Stop").off('click').click(stopBtnClick);
+const onStarted = function() {
+    toggleInputs(false);
+    enableItem("applyBtn");
+    setText("applyBtn", "Stop");
+    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+    playbackStats.start();
 }
 
 
-function onStopped() {
-    $("#urlServer").prop('disabled', false);
-    $("#playStream").prop('disabled', false);
-    $("#key").prop('disabled', false);
-    $("#token").prop('disabled', false);
-    $("#player").prop('disabled', false);
-    $("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
+const onStopped = function() {
+    toggleInputs(true);
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+    playbackStats.stop();
 }
 
 
-function validateForm() {
-    var valid = true;
-    if (!$("#urlServer").val().length) {
-        highlightInput($("#urlServer"));
-        valid = false;
-    } else {
-        removeHighlight($("#urlServer"));
+const validateForm = function() {
+    let valid = validateInput("urlServer");
+    if (valid) {
+        valid = validateInput("playStream");
     }
-    if (!$("#playStream").val().length) {
-        highlightInput($("#playStream"));
+    return valid;
+}
+
+const validateInput = function(id) {
+    let value = getValue(id);
+    let valid = true;
+    if (!value || !value.length) {
+        highlightInput(id);
         valid = false;
     } else {
-        removeHighlight($("#playStream"));
+        removeHighlight(id);
     }
-
     return valid;
-    
 }
 
-
-function highlightInput(input) {
-    input.closest('.form-group').addClass("has-error");
+const highlightInput = function(input) {
+    let item = document.getElementById(input);
+    if (item) {
+        let parent = closest(input,'.form-group');
+        if (parent) {
+            parent.classList.add("has-error");
+        }
+    }
 }
 
 
-function removeHighlight(input) {
-    input.closest('.form-group').removeClass("has-error");
+const removeHighlight = function(input) {
+    let item = document.getElementById(input);
+    if (item) {
+        let parent = closest(input,'.form-group');
+        if (parent) {
+            parent.classList.remove("has-error");
+        }
+    }
+}
+
+const toggleInputs = function(enable) {
+    if (enable) {
+        enableItem("urlServer");
+        enableItem("playStream");
+        enableItem("key");
+        enableItem("token");
+        enableItem("player");
+    } else {
+        disableItem("urlServer");
+        disableItem("playStream");
+        disableItem("key");
+        disableItem("token");
+        disableItem("player");
+    }
 }
+
+const PlaybackStats = function(interval) {
+    const playbackStats = {
+        interval: interval || STATS_INTERVAL,
+        timer: null,
+        stats: null,
+        start: function() {
+            let video = remoteVideo;
+
+            playbackStats.stop();
+            stats = HTML5Stats(video);
+            playbackStats.timer = setInterval(playbackStats.displayStats, playbackStats.interval);
+            setText("videoWidth", "N/A");
+            setText("videoHeight", "N/A");
+            setText("videoRate", "N/A");
+            setText("videoFps", "N/A");
+            showItem("stats");
+        },
+        stop: function() {
+            if (playbackStats.timer) {
+                clearInterval(playbackStats.timer);
+                playbackStats.timer = null;
+            }
+            playbackStats.stats = null;
+            hideItem("stats");
+        },
+        displayStats: function() {
+            if (stats.collect()) {
+                let width = stats.getWidth();
+                let height = stats.getHeight();
+                let bitrate = stats.getBitrate();
+                let fps = stats.getFps();
+
+                setText("videoWidth", width);
+                setText("videoHeight", height);
+
+                if (bitrate !== undefined) {
+                    setText("videoRate", Math.round(bitrate));
+                }
+                if (fps !== undefined) {
+                    setText("videoFps", fps.toFixed(1));
+                }
+            }
+        }
+    };
+    return playbackStats;
+}

package/examples/demo/streaming/hls-player/hls-player.html

@@ -5,14 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
     <link rel="stylesheet" href="hls-player.css">
-<!--    <link rel="stylesheet" href="video-js.css"> -->
     <title>HLS VideoJS Player Minimal</title>
     <script type="text/javascript" src="../../../../flashphoner.js"></script>
-<!--    <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
-    <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script> -->
     <script type="text/javascript" src="../../dependencies/js/utils.js"></script>
+    <script type="text/javascript" src="../../dependencies/js/stats.js"></script>
     <script type="text/javascript" src="hls-player.js"></script>
-<!--    <script type="text/javascript" src="video.js"></script> -->
 </head>
 <body onload="loadPlayerPage()">
 <div class="row form-group" id="videojsInputForm">

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

@@ -6,9 +6,11 @@ const VIDEOJS_VERSION_TYPE = {
 const LIVE_THRESHOLD = 5;
 const LIVE_TOLERANCE = 5;
 const LIVE_UI_INTERVAL = 1000;
+const STATS_INTERVAL = 1000;
 let player = null;
 let liveUITimer = null;
 let videojsVersion = getUrlParam("version");
+let playbackStats = null;
 
 const loadPlayerPage = function() {
     if (videojsVersion) {
@@ -127,6 +129,7 @@ const initPage = function() {
     let remoteVideo = document.getElementById('remoteVideo');
     remoteVideo.className = "video-js vjs-default-skin";
     player = initVideoJsPlayer(remoteVideo);
+    playbackStats = PlaybackStats(STATS_INTERVAL);
 }
 
 const playBtnClick = function() {
@@ -234,6 +237,7 @@ const onStarted = function() {
     toggleBackButtons(true);
     setText("applyBtn", "Stop");
     setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+    playbackStats.start();
 }
 
 
@@ -243,6 +247,7 @@ const onStopped = function() {
     hideItem("backward");
     setText("applyBtn", "Play");
     setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+    playbackStats.stop();
     if(!document.getElementById('remoteVideo')) {
         createRemoteVideo(document.getElementById('videoContainer'));
     }
@@ -250,10 +255,8 @@ const onStopped = function() {
 
 
 const createRemoteVideo = function(parent) {
-    remoteVideo = document.createElement("video");
+    let remoteVideo = document.createElement("video");
     remoteVideo.id = "remoteVideo";
-    remoteVideo.width=852;
-    remoteVideo.height=480;
     remoteVideo.controls="controls";
     remoteVideo.autoplay="autoplay";
     remoteVideo.type="application/vnd.apple.mpegurl";
@@ -314,7 +317,8 @@ const initVideoJsPlayer = function(video) {
         liveTracker: {
             trackingThreshold: LIVE_THRESHOLD,
             liveTolerance: LIVE_TOLERANCE
-        }
+        },
+        fill: true
     });
     console.log("Using VideoJs " + videojs.VERSION);
     if (Browser.isSafariWebRTC() && Browser.isiOS()) {
@@ -361,4 +365,51 @@ const toggleInputs = function(enable) {
         disableItem("token");
         disableItem("player");
     }
+}
+
+const PlaybackStats = function(interval) {
+    const playbackStats = {
+        interval: interval || STATS_INTERVAL,
+        timer: null,
+        stats: null,
+        start: function() {
+            let video = getActualVideoTag();
+
+            playbackStats.stop();
+            stats = HTML5Stats(video);
+            playbackStats.timer = setInterval(playbackStats.displayStats, playbackStats.interval);
+            setText("videoWidth", "N/A");
+            setText("videoHeight", "N/A");
+            setText("videoRate", "N/A");
+            setText("videoFps", "N/A");
+            showItem("stats");
+        },
+        stop: function() {
+            if (playbackStats.timer) {
+                clearInterval(playbackStats.timer);
+                playbackStats.timer = null;
+            }
+            playbackStats.stats = null;
+            hideItem("stats");
+        },
+        displayStats: function() {
+            if (stats.collect()) {
+                let width = stats.getWidth();
+                let height = stats.getHeight();
+                let bitrate = stats.getBitrate();
+                let fps = stats.getFps();
+
+                setText("videoWidth", width);
+                setText("videoHeight", height);
+
+                if (bitrate !== undefined) {
+                    setText("videoRate", Math.round(bitrate));
+                }
+                if (fps !== undefined) {
+                    setText("videoFps", fps.toFixed(1));
+                }
+            }
+        }
+    };
+    return playbackStats;
 }

package/examples/demo/streaming/hls-player/player-page.html

@@ -1,5 +1,5 @@
     <div class="row">
-        <div class="col-sm-12 text-center" style="max-width: 525px">
+        <div class="col-sm-12 text-center" style="max-width: 500px">
 
             <h2 id="header"></h2>
 
@@ -69,12 +69,42 @@
         </div>
     </div>
     <div class="row">
-        <div id="videoContainer" class="col-sm-12 text-center" style="margin-top: 20px; max-width: 852px">
-            <video id="remoteVideo" width="852" height="480"
+        <div id="videoContainer" class="col-sm-12 text-center" style="margin-top: 20px; max-width: 852px; width: available; max-height: 480px; height: 56.25vw">
+            <video id="remoteVideo"
+                   width="100%"
+                   height="100%"
                    controls="controls"
                    autoplay="autoplay"
                    playsinline="playsinline"
                    webkit-playsinline="webkit-playsinline"
                    type="application/vnd.apple.mpegurl"></video>
         </div>
+    </div>
+    <div id="stats" class="row" style="display: none;">
+        <div class="col-sm-12">
+            <div class="row" style="margin-top: 20px">
+                <div class="col-sm-2">
+                    <label class="form-check-label" for="videoWidth">Video width</label>
+                </div>
+                <div class="col-sm-2" id="videoWidth"></div>
+            </div>
+            <div class="row" style="margin-top: 10px">
+                <div class="col-sm-2">
+                    <label class="form-check-label" for="videoHeight">Video height</label>
+                </div>
+                <div class="col-sm-2" id="videoHeight"></div>
+            </div>
+            <div class="row" style="margin-top: 10px">
+                <div class="col-sm-2">
+                    <label class="form-check-label" for="videoRate">Bitrate, bps</label>
+                </div>
+                <div class="col-sm-2" id="videoRate"></div>
+            </div>
+            <div class="row" style="margin-top: 10px">
+                <div class="col-sm-2">
+                    <label class="form-check-label" for="videoFps">Framerate</label>
+                </div>
+                <div class="col-sm-2" id="videoFps"></div>
+            </div>
+        </div>
     </div>

package/flashphoner-no-flash.js

@@ -9167,7 +9167,7 @@ var createSession = function createSession(options) {
    * @param {string=} options.stripCodecs Comma separated strings of codecs which should be stripped from WebRTC SDP (ex. "SILK,G722")
    * @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 {string=} options.videoContentHint Video content hint for browser ('motion' by default to maintain bitrate and fps), {@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
@@ -9964,7 +9964,7 @@ var createSession = function createSession(options) {
    * @param {Boolean=} options.cvoExtension Enable rtp video orientation extension
    * @param {Integer=} options.playoutDelay Time delay between network reception of media and playout
    * @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 {string=} options.videoContentHint Video content hint for browser ('motion' by default to maintain bitrate and fps), {@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
@@ -11784,7 +11784,8 @@ var createConnection = function createConnection(options) {
     var screenShare = false;
     var playoutDelay = options.playoutDelay;
     // Set video track contentHint to `detail` by default to workaround Chromium 91 bug #WCS-3257
-    var videoContentHint = options.videoContentHint ? options.videoContentHint : 'detail';
+    // Set video track contentHint to `motion` by default to keep bitrate and fps for better camera stream quality #WCS-4109
+    var videoContentHint = options.videoContentHint ? options.videoContentHint : 'motion';
     // 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