npm - @flashphoner/websdk - Versions diffs - 2.0.236 → 2.0.238 - Mend

@flashphoner/websdk 2.0.236 → 2.0.238

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/examples/demo/streaming/screen-camera-mixer/screen-camera-mixer.css ADDED Viewed

@@ -0,0 +1,30 @@
+.fp-localVideo {
+    border: 1px double black;
+    width: 322px;
+    height: 242px;
+    text-align: center;
+    background: #c0c0c0;
+    margin: 10px auto;
+}
+.fp-previewVideo {
+    border: 1px double black;
+    width: 802px;
+    height: 402px;
+    text-align: center;
+    background: #c0c0c0;
+    margin: 10px auto;
+}
+.display {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+.display > video {
+    width: 100%;
+    height: 100%;
+}

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

@@ -0,0 +1,118 @@
+<!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="screen-camera-mixer.css">
+    <title>Screen Sharing with Camera</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="screen-camera-mixer.js"></script>
+    <!-- Bootstrap JS -->
+    <script src="../../dependencies/bootstrap/js/bootstrap.js"></script>
+</head>
+<body onload="init_page()">
+<div class="container">
+    <div class="row">
+        <h2 class="text-center col-sm-9">Screen Sharing with Camera</h2>
+    </div>
+    <div id="notify" class="modal fade" role="dialog">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <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 desktop browsers</h2>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <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-12 text-center">
+                    <div class="col-sm-4">
+                        <div class="form-group" id="fpsForm">
+                            <span class="text-muted">FPS</span>
+                            <input type="text" class="form-control" id="fps" value="15"/>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="form-group" id="widthForm">
+                            <span class="text-muted">Width</span>
+                            <input type="text" class="form-control" id="width" value="640"/>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="form-group" id="heightForm">
+                            <span class="text-muted">Height</span>
+                            <input type="text" class="form-control" id="height" value="480"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-12 text-center">
+                    <div class="col-sm-5">
+                        <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="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 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>
+                    <div id="screenInfo"></div>
+                </div>
+            </div>
+            <div class="col-sm-6 text-center">
+                <div class="fp-localVideo" style="margin-top: 140px">
+                    <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>
+                    <div id="cameraInfo"></div>
+                </div>
+            </div>
+            <div class="row row-space text-center" style="margin-top: 20px">
+                <!--<div class="col-sm-10 text-center">-->
+                <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"/>
+                    </div>
+                </div>
+                <div class="col-sm-2 text-left">
+                    <button id="connectBtn" type="button" class="btn btn-default">Connect</button>
+                </div>
+                <div class="col-sm-2 text-left">
+                    <button id="publishBtn" type="button" class="btn btn-default">Start</button>
+                </div>
+                <!--</div>-->
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,265 @@
+const SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
+const STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
+const Browser = Flashphoner.Browser;
+let localVideoScreen;
+let localVideoCamera;
+const init_page =  function() {
+    //init api
+    try {
+        Flashphoner.init();
+    } catch(e) {
+        $("#notifyFlash").text("Your browser doesn't support WebRTC technology needed for this example");
+        return;
+    }
+    if (Browser.isAndroid() && Browser.isiOS()) {
+        $("#notify").modal('show');
+        return false;
+    }
+    localVideoScreen = document.getElementById("localVideoScreen");
+    localVideoCamera = document.getElementById("localVideoCamera");
+    $("#url").val(setURL() + "/" + createUUID(8));
+    $("#mixerName").val("mixer");
+    onDisconnected();
+}
+const isSafariMacOS = function() {
+    return Browser.isSafari() && !Browser.isAndroid() && !Browser.isiOS();
+}
+const setConnectButton = function(action, session) {
+    $("#connectBtn").text(action).off('click').click(function(){
+        if (validateForm()) {
+            muteInputs();
+            $(this).prop('disabled', true);
+            if (action === "Connect") {
+                connect();
+            } else if (action === "Disconnect") {
+                session.disconnect();
+            }
+        }
+    }).prop('disabled', false);
+}
+const setPublishButton = function(action, session, cameraStream) {
+    $("#publishBtn").text(action).off('click').click(function(){
+        if (action == "Start") {
+            startStreaming(session);
+        } else if (action === "Stop") {
+            $(this).prop('disabled', true);
+            cameraStream.stop();
+        }
+    }).prop('disabled', false);
+}
+const onStarted = function(cameraStream) {
+    setPublishButton("Stop", null, cameraStream);
+    $("#connectBtn").prop('disabled', false);
+}
+const onStopped = function(session) {
+    setPublishButton("Start", session, null);
+    $("#connectBtn").prop('disabled', false);
+}
+const onConnected = function(session) {
+    setPublishButton("Start", session, null);
+    setConnectButton("Disconnect", session);
+}
+const onDisconnected = function() {
+    unmuteInputs();
+    $("#publishBtn").prop('disabled', true);
+    setConnectButton("Connect", null);
+}
+const connect = function() {
+    //check if we already have session
+    let url = field("url");
+    //check if we already have session
+    if (Flashphoner.getSessions().length > 0) {
+        let session = Flashphoner.getSessions()[0];
+        if (session.getServerUrl() == url) {
+            return;
+        } else {
+            //remove session DISCONNECTED and FAILED callbacks
+            session.on(SESSION_STATUS.DISCONNECTED, function(){});
+            session.on(SESSION_STATUS.FAILED, function(){});
+            session.disconnect();
+        }
+    }
+    console.log("Create new session with url " + url);
+    Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
+        //session connected, start streaming
+        setStatus("screen", SESSION_STATUS.ESTABLISHED);
+        setStatus("camera", SESSION_STATUS.ESTABLISHED);
+        onConnected(session);
+    }).on(SESSION_STATUS.DISCONNECTED, function(){
+        setStatus("screen", SESSION_STATUS.DISCONNECTED);
+        setStatus("camera", SESSION_STATUS.DISCONNECTED);
+        onDisconnected();
+    }).on(SESSION_STATUS.FAILED, function(){
+        setStatus("screen", SESSION_STATUS.FAILED);
+        setStatus("camera", SESSION_STATUS.DISCONNECTED);
+        onDisconnected();
+    });
+}
+const startStreaming = function(session) {
+    if (validateForm()) {
+        muteInputs();
+        $("publishBtn").prop('disabled', true);
+        startStreamingScreen(session);
+    }
+}
+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()),
+            type: "screen",
+            withoutExtension: true
+        }
+    };
+    if (Browser.isFirefox()) {
+        constraints.video.mediaSource = "screen";
+    }
+    let options = {
+        name: streamName,
+        display: localVideoScreen,
+        constraints: constraints
+    }
+    if (isSafariMacOS()) {
+        options.disableConstraintsNormalization = true;
+    }
+    session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(screenStream) {
+        /*
+         * User can stop sharing screen capture using Chrome "stop" button.
+         * Catch onended video track event and stop publishing.
+         */
+        document.getElementById(screenStream.id()).srcObject.getVideoTracks()[0].onended = function (e) {
+            screenStream.stop();
+        };
+        document.getElementById(screenStream.id()).addEventListener('resize', function(event){
+            resizeVideo(event.target);
+        });
+        setStatus("screen", STREAM_STATUS.PUBLISHING, screenStream);
+        startStreamingCamera(session, screenStream);
+    }).on(STREAM_STATUS.UNPUBLISHED, function() {
+        setStatus("screen", STREAM_STATUS.UNPUBLISHED);
+        //enable start button
+        onStopped(session);
+    }).on(STREAM_STATUS.FAILED, function(stream) {
+        setStatus("screen", STREAM_STATUS.FAILED, stream);
+        //enable start button
+        onStopped(session);
+    }).publish();
+}
+const startStreamingCamera = function(session, screenStream) {
+    let streamName = getStreamName("camera", field("url"));
+    let options = {
+        name: streamName,
+        display: localVideoCamera
+    }
+    session.createStream(options).on(STREAM_STATUS.PUBLISHING, function(cameraStream) {
+        document.getElementById(cameraStream.id()).addEventListener('resize', function(event){
+            resizeVideo(event.target);
+        });
+        setStatus("camera", STREAM_STATUS.PUBLISHING, cameraStream);
+        onStarted(cameraStream);
+    }).on(STREAM_STATUS.UNPUBLISHED, function() {
+        setStatus("camera", STREAM_STATUS.UNPUBLISHED);
+        screenStream.stop();
+    }).on(STREAM_STATUS.FAILED, function(stream) {
+        setStatus("camera", STREAM_STATUS.FAILED, stream);
+        if (screenStream.status() == STREAM_STATUS.PUBLISHING) {
+            setStatus(STREAM_STATUS.FAILED, stream);
+            screenStream.stop();
+        }
+    }).publish();
+}
+//show connection or local stream status
+const setStatus = function(type, status, stream) {
+    let nameField = $("#"+type+"Name");
+    let statusField = $("#"+type+"Status");
+    let infoField = $("#"+type+"Info");
+    if (stream) {
+        nameField.text(stream.name);
+    } else {
+        nameField.text("");
+    }
+    statusField.text(status).removeClass();
+    if (status == "PUBLISHING" || status == "ESTABLISHED") {
+        statusField.attr("class","text-success");
+    } else if (status == "DISCONNECTED" || status == "UNPUBLISHED") {
+        statusField.attr("class","text-muted");
+    } else if (status == "FAILED") {
+        statusField.attr("class","text-danger");
+        if (stream) {
+            infoField.text(stream.getInfo()).attr("class","text-muted");
+        }
+    }
+}
+const muteInputs = function() {
+    $(":input").each(function() {
+       $(this).prop('disabled',true);
+    });
+}
+const unmuteInputs =  function() {
+    $(":input").each(function() {
+        $(this).prop('disabled',false);
+    });
+}
+const validateForm = function() {
+    let valid = true;
+    $(':text').each(function(){
+        if (!$(this).val()) {
+            highlightInput($(this));
+            valid = false;
+        } else {
+            let numericFields = ['fps', 'width', 'height'];
+            if (numericFields.indexOf(this.id) != -1 && !(parseInt($(this).val()) > 0)) {
+                highlightInput($(this));
+                valid = false;
+            } else {
+                removeHighlight($(this));
+            }
+        }
+    });
+    return valid;
+}
+const highlightInput = function(input) {
+    input.closest('.form-group').addClass("has-error");
+}
+const removeHighlight = function(input) {
+    input.closest('.form-group').removeClass("has-error");
+}
+function getStreamName(type, url) {
+    let streamName = url.endsWith('/') === false ? url.split('/')[3] : "";
+    if (streamName) {
+        streamName += "-" + type;
+        if ($("#useMixer").prop('checked')) {
+            let mixerName = field("mixerName");
+            if (mixerName) {
+                streamName += "#" + mixerName;
+            }
+        }
+    }
+    return streamName;
+}

package/package.json CHANGED Viewed

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

/package/examples/demo/streaming/hls-player/{video-js.css → videojs7/video-js.css} RENAMED Viewed

File without changes