aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/webcam/DashWebRTC.ts227
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.tsx16
2 files changed, 130 insertions, 113 deletions
diff --git a/src/client/views/webcam/DashWebRTC.ts b/src/client/views/webcam/DashWebRTC.ts
index 6c7322a3d..7d798754f 100644
--- a/src/client/views/webcam/DashWebRTC.ts
+++ b/src/client/views/webcam/DashWebRTC.ts
@@ -7,36 +7,44 @@ import { MessageStore } from '../../../server/Message';
/**
* This namespace will have the code required to have functionality code for the usage of webRTC.
*/
-export namespace DashWebRTC {
-
+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
+ };
+ }
- let isChannelReady = false;
- let isInitiator = false;
- let isStarted = false;
- let localStream: MediaStream | undefined;
- let pc: any;
- let remoteStream: MediaStream | undefined;
- let turnReady;
- let localVideo: HTMLVideoElement;
- let remoteVideo: HTMLVideoElement;
- let curRoom: string = "";
- let pcConfig = {
- 'iceServers': [{
- 'urls': 'stun:stun.l.google.com:19302'
- }]
- };
+ init(room: string) {
- // Set up audio and video regardless of what devices are present.
- let sdpConstraints = {
- offerToReceiveAudio: true,
- offerToReceiveVideo: true
- };
-
- export function init(room: string) {
-
- curRoom = room;
+ this.curRoom = room;
+ let self = this;
if (room !== '') {
DocServer._socket.emit('create or join', room);
@@ -46,7 +54,7 @@ export namespace DashWebRTC {
DocServer._socket.on('created', function (room: string) {
console.log('Created room ' + room);
- isInitiator = true;
+ self.isInitiator = true;
});
DocServer._socket.on('full', function (room: string) {
@@ -56,13 +64,13 @@ export namespace DashWebRTC {
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;
+ self.isChannelReady = true;
});
DocServer._socket.on('joined', function (room: string) {
console.log('joined: ' + room);
- isChannelReady = true;
+ self.isChannelReady = true;
});
@@ -74,23 +82,23 @@ export namespace DashWebRTC {
DocServer._socket.on('message', function (message: any) {
console.log('Client received message:', message);
if (message.message === 'got user media') {
- maybeStart();
+ self.maybeStart();
} else if (message.message.type === 'offer') {
- if (!isInitiator && !isStarted) {
- maybeStart();
+ if (!self.isInitiator && !self.isStarted) {
+ self.maybeStart();
}
- pc.setRemoteDescription(new RTCSessionDescription(message.message));
- doAnswer();
- } else if (message.message.type === 'answer' && isStarted) {
- pc.setRemoteDescription(new RTCSessionDescription(message.message));
- } else if (message.message.type === 'candidate' && isStarted) {
+ 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
});
- pc.addIceCandidate(candidate);
- } else if (message === 'bye' && isStarted) {
- handleRemoteHangup();
+ self.pc.addIceCandidate(candidate);
+ } else if (message === 'bye' && self.isStarted) {
+ self.handleRemoteHangup();
}
});
@@ -98,16 +106,16 @@ export namespace DashWebRTC {
audio: false,
video: true
})
- .then(gotStream)
+ .then(this.gotStream)
.catch(function (e) {
alert('getUserMedia() error: ' + e.name);
});
//Trying this one out!!!
- console.log('Getting user media with constraints', constraints);
+ console.log('Getting user media with constraints', this.constraints);
if (location.hostname !== 'localhost') {
- requestTurn(
+ this.requestTurn(
'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913'
);
}
@@ -116,9 +124,9 @@ export namespace DashWebRTC {
}
- function sendMessage(message: any) {
+ sendMessage(message: any) {
console.log('Client sending message: ', message);
- Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: message, room: curRoom });
+ Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: message, room: this.curRoom });
//DocServer._socket.emit('message', message);
}
@@ -126,33 +134,33 @@ export namespace DashWebRTC {
- export function setVideoObjects(localVideo: HTMLVideoElement, remoteVideo: HTMLVideoElement) {
+ setVideoObjects(localVideo: HTMLVideoElement, remoteVideo: HTMLVideoElement) {
localVideo = localVideo;
remoteVideo = remoteVideo;
}
- export function setLocalVideoObject(localVideoRef: HTMLVideoElement) {
- localVideo = localVideoRef;
+ setLocalVideoObject(localVideoRef: HTMLVideoElement) {
+ this.localVideo = localVideoRef;
}
- export function setRemoteVideoObject(remoteVideoRef: HTMLVideoElement) {
- remoteVideo = remoteVideoRef;
+ setRemoteVideoObject(remoteVideoRef: HTMLVideoElement) {
+ this.remoteVideo = remoteVideoRef;
}
- function gotStream(stream: any) {
+ gotStream(stream: any) {
console.log('Adding local stream.');
- localStream = stream;
- localVideo.srcObject = stream;
- sendMessage('got user media');
- if (isInitiator) {
- maybeStart();
+ this.localStream = stream;
+ this.localVideo!.srcObject = stream;
+ this.sendMessage('got user media');
+ if (this.isInitiator) {
+ this.maybeStart();
}
}
- let constraints = {
+ constraints = {
video: true,
audio: true
};
@@ -161,32 +169,32 @@ export namespace DashWebRTC {
- function maybeStart() {
- console.log('>>>>>>> maybeStart() ', isStarted, localStream, isChannelReady);
- if (!isStarted && typeof localStream !== 'undefined' && isChannelReady) {
+ maybeStart() {
+ console.log('>>>>>>> maybeStart() ', this.isStarted, this.localStream, this.isChannelReady);
+ if (!this.isStarted && typeof this.localStream !== 'undefined' && this.isChannelReady) {
console.log('>>>>>> creating peer connection');
- createPeerConnection();
- pc.addStream(localStream);
- isStarted = true;
- console.log('isInitiator', isInitiator);
- if (isInitiator) {
- doCall();
+ 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');
- };
+ // //this will need to be changed to our version of hangUp
+ // window.onbeforeunload = function () {
+ // sendMessage('bye');
+ // };
- function createPeerConnection() {
+ createPeerConnection() {
try {
- pc = new RTCPeerConnection(undefined);
- pc.onicecandidate = handleIceCandidate;
- pc.onaddstream = handleRemoteStreamAdded;
- pc.onremovestream = handleRemoteStreamRemoved;
+ 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);
@@ -195,10 +203,10 @@ export namespace DashWebRTC {
}
}
- function handleIceCandidate(event: any) {
+ handleIceCandidate(event: any) {
console.log('icecandidate event: ', event);
if (event.candidate) {
- sendMessage({
+ this.sendMessage({
type: 'candidate',
label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
@@ -209,40 +217,41 @@ export namespace DashWebRTC {
}
}
- function handleCreateOfferError(event: any) {
+ handleCreateOfferError(event: any) {
console.log('createOffer() error: ', event);
}
- function doCall() {
+ doCall() {
console.log('Sending offer to peer');
- pc.createOffer(setLocalAndSendMessage, handleCreateOfferError);
+ this.pc.createOffer(this.setLocalAndSendMessage, this.handleCreateOfferError);
}
- function doAnswer() {
+ doAnswer() {
console.log('Sending answer to peer.');
- pc.createAnswer().then(
- setLocalAndSendMessage,
- onCreateSessionDescriptionError
+ this.pc.createAnswer().then(
+ this.setLocalAndSendMessage,
+ this.onCreateSessionDescriptionError
);
}
- function setLocalAndSendMessage(sessionDescription: any) {
- pc.setLocalDescription(sessionDescription);
+ setLocalAndSendMessage(sessionDescription: any) {
+ this.pc.setLocalDescription(sessionDescription);
console.log('setLocalAndSendMessage sending message', sessionDescription);
- sendMessage(sessionDescription);
+ this.sendMessage(sessionDescription);
}
- function onCreateSessionDescriptionError(error: any) {
+ onCreateSessionDescriptionError(error: any) {
console.log('Failed to create session description: ' + error.toString());
}
- function requestTurn(turnURL: any) {
+ requestTurn(turnURL: any) {
var turnExists = false;
- for (var i in pcConfig.iceServers) {
- if (pcConfig.iceServers[i].urls.substr(0, 5) === 'turn:') {
+ let self = this;
+ for (var i in this.pcConfig.iceServers) {
+ if (this.pcConfig.iceServers[i].urls.substr(0, 5) === 'turn:') {
turnExists = true;
- turnReady = true;
+ this.turnReady = true;
break;
}
}
@@ -254,11 +263,11 @@ export namespace DashWebRTC {
if (xhr.readyState === 4 && xhr.status === 200) {
var turnServer = JSON.parse(xhr.responseText);
console.log('Got TURN server: ', turnServer);
- pcConfig.iceServers.push({
+ self.pcConfig.iceServers.push({
'urls': 'turn:' + turnServer.username + '@' + turnServer.turn,
//'credential': turnServer.password
});
- turnReady = true;
+ self.turnReady = true;
}
};
xhr.open('GET', turnURL, true);
@@ -266,39 +275,39 @@ export namespace DashWebRTC {
}
}
- function handleRemoteStreamAdded(event: MediaStreamEvent) {
+ handleRemoteStreamAdded(event: MediaStreamEvent) {
console.log('Remote stream added.');
- remoteStream = event.stream!;
- remoteVideo.srcObject = remoteStream;
+ this.remoteStream = event.stream!;
+ this.remoteVideo!.srcObject = this.remoteStream;
}
- function handleRemoteStreamRemoved(event: MediaStreamEvent) {
+ handleRemoteStreamRemoved(event: MediaStreamEvent) {
console.log('Remote stream removed. Event: ', event);
}
- export function hangup() {
+ hangup() {
console.log('Hanging up.');
- if (pc) {
+ if (this.pc) {
stop();
- sendMessage('bye');
+ this.sendMessage('bye');
}
- if (localStream) {
- localStream.getTracks().forEach(track => track.stop());
+ if (this.localStream) {
+ this.localStream.getTracks().forEach(track => track.stop());
}
}
- function handleRemoteHangup() {
+ handleRemoteHangup() {
console.log('Session terminated.');
stop();
- isInitiator = false;
+ this.isInitiator = false;
}
- function stop() {
- isStarted = false;
- pc.close();
- pc = null;
+ stop() {
+ this.isStarted = false;
+ this.pc.close();
+ this.pc = null;
}
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index a9c67f026..7b091062c 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -44,14 +44,20 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
private hangupButton: HTMLButtonElement | undefined;
private roomText: HTMLInputElement | undefined;
private roomOfCam: string = "";
+ private webRTCManager: DashWebRTC | undefined;
componentDidMount() {
DocumentDecorations.Instance.addCloseCall(this.closeConnection);
+ this.webRTCManager = new DashWebRTC();
+ let self = this;
+ window.onbeforeunload = function () {
+ self.webRTCManager!.sendMessage('bye');
+ };
}
closeConnection: CloseCall = () => {
//Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: 'bye', room: this.roomOfCam });
- DashWebRTC.hangup();
+ this.webRTCManager!.hangup();
}
componentWillUnmount() {
@@ -309,7 +315,7 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
this.roomText!.value = "";
this.roomText!.blur();
this.roomOfCam = submittedTitle;
- DashWebRTC.init(submittedTitle);
+ this.webRTCManager!.init(submittedTitle);
}
}
@@ -327,6 +333,8 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
+
+
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DashWebRTCVideo, fieldKey); }
@@ -357,11 +365,11 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
<input type="text" placeholder="Enter room name" ref={(e) => this.roomText = e!} onKeyDown={this.onEnterKeyDown} />
<video id="localVideo" autoPlay playsInline ref={(e) => {
this.localVideoEl = e!;
- DashWebRTC.setLocalVideoObject(e!);
+ this.webRTCManager!.setLocalVideoObject(e!);
}}></video>
<video id="remoteVideo" autoPlay playsInline ref={(e) => {
this.peerVideoEl = e!;
- DashWebRTC.setRemoteVideoObject(e!);
+ this.webRTCManager!.setRemoteVideoObject(e!);
}}></video>
{/* <button id="startButton" ref={(e) => this.startButton = e!} onClick={this.startAction}>Start</button>
<button id="callButton" ref={(e) => this.callButton = e!} onClick={this.callAction}>Call</button>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 08:01:18 +0000