@flashphoner/websdk 2.0.201 → 2.0.206

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;
@@ -412,6 +413,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 +436,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());
@@ -862,6 +865,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/typescript/two-way-streaming-ts/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/examples/typescript/two-way-streaming-ts/README.md

@@ -0,0 +1,36 @@
+# Two Way Streaming React example application written in Typescript
+
+This example shows how to integrate Flashphoner [WebCallServer](https://flashphoner.com) Javascript API ([WebSDK](https://www.npmjs.com/package/@flashphoner/websdk)) with Typescript typings to to React application 
+
+## How to build
+
+In the project directory, you can run:
+
+### `npm install`
+
+Installs all the dependencies needed.
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React and WebSDK in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+## How to deploy
+
+Copy build folder content to a web server, for example
+```
+mkdir -p /var/www/html/two-way-streaming-ts
+cp -r build/* /var/www/html/two-way-streaming-ts
+```
+
+Then you can open example page in browser `https://yourhost/two-way-streaming-ts/index.html`
+
+Please note that you should open page via secure connection in browser for WebRTC to work, except localhost.

package/examples/typescript/two-way-streaming-ts/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "two-way-streaming-ts",
+  "description": "Two Way Streaming React appliction example written in Typescript using Flashphoner Web SDK",
+  "author": "Flashphoner",
+  "license": "MIT",
+  "version": "1.0.0",
+  "homepage": ".",
+  "private": true,
+  "dependencies": {
+    "@flashphoner/websdk": "^2.0.202",
+    "@types/jest": "^27.0.2",
+    "@types/node": "^16.10.3",
+    "@types/react": "^17.0.27",
+    "@types/react-dom": "^17.0.9",
+    "bootstrap": "^5.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/examples/typescript/two-way-streaming-ts/public/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Two Way Streaming example created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>TwoWay Streaming React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/examples/typescript/two-way-streaming-ts/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Two Way Streaming",
+  "name": "Two Way Streaming React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/examples/typescript/two-way-streaming-ts/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/examples/typescript/two-way-streaming-ts/src/TwoWayStreamingApp.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/typescript/two-way-streaming-ts/src/TwoWayStreamingApp.tsx

@@ -0,0 +1,371 @@
+import React, { Component } from 'react';
+import './TwoWayStreamingApp.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import * as FPUtils from './fp-utils';
+import * as Flashphoner from '@flashphoner/websdk';
+
+const SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
+const STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
+const Browser = Flashphoner.Browser;
+const PRELOADER_URL = process.env.PUBLIC_URL + '/media/preloader.mp4';
+
+interface TwoWayStreamingState {
+  apiFailed: string,
+  session: any,
+  sessionStatus: string,
+  sessionStatusClass: string,
+  localVideo: any,
+  remoteVideo: any,
+  publishStream: any,
+  publishStatus: string,
+  publishStatusClass: string,
+  playStream: any,
+  playStatus: string,
+  playStatusClass: string,
+  publishStreamName: string,
+  publishStreamNameDisabled: boolean,
+  playStreamName: string,
+  playStreamNameDisabled: boolean,
+  connectButtonText: string,
+  connectButtonDisabled: boolean,
+  serverUrl: string,
+  serverUrlDisabled: boolean,
+  publishButtonText: string,
+  publishButtonDisabled: boolean,
+  playButtonText: string,
+  playButtonDisabled: boolean
+}
+
+class TwoWayStreamingApp extends Component<{}, TwoWayStreamingState> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      apiFailed: '',
+      session: null,
+      sessionStatus: '',
+      sessionStatusClass: 'text-muted',
+      localVideo: null,
+      remoteVideo: null,
+      publishStream: null,
+      publishStatus: '',
+      publishStatusClass: 'text-muted',
+      playStream: null,
+      playStatus: '',
+      playStatusClass: 'text-muted',
+      publishStreamName: 'streamName',
+      publishStreamNameDisabled: true,
+      playStreamName: 'streamName',
+      playStreamNameDisabled: true,
+      connectButtonText: 'Connect',
+      connectButtonDisabled: false,
+      serverUrl: 'wss://demo.flashphoner.com:8443',
+      serverUrlDisabled: false,
+      publishButtonText: 'Publish',
+      publishButtonDisabled: true,
+      playButtonText: 'Play',
+      playButtonDisabled: true
+    };
+  }
+
+  componentDidMount() {
+    try {
+      Flashphoner.init({});
+      this.setState({
+        localVideo: document.getElementById('localVideo'),
+        remoteVideo: document.getElementById('remoteVideo')
+      });
+    }
+    catch(e) {
+      console.log(e);
+      this.setState({
+        apiFailed: 'Your browser does not support WebRTC technology needed for this example',
+        connectButtonDisabled: true,
+        serverUrlDisabled: true
+      });
+    }
+  }
+
+  onConnected = (session: any) => {
+    this.setState({
+      session: session,
+      connectButtonText: 'Disconnect',
+      connectButtonDisabled: false,
+      serverUrlDisabled: true
+    });
+    this.onUnpublished();
+    this.onStopped();
+  }
+
+  onDisconnected = () => {
+    this.setState({
+      session: null,
+      connectButtonText: 'Connect',
+      connectButtonDisabled: false,
+      serverUrlDisabled: false
+    });
+    this.onUnpublished();
+    this.onStopped();
+  }
+
+  onPublishing = (stream: any) => {
+    this.setState({
+      publishStream: stream,
+      publishButtonText: 'Unpublish',
+      publishButtonDisabled: false
+    });
+  }
+
+  onUnpublished = () => {
+    let session = this.state.session;
+    let itemState = true;
+
+    if(session && session.status() === SESSION_STATUS.ESTABLISHED) {
+      itemState = false;
+    }
+    this.setState({
+      publishStream: null,
+      publishButtonText: 'Publish',
+      publishButtonDisabled: itemState,
+      publishStreamNameDisabled: itemState
+    });
+  }
+
+  onPlaying = (stream: any) => {
+    this.setState({
+      playStream: stream,
+      playButtonText: 'Stop',
+      playButtonDisabled: false
+    });
+  }
+
+  onStopped = () => {
+    let session = this.state.session;
+    let itemState = true;
+
+    if(session && session.status() === SESSION_STATUS.ESTABLISHED) {
+      itemState = false;
+    }
+    this.setState({
+      playStream: null,
+      playButtonText: 'Play',
+      playButtonDisabled: itemState,
+      playStreamNameDisabled: itemState
+    });
+  }
+
+  publishStream = () => {
+    let app = this;
+    let session = this.state.session;
+    let streamName = this.state.publishStreamName;
+    let localVideo = this.state.localVideo;
+
+    if(session && localVideo) {
+      session.createStream({
+        name: streamName,
+        display: localVideo,
+        cacheLocalResources: true,
+        receiveVideo: false,
+        receiveAudio: false
+      }).on(STREAM_STATUS.PUBLISHING, (stream: any) => {
+        app.setState({publishStatus: STREAM_STATUS.PUBLISHING, publishStatusClass: 'text-success'});
+        app.onPublishing(stream);
+      }).on(STREAM_STATUS.UNPUBLISHED, () => {
+        app.setState({publishStatus: STREAM_STATUS.UNPUBLISHED, publishStatusClass: 'text-success'});
+        app.onUnpublished();
+      }).on(STREAM_STATUS.FAILED, () => {
+        app.setState({publishStatus: STREAM_STATUS.FAILED, publishStatusClass: 'text-danger'});
+        app.onUnpublished();
+      }).publish();
+    }
+  }
+
+  playStream = () => {
+    let app = this;
+    let session = this.state.session;
+    let streamName = this.state.playStreamName;
+    let remoteVideo = this.state.remoteVideo;
+
+    if(session && remoteVideo) {
+      session.createStream({
+        name: streamName,
+        display: remoteVideo
+      }).on(STREAM_STATUS.PENDING, (stream: any) => {
+        let video: any = document.getElementById(stream.id());
+        if (!video.hasListeners) {
+            video.hasListeners = true;
+            video.addEventListener('resize', (event: any) => {
+                FPUtils.resizeVideo(event.target);
+            });
+        }
+      }).on(STREAM_STATUS.PLAYING, (stream: any) => {
+        app.setState({playStatus: STREAM_STATUS.PLAYING, playStatusClass: 'text-success'});
+        app.onPlaying(stream);
+      }).on(STREAM_STATUS.STOPPED, () => {
+        app.setState({playStatus: STREAM_STATUS.STOPPED, playStatusClass: 'text-success'});
+        app.onStopped();
+      }).on(STREAM_STATUS.FAILED, () => {
+        app.setState({playStatus: STREAM_STATUS.FAILED, playStatusClass: 'text-danger'});
+        app.onStopped();
+      }).play();
+    }
+  }
+
+  onConnectClick = () => {
+    let app = this;
+    let url = this.state.serverUrl;
+    let session = this.state.session;
+
+    if (!session) {
+      console.log("Create new session with url " + url);
+      app.setState({connectButtonDisabled: true, serverUrlDisabled: true});
+      Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, (session: any) => {
+        app.setState({sessionStatus: SESSION_STATUS.ESTABLISHED, sessionStatusClass: 'text-success'});
+        app.onConnected(session);
+      }).on(SESSION_STATUS.DISCONNECTED, () => {
+        app.setState({sessionStatus: SESSION_STATUS.DISCONNECTED, sessionStatusClass: 'text-success'});
+        app.onDisconnected();
+      }).on(SESSION_STATUS.FAILED, () => {
+        app.setState({sessionStatus: SESSION_STATUS.FAILED, sessionStatusClass: 'text-danger'});
+        app.onDisconnected();
+      });
+    } else {
+      app.setState({connectButtonDisabled: true});
+      session.disconnect();
+    }
+  }
+
+  onPublishClick = () => {
+    let app = this;
+    let stream = this.state.publishStream;
+    let localVideo = this.state.localVideo;
+
+    if (!localVideo) return;
+    if (!stream) {
+      app.setState({publishButtonDisabled: true, publishStreamNameDisabled: true});
+      if (Browser.isSafariWebRTC()) {
+        Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(() => {
+            app.publishStream();
+        });
+        return;
+      }
+      app.publishStream();
+    } else {
+      app.setState({publishButtonDisabled: true});
+      stream.stop();
+    }
+  }
+
+  onPlayClick = () => {
+    let app = this;
+    let stream = this.state.playStream;
+    let remoteVideo = this.state.remoteVideo;
+
+    if (!remoteVideo) return;
+    if (!stream) {
+      app.setState({playButtonDisabled: true, playStreamNameDisabled: true});
+      if (Flashphoner.getMediaProviders()[0] === "WSPlayer") {
+        Flashphoner.playFirstSound();
+      } else if (Browser.isSafariWebRTC()) {
+        Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(() => {
+            app.playStream();
+        });
+        return;
+      }
+      app.playStream();
+    } else {
+      app.setState({playButtonDisabled: true});
+      stream.stop();
+    }
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <h2 className="text-danger">{this.state.apiFailed}</h2>
+        <div className="row">
+          <h2 className="text-center">Two-way Streaming in Typescript</h2>
+        </div>
+        <div className="row row-space">
+          <div className="col-sm-6">
+            <div className="text-center text-muted">Local</div>
+            <div className="fp-Video">
+              <div id="localVideo" className="display"></div>
+            </div>
+            <div className="input-group col-sm-5" style={{margin: '10px auto 0 auto'}}>
+              <input type="text" 
+               className="form-control"
+               placeholder="Stream Name"
+               value={this.state.publishStreamName}
+               disabled={this.state.publishStreamNameDisabled}
+               onChange={(event) => this.setState({publishStreamName: event.target.value})}
+              />
+              <div className="input-group-btn">
+                <button
+                 className="btn btn-outline-dark"
+                 disabled={this.state.publishButtonDisabled}
+                 onClick={() => this.onPublishClick()}>
+                  {this.state.publishButtonText}
+                </button>
+              </div>
+            </div>
+            <div className="text-center" style={{marginTop: '20px'}}>
+              <div className={this.state.publishStatusClass}>{this.state.publishStatus}</div>
+            </div>
+          </div>
+          <div className="col-sm-6">
+            <div className="text-center text-muted">Remote</div>
+            <div className="fp-Video">
+              <div id="remoteVideo" className="display"></div>
+            </div>
+            <div className="input-group col-sm-5" style={{margin: '10px auto 0 auto'}}>
+              <input type="text" 
+               className="form-control"
+               placeholder="Stream Name"
+               value={this.state.playStreamName}
+               disabled={this.state.playStreamNameDisabled}
+               onChange={(event) => this.setState({playStreamName: event.target.value})}
+              />
+              <div className="input-group-btn">
+                <button
+                 className="btn btn-outline-dark"
+                 disabled={this.state.playButtonDisabled}
+                 onClick={() => this.onPlayClick()}>
+                  {this.state.playButtonText}
+                </button>
+              </div>
+            </div>
+            <div className="text-center" style={{marginTop: '20px'}}>
+              <div className={this.state.playStatusClass}>{this.state.playStatus}</div>
+            </div>
+          </div>
+        </div>
+        <div className="row row-space">
+            <div className="col-sm-6 offset-sm-3">
+              <div className="input-group col-sm-5">
+                <input type="text"
+                 className="form-control"
+                 placeholder="Server Url"
+                 value={this.state.serverUrl}
+                 disabled={this.state.serverUrlDisabled}
+                 onChange={(event) => this.setState({serverUrl: event.target.value})}
+                />
+                <div className="input-group-btn">
+                  <button
+                   className="btn btn-outline-dark"
+                   disabled={this.state.connectButtonDisabled}
+                   onClick={() => this.onConnectClick()}>
+                    {this.state.connectButtonText}
+                  </button>
+                </div>
+              </div>
+              <div className="text-center" style={{marginTop: '20px'}}>
+                <div className={this.state.sessionStatusClass}>{this.state.sessionStatus}</div>
+              </div>
+            </div>
+        </div>
+      </div>
+    );
+  };
+}
+
+export default TwoWayStreamingApp;