@flashphoner/websdk 2.0.231 → 2.0.233

package/docTemplate/README.md

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

package/examples/demo/dependencies/js/utils.js

@@ -2,6 +2,32 @@
 ///////////// Utils ////////////
 ///////////////////////////////////
 
+/**
+ * Default server ports description
+ *
+ * @type {{legacy: {http: number, https: number}, wss: number, http: number, https: number, ws: number, hls: {http: number, https: number}}}
+ */
+const DEFAULT_PORTS = {
+    http: 8081,
+    https: 8444,
+    legacy: {
+        http: 9091,
+        https: 8888
+    },
+    ws: 8080,
+    wss: 8443,
+    hls: {
+        http: 8082,
+        https: 8445
+    }
+}
+
+/**
+ * Check if object is not empty
+ *
+ * @param obj object to check
+ * @returns {boolean} true if object is not empty
+*/
 function notEmpty(obj) {
     if (obj != null && obj != 'undefined' && obj != '') {
         return true;
@@ -9,34 +35,165 @@ function notEmpty(obj) {
     return false;
 }
 
-//Trace
+/**
+ * Print trace string to
+ *
+ * @param str string to print
+ */
 function trace(str) {
     console.log(str);
 }
 
-//Get field
+/**
+ * Get HTML page field
+ *
+ * @param name field name
+ * @returns {*} field
+ */
 function field(name) {
     var field = document.getElementById(name).value;
     return field;
 }
 
-//Set WCS URL
-function setURL() {
-    var proto;
-    var url;
-    var port;
+/**
+ * Set default value to port if it is not defined
+ *
+ * @param port
+ * @param value
+ * @returns {*}
+ */
+function setDefaultPort(port, value) {
+    if (port === undefined) {
+        return value;
+    }
+    return port;
+}
+
+/**
+ * Get server ports configuration
+ *
+ * @returns {{legacy: {http: number, https: number}, wss: number, http: number, https: number, ws: number, hls: {http: number, https: number}}}
+ */
+function getPortsConfig() {
+    let portsConfig = DEFAULT_PORTS;
+    try {
+        // Try to get ports from a separate config declaring the SERVER_PORTS constant
+        portsConfig = SERVER_PORTS;
+        // Fill the ports absent in config by default values
+        portsConfig.http = setDefaultPort(portsConfig.http, DEFAULT_PORTS.http);
+        portsConfig.https = setDefaultPort(portsConfig.https, DEFAULT_PORTS.https);
+        portsConfig.legacy = setDefaultPort(portsConfig.legacy, DEFAULT_PORTS.legacy);
+        portsConfig.legacy.http = setDefaultPort(portsConfig.legacy.http, DEFAULT_PORTS.legacy.http);
+        portsConfig.legacy.https = setDefaultPort(portsConfig.legacy.https, DEFAULT_PORTS.legacy.https);
+        portsConfig.ws = setDefaultPort(portsConfig.ws, DEFAULT_PORTS.ws);
+        portsConfig.wss = setDefaultPort(portsConfig.wss, DEFAULT_PORTS.wss);
+        portsConfig.hls = setDefaultPort(portsConfig.hls, DEFAULT_PORTS.hls);
+        portsConfig.hls.http = setDefaultPort(portsConfig.hls.http, DEFAULT_PORTS.hls.http);
+        portsConfig.hls.https = setDefaultPort(portsConfig.hls.https, DEFAULT_PORTS.hls.https);
+        console.log("Use custom server ports");
+    } catch(e) {
+        console.log("Use default server ports");
+        console.log(e.stack);
+    }
+    return portsConfig;
+}
+
+/**
+ * Get web interface standard port depending on connection type
+ *
+ * @returns {string}
+ */
+function getWebPort() {
+    let portsConfig = getPortsConfig();
+    let port;
+    if (window.location.protocol == "http:") {
+        port = portsConfig.http;
+    } else {
+        port = portsConfig.https;
+    }
+    return port;
+}
+
+/**
+ * Get HTML protocol used depending on connection type
+ *
+ * @returns {string}
+ */
+function getWebProtocol() {
+    let proto;
+    if (window.location.protocol == "http:") {
+        proto = "http://";
+    } else {
+        proto = "https://";
+    }
+    return proto;
+}
+
+/**
+ * Get websocket standard port depending on connection type
+ *
+ * @returns {string}
+ */
+function getWsPort() {
+    let portsConfig = getPortsConfig();
+    let port;
+    if (window.location.protocol == "http:") {
+        port = portsConfig.ws;
+    } else {
+        port = portsConfig.wss;
+    }
+    return port;
+}
+
+/**
+ * Get websocket protocol type depending on connection type
+ *
+ * @returns {string}
+ */
+function getWsProtocol() {
+    let proto;
     if (window.location.protocol == "http:") {
         proto = "ws://";
-        port = "8080";
     } else {
         proto = "wss://";
-        port = "8443";
     }
+    return proto;
+}
+
+/**
+ * Get standard HLS port depending on connection type
+ *
+ * @returns {string}
+ */
+function getHlsPort() {
+    let portsConfig = getPortsConfig();
+    let port;
+    if (window.location.protocol == "http:") {
+        port = portsConfig.hls.http;
+    } else {
+        port = portsConfig.hls.https;
+    }
+    return port;
+}
 
-    url = proto + window.location.hostname + ":" + port;
+/**
+ * Set default WCS websocket URL (used in most examples)
+ *
+ * @returns {string}
+ */
+function setURL() {
+    var proto = getWsProtocol();
+    var port = getWsPort();
+    var url = proto + window.location.hostname + ":" + port;
     return url;
 }
 
+/**
+ * Get URL parameter
+ *
+ * @param name
+ * @returns {string|null}
+ */
 function getUrlParam(name) {
     var url = window.location.href;
     name = name.replace(/[\[\]]/g, "\\$&");
@@ -47,40 +204,83 @@ function getUrlParam(name) {
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 }
 
+/**
+ * Get default HLS url
+ *
+ * @returns {string}
+ */
 function getHLSUrl() {
+    var proto = getWebProtocol();
+    var port = getHlsPort();
+    var url = proto + window.location.hostname + ":" + port;
+    return url;
+}
 
-    var proto;
+/**
+ * Get default admin URL (used in Embed Player)
+ *
+ * @returns {string}
+ */
+function getAdminUrl() {
+    var portsConfig = getPortsConfig();
+    var proto = getWebProtocol();
     var port;
-
     if (window.location.protocol == "http:") {
-        proto = "http://";
-        port = "8082";
+        port = portsConfig.legacy.http;
     } else {
-        proto = "https://";
-        port = "8445";
+        port = portsConfig.legacy.https;
     }
-
     var url = proto + window.location.hostname + ":" + port;
     return url;
 }
 
-function getAdminUrl() {
+/**
+ * Get REST API URL
+ *
+ * @param hostName host name to override the default one
+ * @param hostPort host port to override the default one
+ * @returns {string}
+ */
+function getRestUrl(hostName, hostPort) {
+    let proto = getWebProtocol();
+    let port = getWebPort();
+    if (!hostName) {
+        hostName = window.location.hostname;
+    }
+    if (hostPort) {
+        port = hostPort;
+    }
 
-    var proto;
-    var port;
-    if (window.location.protocol == "http:") {
-        proto = "http://";
-        port = "9091";
-    } else {
-        proto = "https://";
-        port = "8888";
+    let url = proto + hostName + ":" + port;
+    return url;
+}
+
+/**
+ * Get Websocket URL
+ *
+ * @param hostName host name to override the default one
+ * @param hostPort host port to override the default one
+ * @returns {string}
+ */
+function getWebsocketUrl(hostName, hostPort) {
+    let proto = getWsProtocol();
+    let port = getWsPort();
+    if (!hostName) {
+        hostName = window.location.hostname;
+    }
+    if (hostPort) {
+        port = hostPort;
     }
 
-    var url = proto + window.location.hostname + ":" + port;
+    let url = proto + hostName + ":" + port;
     return url;
 }
 
-// Detect IE
+/**
+ * Detect IE (for compatibility only)
+ *
+ * @returns {boolean}
+ */
 function detectIE() {
     var ua = window.navigator.userAgent;
     var msie = ua.indexOf('MSIE ');
@@ -94,7 +294,10 @@ function detectIE() {
     return false;
 }
 
-// Detect Flash
+/**
+ * Detect Flash (for compatibility only)
+ *
+ */
 function detectFlash() {
     var hasFlash = false;
     try {
@@ -133,7 +336,12 @@ $(function () {
     });
 });
 
-// Generate simple uuid
+/**
+ * Generate simple uuid
+ *
+ * @param length UUID length
+ * @returns {string}
+ */
 function createUUID(length) {
     var s = [];
     var hexDigits = "0123456789abcdef";
@@ -185,7 +393,15 @@ function resizeVideo(video, width, height) {
     console.log("Resize from " + video.videoWidth + "x" + video.videoHeight + " to " + display.offsetWidth + "x" + display.offsetHeight);
 }
 
-
+/**
+ * Helper function to resize video tag
+ *
+ * @param videoWidth
+ * @param videoHeight
+ * @param dstWidth
+ * @param dstHeight
+ * @returns {{w: number, h: number}}
+ */
 function downScaleToFitSize(videoWidth, videoHeight, dstWidth, dstHeight) {
     var newWidth, newHeight;
     var videoRatio = videoWidth / videoHeight;
@@ -203,6 +419,11 @@ function downScaleToFitSize(videoWidth, videoHeight, dstWidth, dstHeight) {
     };
 }
 
+/**
+ * Set Webkit fullscreen handler functions to video tag
+ *
+ * @param video
+ */
 function setWebkitFullscreenHandlers(video) {
     if (video) {
         let needRestart = false;
@@ -239,6 +460,12 @@ function setWebkitFullscreenHandlers(video) {
     }
 }
 
+/**
+ * Check if fullscreen mode is available in Webkit
+ *
+ * @param video
+ * @returns {boolean}
+ */
 function canWebkitFullScreen(video) {
     let canFullscreen = false;
     if (video) {

package/examples/demo/streaming/console/console.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="console.css">
         <link rel="stylesheet" type="text/css" href="jquery.dataTables.css">
         <title>Console</title>
+        <script type="text/javascript" src="ports.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/bootstrap/js/bootstrap.min.js"></script>
@@ -52,6 +53,7 @@
                     <button id="pullRtspStreamModalBtn" data-toggle='modal' data-target='#pullRtspModal' type="button" class="btn btn-default btn-success btn-block">Pull RTSP stream</button>
                     <hr>
                     <button id="pullStreamBatchModalBtn" data-toggle='modal' data-target='#pullStreamBatchModal' type="button" class="btn btn-default btn-success btn-block">Pull streams</button>
+                    <button id="pushStreamBatchModalBtn" data-toggle='modal' data-target='#pushStreamBatchModal' type="button" class="btn btn-default btn-success btn-block">Push streams</button>
                     <button id="registerBatchModalBtn" data-toggle='modal' data-target='#registerBatchModal' type="button" class="btn btn-default btn-success btn-block">Register</button>
                     <button id="unregisterBatchModalBtn" data-toggle='modal' data-target='#unregisterBatchModal' type="button" class="btn btn-default btn-success btn-block">Unregister</button>
                     <button id="callBatchModalBtn" data-toggle='modal' data-target='#callBatchModal' type="button" class="btn btn-default btn-success btn-block">Call</button>
@@ -199,7 +201,7 @@
                                     </select>
                                 </div>
                                 <div class="form-group">
-                                    <label for="pullStreamBatchNodes"><span class="glyphicon glyphicon-play-circle"></span> Proto pull</label>
+                                    <label for="pullStreamBatchProto"><span class="glyphicon glyphicon-play-circle"></span> Proto pull</label>
                                     <select class="custom-select" id="pullStreamBatchProto">
                                         <option value="ws" selected>WebRTC</option>
                                         <option value="rtmp">RTMP</option>
@@ -226,6 +228,48 @@
                     </div>
                 </div>
             </div>
+            <div id="pushStreamBatchModal" class="modal fade" role="dialog">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4>Push Streams</h4>
+                        </div>
+                        <div class="modal-body">
+                            <form action="" id="pushStreamBatchForm">
+                                <div class="form-group">
+                                    <label for="pushStreamBatchNodes"><span class="glyphicon glyphicon-globe"></span> Choose node</label>
+                                    <select class="custom-select" id="pushStreamBatchNodes">
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <label for="pushStreamBatchProto"><span class="glyphicon glyphicon-play-circle"></span> Proto push</label>
+                                    <select class="custom-select" id="pushStreamBatchProto">
+                                        <option value="ws" selected>WebRTC</option>
+                                        <option value="rtmp">RTMP</option>
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <label for="pushBatchLocalName"><span class="glyphicon glyphicon-play-circle"></span> Local stream name</label>
+                                    <input type="text" class="form-control" id="pushBatchLocalName" placeholder="my_local_stream">
+                                </div>
+                                <div class="form-group">
+                                    <label for="pushBatchRemoteName"><span class="glyphicon glyphicon-play-circle"></span> Remote stream name</label>
+                                    <input type="text" class="form-control" id="pushBatchRemoteName" placeholder="my_remote_stream">
+                                </div>
+                                <div class="form-group">
+                                    <label for="pushBatchQty"><span class="glyphicon glyphicon-plus"></span> Qty</label>
+                                    <input type="text" class="form-control" id="pushBatchQty" placeholder="1">
+                                </div>
+                                <button id="pushBatchStream" type="button" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Push</button>
+                            </form>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div id="registerBatchModal" class="modal fade" role="dialog">
                 <div class="modal-dialog">
                     <div class="modal-content">

package/examples/demo/streaming/console/console.js

@@ -67,9 +67,15 @@ $(function() {
     $('#pullStreamBatchModal').on('show.bs.modal', function(e) {
         populateNodes($("#pullStreamBatchNodes"));
     });
+    $('#pushStreamBatchModal').on('show.bs.modal', function(e) {
+        populateNodes($("#pushStreamBatchNodes"));
+    });
     $("#pullBatchStream").on("click", function(e){
         pullStreamBatch();
     });
+    $("#pushBatchStream").on("click", function(e){
+        pushStreamBatch();
+    });
     $('#registerBatchModal').on('show.bs.modal', function(e) {
         populateNodes($("#registerBatchNodes"));
     });
@@ -146,18 +152,19 @@ $(function() {
 
 function createNode(id, ip) {
     let nodeIp = ip;
-    let port = 8081;
+    let port = getWebPort();
     if (ip.indexOf(':') !== -1) {
         port = ip.substring(ip.indexOf(":") + 1);
         nodeIp = ip.substring(0, ip.indexOf(":"));
     }
-    var api = FlashphonerRestApi.instance("http://"+nodeIp+":"+port, "http://"+nodeIp+":"+port);
+    let restUrl = getRestUrl(nodeIp, port);
+    let api = FlashphonerRestApi.instance(restUrl, restUrl);
     api.id = id;
     api.ip = nodeIp;
     api.port = port;
     api.tests = [];
-    var state = NODE_STATE.NEW;
-    var pollState = function(){
+    let state = NODE_STATE.NEW;
+    let pollState = function(){
         api.stat.poll().then(function(stat){
             api.setState(NODE_STATE.ALIVE, stat);
             setTimeout(pollState, REFRESH_NODE_STATE_INTERVAL);
@@ -269,7 +276,7 @@ function createNode(id, ip) {
         }
     };
     api.getTranscodingGroupStat = async function() {
-        const result = await fetch("http://" + nodeIp + ":" + port + "/?action=stat&format=json&groups=transcoding_stats")
+        const result = await fetch(restUrl + "/?action=stat&format=json&groups=transcoding_stats")
         const json = await result.json();
         return json;
     }
@@ -277,10 +284,7 @@ function createNode(id, ip) {
 }
 
 function addNode(ip) {
-    var id = ip.replace(/\./g, "");
-    if (ip.indexOf(':') !== -1) {
-        id = ip.substring(ip.indexOf(":") + 1).replace(/\./g, "");
-    }
+    var id = ip.replace(/[.:]/g, "");
     if (nodes[id]) {
         return;
     }
@@ -471,7 +475,7 @@ function pullStreamBatch() {
     var remoteName = $("#pullBatchRemoteName").val();
     var remote;
     if (proto == "ws") {
-        remote = "ws://" + $("#pullStreamBatchNodes").val() + ":8080/";
+        remote = getWebsocketUrl($("#pullStreamBatchNodes").val()) + "/";
     } else {
         remote = "rtmp://" + $("#pullStreamBatchNodes").val() + ":1935/live/" + remoteName;
     }
@@ -487,6 +491,37 @@ function pullStreamBatch() {
     $("#pullStreamBatchModal").modal('hide');
 }
 
+function pushStreamBatch() {
+    if (!$("#pushStreamBatchNodes").val()) {
+        $('#warningModal').modal();
+        return false;
+    }
+    var node = getActiveNode();
+    var proto = $("#pushStreamBatchProto").val();
+    var localName = $("#pushBatchLocalName").val();
+    var remoteName = $("#pushBatchRemoteName").val();
+    var remote;
+    if (proto == "ws") {
+        remote = getWebsocketUrl($("#pushStreamBatchNodes").val()) + "/";
+    } else {
+        remote = "rtmp://" + $("#pushStreamBatchNodes").val() + ":1935/live/";
+    }
+    var qty = parseInt($("#pushBatchQty").val());
+    var interval = setInterval(function(){
+        if (qty > 0) {
+            if (proto == "ws") {
+                node.pull.push(remote, localName, remoteName + qty).catch(function (e) {console.log(e)});
+            } else {
+                node.push.push(localName, remote + remoteName + qty, true);
+            }
+            qty--;
+        } else {
+            clearInterval(interval);
+        }
+    }, 200);
+    $("#pushStreamBatchModal").modal('hide');
+}
+
 function registerBatch() {
     if (!$("#registerBatchNodes").val()) {
         $('#warningModal').modal();
@@ -674,7 +709,7 @@ function doRego(node, testedNode, login, domain, password) {
         sipPassword: password,
         sipPort: "5060",
         sipRegisterRequired: true,
-        urlServer: "ws://"+testedNode+":8080/"
+        urlServer: getWebsocketUrl(testedNode) + "/"
     };
     return node.api.createSession(connection);
 }
@@ -954,7 +989,7 @@ function streamPlayStressTest() {
         return;
     }
 
-    var remote = "ws://" + $("#streamStressBatchNodes").val() + ":8080";
+    var remote = getWebsocketUrl($("#streamStressBatchNodes").val());
     var name = $("#streamStressBatchName").val();
     var start = parseInt($("#streamStressBatchStart").val());
     var end = parseInt($("#streamStressBatchEnd").val());
@@ -1323,7 +1358,7 @@ function streamPublishStressTest() {
         return false;
     }
     var node = getActiveNode();
-    var remote = "ws://" + $("#streamPublishStressBatchNodes").val() + ":8080";
+    var remote = getWebsocketUrl($("#streamPublishStressBatchNodes").val());
     var name = $("#streamPublishStressBatchName").val();
     var start = parseInt($("#streamPublishStressBatchStart").val());
     var end = parseInt($("#streamPublishStressBatchEnd").val());
@@ -1443,7 +1478,7 @@ function streamPlayStressTestRandom() {
     var node = getActiveNode();
     var streams = {};
     var remoteNode = getNode($("#streamStressBatchNodes").val());
-    var remote = "ws://" + $("#streamStressBatchNodes").val() + ":8080";
+    var remote = getWebsocketUrl($("#streamStressBatchNodes").val());
     var start = 0;
     var end = parseInt($("#streamStressMaxStreams").val());
     var rate = parseInt($("#streamStressBatchRate").val());

package/examples/demo/streaming/console/ports.js

@@ -0,0 +1,18 @@
+/**
+ * Server ports configuration for load testing
+ *
+ */
+const SERVER_PORTS = {
+    http: 8081,
+    https: 8444,
+    legacy: {
+        http: 9091,
+        https: 8888
+    },
+    ws: 8080,
+    wss: 8443,
+    hls: {
+        http: 8082,
+        https: 8445
+    }
+}