aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts1
-rw-r--r--src/client/views/webcam/DashWebCam.tsx396
-rw-r--r--src/client/views/webcam/DashWebRTC.scss23
-rw-r--r--src/client/views/webcam/DashWebRTC.ts314
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.scss18
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.tsx312
-rw-r--r--src/client/views/webcam/WebCamLogic.js6
-rw-r--r--src/server/Message.ts2
-rw-r--r--src/server/Websocket/Websocket.ts47
9 files changed, 1 insertions, 1118 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ba0f69846..7233fbea5 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -44,7 +44,6 @@ import { ComputedField, ScriptField } from "../../new_fields/ScriptField";
import { ProxyField } from "../../new_fields/Proxy";
import { DocumentType } from "./DocumentTypes";
import { LinkFollowBox } from "../views/linking/LinkFollowBox";
-import { DashWebCam } from "../views/webcam/DashWebCam";
import { PresElementBox } from "../views/presentationview/PresElementBox";
import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo";
import { QueryBox } from "../views/nodes/QueryBox";
diff --git a/src/client/views/webcam/DashWebCam.tsx b/src/client/views/webcam/DashWebCam.tsx
deleted file mode 100644
index a9669750f..000000000
--- a/src/client/views/webcam/DashWebCam.tsx
+++ /dev/null
@@ -1,396 +0,0 @@
-import React = require("react");
-import { observer } from "mobx-react";
-import { FieldViewProps, FieldView } from "../nodes/FieldView";
-import { observable, action } from "mobx";
-import { DocumentDecorations } from "../DocumentDecorations";
-import { InkingControl } from "../InkingControl";
-import { CollectionFreeFormDocumentViewProps } from "../nodes/CollectionFreeFormDocumentView";
-import "../../views/nodes/WebBox.scss";
-
-
-//https://github.com/mozmorris/react-webcam is the source code used for the bigger part of this implementation. It's only modified to fit our current system.
-
-
-function hasGetUserMedia() {
- return !!(
- (navigator.mediaDevices && navigator.mediaDevices.getUserMedia));
-}
-
-interface WebcamProps {
- audio: boolean;
- audioConstraints?: MediaStreamConstraints["audio"];
- imageSmoothing: boolean;
- minScreenshotHeight?: number;
- minScreenshotWidth?: number;
- onUserMedia: () => void;
- onUserMediaError: (error: string) => void;
- screenshotFormat: "image/webp" | "image/png" | "image/jpeg";
- screenshotQuality: number;
- videoConstraints?: MediaStreamConstraints["video"];
-}
-
-interface WebcamState {
- hasUserMedia: boolean;
- src?: string;
-}
-
-@observer
-export class DashWebCam extends React.Component<CollectionFreeFormDocumentViewProps & FieldViewProps & WebcamProps & React.HTMLAttributes<HTMLVideoElement> & {
- layoutKey: string,
-}, WebcamState> {
- static defaultProps = {
- audio: true,
- imageSmoothing: true,
- onUserMedia: () => { },
- onUserMediaError: () => { },
- screenshotFormat: "image/webp",
- screenshotQuality: 0.92
- };
-
- private static mountedInstances: DashWebCam[] = [];
- private static userMediaRequested = false;
- private canvas: HTMLCanvasElement | undefined;
- private ctx: CanvasRenderingContext2D | null = null;
- private stream: MediaStream | undefined;
- private video: HTMLVideoElement | null | undefined;
-
- // @observable private hasUserMedia: boolean | undefined;
- // @observable private src: string | undefined;
-
- constructor(props: any) {
- super(props);
- this.state = {
- hasUserMedia: false
- };
- }
-
- componentDidMount() {
- if (!hasGetUserMedia()) return;
-
- const { state } = this;
-
- DashWebCam.mountedInstances.push(this);
-
- if (!state.hasUserMedia && !DashWebCam.userMediaRequested) {
- this.requestUserMedia();
- }
- }
-
- componentDidUpdate(nextProps: WebcamProps) {
- const { props } = this;
- if (
- JSON.stringify(nextProps.audioConstraints) !==
- JSON.stringify(props.audioConstraints) ||
- JSON.stringify(nextProps.videoConstraints) !==
- JSON.stringify(props.videoConstraints)
- ) {
- this.requestUserMedia();
- }
- }
-
- componentWillUnmount() {
- const { state } = this;
- const index = DashWebCam.mountedInstances.indexOf(this);
- DashWebCam.mountedInstances.splice(index, 1);
-
- DashWebCam.userMediaRequested = false;
- if (DashWebCam.mountedInstances.length === 0 && state.hasUserMedia) {
- if (this.stream!.getVideoTracks && this.stream!.getAudioTracks) {
- this.stream!.getVideoTracks().map(track => track.stop());
- this.stream!.getAudioTracks().map(track => track.stop());
- } else {
- ((this.stream as unknown) as MediaStreamTrack).stop();
- }
-
- if (state.src) {
- window.URL.revokeObjectURL(state.src);
- }
- }
- }
-
- //These are for screenshot if wanted.
-
- // getScreenshot() {
- // const { state, props } = this;
-
- // if (!state.hasUserMedia) return null;
-
- // const canvas = this.getCanvas();
- // return (
- // canvas &&
- // canvas.toDataURL(props.screenshotFormat, props.screenshotQuality)
- // );
- // }
-
- // getCanvas() {
- // const { state, props } = this;
-
- // if (!this.video) {
- // return null;
- // }
-
- // if (!state.hasUserMedia || !this.video.videoHeight) return null;
-
- // if (!this.ctx) {
- // const canvas = document.createElement("canvas");
- // const aspectRatio = this.video.videoWidth / this.video.videoHeight;
-
- // let canvasWidth = props.minScreenshotWidth || this.video.clientWidth;
- // let canvasHeight = canvasWidth / aspectRatio;
-
- // if (
- // props.minScreenshotHeight &&
- // canvasHeight < props.minScreenshotHeight
- // ) {
- // canvasHeight = props.minScreenshotHeight;
- // canvasWidth = canvasHeight * aspectRatio;
- // }
-
- // canvas.width = canvasWidth;
- // canvas.height = canvasHeight;
-
- // this.canvas = canvas;
- // this.ctx = canvas.getContext("2d");
- // }
-
- // const { ctx, canvas } = this;
-
- // if (ctx) {
- // ctx.imageSmoothingEnabled = props.imageSmoothing;
- // ctx.drawImage(this.video, 0, 0, canvas!.width, canvas!.height);
- // }
-
- // return canvas;
- // }
-
- requestUserMedia() {
- const { props } = this;
-
- navigator.getUserMedia =
- navigator.mediaDevices.getUserMedia;
-
- const sourceSelected = (audioConstraints: any, videoConstraints: any) => {
- const constraints: MediaStreamConstraints = {
- video: typeof videoConstraints !== "undefined" ? videoConstraints : true
- };
-
- if (props.audio) {
- constraints.audio =
- typeof audioConstraints !== "undefined" ? audioConstraints : true;
- }
-
- navigator.mediaDevices
- .getUserMedia(constraints)
- .then(stream => {
- DashWebCam.mountedInstances.forEach(instance =>
- instance.handleUserMedia(null, stream)
- );
- })
- .catch(e => {
- DashWebCam.mountedInstances.forEach(instance =>
- instance.handleUserMedia(e)
- );
- });
- };
-
- if ("mediaDevices" in navigator) {
- sourceSelected(props.audioConstraints, props.videoConstraints);
- } else {
- const optionalSource = (id: any) => ({ optional: [{ sourceId: id }] });
-
- const constraintToSourceId = (constraint: any) => {
- const { deviceId } = constraint;
-
- if (typeof deviceId === "string") {
- return deviceId;
- }
-
- if (Array.isArray(deviceId) && deviceId.length > 0) {
- return deviceId[0];
- }
-
- if (typeof deviceId === "object" && deviceId.ideal) {
- return deviceId.ideal;
- }
-
- return null;
- };
-
- // @ts-ignore: deprecated api
- MediaStreamTrack.getSources(sources => {
- let audioSource = null;
- let videoSource = null;
-
- sources.forEach((source: { kind: string; id: any; }) => {
- if (source.kind === "audio") {
- audioSource = source.id;
- } else if (source.kind === "video") {
- videoSource = source.id;
- }
- });
-
- const audioSourceId = constraintToSourceId(props.audioConstraints);
- if (audioSourceId) {
- audioSource = audioSourceId;
- }
-
- const videoSourceId = constraintToSourceId(props.videoConstraints);
- if (videoSourceId) {
- videoSource = videoSourceId;
- }
-
- sourceSelected(
- optionalSource(audioSource),
- optionalSource(videoSource)
- );
- });
- }
-
- DashWebCam.userMediaRequested = true;
- }
-
- handleUserMedia(err: string | null, stream?: MediaStream) {
- const { props } = this;
-
- if (err || !stream) {
- this.setState({ hasUserMedia: false });
- // action(() => this.hasUserMedia = false);
- props.onUserMediaError(err!);
-
- return;
- }
-
- this.stream = stream;
-
- console.log("Stream done: ", stream);
-
- try {
- if (this.video) {
- this.video.srcObject = stream;
- console.log("Source object: ", stream);
-
- }
- this.setState({ hasUserMedia: true });
- // action(() => this.hasUserMedia = true);
-
- } catch (error) {
- this.setState({
- hasUserMedia: true,
- src: window.URL.createObjectURL(stream)
- });
- console.log("State src set: ", this.state.src);
-
- // action(() => this.hasUserMedia = true);
- // action(() => this.src = window.URL.createObjectURL(stream));
- }
-
- props.onUserMedia();
- }
-
- _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();
- }
- }
-
-
-
-
- public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DashWebCam, fieldKey); }
-
- render() {
- const { state, props } = this;
-
-
-
- const {
- audio,
- onUserMedia,
- onUserMediaError,
- screenshotFormat,
- screenshotQuality,
- minScreenshotWidth,
- minScreenshotHeight,
- audioConstraints,
- videoConstraints,
- imageSmoothing,
- fieldKey,
- fitToBox,
- ContainingCollectionView,
- Document,
- DataDoc,
- onClick,
- isSelected,
- select,
- renderDepth,
- addDocument,
- addDocTab,
- pinToPres,
- removeDocument,
- moveDocument,
- ScreenToLocalTransform,
- active,
- whenActiveChanged,
- focus,
- PanelWidth,
- PanelHeight,
- setVideoBox,
- ContentScaling,
- ChromeHeight,
- jitterRotation,
- backgroundColor,
- bringToFront,
- zoomToScale,
- getScale,
- animateBetweenIcon,
- layoutKey,
- ...rest
- } = props;
-
- console.log("Source produced: ", state.src);
-
-
-
- let content =
- <div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
- <video
- autoPlay
- src={state.src}
- muted={!audio}
- playsInline
- ref={ref => {
- console.log("Source produced: ", state.src);
- console.log("HasUser Media produced: ", state.hasUserMedia);
-
- this.video = ref;
- }}
- {...rest}
- />
- </div>;
-
-
- let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
- let classname = "webBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !DocumentDecorations.Instance.Interacting ? "-interactive" : "");
-
- return (
- <>
- <div className={classname} >
- {content}
- </div>
- {!frozen ? (null) : <div className="webBox-overlay" onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} />}
- </>);
-
- }
-} \ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTC.scss b/src/client/views/webcam/DashWebRTC.scss
deleted file mode 100644
index ddf4777a8..000000000
--- a/src/client/views/webcam/DashWebRTC.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.webcam-cont {
- button {
- margin: 10px;
- position: relative;
- top: 20%;
- left: -60%;
- }
-
- #localVideo {
- margin: 10px;
- position: relative;
- width: 300px;
- max-height: 300px;
- }
-
- #remoteVideo {
- margin: 10px;
- position: relative;
- width: 300px;
- max-height: 300px;
-
- }
-} \ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTC.ts b/src/client/views/webcam/DashWebRTC.ts
deleted file mode 100644
index ef5ecf0fc..000000000
--- a/src/client/views/webcam/DashWebRTC.ts
+++ /dev/null
@@ -1,314 +0,0 @@
-// import { DocServer } from '../../DocServer';
-// import { Utils } from '../../../Utils';
-// import { MessageStore } from '../../../server/Message';
-
-
-
-// /**
-// * This namespace will have the code required to have functionality code for the usage of webRTC.
-// */
-// export class DashWebRTC {
-
-
-// private isChannelReady = false;
-// private isInitiator = false;
-// private isStarted = false;
-// localStream: MediaStream | undefined;
-// private pc: any;
-// remoteStream: MediaStream | undefined;
-// private turnReady: boolean | undefined;
-// localVideo: HTMLVideoElement | undefined;
-// remoteVideo: HTMLVideoElement | undefined;
-// curRoom: string = "";
-
-
-// private pcConfig: any;
-// private sdpConstraints: any;
-
-// constructor() {
-// this.pcConfig = {
-// 'iceServers': [{
-// 'urls': 'stun:stun.l.google.com:19302'
-// }]
-// };
-
-// // Set up audio and video regardless of what devices are present.
-// this.sdpConstraints = {
-// offerToReceiveAudio: true,
-// offerToReceiveVideo: true
-// };
-// }
-
-
-
-// init(room: string) {
-
-// this.curRoom = room;
-// let self = this;
-
-// 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);
-// self.isInitiator = 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 + '!');
-// self.isChannelReady = true;
-// });
-
-
-// DocServer._socket.on('joined', function (room: string) {
-// console.log('joined: ' + room);
-// self.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.message === 'got user media') {
-// self.maybeStart();
-// } else if (message.message.type === 'offer') {
-// if (!self.isInitiator && !self.isStarted) {
-// self.maybeStart();
-// }
-// self.pc.setRemoteDescription(new RTCSessionDescription(message.message));
-// self.doAnswer();
-// } else if (message.message.type === 'answer' && self.isStarted) {
-// self.pc.setRemoteDescription(new RTCSessionDescription(message.message));
-// } else if (message.message.type === 'candidate' && self.isStarted) {
-// let candidate = new RTCIceCandidate({
-// sdpMLineIndex: message.message.label,
-// candidate: message.message.candidate
-// });
-// self.pc.addIceCandidate(candidate);
-// } else if (message === 'bye' && self.isStarted) {
-// self.handleRemoteHangup();
-// }
-// });
-
-// navigator.mediaDevices.getUserMedia({
-// audio: false,
-// video: true
-// })
-// .then(this.gotStream)
-// .catch(function (e) {
-// alert('getUserMedia() error: ' + e.name);
-// });
-
-// //Trying this one out!!!
-// console.log('Getting user media with constraints', this.constraints);
-
-// if (location.hostname !== 'localhost') {
-// this.requestTurn(
-// 'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913'
-// );
-// }
-
-
-// }
-
-
-// sendMessage(message: any) {
-// console.log('Client sending message: ', message);
-// Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: message, room: this.curRoom });
-// //DocServer._socket.emit('message', message);
-// }
-
-
-
-
-
-// setVideoObjects(localVideo: HTMLVideoElement, remoteVideo: HTMLVideoElement) {
-// this.localVideo = localVideo;
-// this.remoteVideo = remoteVideo;
-// }
-
-// setLocalVideoObject(localVideoRef: HTMLVideoElement) {
-// this.localVideo = localVideoRef;
-// }
-
-// setRemoteVideoObject(remoteVideoRef: HTMLVideoElement) {
-// this.remoteVideo = remoteVideoRef;
-// }
-
-
-
-
-// gotStream(stream: any) {
-// console.log('Adding local stream.');
-// this.localStream = stream;
-// this.localVideo!.srcObject = stream;
-// this.sendMessage('got user media');
-// if (this.isInitiator) {
-// this.maybeStart();
-// }
-// }
-
-// constraints = {
-// video: true,
-// audio: true
-// };
-
-
-
-
-
-// maybeStart() {
-// console.log('>>>>>>> maybeStart() ', this.isStarted, this.localStream, this.isChannelReady);
-// if (!this.isStarted && typeof this.localStream !== 'undefined' && this.isChannelReady) {
-// console.log('>>>>>> creating peer connection');
-// this.createPeerConnection();
-// this.pc.addStream(this.localStream);
-// this.isStarted = true;
-// console.log('isInitiator', this.isInitiator);
-// if (this.isInitiator) {
-// this.doCall();
-// }
-// }
-// }
-
-
-// // //this will need to be changed to our version of hangUp
-// // window.onbeforeunload = function () {
-// // sendMessage('bye');
-// // };
-
-// createPeerConnection() {
-// try {
-// this.pc = new RTCPeerConnection(undefined);
-// this.pc.onicecandidate = this.handleIceCandidate;
-// this.pc.onaddstream = this.handleRemoteStreamAdded;
-// this.pc.onremovestream = this.handleRemoteStreamRemoved;
-// console.log('Created RTCPeerConnnection');
-// } catch (e) {
-// console.log('Failed to create PeerConnection, exception: ' + e.message);
-// alert('Cannot create RTCPeerConnection object.');
-// return;
-// }
-// }
-
-// handleIceCandidate(event: any) {
-// console.log('icecandidate event: ', event);
-// if (event.candidate) {
-// this.sendMessage({
-// type: 'candidate',
-// label: event.candidate.sdpMLineIndex,
-// id: event.candidate.sdpMid,
-// candidate: event.candidate.candidate
-// });
-// } else {
-// console.log('End of candidates.');
-// }
-// }
-
-// handleCreateOfferError(event: any) {
-// console.log('createOffer() error: ', event);
-// }
-
-// doCall() {
-// console.log('Sending offer to peer');
-// this.pc.createOffer(this.setLocalAndSendMessage, this.handleCreateOfferError);
-// }
-
-// doAnswer() {
-// console.log('Sending answer to peer.');
-// this.pc.createAnswer().then(
-// this.setLocalAndSendMessage,
-// this.onCreateSessionDescriptionError
-// );
-// }
-
-// setLocalAndSendMessage(sessionDescription: any) {
-// this.pc.setLocalDescription(sessionDescription);
-// console.log('setLocalAndSendMessage sending message', sessionDescription);
-// this.sendMessage(sessionDescription);
-// }
-
-// onCreateSessionDescriptionError(error: any) {
-// console.log('Failed to create session description: ' + error.toString());
-// }
-
-
-// requestTurn(turnURL: any) {
-// var turnExists = false;
-// let self = this;
-// for (var i in this.pcConfig.iceServers) {
-// if (this.pcConfig.iceServers[i].urls.substr(0, 5) === 'turn:') {
-// turnExists = true;
-// this.turnReady = true;
-// break;
-// }
-// }
-// if (!turnExists) {
-// console.log('Getting TURN server from ', turnURL);
-// // No TURN server. Get one from computeengineondemand.appspot.com:
-// var xhr = new XMLHttpRequest();
-// xhr.onreadystatechange = function () {
-// if (xhr.readyState === 4 && xhr.status === 200) {
-// var turnServer = JSON.parse(xhr.responseText);
-// console.log('Got TURN server: ', turnServer);
-// self.pcConfig.iceServers.push({
-// 'urls': 'turn:' + turnServer.username + '@' + turnServer.turn,
-// //'credential': turnServer.password
-// });
-// self.turnReady = true;
-// }
-// };
-// xhr.open('GET', turnURL, true);
-// xhr.send();
-// }
-// }
-
-// handleRemoteStreamAdded(event: MediaStreamEvent) {
-// console.log('Remote stream added.');
-// this.remoteStream = event.stream!;
-// this.remoteVideo!.srcObject = this.remoteStream;
-// }
-
-// handleRemoteStreamRemoved(event: MediaStreamEvent) {
-// console.log('Remote stream removed. Event: ', event);
-// }
-
-// hangup() {
-// console.log('Hanging up.');
-// if (this.pc) {
-// stop();
-// this.sendMessage('bye');
-// }
-
-// if (this.localStream) {
-// this.localStream.getTracks().forEach(track => track.stop());
-// }
-
-// }
-
-// handleRemoteHangup() {
-// console.log('Session terminated.');
-// stop();
-// this.isInitiator = false;
-// }
-
-// stop() {
-// this.isStarted = false;
-// this.pc.close();
-// this.pc = null;
-// }
-
-
-// } \ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
index 052832db5..2f35eeca2 100644
--- a/src/client/views/webcam/DashWebRTCVideo.scss
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -1,7 +1,6 @@
@import "../globalCssVariables";
.webcam-cont {
- // position: absolute;
background: whitesmoke;
color: grey;
border-radius: 15px;
@@ -27,15 +26,6 @@
border: 1px solid #BBBBBBBB;
}
- // #localVideo {
- // width: 50%;
- // height: 50%;
- // position: relative;
- // // top: 65%;
- // // z-index: 2;
- // // right: 5%;
- // }
-
.side {
width: 25%;
height: 20%;
@@ -53,12 +43,4 @@
align-self: center;
}
- // #remoteVideo {
- // position: relative;
- // width: 50%;
- // height: 50%;
- // // 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 f93d4a662..0eefbbc91 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -8,60 +8,19 @@ import { InkingControl } from "../InkingControl";
import "../../views/nodes/WebBox.scss";
import "./DashWebRTCVideo.scss";
import adapter from 'webrtc-adapter';
-import { DocServer } from "../../DocServer";
-import { DocumentView } from "../nodes/DocumentView";
-import { Utils } from "../../../Utils";
-import { MessageStore } from "../../../server/Message";
import { initialize, hangup } from "./WebCamLogic";
-const mediaStreamConstraints = {
- video: true,
-};
-
-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<CollectionFreeFormDocumentViewProps & FieldViewProps> {
- @observable private localVideoEl: HTMLVideoElement | undefined;
- @observable private peerVideoEl: HTMLVideoElement | undefined;
+
private roomText: HTMLInputElement | undefined;
- // private roomOfCam: string = "";
- // private isChannelReady = false;
- // private isInitiator = false;
- // private isStarted = false;
@observable remoteVideoAdded: boolean = false;
- // localStream: MediaStream | undefined;
- // private pc: any;
- // remoteStream: MediaStream | undefined;
- // private turnReady: boolean | undefined;
- // //localVideo: HTMLVideoElement | undefined;
- // //remoteVideo: HTMLVideoElement | undefined;
- // curRoom: string = "";
-
- // private pcConfig = {
- // 'iceServers': [{
- // 'urls': 'stun:stun.l.google.com:19302'
- // }]
- // };
-
- // // Set up audio and video regardless of what devices are present.
- // private sdpConstraints = {
- // offerToReceiveAudio: true,
- // offerToReceiveVideo: true
- // };
componentDidMount() {
DocumentDecorations.Instance.addCloseCall(this.closeConnection);
- // setTimeout(() => initialize(), 10000);
- // let self = this;
- // window.onbeforeunload = function () {
- // self.sendMessage('bye');
- // };
}
closeConnection: CloseCall = () => {
@@ -73,273 +32,6 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
this.remoteVideoAdded = true;
}
- // componentWillUnmount() {
- // }
-
-
- // init(room: string) {
-
- // this.curRoom = room;
- // let self = this;
-
- // 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);
- // self.isInitiator = 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 + '!');
- // self.isChannelReady = true;
- // });
-
-
- // DocServer._socket.on('joined', function (room: string) {
- // console.log('joined: ' + room);
- // self.isChannelReady = true;
- // });
-
-
- // DocServer._socket.on('log', function (array: any) {
- // console.log.apply(console, array);
- // });
-
- // // This client receives a message
- // DocServer._socket.on('message', async function (message: any) {
- // console.log('Client received message:', message);
- // if (message.message === 'got user media') {
- // self.maybeStart();
- // } else if (message.message.type === 'offer') {
- // if (!self.isInitiator && !self.isStarted) {
- // self.maybeStart();
- // }
- // await self.pc.setRemoteDescription(new RTCSessionDescription(message.message));
- // self.doAnswer();
- // } else if (message.message.type === 'answer' && self.isStarted) {
- // await self.pc.setRemoteDescription(new RTCSessionDescription(message.message));
- // } else if (message.message.type === 'candidate' && self.isStarted) {
- // let candidate = new RTCIceCandidate({
- // sdpMLineIndex: message.message.label,
- // candidate: message.message.candidate
- // });
- // self.pc.addIceCandidate(candidate);
- // } else if (message.message === 'bye' && self.isStarted) {
- // self.handleRemoteHangup();
- // }
- // });
-
- // navigator.mediaDevices.getUserMedia({
- // audio: true,
- // video: true
- // })
- // .then(this.gotStream)
- // .catch(function (e) {
- // alert('getUserMedia() error: ' + e.name);
- // });
-
- // //Trying this one out!!!
- // console.log('Getting user media with constraints', this.constraints);
-
- // if (location.hostname !== 'localhost') {
- // this.requestTurn(
- // 'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913'
- // );
- // }
-
-
- // }
-
-
- // private sendMessage = (message: any) => {
- // console.log('Client sending message: ', message);
- // Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: message, room: this.curRoom });
- // //DocServer._socket.emit('message', message);
- // }
-
-
-
- // private gotStream = (stream: any) => {
- // console.log('Adding local stream.');
- // this.localStream = stream;
- // this.localVideoEl!.srcObject = stream;
- // this.sendMessage('got user media');
- // if (this.isInitiator) {
- // this.maybeStart();
- // }
- // }
-
- // constraints = {
- // video: true,
- // audio: true
- // };
-
-
-
-
-
- // private maybeStart = () => {
- // console.log('>>>>>>> maybeStart() ', this.isStarted, this.localStream, this.isChannelReady);
- // if (!this.isStarted && typeof this.localStream !== 'undefined' && this.isChannelReady) {
- // console.log('>>>>>> creating peer connection');
- // this.createPeerConnection();
- // this.pc.addStream(this.localStream);
- // this.isStarted = true;
- // console.log('isInitiator', this.isInitiator);
- // if (this.isInitiator) {
- // this.doCall();
- // }
- // }
- // }
-
-
- // // //this will need to be changed to our version of hangUp
- // // window.onbeforeunload = function () {
- // // sendMessage('bye');
- // // };
-
- // private createPeerConnection = () => {
- // try {
- // this.pc = new RTCPeerConnection(undefined);
- // this.pc.onicecandidate = this.handleIceCandidate;
- // this.pc.onaddstream = this.handleRemoteStreamAdded;
- // this.pc.onremovestream = this.handleRemoteStreamRemoved;
- // console.log('Created RTCPeerConnnection');
- // } catch (e) {
- // console.log('Failed to create PeerConnection, exception: ' + e.message);
- // alert('Cannot create RTCPeerConnection object.');
- // return;
- // }
- // }
-
- // private handleIceCandidate = (event: any) => {
- // console.log('icecandidate event: ', event);
- // if (event.candidate) {
- // this.sendMessage({
- // type: 'candidate',
- // label: event.candidate.sdpMLineIndex,
- // id: event.candidate.sdpMid,
- // candidate: event.candidate.candidate
- // });
- // } else {
- // console.log('End of candidates.');
- // }
- // }
-
- // private handleCreateOfferError = (event: any) => {
- // console.log('createOffer() error: ', event);
- // }
-
- // private doCall = () => {
- // console.log('Sending offer to peer');
- // this.pc.createOffer(this.setLocalAndSendMessage, this.handleCreateOfferError);
- // }
-
- // private doAnswer = () => {
- // console.log('Sending answer to peer.');
- // this.pc.createAnswer().then(
- // this.setLocalAndSendMessage,
- // this.onCreateSessionDescriptionError
- // );
- // }
-
- // private setLocalAndSendMessage = (sessionDescription: any) => {
- // this.pc.setLocalDescription(sessionDescription);
- // console.log('setLocalAndSendMessage sending message', sessionDescription);
- // this.sendMessage(sessionDescription);
- // }
-
- // private onCreateSessionDescriptionError = (error: any) => {
- // console.log('Failed to create session description: ' + error.toString());
- // }
-
-
- // private requestTurn = (turnURL: any) => {
- // var turnExists = false;
- // let self = this;
- // for (var i in this.pcConfig.iceServers) {
- // if (this.pcConfig.iceServers[i].urls.substr(0, 5) === 'turn:') {
- // turnExists = true;
- // this.turnReady = true;
- // break;
- // }
- // }
- // if (!turnExists) {
- // console.log('Getting TURN server from ', turnURL);
- // // No TURN server. Get one from computeengineondemand.appspot.com:
- // var xhr = new XMLHttpRequest();
- // xhr.onreadystatechange = function () {
- // if (xhr.readyState === 4 && xhr.status === 200) {
- // var turnServer = JSON.parse(xhr.responseText);
- // console.log('Got TURN server: ', turnServer);
- // self.pcConfig.iceServers.push({
- // 'urls': 'turn:' + turnServer.username + '@' + turnServer.turn,
- // //'credential': turnServer.password
- // });
- // self.turnReady = true;
- // }
- // };
- // xhr.open('GET', turnURL, true);
- // xhr.send();
- // }
- // }
- // @action
- // private handleRemoteStreamAdded = (event: MediaStreamEvent) => {
- // console.log('Remote stream added.');
- // this.remoteStream = event.stream!;
- // this.peerVideoEl!.srcObject = this.remoteStream;
- // this.remoteVideoAdded = true;
- // }
-
- // private handleRemoteStreamRemoved = (event: MediaStreamEvent) => {
- // console.log('Remote stream removed. Event: ', event);
- // }
-
- // private hangup = () => {
- // console.log('Hanging up.');
- // if (this.pc) {
- // stop();
- // this.sendMessage('bye');
- // }
-
- // if (this.localStream) {
- // this.localStream.getTracks().forEach(track => track.stop());
- // }
-
- // }
-
- // private handleRemoteHangup = () => {
- // console.log('Session terminated.');
- // this.stop();
- // this.isInitiator = false;
-
- // if (this.localStream) {
- // this.localStream.getTracks().forEach(track => track.stop());
- // }
-
-
- // }
-
- // private stop = () => {
- // this.isStarted = false;
- // this.pc.close();
- // this.pc = null;
- // }
-
-
-
-
-
-
/**
* Function that submits the title entered by user on enter press.
*/
@@ -379,10 +71,8 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
<div className="webcam-header">DashWebRTC</div>
<input id="roomName" type="text" placeholder="Enter room name" ref={(e) => this.roomText = e!} onKeyDown={this.onEnterKeyDown} />
<video id="localVideo" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline ref={(e) => {
- this.localVideoEl = e!;
}}></video>
<video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
- this.peerVideoEl = e!;
}}></video>
</div >;
diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js
index ec8b2e8bf..a7af9c2c4 100644
--- a/src/client/views/webcam/WebCamLogic.js
+++ b/src/client/views/webcam/WebCamLogic.js
@@ -28,8 +28,6 @@ export function initialize(roomName, handlerUI) {
/////////////////////////////////////////////
room = roomName;
- // Could prompt for room name:
- // room = prompt('Enter room name:');
socket = io.connect(`${window.location.protocol}//${window.location.hostname}:${4321}`);
@@ -94,10 +92,6 @@ export function initialize(roomName, handlerUI) {
var localVideo = document.querySelector('#localVideo');
var remoteVideo = document.querySelector('#remoteVideo');
-
- console.log("Local Video: ", localVideo);
- console.log("Remote Video: ", remoteVideo);
-
const gotStream = (stream) => {
console.log('Adding local stream.');
localStream = stream;
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 6ce5cd96a..79b6fa1e0 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -64,8 +64,6 @@ export namespace MessageStore {
export const YoutubeApiQuery = new Message<YoutubeQueryInput>("Youtube Api Query");
export const DeleteField = new Message<string>("Delete field");
export const DeleteFields = new Message<string[]>("Delete fields");
- export const NotifyRoommates = new Message<RoomMessage>("message");
- export const HangUpCall = new Message<string>("bye");
}
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index b4cd2dbe2..ba7ca8f35 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -19,7 +19,6 @@ export namespace WebSocket {
const clients: { [key: string]: Client } = {};
export const socketMap = new Map<SocketIO.Socket, string>();
export let disconnect: Function;
- let endpoint: io.Server;
export async function start(isRelease: boolean) {
@@ -107,9 +106,6 @@ export namespace WebSocket {
Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
- //Utils.AddServerHandler(socket, MessageStore.NotifyRoommates, message => HandleRoommateNotification(socket, message));
- //Utils.AddServerHandler(socket, MessageStore.HangUpCall, message => HandleHangUp(socket, message));
- //Utils.AddRoomHandler(socket, "create or join", HandleCreateOrJoin);
disconnect = () => {
socket.broadcast.emit("connection_terminated", Date.now());
@@ -122,49 +118,6 @@ export namespace WebSocket {
logPort("websocket", socketPort);
}
-
- function HandleRoommateNotification(socket: Socket, message: RoomMessage) {
- //socket.broadcast.emit('message', message);
- console.log("The room that sent this: ", message.room, " and message is : ", message.message);
- endpoint.sockets.in(message.room).emit('message', message);
-
- }
-
- function HandleCreateOrJoin(socket: io.Socket, room: string) {
- console.log("Received request to create or join room " + room);
-
-
- let clientsInRoom = endpoint.sockets.adapter.rooms[room];
- let numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;
- console.log('Room ' + room + ' now has ' + numClients + ' client(s)');
-
-
- if (numClients === 0) {
- socket.join(room);
- console.log('Client ID ' + socket.id + ' created room ' + room);
- socket.emit('created', room, socket.id);
-
- } else if (numClients === 1) {
- console.log('Client ID ' + socket.id + ' joined room ' + room);
- endpoint.sockets.in(room).emit('join', room);
- socket.join(room);
- socket.emit('joined', room, socket.id);
- endpoint.sockets.in(room).emit('ready');
-
- } else {
- socket.emit('full', room);
- }
-
-
-
-
-
- }
-
- function HandleHangUp(socket: io.Socket, message: string) {
- console.log("Receive bye from someone");
- }
-
function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
const { ProjectCredentials } = GoogleCredentialsLoader;
switch (query.type) {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 14:40:37 +0000