still unfinished

1 files changed, 61 insertions, 12 deletions

diff --git a/src/client/views/webcam/DashWebRTC.tsx b/src/client/views/webcam/DashWebRTC.tsx
index 203a9df35..9c289b40f 100644
--- a/src/client/views/webcam/DashWebRTC.tsx
+++ b/src/client/views/webcam/DashWebRTC.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import React = require("react");
 import { CollectionFreeFormDocumentViewProps } from "../nodes/CollectionFreeFormDocumentView";
 import { FieldViewProps, FieldView } from "../nodes/FieldView";
-import { observable } from "mobx";
+import { observable, trace } from "mobx";
 import { DocumentDecorations } from "../DocumentDecorations";
 import { InkingControl } from "../InkingControl";
 import "../../views/nodes/WebBox.scss";
@@ -15,30 +15,79 @@ const mediaStreamConstaints = {
     video: true,
 };
 
+const offerOptions = {
+    offerToReceiveVideo: 1,
+};
+
 
 @observer
 export class DashWebRTC extends React.Component<CollectionFreeFormDocumentViewProps & FieldViewProps> {
 
-    @observable private videoEl: HTMLVideoElement | undefined;
+    @observable private localVideoEl: HTMLVideoElement | undefined;
+    @observable private peerVideoEl: HTMLVideoElement | undefined;
     @observable private localStream: MediaStream | undefined;
+    @observable private startTime = null;
+    @observable private remoteStream: MediaStream | undefined;
+    @observable private localPeerConnection: any;
+    @observable private remotePeerConnection: any;
+    private callButton: HTMLButtonElement | undefined;
+    private startButton: HTMLButtonElement | undefined;
+    private hangupButton: HTMLButtonElement | undefined;
+
+
+    componentDidMount() {
+        this.callButton!.disabled = true;
+        this.hangupButton!.disabled = true;
+        navigator.mediaDevices.getUserMedia(mediaStreamConstaints).then(this.gotLocalMediaStream).catch(this.handleLocalMediaStreamError);
+        this.localVideoEl!.addEventListener('loadedmetadata', this.logVideoLoaded);
+        this.peerVideoEl!.addEventListener('loadedmetadata', this.logVideoLoaded);
+        this.peerVideoEl!.addEventListener('onresize', this.logResizedVideo);
+    }
 
 
     gotLocalMediaStream = (mediaStream: MediaStream) => {
         this.localStream = mediaStream;
-        if (this.videoEl) {
-            this.videoEl.srcObject = mediaStream;
+        if (this.localVideoEl) {
+            this.localVideoEl.srcObject = mediaStream;
         }
+        trace('Received local stream.');
+        this.callButton!.disabled = false;
+
+    }
+
+    gotRemoteMediaStream = (event: MediaStreamEvent) => {
+        let mediaStream = event.stream;
+        this.peerVideoEl!.srcObject = mediaStream;
+        this.remoteStream = mediaStream!;
+
     }
 
     handleLocalMediaStreamError = (error: string) => {
-        console.log("navigator.getUserMedia error: ", error);
+        //console.log("navigator.getUserMedia error: ", error);
+        trace(`navigator.getUserMedia error: ${error.toString()}.`);
+
     }
 
-    componentDidUpdate() {
-        navigator.mediaDevices.getUserMedia(mediaStreamConstaints).then(this.gotLocalMediaStream).catch(this.handleLocalMediaStreamError);
+    logVideoLoaded(event: any) {
+        let video = event.target;
+        trace(`${video!.id} videoWidth: ${video!.videoWidth}px, ` +
+            `videoHeight: ${video!.videoHeight}px.`);
+    }
+
+    logResizedVideo(event: any) {
+        this.logVideoLoaded(event);
+
+        if (this.startTime) {
+            let elapsedTime = window.performance.now() - this.startTime!;
+            this.startTime = null;
+            trace(`Setup time: ${elapsedTime.toFixed(3)}ms.`);
+        }
+
     }
 
 
+
+
     public static LayoutString() { return FieldView.LayoutString(DashWebRTC); }
 
 
@@ -65,11 +114,11 @@ export class DashWebRTC extends React.Component<CollectionFreeFormDocumentViewPr
     render() {
         let content =
             <div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
-                <video id="localVideo" autoPlay playsInline ref={(e) => this.videoEl = e!}></video>
-                <video id="remoteVideo" autoPlay playsInline></video>
-                <button id="startButton">Start</button>
-                <button id="callButton">Call</button>
-                <button id="hangupButton">Hang Up</button>
+                <video id="localVideo" autoPlay playsInline ref={(e) => this.localVideoEl = e!}></video>
+                <video id="remoteVideo" autoPlay playsInline ref={(e) => this.peerVideoEl = e!}></video>
+                <button id="startButton" ref={(e) => this.startButton = e!}>Start</button>
+                <button id="callButton" ref={(e) => this.callButton = e!}>Call</button>
+                <button id="hangupButton" ref={(e) => this.hangupButton = e!}>Hang Up</button>
             </div>;
 
         let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;