@flashphoner/websdk 2.0.256 → 2.0.258

package/docTemplate/README.md

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

package/examples/demo/streaming/media_devices_manager/manager.js

@@ -202,6 +202,9 @@ function onUnpublished() {
         publishStatsIntervalID = null;
     }
     enablePublishToggles(false);
+    $("#resolutionBtn").prop('disabled', true);
+    $("#fpsBtn").prop('disabled', true);
+    $("#bitrateBtn").prop('disabled', true);
 }
 
 function publishBtnClick() {
@@ -239,6 +242,46 @@ function onPublishing(stream) {
         });
     }).prop('disabled', !($('#sendAudio').is(':checked')));
     stream.setVolume(currentVolumeValue);
+    $("#resolutionBtn").off('click').click(function () {
+        onResolutionClick(stream);
+    }).prop('disabled', false);
+    $("#fpsBtn").off('click').click(function () {
+        onFpsClick(stream);
+    }).prop('disabled', false);
+    $("#bitrateBtn").off('click').click(function () {
+        onBitrateClick(stream);
+    }).prop('disabled', false);
+}
+
+function onResolutionClick(stream) {
+    stream.updateVideoResolution({
+        width: parseInt($('#sendWidth').val()),
+        height: parseInt($('#sendHeight').val())
+    }).then(function(constraints) {
+        console.log("Publishing video constraints changed to " + JSON.stringify(constraints));
+    }).catch(function(e) {
+        console.error("Error " + e);
+    });
+}
+
+function onBitrateClick(stream) {
+    stream.updateVideoSettings({
+        maxBitrate: parseInt($('#sendVideoMaxBitrate').val())
+    }).then(function(encodings) {
+        console.log("Publishing video encoder parameters changed to " + JSON.stringify(encodings));
+    }).catch(function(e) {
+        console.error("Error " + e);
+    });
+}
+
+function onFpsClick(stream) {
+    stream.updateVideoSettings({
+        frameRate: parseInt($('#fps').val())
+    }).then(function(encodings) {
+        console.log("Publishing video encoder parameters changed to " + JSON.stringify(encodings));
+    }).catch(function(e) {
+        console.error("Error " + e);
+    });
 }
 
 function onPlaying(stream) {
@@ -552,7 +595,12 @@ function setStatus(selector, status, stream) {
 
 function muteInputs(selector) {
     $('[class*=group][id^=' + selector + ']').find('input').each(function () {
-        if ($(this).attr('id') !== 'audioOutput') {
+        if ($(this).attr('id') !== 'audioOutput' &&
+            $(this).attr('id') !== 'sendWidth' &&
+            $(this).attr('id') !== 'sendHeight' &&
+            $(this).attr('id') !== 'fps' &&
+            $(this).attr('id') !== 'sendVideoMinBitrate' &&
+            $(this).attr('id') !== 'sendVideoMaxBitrate') {
             $(this).prop('disabled', true);
         }
     });
@@ -579,8 +627,7 @@ function unmuteInputs(selector) {
 
 
 function resizeLocalVideo(event) {
-    var requested = constraints.video;
-    if (requested.width != event.target.videoWidth || requested.height != event.target.videoHeight) {
+    if (parseInt($('#sendWidth').val()) != event.target.videoWidth || parseInt($('#sendHeight').val()) != event.target.videoHeight) {
         console.warn("Camera does not support requested resolution, actual resolution is " + event.target.videoWidth + "x" + event.target.videoHeight);
     }
     $("#publishResolution").text(event.target.videoWidth + "x" + event.target.videoHeight);

package/examples/demo/streaming/media_devices_manager/media_device_manager.html

@@ -202,17 +202,27 @@
                     <div class="form-group" id="sendSizeForm">
                         <label style="text-align: left" class="col-sm-4 control-label">Size</label>
                         <div class="col-sm-4">
+                            <span>width</span>
                             <input type="text" class="form-control" id="sendWidth" value="640">
                         </div>
                         <div class="col-sm-4">
+                            <span>height</span>
                             <input type="text" class="form-control" id="sendHeight" value="480">
                         </div>
+                        <label style="text-align: left" class="col-sm-4 control-label"></label>
+                        <div class="col-sm-8">
+                            <button type="button" class="btn btn-default form-control" id="resolutionBtn">Apply</button>
+                        </div>
+
                     </div>
                     <div class="form-group" id="fpsForm">
                         <label style="text-align: left" class="col-sm-4 control-label">FPS</label>
                         <div class="col-sm-4">
                             <input type="text" class="form-control" id="fps" value="30">
                         </div>
+                        <div class="col-sm-4">
+                            <button type="button" class="btn btn-default form-control" id="fpsBtn">Apply</button>
+                        </div>
                     </div>
                     <div class="form-group" id="sendBitrateForm">
                         <label style="text-align: left" class="col-sm-4 control-label">Bitrate</label>
@@ -224,6 +234,10 @@
                             <span>max</span>
                             <input type="text" class="form-control" id="sendVideoMaxBitrate" value="0">
                         </div>
+                        <label style="text-align: left" class="col-sm-4 control-label"></label>
+                        <div class="col-sm-8">
+                            <button type="button" class="btn btn-default form-control" id="bitrateBtn">Apply</button>
+                        </div>
                     </div>
                     <div class="form-group" id="cpuOveruseDetectionForm">
                         <label style="text-align: left" class="col-sm-4 control-label" for="cpuOveruseDetectionForm">COD

package/examples/demo/streaming/screen-camera-mixer/screen-camera-mixer.html

@@ -39,45 +39,45 @@
     <div id="row">
         <h2 id="notifyFlash" class="text-danger"></h2>
         <div class="col-sm-10 text-center">
-            <div class="col-sm-6 text-center">
+            <div class="col-sm-6 text-center" style="margin-bottom: 20px">
+                <div class="text-center text-muted" style="margin-bottom: 10px">My Screen</div>
                 <div class="col-sm-12 text-center">
                     <div class="col-sm-4">
-                        <div class="form-group" id="fpsForm">
+                        <div class="form-group" id="screenFpsForm">
                             <span class="text-muted">FPS</span>
-                            <input type="text" class="form-control" id="fps" value="15"/>
+                            <input type="text" class="form-control" id="screenFps" value="5"/>
                         </div>
                     </div>
                     <div class="col-sm-4">
-                        <div class="form-group" id="widthForm">
+                        <div class="form-group" id="screenWidthForm">
                             <span class="text-muted">Width</span>
-                            <input type="text" class="form-control" id="width" value="640"/>
+                            <input type="text" class="form-control" id="screenWidth" value="1280"/>
                         </div>
                     </div>
                     <div class="col-sm-4">
-                        <div class="form-group" id="heightForm">
+                        <div class="form-group" id="screenHeightForm">
                             <span class="text-muted">Height</span>
-                            <input type="text" class="form-control" id="height" value="480"/>
+                            <input type="text" class="form-control" id="screenHeight" value="720"/>
                         </div>
                     </div>
                 </div>
                 <div class="col-sm-12 text-center">
-                    <div class="col-sm-5">
+                    <div class="col-sm-6 text-center">
                         <div class="form-group" id="mixer">
                             <span class="text-muted">Add to Mixer?</span>
                             <input type="checkbox" class="checkbox" style="margin: 10px auto" id="useMixer"/>
                         </div>
                     </div>
-                    <div class="col-sm-5">
+                    <div class="col-sm-6 text-center">
                         <div class="form-group" id="mixerInput">
                             <span class="text-muted">Mixer</span>
                             <input type="text" class="form-control" id="mixerName" placeholder="Mixer name"/>
                         </div>
                     </div>
                 </div>
-                <div class="fp-localVideo" style="margin-top: 140px">
+                <div class="fp-localVideo" style="margin-top: 150px">
                      <div id="localVideoScreen" class="display"></div>
                 </div>
-                <div class="text-center text-muted">My Screen</div>
                 <div class="row row-space">
                     <div id="screenName"></div>
                     <div id="screenStatus"></div>
@@ -87,10 +87,46 @@
                 </div>
             </div>
             <div class="col-sm-6 text-center">
-                <div class="fp-localVideo" style="margin-top: 140px">
+                <div class="text-center text-muted" style="margin-bottom: 10px">My Camera</div>
+                <div class="col-sm-12 text-center">
+                    <div class="col-sm-4">
+                        <div class="form-group" id="cameraFpsForm">
+                            <span class="text-muted">FPS</span>
+                            <input type="text" class="form-control" id="cameraFps" value="24"/>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="form-group" id="cameraWidthForm">
+                            <span class="text-muted">Width</span>
+                            <input type="text" class="form-control" id="cameraWidth" value="640"/>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="form-group" id="cameraHeightForm">
+                            <span class="text-muted">Height</span>
+                            <input type="text" class="form-control" id="cameraHeight" value="480"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-12 text-center">
+                    <div class="col-sm-6 text-center">
+                        <div class="form-group" id="audioInputForm">
+                            <span class="text-muted">Mic</span>
+                            <select class="form-control" id="audioInput">
+                            </select>
+                        </div>
+                    </div>
+                    <div class="col-sm-6 text-center">
+                        <div class="form-group" id="videoInputForm">
+                            <span class="text-muted">Camera</span>
+                            <select class="form-control" id="videoInput">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="fp-localVideo" style="margin-top: 150px">
                     <div id="localVideoCamera" class="display"></div>
                 </div>
-                <div class="text-center text-muted">My Camera</div>
                 <div class="row row-space">
                     <div id="cameraName"></div>
                     <div id="cameraStatus"></div>
@@ -99,8 +135,7 @@
                     <div id="cameraAvailableBitrate"></div>
                 </div>
             </div>
-            <div class="row row-space text-center" style="margin-top: 20px">
-                <!--<div class="col-sm-10 text-center">-->
+            <div class="row row-space text-center" style="margin-top: 30px">
                 <div class="col-sm-7">
                     <div class="form-group" id="urlForm">
                         <input type="text" class="form-control" id="url" placeholder="Enter url with stream name"/>
@@ -112,7 +147,6 @@
                 <div class="col-sm-2 text-left">
                     <button id="publishBtn" type="button" class="btn btn-default">Start</button>
                 </div>
-                <!--</div>-->
             </div>
         </div>
 

package/examples/demo/streaming/screen-camera-mixer/screen-camera-mixer.js

@@ -25,10 +25,42 @@ const init_page =  function() {
     localVideoCamera = document.getElementById("localVideoCamera");
     $("#url").val(setURL() + "/" + createUUID(8));
     $("#mixerName").val("mixer");
+
+    Flashphoner.getMediaDevices(null, true).then(function (list) {
+        addDeviceToSelect(list.audio, "audioInput");
+        addDeviceToSelect(list.video, "videoInput");
+    });
     onDisconnected();
 
 }
 
+const addDeviceToSelect = function (devices, selectId) {
+    devices.forEach(function (device) {
+        var select = document.getElementById(selectId);
+        var deviceInList = false;
+        for (var i = 0; i < select.options.length; i++) {
+            if (select.options[i].value === device.id) {
+                deviceInList = true;
+                break;
+            }
+        }
+        if (!deviceInList) {
+            var option = document.createElement("option");
+            option.text = device.label || device.id;
+            option.value = device.id;
+            if (selectId === "videoInput") {
+                if (option.text.toLowerCase().indexOf("back") >= 0 && select.children.length > 0) {
+                    select.insertBefore(option, select.children[0]);
+                } else {
+                    select.appendChild(option);
+                }
+            } else if (selectId === "audioInput") {
+                select.appendChild(option);
+            }
+        }
+    });
+}
+
 const isSafariMacOS = function() {
     return Browser.isSafari() && !Browser.isAndroid() && !Browser.isiOS();
 }
@@ -131,9 +163,9 @@ const startStreamingScreen = function(session) {
     let streamName = getStreamName("screen", field("url"));
     let constraints = {
         video: {
-            width: parseInt($('#width').val()),
-            height: parseInt($('#height').val()),
-            frameRate: parseInt($('#fps').val()),
+            width: parseInt($('#screenWidth').val()),
+            height: parseInt($('#screenHeight').val()),
+            frameRate: parseInt($('#screenFps').val()),
             type: "screen",
             withoutExtension: true
         }
@@ -178,7 +210,18 @@ const startStreamingCamera = function(session, screenStream) {
     let streamName = getStreamName("camera", field("url"));
     let options = {
         name: streamName,
-        display: localVideoCamera
+        display: localVideoCamera,
+        constraints: {
+            video: {
+                deviceId: $('#videoInput').val(),
+                width: parseInt($('#cameraWidth').val()),
+                height: parseInt($('#cameraHeight').val()),
+                frameRate: parseInt($('#cameraFps').val()),
+            },
+            audio: {
+                deviceId: $('#audioInput').val()
+            }
+        }
     }
     session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(cameraStream) {
         document.getElementById(cameraStream.id()).addEventListener('resize', function(event){