@flashphoner/websdk 2.0.203 → 2.0.208

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

@@ -5,6 +5,7 @@ var STREAM_EVENT_TYPE = Flashphoner.constants.STREAM_EVENT_TYPE;
 var CONNECTION_QUALITY = Flashphoner.constants.CONNECTION_QUALITY;
 var MEDIA_DEVICE_KIND = Flashphoner.constants.MEDIA_DEVICE_KIND;
 var TRANSPORT_TYPE = Flashphoner.constants.TRANSPORT_TYPE;
+var CONTENT_HINT_TYPE = Flashphoner.constants.CONTENT_HINT_TYPE;
 var CONNECTION_QUALITY_UPDATE_TIMEOUT_MS = 10000;
 var preloaderUrl = "../../dependencies/media/preloader.mp4";
 var Browser = Flashphoner.Browser;
@@ -61,12 +62,9 @@ function init_page() {
     localVideo = document.getElementById("localVideo");
     remoteVideo = document.getElementById("remoteVideo");
 
-    if(!Browser.isChrome() && !Browser.isFirefox()) {
+    if(Browser.isAndroid() || Browser.isiOS()) {
         $('#screenShareForm').hide();
     }
-    if (!Browser.isFirefox()) {
-        $('#mediaSourceForm').hide();
-    }
 
     Flashphoner.getMediaDevices(null, true, MEDIA_DEVICE_KIND.OUTPUT).then(function (list) {
         list.audio.forEach(function (device) {
@@ -412,6 +410,7 @@ function publish() {
     var mediaConnectionConstraints;
     var session = Flashphoner.getSessions()[0];
     var transportInput = $('#transportInput').val();
+    var contentHint = $('#contentHintInput').val();
     var cvo = $("#cvo").is(':checked');
     var strippedCodecs = $("#stripPublishCodecs").val();
 
@@ -434,7 +433,8 @@ function publish() {
         sdpHook: rewriteSdp,
         transport: transportInput,
         cvoExtension: cvo,
-        stripCodecs: strippedCodecs
+        stripCodecs: strippedCodecs,
+        videoContentHint: contentHint
     }).on(STREAM_STATUS.PUBLISHING, function (stream) {
         $("#testBtn").prop('disabled', true);
         var video = document.getElementById(stream.id());
@@ -641,7 +641,7 @@ function switchToScreen() {
     if (publishStream) {
         $('#switchBtn').prop('disabled', true);
         $('#videoInput').prop('disabled', true);
-        publishStream.switchToScreen($('#mediaSource').val()).catch(function () {
+        publishStream.switchToScreen($('#mediaSource').val(), true).catch(function () {
             $("#screenShareToggle").removeAttr("checked");
             $('#switchBtn').prop('disabled', false);
             $('#videoInput').prop('disabled', false);
@@ -862,6 +862,29 @@ function readyControls() {
         option.value = transportType;
         transportOutput.appendChild(option);
     }
+
+    //init content hint form
+    var contentType;
+    var contentTypeValue;
+    var option;
+    var contentHintInput = document.getElementById("contentHintInput");
+    for (contentType in CONTENT_HINT_TYPE) {
+        option = document.createElement("option");
+        switch(contentType) {
+            case 'MOTION':
+                contentTypeValue = CONTENT_HINT_TYPE.MOTION;
+            break;
+            case 'DETAIL':
+                contentTypeValue = CONTENT_HINT_TYPE.DETAIL;
+            break;
+            case 'TEXT':
+                contentTypeValue = CONTENT_HINT_TYPE.TEXT;
+            break;
+        }
+        option.text = contentTypeValue;
+        option.value = contentTypeValue;
+        contentHintInput.appendChild(option);
+    }
 }
 
 // Stat

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

@@ -245,6 +245,13 @@
                             <input type="checkbox" class="checkbox" id="cvo" value="false">
                         </div>
                     </div>
+                    <div class="form-group" id="contentHintInputForm">
+                        <label style="text-align: left" class="col-sm-4 control-label">Content Hint</label>
+                        <div class="col-sm-6">
+                            <select class="form-control" id="contentHintInput">
+                            </select>
+                        </div>
+                    </div>
                     <div class="form-group">
                         <label style="text-align: left" class="col-sm-4 control-label">Mute</label>
                         <div class="col-sm-6">

package/examples/demo/streaming/screen-sharing/screen-sharing.html

@@ -29,7 +29,7 @@
                     <h2 class="modal-title text-center text-danger">Warning!</h2>
                 </div>
                 <div class="modal-body text-center">
-                    <h2 class="text-primary">Screen sharing works only in Chrome and Firefox browsers on PC</h2>
+                    <h2 class="text-primary">Screen sharing works only in desktop browsers</h2>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

package/examples/demo/streaming/screen-sharing/screen-sharing.js

@@ -16,7 +16,7 @@ function init_page() {
     }
 
     var interval;
-    if (Browser.isFirefox()) {
+    if (Browser.isFirefox() && !Browser.isAndroid() && !Browser.isiOS()) {
         $("#installExtensionButton").show();
         interval = setInterval(function() {
             if (Flashphoner.firefoxScreenSharingExtensionInstalled) {

package/examples/demo/streaming/stream-auto-restore/stream-auto-restore.css

@@ -0,0 +1,23 @@
+.fp-Video {
+    border: 1px double black;
+    width: 322px;
+    height: 242px;
+    text-align: center;
+    background: #c0c0c0;
+    margin: 0 auto 0 auto;
+}
+
+.display {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+
+.display > video, object {
+    width: 100%;
+    height: 100%;
+}
+
+video:-webkit-full-screen {
+    border-radius: 1px;
+}

package/examples/demo/streaming/stream-auto-restore/stream-auto-restore.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
+    <link rel="stylesheet" href="../../dependencies/bootstrap/font-awesome/css/font-awesome.min.css">
+    <link rel="stylesheet" href="stream-auto-restore.css">
+    <title>Two-way Streaming</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/js/utils.js"></script>
+
+    <script type="text/javascript" src="stream-auto-restore.js"></script>
+</head>
+<body onload="init_page()">
+<div class="container">
+    <div class="row">
+
+        <h2 id="notifyFlash" class="text-danger"></h2>
+
+        <div class="col-sm-9 text-center">
+
+            <h2 class="text-center">Streaming Auto Restore</h2>
+
+            <div class="col-sm-6">
+                <div class="text-center text-muted">Local</div>
+                <div class="fp-Video">
+                    <div id="localVideo" class="display"></div>
+                </div>
+                <div id="streamerForm" class="input-group col-sm-10" style="margin: 10px auto 0 auto;">
+                    <input class="form-control" type="text" id="publishStream" placeholder="Stream Name">
+                    <div class="input-group-btn">
+                        <button id="publishBtn" type="button" class="btn btn-default">Publish</button>
+                    </div>
+                </div>
+                <div class="text-center" style="margin-top: 20px">
+                    <div id="publishStatus"></div>
+                    <div id="publishInfo"></div>
+                </div>
+            </div>
+
+            <div class="col-sm-6">
+                <div class="text-center text-muted">Player</div>
+                <div class="fp-Video">
+                    <div id="remoteVideo" class="display"></div>
+                </div>
+                <div id="playerForm" class="input-group col-sm-10" style="margin: 10px auto 0 auto;">
+                    <input class="form-control" type="text" id="playStream" placeholder="Stream Name">
+                    <div class="input-group-btn">
+                        <button id="playBtn" type="button" class="btn btn-default">Play</button>
+                    </div>
+                </div>
+                <div class="text-center" style="margin-top: 20px">
+                    <div id="playStatus"></div>
+                    <div id="playInfo"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row row-space">
+        <div class="col-sm-5 col-sm-offset-2">
+            <div id="connectionForm" class="input-group">
+                <input class="form-control" id="urlServer" type="text">
+                <div class="input-group-btn">
+                    <button id="connectBtn" type="button" class="btn btn-default">Connect</button>
+                </div>
+            </div>
+            <div class="text-center">
+                <div id="connectStatus"></div>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>

package/examples/demo/streaming/stream-auto-restore/stream-auto-restore.js

@@ -0,0 +1,356 @@
+var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
+var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
+var STREAM_EVENT = Flashphoner.constants.STREAM_EVENT;
+var STREAM_EVENT_TYPE = Flashphoner.constants.STREAM_EVENT_TYPE;
+var STREAM_STATUS_INFO = Flashphoner.constants.STREAM_STATUS_INFO;
+var ERROR_INFO = Flashphoner.constants.ERROR_INFO;
+var PRELOADER_URL = "../../dependencies/media/preloader.mp4";
+var PUBLISH_FAILURE_DETECTOR_MAX_TRIES = 3;
+var PUBLISH_FAILURE_DETECTOR_INTERVAL = 500;
+var Browser = Flashphoner.Browser;
+var localVideo;
+var remoteVideo;
+var publishFailureIntervalID;
+// H264 publishing failure detection parameters using outgoing video stats in Chrome #WCS-3382
+var statPublishFailureDetector = {
+    failed: false,
+    codec: "",
+    lastBytesSent: 0,
+    counter: {
+        value: 0,
+        threshold: PUBLISH_FAILURE_DETECTOR_MAX_TRIES
+    }
+};
+
+//////////////////////////////////
+/////////////// Init /////////////
+
+function init_page() {
+    //init api
+    try {
+        Flashphoner.init();
+    } catch (e) {
+        $("#notifyFlash").text("Your browser doesn't support WebRTC technology needed for this example");
+        return;
+    }
+
+    //local and remote displays
+    localVideo = document.getElementById("localVideo");
+    remoteVideo = document.getElementById("remoteVideo");
+
+    $("#urlServer").val(setURL());
+    var streamName = createUUID(4);
+    $("#publishStream").val(streamName);
+    $("#playStream").val(streamName);
+    onDisconnected();
+    onUnpublished();
+    onStopped();
+}
+
+function connect() {
+    var url = $('#urlServer').val();
+
+    //create session
+    console.log("Create new session with url " + url);
+    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) {
+        setStatus("#connectStatus", session.status());
+        onConnected(session);
+    }).on(SESSION_STATUS.DISCONNECTED, function () {
+        setStatus("#connectStatus", SESSION_STATUS.DISCONNECTED);
+        onDisconnected();
+    }).on(SESSION_STATUS.FAILED, function () {
+        setStatus("#connectStatus", SESSION_STATUS.FAILED);
+        onDisconnected();
+    });
+}
+
+function onConnected(session) {
+    $("#connectBtn").text("Disconnect").off('click').click(function () {
+        $(this).prop('disabled', true);
+        session.disconnect();
+    }).prop('disabled', false);
+    onUnpublished();
+    onStopped();
+}
+
+function onDisconnected() {
+    $("#connectBtn").text("Connect").off('click').click(function () {
+        if (validateForm("connectionForm")) {
+            $('#urlServer').prop('disabled', true);
+            $(this).prop('disabled', true);
+            connect();
+        }
+    }).prop('disabled', false);
+    $('#urlServer').prop('disabled', false);
+    onUnpublished();
+    onStopped();
+}
+
+function onPublishing(stream) {
+    $("#publishBtn").text("Stop").off('click').click(function () {
+        $(this).prop('disabled', true);
+        stream.stop();
+    }).prop('disabled', false);
+    $("#publishInfo").text("");
+    // Start publish failure detector in Chrome browser #WCS-3382
+    if(Browser.isChrome()) {
+        detectPublishFailure(stream, PUBLISH_FAILURE_DETECTOR_INTERVAL, PUBLISH_FAILURE_DETECTOR_MAX_TRIES);
+    }        
+}
+
+function onUnpublished() {
+    $("#publishBtn").text("Publish").off('click').click(publishBtnClick);
+    if (Flashphoner.getSessions()[0] && Flashphoner.getSessions()[0].status() == SESSION_STATUS.ESTABLISHED) {
+        $("#publishBtn").prop('disabled', false);
+        $('#publishStream').prop('disabled', false);
+    } else {
+        $("#publishBtn").prop('disabled', true);
+        $('#publishStream').prop('disabled', true);
+    }
+    if (publishFailureIntervalID) {
+        clearInterval(publishFailureIntervalID);
+        publishFailureIntervalID = null;
+    }
+    checkPublishFailureConditions();
+}
+
+function publishBtnClick(stripCodecs) {
+    if (validateForm("streamerForm")) {
+        $('#publishStream').prop('disabled', true);
+        $(this).prop('disabled', true);
+        if (Browser.isSafariWebRTC()) {
+            Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(function() {
+                publishStream(stripCodecs);
+            });
+            return;
+        }
+        publishStream(stripCodecs);
+    }
+}
+
+function onPlaying(stream) {
+    $("#playBtn").text("Stop").off('click').click(function () {
+        $(this).prop('disabled', true);
+        stream.stop();
+    }).prop('disabled', false);
+    $("#playInfo").text("");
+}
+
+function onStopped() {
+    $("#playBtn").text("Play").off('click').click(playBtnClick);
+    if (Flashphoner.getSessions()[0] && Flashphoner.getSessions()[0].status() == SESSION_STATUS.ESTABLISHED) {
+        $("#playBtn").prop('disabled', false);
+        $('#playStream').prop('disabled', false);
+    } else {
+        $("#playBtn").prop('disabled', true);
+        $('#playStream').prop('disabled', true);
+    }
+}
+
+function playBtnClick() {
+    if (validateForm("playerForm")) {
+        $('#playStream').prop('disabled', true);
+        $(this).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 () {
+                playStream();
+            });
+            return;
+        }
+        playStream();
+    }
+}
+
+function publishStream(stripCodecs) {
+    var session = Flashphoner.getSessions()[0];
+    var streamName = $('#publishStream').val();
+
+    session.createStream({
+        name: streamName,
+        display: localVideo,
+        cacheLocalResources: true,
+        receiveVideo: false,
+        receiveAudio: false,
+        stripCodecs: stripCodecs
+    }).on(STREAM_STATUS.PUBLISHING, function (stream) {
+        setStatus("#publishStatus", STREAM_STATUS.PUBLISHING);
+        onPublishing(stream);
+    }).on(STREAM_STATUS.UNPUBLISHED, function () {
+        setStatus("#publishStatus", STREAM_STATUS.UNPUBLISHED);
+        onUnpublished();
+    }).on(STREAM_STATUS.FAILED, function (stream) {
+        setStatus("#publishStatus", STREAM_STATUS.FAILED, stream);
+        onUnpublished();
+    }).publish();
+}
+
+function playStream() {
+    var session = Flashphoner.getSessions()[0];
+    var streamName = $('#playStream').val();
+
+    session.createStream({
+        name: streamName,
+        display: remoteVideo
+    }).on(STREAM_STATUS.PENDING, function (stream) {
+        var video = document.getElementById(stream.id());
+        if (!video.hasListeners) {
+            video.hasListeners = true;
+            video.addEventListener('resize', function (event) {
+                resizeVideo(event.target);
+            });
+        }
+    }).on(STREAM_STATUS.PLAYING, function (stream) {
+        setStatus("#playStatus", stream.status());
+        onPlaying(stream);
+    }).on(STREAM_STATUS.STOPPED, function () {
+        setStatus("#playStatus", STREAM_STATUS.STOPPED);
+        onStopped();
+    }).on(STREAM_STATUS.FAILED, function (stream) {
+        setStatus("#playStatus", STREAM_STATUS.FAILED, stream);
+        onStopped();
+    }).on(STREAM_EVENT, function(streamEvent) {
+        switch (streamEvent.type) {
+            case STREAM_EVENT_TYPE.DATA:
+                addPayload(streamEvent.payload);
+                break;
+        }
+        console.log("Received streamEvent ", streamEvent.type);
+    }).play();
+}
+
+
+//show connection, or local, or remote stream status
+function setStatus(selector, status, stream) {
+    var statusField = $(selector);
+    statusField.text(status).removeClass();
+    if (status == "PLAYING" || status == "ESTABLISHED" || status == "PUBLISHING") {
+        statusField.attr("class", "text-success");
+    } else if (status == "DISCONNECTED" || status == "UNPUBLISHED" || status == "STOPPED") {
+        statusField.attr("class", "text-muted");
+    } else if (status == "FAILED") {
+        if (stream) {
+            if (stream.published()) {
+                switch(stream.getInfo()){
+                    case STREAM_STATUS_INFO.STREAM_NAME_ALREADY_IN_USE:
+                        $("#publishInfo").text("Server already has a publish stream with the same name, try using different one").attr("class", "text-muted");
+                        break;
+                    case ERROR_INFO.LOCAL_ERROR:
+                        $("#publishInfo").text("Browser error detected: " + stream.getErrorInfo()).attr("class", "text-muted");
+                        break;
+                    default:
+                        $("#publishInfo").text("Other: "+stream.getInfo()).attr("class", "text-muted");
+                        break;
+                }
+            } else {
+                switch(stream.getInfo()){
+                    case STREAM_STATUS_INFO.SESSION_DOES_NOT_EXIST:
+                        $("#playInfo").text("Actual session does not exist").attr("class", "text-muted");
+                        break;
+                    case STREAM_STATUS_INFO.STOPPED_BY_PUBLISHER_STOP:
+                        $("#playInfo").text("Related publisher stopped its stream or lost connection").attr("class", "text-muted");
+                        break;
+                    case STREAM_STATUS_INFO.SESSION_NOT_READY:
+                        $("#playInfo").text("Session is not initialized or terminated on play ordinary stream").attr("class", "text-muted");
+                        break;
+                    case STREAM_STATUS_INFO.RTSP_STREAM_NOT_FOUND:
+                        $("#playInfo").text("Rtsp stream not found where agent received '404-Not Found'").attr("class", "text-muted");
+                        break;
+                    case STREAM_STATUS_INFO.FAILED_TO_CONNECT_TO_RTSP_STREAM:
+                        $("#playInfo").text("Failed to connect to rtsp stream").attr("class", "text-muted");
+                        break;
+                    case STREAM_STATUS_INFO.FILE_NOT_FOUND:
+                        $("#playInfo").text("File does not exist, check filename").attr("class", "text-muted");
+                        break;
+                    case STREAM_STATUS_INFO.FILE_HAS_WRONG_FORMAT:
+                        $("#playInfo").text("File has wrong format on play vod, this format is not supported").attr("class", "text-muted");
+                        break;
+                    case STREAM_STATUS_INFO.TRANSCODING_REQUIRED_BUT_DISABLED:
+                        $("#playInfo").text("Transcoding required, but disabled in settings").attr("class", "text-muted");
+                        break;
+                    case STREAM_STATUS_INFO.NO_AVAILABLE_TRANSCODERS:
+                        $("#playInfo").text("No available transcoders for stream").attr("class", "text-muted");
+                        break;
+                    default:
+                        $("#playInfo").text("Other: "+stream.getInfo()).attr("class", "text-muted");
+                        break;
+                }
+            }
+        }
+        statusField.attr("class", "text-danger");
+    }
+}
+
+// Detect publishing failure in Chrome using outgoing streaming stats #WCS-3382
+function detectPublishFailure(stream, failureCheckInterval, maxBitrateDropsCount) {
+    statPublishFailureDetector = {
+        failed: false,
+        codec: "",
+        lastBytesSent: 0,
+        counter: {
+            value: 0,
+            threshold: maxBitrateDropsCount
+        }        
+    }
+    publishFailureIntervalID = setInterval(function() {
+        stream.getStats(function(stat) {
+            let videoStats = stat.outboundStream.video;
+            if(!videoStats) {
+                return;
+            }
+            let codec = videoStats.codec;
+            let bytesSent = videoStats.bytesSent;
+            let bitrate = (bytesSent - statPublishFailureDetector.lastBytesSent) * 8;
+            if (bitrate == 0) {
+                statPublishFailureDetector.counter.value++;
+                console.log("Bitrate is 0 (" + statPublishFailureDetector.counter.value + ")");
+                if (statPublishFailureDetector.counter.value >= statPublishFailureDetector.counter.threshold) {
+                    statPublishFailureDetector.failed = true;
+                    console.log("Publishing seems to be failed, stop the stream");
+                    stream.stop();
+                }
+            } else {
+                statPublishFailureDetector.counter.value = 0;
+            }
+            statPublishFailureDetector.lastBytesSent = bytesSent;
+            statPublishFailureDetector.codec = codec;
+            $("#publishInfo").text(statPublishFailureDetector.codec);
+        });
+    }, failureCheckInterval);
+}
+
+// Check if H264 publishing is failed in Chrome and restart as VP8 #WCS-3382
+function checkPublishFailureConditions() {
+    if (statPublishFailureDetector.failed) {
+        $("#publishInfo").text("Failed to publish " + statPublishFailureDetector.codec);    
+        if (statPublishFailureDetector.codec == "H264") {
+            console.log("H264 publishing seems to be failed, trying VP8 by stripping H264");
+            let stripCodecs = "H264";
+            publishBtnClick(stripCodecs);
+        } else if (statPublishFailureDetector.codec == "VP8") {
+            console.log("VP8 publishing seems to be failed, giving up");
+        }
+    }
+}
+
+function validateForm(formId) {
+    var valid = true;
+    $('#' + formId + ' :text').each(function () {
+        if (!$(this).val()) {
+            highlightInput($(this));
+            valid = false;
+        } else {
+            removeHighlight($(this));
+        }
+    });
+    return valid;
+
+    function highlightInput(input) {
+        input.closest('.input-group').addClass("has-error");
+    }
+
+    function removeHighlight(input) {
+        input.closest('.input-group').removeClass("has-error");
+    }
+}