From 9c7521a36f67b3a69ac40f8a55e66638ed96bf04 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Tue, 29 Oct 2019 18:29:57 -0400 Subject: Client Side Namespace --- src/client/views/webcam/DashWebRTCVideo.tsx | 339 ++++++++++++++++++++++++++++ 1 file changed, 339 insertions(+) create mode 100644 src/client/views/webcam/DashWebRTCVideo.tsx (limited to 'src/client/views/webcam/DashWebRTCVideo.tsx') diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx new file mode 100644 index 000000000..db9c922fc --- /dev/null +++ b/src/client/views/webcam/DashWebRTCVideo.tsx @@ -0,0 +1,339 @@ +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 { DocumentDecorations } from "../DocumentDecorations"; +import { InkingControl } from "../InkingControl"; +import "../../views/nodes/WebBox.scss"; +import "./DashWebRTC.scss"; +import adapter from 'webrtc-adapter'; +import { DashWebRTC } from "./DashWebRTC"; + + + + +const mediaStreamConstraints = { + video: true, +}; + +const offerOptions = { + offerToReceiveVideo: 1, +}; + + +@observer +export class DashWebRTCVideo extends React.Component { + + @observable private localVideoEl: HTMLVideoElement | undefined; + @observable private peerVideoEl: HTMLVideoElement | undefined; + @observable private localStream: MediaStream | undefined; + @observable private startTime: any = 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() { + DashWebRTC.setVideoObjects(this.localVideoEl!, this.peerVideoEl!); + } + + + // componentDidMount() { + // this.callButton!.disabled = true; + // this.hangupButton!.disabled = true; + // // navigator.mediaDevices.getUserMedia(mediaStreamConstraints).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.localVideoEl) { + // this.localVideoEl.srcObject = mediaStream; + // } + // this.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); + // this.trace(`navigator.getUserMedia error: ${error.toString()}.`); + + // } + + // logVideoLoaded = (event: any) => { + // let video = event.target; + // this.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; + // this.trace(`Setup time: ${elapsedTime.toFixed(3)}ms.`); + // } + + // } + + // handleConnection = (event: any) => { + // let peerConnection = event.target; + // let iceCandidate = event.candidate; + + // if (iceCandidate) { + // let newIceCandidate: RTCIceCandidate = new RTCIceCandidate(iceCandidate); + // let otherPeer: any = this.getOtherPeer(peerConnection); + + // otherPeer.addIceCandidate(newIceCandidate).then(() => { + // this.handleConnectionSuccess(peerConnection); + // }).catch((error: any) => { + // this.handleConnectionFailure(peerConnection, error); + // }); + + // this.trace(`${this.getPeerName(peerConnection)} ICE candidate:\n` + + // `${event.candidate.candidate}.`); + + // } + // } + + // // Logs that the connection succeeded. + // handleConnectionSuccess = (peerConnection: any) => { + // this.trace(`${this.getPeerName(peerConnection)} addIceCandidate success.`); + // } + + // handleConnectionFailure = (peerConnection: any, error: any) => { + // this.trace(`${this.getPeerName(peerConnection)} failed to add ICE Candidate:\n` + + // `${error.toString()}.`); + // } + + // // Logs changes to the connection state. + // handleConnectionChange = (event: any) => { + // let peerConnection = event.target; + // console.log('ICE state change event: ', event); + // this.trace(`${this.getPeerName(peerConnection)} ICE state: ` + + // `${peerConnection.iceConnectionState}.`); + // } + + // // Logs error when setting session description fails. + // setSessionDescriptionError = (error: any) => { + // this.trace(`Failed to create session description: ${error.toString()}.`); + // } + + // // Logs success when setting session description. + // setDescriptionSuccess = (peerConnection: any, functionName: any) => { + // let peerName = this.getPeerName(peerConnection); + // this.trace(`${peerName} ${functionName} complete.`); + // } + + + // // Logs success when localDescription is set. + // setLocalDescriptionSuccess = (peerConnection: any) => { + // this.setDescriptionSuccess(peerConnection, 'setLocalDescription'); + // } + + // // Logs success when remoteDescription is set. + // setRemoteDescriptionSuccess = (peerConnection: any) => { + // this.setDescriptionSuccess(peerConnection, 'setRemoteDescription'); + // } + + // createdOffer = (description: any) => { + // this.trace(`Offer from localPeerConnection:\n${description.sdp}`); + // this.trace('localPeerConnection setLocalDescription start.'); + + // this.localPeerConnection.setLocalDescription(description).then(() => { + // this.setLocalDescriptionSuccess(this.localPeerConnection); + // }).catch(this.setSessionDescriptionError); + + + // this.trace('remotePeerConnection setRemoteDescription start.'); + // this.remotePeerConnection.setRemoteDescription(description) + // .then(() => { + // this.setRemoteDescriptionSuccess(this.remotePeerConnection); + // }).catch(this.setSessionDescriptionError); + + // this.trace('remotePeerConnection createAnswer start.'); + // this.remotePeerConnection.createAnswer() + // .then(this.createdAnswer) + // .catch(this.setSessionDescriptionError); + + // } + + // createdAnswer = (description: any) => { + // this.trace(`Answer from remotePeerConnection:\n${description.sdp}.`); + + // this.trace('remotePeerConnection setLocalDescription start.'); + // this.remotePeerConnection.setLocalDescription(description) + // .then(() => { + // this.setLocalDescriptionSuccess(this.remotePeerConnection); + // }).catch(this.setSessionDescriptionError); + + // this.trace('localPeerConnection setRemoteDescription start.'); + // this.localPeerConnection.setRemoteDescription(description) + // .then(() => { + // this.setRemoteDescriptionSuccess(this.localPeerConnection); + // }).catch(this.setSessionDescriptionError); + // } + + + // startAction = () => { + // this.startButton!.disabled = true; + // navigator.mediaDevices.getUserMedia(mediaStreamConstraints) + // .then(this.gotLocalMediaStream).catch(this.handleLocalMediaStreamError); + // this.trace('Requesting local stream.'); + // } + + + // // Handles call button action: creates peer connection. + // callAction = () => { + // this.callButton!.disabled = true; + // this.hangupButton!.disabled = false; + + // this.trace('Starting call.'); + // this.startTime = window.performance.now(); + + // // Get local media stream tracks. + // const videoTracks = this.localStream!.getVideoTracks(); + // const audioTracks = this.localStream!.getAudioTracks(); + // if (videoTracks.length > 0) { + // this.trace(`Using video device: ${videoTracks[0].label}.`); + // } + // if (audioTracks.length > 0) { + // this.trace(`Using audio device: ${audioTracks[0].label}.`); + // } + + // let servers: RTCConfiguration | undefined = undefined; // Allows for RTC server configuration. + + // // Create peer connections and add behavior. + // this.localPeerConnection = new RTCPeerConnection(servers); + // this.trace('Created local peer connection object localPeerConnection.'); + + // this.localPeerConnection.addEventListener('icecandidate', this.handleConnection); + // this.localPeerConnection.addEventListener( + // 'iceconnectionstatechange', this.handleConnectionChange); + + // this.remotePeerConnection = new RTCPeerConnection(servers); + // this.trace('Created remote peer connection object remotePeerConnection.'); + + // this.remotePeerConnection.addEventListener('icecandidate', this.handleConnection); + // this.remotePeerConnection.addEventListener( + // 'iceconnectionstatechange', this.handleConnectionChange); + // this.remotePeerConnection.addEventListener('addstream', this.gotRemoteMediaStream); + + // // Add local stream to connection and create offer to connect. + // this.localPeerConnection.addStream(this.localStream); + // this.trace('Added local stream to localPeerConnection.'); + + // this.trace('localPeerConnection createOffer start.'); + // this.localPeerConnection.createOffer(offerOptions) + // .then(this.createdOffer).catch(this.setSessionDescriptionError); + // } + + + // // Handles hangup action: ends up call, closes connections and resets peers. + // hangupAction = () => { + // this.localPeerConnection.close(); + // this.remotePeerConnection.close(); + // this.localPeerConnection = null; + // this.remotePeerConnection = null; + // this.hangupButton!.disabled = true; + // this.callButton!.disabled = false; + // this.trace('Ending call.'); + // } + + // // Gets the "other" peer connection. + // getOtherPeer = (peerConnection: any) => { + // return (peerConnection === this.localPeerConnection) ? + // this.remotePeerConnection : this.localPeerConnection; + // } + + // // Gets the name of a certain peer connection. + // getPeerName = (peerConnection: any) => { + // return (peerConnection === this.localPeerConnection) ? + // 'localPeerConnection' : 'remotePeerConnection'; + // } + + // // Logs an action (text) and the time when it happened on the console. + // trace = (text: string) => { + // text = text.trim(); + // const now = (window.performance.now() / 1000).toFixed(3); + + // console.log(now, text); + // } + + + + + + + + + + + + + + + + public static LayoutString() { return FieldView.LayoutString(DashWebRTCVideo); } + + + _ignore = 0; + onPreWheel = (e: React.WheelEvent) => { + this._ignore = e.timeStamp; + } + onPrePointer = (e: React.PointerEvent) => { + this._ignore = e.timeStamp; + } + onPostPointer = (e: React.PointerEvent) => { + if (this._ignore !== e.timeStamp) { + e.stopPropagation(); + } + } + onPostWheel = (e: React.WheelEvent) => { + if (this._ignore !== e.timeStamp) { + e.stopPropagation(); + } + } + + + + render() { + let content = +
+ + + {/* + + */} +
; + + let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting; + let classname = "webBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !DocumentDecorations.Instance.Interacting ? "-interactive" : ""); + + + return ( + <> +
+ {content} +
+ {!frozen ? (null) :
} + ); + } + + +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From d97091421468238d32edf55c240bfb3b021e9e05 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Tue, 29 Oct 2019 18:52:26 -0400 Subject: couple fixes --- src/client/views/nodes/DocumentContentsView.tsx | 4 ++-- src/client/views/webcam/DashWebRTCVideo.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/client/views/webcam/DashWebRTCVideo.tsx') diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index f1678d4f9..ee58e4152 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -34,7 +34,7 @@ import { StrCast, NumCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { fromPromise } from "mobx-utils"; import { DashWebCam } from "../../views/webcam/DashWebCam"; -import { DashWebRTC } from "../webcam/DashWebRTC"; +import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? @@ -107,7 +107,7 @@ export class DocumentContentsView extends React.Component Date: Sun, 3 Nov 2019 14:38:44 -0500 Subject: Moved code into init --- src/client/views/webcam/DashWebRTC.ts | 145 +++++++++++++++------------- src/client/views/webcam/DashWebRTCVideo.tsx | 5 +- 2 files changed, 83 insertions(+), 67 deletions(-) (limited to 'src/client/views/webcam/DashWebRTCVideo.tsx') diff --git a/src/client/views/webcam/DashWebRTC.ts b/src/client/views/webcam/DashWebRTC.ts index 4472f5ba5..801fd782d 100644 --- a/src/client/views/webcam/DashWebRTC.ts +++ b/src/client/views/webcam/DashWebRTC.ts @@ -12,6 +12,9 @@ export namespace DashWebRTC { let pc: any; let remoteStream: MediaStream | undefined; let turnReady; + let localVideo: HTMLVideoElement; + let remoteVideo: HTMLVideoElement; + let pcConfig = { 'iceServers': [{ @@ -25,42 +28,92 @@ export namespace DashWebRTC { offerToReceiveVideo: true }; + export function init() { + let room = 'test'; - let room = 'test'; + if (room !== '') { + DocServer._socket.emit('create or join', room); + console.log('Attempted to create or join room', room); - //let socket = io.connect(); + } - if (room !== '') { - DocServer._socket.emit('create or join', room); - console.log('Attempted to create or join room', room); + DocServer._socket.on('created', function (room: string) { + console.log('Created room ' + room); + isInitiator = true; + }); - } + DocServer._socket.on('full', function (room: string) { + console.log('Room ' + room + ' is full'); + }); - DocServer._socket.on('created', function (room: string) { - console.log('Created room ' + room); - isInitiator = true; - }); + DocServer._socket.on('join', function (room: string) { + console.log('Another peer made a request to join room ' + room); + console.log('This peer is the initiator of room ' + room + '!'); + isChannelReady = true; + }); - DocServer._socket.on('full', function (room: string) { - console.log('Room ' + room + ' is full'); - }); - DocServer._socket.on('join', function (room: string) { - console.log('Another peer made a request to join room ' + room); - console.log('This peer is the initiator of room ' + room + '!'); - isChannelReady = true; - }); + DocServer._socket.on('joined', function (room: string) { + console.log('joined: ' + room); + isChannelReady = true; + }); - DocServer._socket.on('joined', function (room: string) { - console.log('joined: ' + room); - isChannelReady = true; - }); + DocServer._socket.on('log', function (array: any) { + console.log.apply(console, array); + }); + + // This client receives a message + DocServer._socket.on('message', function (message: any) { + console.log('Client received message:', message); + if (message === 'got user media') { + maybeStart(); + } else if (message.type === 'offer') { + if (!isInitiator && !isStarted) { + maybeStart(); + } + pc.setRemoteDescription(new RTCSessionDescription(message)); + doAnswer(); + } else if (message.type === 'answer' && isStarted) { + pc.setRemoteDescription(new RTCSessionDescription(message)); + } else if (message.type === 'candidate' && isStarted) { + var candidate = new RTCIceCandidate({ + sdpMLineIndex: message.label, + candidate: message.candidate + }); + pc.addIceCandidate(candidate); + } else if (message === 'bye' && isStarted) { + handleRemoteHangup(); + } + }); + + navigator.mediaDevices.getUserMedia({ + audio: false, + video: true + }) + .then(gotStream) + .catch(function (e) { + alert('getUserMedia() error: ' + e.name); + }); + + //Trying this one out!!! + console.log('Getting user media with constraints', constraints); + + if (location.hostname !== 'localhost') { + requestTurn( + 'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913' + ); + } + + + } + + + + + //let socket = io.connect(); - DocServer._socket.on('log', function (array: any) { - console.log.apply(console, array); - }); function sendMessage(message: any) { @@ -69,46 +122,15 @@ export namespace DashWebRTC { } - // This client receives a message - DocServer._socket.on('message', function (message: any) { - console.log('Client received message:', message); - if (message === 'got user media') { - maybeStart(); - } else if (message.type === 'offer') { - if (!isInitiator && !isStarted) { - maybeStart(); - } - pc.setRemoteDescription(new RTCSessionDescription(message)); - doAnswer(); - } else if (message.type === 'answer' && isStarted) { - pc.setRemoteDescription(new RTCSessionDescription(message)); - } else if (message.type === 'candidate' && isStarted) { - var candidate = new RTCIceCandidate({ - sdpMLineIndex: message.label, - candidate: message.candidate - }); - pc.addIceCandidate(candidate); - } else if (message === 'bye' && isStarted) { - handleRemoteHangup(); - } - }); - let localVideo: HTMLVideoElement; - let remoteVideo: HTMLVideoElement; + export function setVideoObjects(localVideo: HTMLVideoElement, remoteVideo: HTMLVideoElement) { localVideo = localVideo; remoteVideo = remoteVideo; } - navigator.mediaDevices.getUserMedia({ - audio: false, - video: true - }) - .then(gotStream) - .catch(function (e) { - alert('getUserMedia() error: ' + e.name); - }); + function gotStream(stream: any) { @@ -127,14 +149,7 @@ export namespace DashWebRTC { }; - //Trying this one out!!! - console.log('Getting user media with constraints', constraints); - if (location.hostname !== 'localhost') { - requestTurn( - 'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913' - ); - } function maybeStart() { diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx index 5bb7cef6f..dcaa87557 100644 --- a/src/client/views/webcam/DashWebRTCVideo.tsx +++ b/src/client/views/webcam/DashWebRTCVideo.tsx @@ -8,7 +8,7 @@ import { InkingControl } from "../InkingControl"; import "../../views/nodes/WebBox.scss"; import "./DashWebRTC.scss"; import adapter from 'webrtc-adapter'; -//import { DashWebRTC } from "./DashWebRTC"; +import { DashWebRTC } from "./DashWebRTC"; @@ -37,7 +37,8 @@ export class DashWebRTCVideo extends React.Component Date: Tue, 5 Nov 2019 18:31:52 -0500 Subject: add a prompt and figure out message why not sending --- src/client/views/webcam/DashWebRTC.ts | 44 ++++++++--------------------- src/client/views/webcam/DashWebRTCVideo.tsx | 16 ++++++++--- src/server/index.ts | 4 +-- 3 files changed, 25 insertions(+), 39 deletions(-) (limited to 'src/client/views/webcam/DashWebRTCVideo.tsx') diff --git a/src/client/views/webcam/DashWebRTC.ts b/src/client/views/webcam/DashWebRTC.ts index 801fd782d..bd0bd7f9a 100644 --- a/src/client/views/webcam/DashWebRTC.ts +++ b/src/client/views/webcam/DashWebRTC.ts @@ -1,7 +1,9 @@ import { DocServer } from '../../DocServer'; - +/** + * This namespace will have the code required to have functionality code for the usage of webRTC. + */ export namespace DashWebRTC { @@ -130,6 +132,14 @@ export namespace DashWebRTC { remoteVideo = remoteVideo; } + export function setLocalVideoObject(localVideoRef: HTMLVideoElement) { + localVideo = localVideoRef; + } + + export function setRemoteVideoObject(remoteVideoRef: HTMLVideoElement) { + remoteVideo = remoteVideoRef; + } + @@ -286,36 +296,4 @@ export namespace DashWebRTC { } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - } \ No newline at end of file diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx index 62efd9730..503b71569 100644 --- a/src/client/views/webcam/DashWebRTCVideo.tsx +++ b/src/client/views/webcam/DashWebRTCVideo.tsx @@ -21,7 +21,9 @@ const offerOptions = { offerToReceiveVideo: 1, }; - +/** + * This models the component that will be rendered, that can be used as a doc that will reflect the video cams. + */ @observer export class DashWebRTCVideo extends React.Component { @@ -37,7 +39,7 @@ export class DashWebRTCVideo extends React.Component - - + + {/* */} diff --git a/src/server/index.ts b/src/server/index.ts index e33fd4b71..77f048a1e 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -983,8 +983,8 @@ function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any } function HandleRoommateNotification(socket: Socket, message: RoomMessage) { - //socket.broadcast.emit('message', message); - server.sockets.in(message.room).emit('message', message.message); + socket.broadcast.emit('message', message); + //server.sockets.in(message.room).emit('message', message.message); } -- cgit v1.2.3-70-g09d2 From 76bc6041ddbbda7ba4c1560199acc08324648e99 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 6 Nov 2019 19:20:45 -0500 Subject: 2 person call done --- src/client/northstar/utils/Utils.ts | 6 ++++++ src/client/views/webcam/DashWebRTC.ts | 26 +++++++++++++++----------- src/client/views/webcam/DashWebRTCVideo.tsx | 24 ++++++++++++++++++++---- src/server/Message.ts | 2 +- 4 files changed, 42 insertions(+), 16 deletions(-) (limited to 'src/client/views/webcam/DashWebRTCVideo.tsx') diff --git a/src/client/northstar/utils/Utils.ts b/src/client/northstar/utils/Utils.ts index d071dec62..09f83ce80 100644 --- a/src/client/northstar/utils/Utils.ts +++ b/src/client/northstar/utils/Utils.ts @@ -4,6 +4,12 @@ import { IBaseFilterProvider } from '../core/filter/IBaseFilterProvider'; import { AggregateFunction } from '../model/idea/idea'; export class Utils { + static Emit() { + throw new Error("Method not implemented."); + } + static EmitCallback() { + throw new Error("Method not implemented."); + } public static EqualityHelper(a: Object, b: Object): boolean { if (a === b) return true; diff --git a/src/client/views/webcam/DashWebRTC.ts b/src/client/views/webcam/DashWebRTC.ts index bd0bd7f9a..846de4115 100644 --- a/src/client/views/webcam/DashWebRTC.ts +++ b/src/client/views/webcam/DashWebRTC.ts @@ -1,4 +1,7 @@ import { DocServer } from '../../DocServer'; +import { Utils } from '../../../Utils'; +import { MessageStore } from '../../../server/Message'; + /** @@ -30,8 +33,7 @@ export namespace DashWebRTC { offerToReceiveVideo: true }; - export function init() { - let room = 'test'; + export function init(room: string) { if (room !== '') { DocServer._socket.emit('create or join', room); @@ -68,20 +70,21 @@ export namespace DashWebRTC { // This client receives a message DocServer._socket.on('message', function (message: any) { console.log('Client received message:', message); - if (message === 'got user media') { + if (message.message === 'got user media') { maybeStart(); - } else if (message.type === 'offer') { + } else if (message.message.type === 'offer') { + console.log("I have entered here bro!!!"); if (!isInitiator && !isStarted) { maybeStart(); } - pc.setRemoteDescription(new RTCSessionDescription(message)); + pc.setRemoteDescription(new RTCSessionDescription(message.message)); doAnswer(); - } else if (message.type === 'answer' && isStarted) { - pc.setRemoteDescription(new RTCSessionDescription(message)); - } else if (message.type === 'candidate' && isStarted) { + } else if (message.message.type === 'answer' && isStarted) { + pc.setRemoteDescription(new RTCSessionDescription(message.message)); + } else if (message.message.type === 'candidate' && isStarted) { var candidate = new RTCIceCandidate({ - sdpMLineIndex: message.label, - candidate: message.candidate + sdpMLineIndex: message.message.label, + candidate: message.message.candidate }); pc.addIceCandidate(candidate); } else if (message === 'bye' && isStarted) { @@ -120,7 +123,8 @@ export namespace DashWebRTC { function sendMessage(message: any) { console.log('Client sending message: ', message); - DocServer._socket.emit('message', message); + Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: message, room: "" }); + //DocServer._socket.emit('message', message); } diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx index 503b71569..0c4e594e4 100644 --- a/src/client/views/webcam/DashWebRTCVideo.tsx +++ b/src/client/views/webcam/DashWebRTCVideo.tsx @@ -9,6 +9,7 @@ import "../../views/nodes/WebBox.scss"; import "./DashWebRTC.scss"; import adapter from 'webrtc-adapter'; import { DashWebRTC } from "./DashWebRTC"; +import { DocServer } from "../../DocServer"; @@ -37,11 +38,12 @@ export class DashWebRTCVideo extends React.Component { + if (e.keyCode === 13) { + let submittedTitle = this.roomText!.value; + this.roomText!.value = ""; + this.roomText!.blur(); + DashWebRTC.init(submittedTitle); + } + } + + @@ -319,6 +334,7 @@ export class DashWebRTCVideo extends React.Component + this.roomText = e!} onKeyDown={this.onEnterKeyDown} />
; let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting; -- cgit v1.2.3-70-g09d2 From ce5980ddf7cdd247f8e31be1c437b9c40d46e29d Mon Sep 17 00:00:00 2001 From: Mohammad Amoush <47069173+mamoush34@users.noreply.github.com> Date: Fri, 7 Feb 2020 19:48:38 -0500 Subject: More ui work done --- src/client/views/webcam/DashWebRTCVideo.scss | 49 ++++++++++++++++++++++------ src/client/views/webcam/DashWebRTCVideo.tsx | 14 ++++---- 2 files changed, 47 insertions(+), 16 deletions(-) (limited to 'src/client/views/webcam/DashWebRTCVideo.tsx') diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss index 30665e849..ccb0a626b 100644 --- a/src/client/views/webcam/DashWebRTCVideo.scss +++ b/src/client/views/webcam/DashWebRTCVideo.scss @@ -8,6 +8,9 @@ box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; border: solid #BBBBBBBB 5px; pointer-events: all; + display: flex; + flex-direction: column; + overflow: hidden; .webcam-header { height: 50px; @@ -18,19 +21,45 @@ width: 100%; } - #localVideo { - margin: 10px; - position: relative; - width: 300px; - max-height: 300px; + #roomName { + outline: none; + border-radius: inherit; + border: 1px solid #BBBBBBBB; } - #remoteVideo { - margin: 10px; - position: relative; - width: 300px; - max-height: 300px; + // #localVideo { + // width: 25%; + // height: 20%; + // position: absolute; + // top: 65%; + // z-index: 2; + // right: 5%; + // } + .side { + width: 25%; + height: 20%; + position: absolute; + top: 65%; + z-index: 2; + right: 5%; } + .main { + position: absolute; + width: 95%; + height: 75%; + top: 20%; + align-self: center; + } + + // #remoteVideo { + // position: absolute; + // width: 95%; + // height: 75%; + // top: 20%; + // align-self: center; + + // } + } \ No newline at end of file diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx index 0b704db66..290ca7a48 100644 --- a/src/client/views/webcam/DashWebRTCVideo.tsx +++ b/src/client/views/webcam/DashWebRTCVideo.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, action } from "mobx"; import { DocumentDecorations, CloseCall } from "../DocumentDecorations"; import { InkingControl } from "../InkingControl"; import "../../views/nodes/WebBox.scss"; @@ -38,6 +38,7 @@ export class DashWebRTCVideo extends React.Component { console.log('Remote stream added.'); this.remoteStream = event.stream!; this.peerVideoEl!.srcObject = this.remoteStream; + this.remoteVideoAdded = true; } private handleRemoteStreamRemoved = (event: MediaStreamEvent) => { @@ -398,15 +400,15 @@ export class DashWebRTCVideo extends React.Component
DashWebRTC
- this.roomText = e!} onKeyDown={this.onEnterKeyDown} /> -