@flashphoner/websdk 2.0.202 → 2.0.207

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;

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"
+  ]
+}