aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/webcam/DashWebRTCVideo.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/webcam/DashWebRTCVideo.tsx')
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.tsx312
1 files changed, 1 insertions, 311 deletions
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 >;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 00:25:54 +0000