@flashphoner/websdk 2.0.201 → 2.0.206

package/examples/typescript/two-way-streaming-ts/src/fp-utils.ts

@@ -0,0 +1,117 @@
+// eslint-disable-next-line
+'use strict';
+import { constants } from '@flashphoner/websdk';
+const STREAM_STATUS = constants.STREAM_STATUS;
+
+// Set default websocket URL
+export function setURL(): string {
+    let proto: string;
+    let url: string;
+    let port: string;
+    if (window.location.protocol === "http:") {
+        proto = "ws://";
+        port = "8080";
+    } else {
+        proto = "wss://";
+        port = "8443";
+    }
+
+    url = proto + window.location.hostname + ":" + port;
+    return url;
+}
+
+// Get URL parameter by name
+export function getUrlParam(name: string): string | null {
+    let url = window.location.href;
+    // eslint-disable-next-line
+    name = name.replace(/[\[\]]/g, "\\$&");
+    let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
+// Generate simple uuid
+export function createUUID(length: number): string {
+    var s = [];
+    var hexDigits = "0123456789abcdef";
+    for (var i = 0; i < 36; i++) {
+        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = "4";
+    s[19] = hexDigits.substr((parseInt(s[19], 16) & 0x3) | 0x8, 1);
+    s[8] = s[13] = s[18] = s[23] = "-";
+
+    var uuid = s.join("");
+
+    return uuid.substring(0, length);
+}
+
+// Helper function to downscale picture size
+export function downScaleToFitSize(videoWidth: number, videoHeight: number, dstWidth: number, dstHeight: number): any {
+    let newWidth: number, newHeight: number;
+    var videoRatio = videoWidth / videoHeight;
+    var dstRatio = dstWidth / dstHeight;
+    if (dstRatio > videoRatio) {
+        newHeight = dstHeight;
+        newWidth = Math.floor(videoRatio * dstHeight);
+    } else {
+        newWidth = dstWidth;
+        newHeight = Math.floor(dstWidth / videoRatio);
+    }
+    return {
+        w: newWidth,
+        h: newHeight
+    };
+}
+
+/**
+ * Resize video object to fit parent div.
+ * Div structure: div WxH -> div wrapper (display) -> video
+ * @param video HTML element from resize event target
+ */
+export function resizeVideo(video: any, width?: number, height?: number) {
+    if (!video.parentNode) {
+        return;
+    }
+    let videoWidth = video.width;
+    let videoHeight = video.height;
+    if (video instanceof HTMLVideoElement) {
+        videoWidth = video.videoWidth;
+        videoHeight = video.videoHeight;
+    }
+    var display = video.parentNode;
+    var parentSize = {
+        w: display.parentNode.clientWidth,
+        h: display.parentNode.clientHeight
+    };
+    let newSize: any;
+    if (width && height) {
+        newSize = downScaleToFitSize(width, height, parentSize.w, parentSize.h);
+    } else {
+        newSize = downScaleToFitSize(videoWidth, videoHeight, parentSize.w, parentSize.h);
+    }
+    display.style.width = newSize.w + "px";
+    display.style.height = newSize.h + "px";
+
+    //vertical align
+    let margin = 0;
+    if (parentSize.h - newSize.h > 1) {
+        margin = Math.floor((parentSize.h - newSize.h) / 2);
+    }
+    display.style.margin = margin + "px auto";
+    console.log("Resize from " + videoWidth + "x" + videoHeight + " to " + display.offsetWidth + "x" + display.offsetHeight);
+}
+
+export function isPlaying(streamStatus: string): boolean {
+    switch(streamStatus) {
+      case STREAM_STATUS.PLAYING:
+      case STREAM_STATUS.RESIZE:
+      case STREAM_STATUS.SNAPSHOT_COMPLETE:
+      case STREAM_STATUS.NOT_ENOUGH_BANDWIDTH:
+        return true;
+      default:
+        return false;
+    }
+}

package/examples/typescript/two-way-streaming-ts/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/examples/typescript/two-way-streaming-ts/src/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import TwoWayStreamingApp from './TwoWayStreamingApp';
+
+ReactDOM.render(
+  <TwoWayStreamingApp />,
+  document.getElementById('root')
+);

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

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "src"
+  ]
+}

package/examples/vue/two-way-streaming-vue/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/examples/vue/two-way-streaming-vue/README.md

@@ -0,0 +1,36 @@
+# Two Way Streaming Vue.js example application
+
+This example shows how to integrate Flashphoner [WebCallServer](https://flashphoner.com) Javascript API ([WebSDK](https://www.npmjs.com/package/@flashphoner/websdk)) to Vue.js application 
+
+## How to build
+
+In the project directory, you can run:
+
+### `npm install`
+
+Installs all the dependencies needed.
+
+### `npm run serve`
+
+Runs the app in the development mode.\
+Open [http://localhost:8080](http://localhost:8080) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` 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-vue
+cp -r dist/* /var/www/html/two-way-streaming-vue
+```
+
+Then you can open example page in browser `https://yourhost/two-way-streaming-vue/index.html`
+
+Please note that you should open page via secure connection in browser for WebRTC to work, except localhost.

package/examples/vue/two-way-streaming-vue/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/examples/vue/two-way-streaming-vue/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "two-way-streaming-vue",
+  "description": "Two Way Streaming Vue.js application example using Flashphoner Web SDK",
+  "author": "Flashphoner",
+  "license": "MIT",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@flashphoner/websdk": "^2.0.200",
+    "bootstrap": "^5.1.1",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/examples/vue/two-way-streaming-vue/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/examples/vue/two-way-streaming-vue/src/TwoWayStreamingApp.vue

@@ -0,0 +1,346 @@
+<template>
+  <div id="app">
+    <div class="container">
+      <h2 class="text-danger">{{ apiFailed }}</h2>
+      <div class="row col-sm-12">
+        <h2 class="text-center">Two-way Streaming in Vue</h2>
+      </div>
+      <div class="row col-sm-12" style="margin-top: 20px;">
+        <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 class="input-group col-sm-5" style="margin: 10px auto 0 auto;">
+            <input type="text" 
+             class="form-control"
+             placeholder="Stream Name"
+             v-model="publishStreamName"
+             :disabled="publishStreamNameDisabled"
+            />
+            <div class="input-group-btn">
+              <button
+               class="btn btn-outline-dark"
+               :disabled="publishButtonDisabled"
+               v-on:click="onPublishClick">
+                {{ publishButtonText }}
+              </button>
+            </div>
+          </div>
+          <div class="text-center" style="margin-top: 20px;">
+            <div v-bind:class="publishStatusClass">{{ publishStatus }}</div>
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="text-center text-muted">Remote</div>
+          <div class="fp-Video">
+            <div id="remoteVideo" class="display"></div>
+          </div>
+          <div class="input-group col-sm-5" style="margin: 10px auto 0 auto;">
+            <input type="text" 
+             class="form-control"
+             placeholder="Stream Name"
+             v-model="playStreamName"
+             :disabled="playStreamNameDisabled"
+            />
+            <div class="input-group-btn">
+              <button
+               class="btn btn-outline-dark"
+               :disabled="playButtonDisabled"
+               v-on:click="onPlayClick">
+                {{ playButtonText }}
+              </button>
+            </div>
+          </div>
+          <div class="text-center" style="margin-top: 20px;">
+            <div v-bind:class="playStatusClass">{{ playStatus }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="row col-sm-12" style="margin-top: 20px;">
+          <div class="col-sm-6 offset-sm-3">
+            <div class="input-group col-sm-5">
+              <input type="text"
+               class="form-control"
+               placeholder="Server Url"
+               v-model="serverUrl"
+               :disabled="serverUrlDisabled"
+              />
+              <div class="input-group-btn">
+                <button
+                 class="btn btn-outline-dark"
+                 :disabled="connectButtonDisabled"
+                 v-on:click="onConnectClick">
+                  {{ connectButtonText }}
+                </button>
+              </div>
+            </div>
+            <div class="text-center" style="margin-top: '20px';">
+              <div v-bind:class="sessionStatusClass">{{ sessionStatus }}</div>
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as FPUtils from './fp-utils.js';
+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 = require('@/assets/media/preloader.mp4');
+
+export default {
+  name: 'TwoWayStreamingApp',
+  data: () => ({
+    apiFailed: '',
+    session: null,
+    sessionStatus: '',
+    sessionStatusClass: 'text-muted',
+    localVideo: null,
+    remoteVideo: null,
+    publishStreamObj: null,
+    publishStatus: '',
+    publishStatusClass: 'text-muted',
+    playStreamObj: 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,
+  }),
+  mounted() {
+    this.onLoad();
+  },
+  methods: {
+    onLoad() {
+      try {
+        Flashphoner.init({});
+        this.localVideo = document.getElementById('localVideo');
+        this.remoteVideo = document.getElementById('remoteVideo');
+      }
+      catch(e) {
+        console.log(e);
+        this.apiFailed = 'Your browser does not support WebRTC technology needed for this example';
+        this.connectButtonDisabled = true;
+        this.serverUrlDisabled = true;
+      }
+    },
+    onConnected(session) {
+      this.session = session;
+      this.connectButtonText = 'Disconnect';
+      this.connectButtonDisabled = false;
+      this.serverUrlDisabled = true;
+      this.onUnpublished();
+      this.onStopped();
+    },
+    onDisconnected() {
+      this.session = null;
+      this.connectButtonText = 'Connect';
+      this.connectButtonDisabled = false;
+      this.serverUrlDisabled = false;
+      this.onUnpublished();
+      this.onStopped();
+    },
+    onPublishing(stream) {
+      this.publishStreamObj = stream;
+      this.publishButtonText = 'Unpublish';
+      this.publishButtonDisabled = false;
+    },
+    onUnpublished() {
+      let session = this.session;
+      let itemState = true;
+
+      if(session && session.status() === SESSION_STATUS.ESTABLISHED) {
+        itemState = false;
+      }
+      this.publishStreamObj = null;
+      this.publishButtonText = 'Publish';
+      this.publishButtonDisabled = itemState;
+      this.publishStreamNameDisabled = itemState;
+    },
+    onPlaying(stream) {
+      this.playStreamObj = stream;
+      this.playButtonText = 'Stop';
+      this.playButtonDisabled = false;
+    },
+    onStopped() {
+      let session = this.session;
+      let itemState = true;
+
+      if(session && session.status() === SESSION_STATUS.ESTABLISHED) {
+        itemState = false;
+      }
+      this.playStreamObj = null;
+      this.playButtonText = 'Play';
+      this.playButtonDisabled = itemState;
+      this.playStreamNameDisabled = itemState;
+    },
+    publishStream() {
+      let session = this.session;
+      let streamName = this.publishStreamName;
+      let localVideo = this.localVideo;
+
+      if(session && localVideo) {
+        session.createStream({
+          name: streamName,
+          display: localVideo,
+          cacheLocalResources: true,
+          receiveVideo: false,
+          receiveAudio: false
+        }).on(STREAM_STATUS.PUBLISHING, (stream) => {
+          this.publishStatus = STREAM_STATUS.PUBLISHING;
+          this.publishStatusClass = 'text-success';
+          this.onPublishing(stream);
+        }).on(STREAM_STATUS.UNPUBLISHED, () => {
+          this.publishStatus = STREAM_STATUS.UNPUBLISHED;
+          this.publishStatusClass = 'text-success';
+          this.onUnpublished();
+        }).on(STREAM_STATUS.FAILED, () => {
+          this.publishStatus = STREAM_STATUS.FAILED;
+          this.publishStatusClass = 'text-danger';
+          this.onUnpublished();
+        }).publish();
+      }
+    },
+    playStream() {
+      let session = this.session;
+      let streamName = this.playStreamName;
+      let remoteVideo = this.remoteVideo;
+
+      if(session && remoteVideo) {
+        session.createStream({
+          name: streamName,
+          display: remoteVideo
+        }).on(STREAM_STATUS.PENDING, (stream) => {
+          let video = document.getElementById(stream.id());
+          if (!video.hasListeners) {
+            video.hasListeners = true;
+            video.addEventListener('resize', (event) => {
+                FPUtils.resizeVideo(event.target);
+            });
+          }
+        }).on(STREAM_STATUS.PLAYING, (stream) => {
+          this.playStatus = STREAM_STATUS.PLAYING;
+          this.playStatusClass = 'text-success';
+          this.onPlaying(stream);
+        }).on(STREAM_STATUS.STOPPED, () => {
+          this.playStatus = STREAM_STATUS.STOPPED;
+          this.playStatusClass = 'text-success';
+          this.onStopped();
+        }).on(STREAM_STATUS.FAILED, () => {
+          this.playStatus = STREAM_STATUS.FAILED;
+          this.playStatusClass = 'text-danger';
+          this.onStopped();
+        }).play();
+      }
+    },
+    onConnectClick() {
+      let url = this.serverUrl;
+      let session = this.session;
+
+      if (!session) {
+        console.log("Create new session with url " + url);
+        this.connectButtonDisabled = true;
+        this.serverUrlDisabled = true;
+        Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, (session) => {
+          this.sessionStatus = SESSION_STATUS.ESTABLISHED;
+          this.sessionStatusClass = 'text-success';
+          this.onConnected(session);
+        }).on(SESSION_STATUS.DISCONNECTED, () => {
+          this.sessionStatus = SESSION_STATUS.DISCONNECTED;
+          this.sessionStatusClass = 'text-success';
+          this.onDisconnected();
+        }).on(SESSION_STATUS.FAILED, () => {
+          this.sessionStatus = SESSION_STATUS.FAILED;
+          this.sessionStatusClass = 'text-danger';
+          this.onDisconnected();
+        });
+      } else {
+        this.connectButtonDisabled = true;
+        session.disconnect();
+      }
+    },
+    onPublishClick() {
+      let stream = this.publishStreamObj;
+      let localVideo = this.localVideo;
+
+      if (!localVideo) return;
+      if (!stream) {
+        this.publishButtonDisabled = true;
+        this.publishStreamNameDisabled = true;
+        if (Browser.isSafariWebRTC()) {
+          Flashphoner.playFirstVideo(localVideo, true, PRELOADER_URL).then(() => {
+            this.publishStream();
+          });
+          return;
+        }
+        this.publishStream();
+      } else {
+        this.publishButtonDisabled = true;
+        stream.stop();
+      }
+    },
+    onPlayClick() {
+      let stream = this.playStreamObj;
+      let remoteVideo = this.remoteVideo;
+
+      if (!remoteVideo) return;
+      if (!stream) {
+        this.playButtonDisabled = true;
+        this.playStreamNameDisabled = true;
+        if (Flashphoner.getMediaProviders()[0] === "WSPlayer") {
+          Flashphoner.playFirstSound();
+        } else if (Browser.isSafariWebRTC()) {
+          Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(() => {
+            this.playStream();
+          });
+          return;
+        }
+        this.playStream();
+      } else {
+        this.playButtonDisabled = true;
+        stream.stop();
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.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;
+}
+</style>