aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.scss30
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.tsx50
-rw-r--r--src/client/views/webcam/WebCamLogic.js75
-rw-r--r--src/server/Websocket/Websocket.ts16
4 files changed, 93 insertions, 78 deletions
diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
index 262528d8e..052832db5 100644
--- a/src/client/views/webcam/DashWebRTCVideo.scss
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -27,14 +27,14 @@
border: 1px solid #BBBBBBBB;
}
- #localVideo {
- width: 50%;
- height: 50%;
- position: relative;
- // top: 65%;
- // z-index: 2;
- // right: 5%;
- }
+ // #localVideo {
+ // width: 50%;
+ // height: 50%;
+ // position: relative;
+ // // top: 65%;
+ // // z-index: 2;
+ // // right: 5%;
+ // }
.side {
width: 25%;
@@ -53,12 +53,12 @@
align-self: center;
}
- #remoteVideo {
- position: relative;
- width: 50%;
- height: 50%;
- // top: 20%;
- // 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 191f5750d..f93d4a662 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -12,7 +12,7 @@ import { DocServer } from "../../DocServer";
import { DocumentView } from "../nodes/DocumentView";
import { Utils } from "../../../Utils";
import { MessageStore } from "../../../server/Message";
-import { initialize } from "./WebCamLogic";
+import { initialize, hangup } from "./WebCamLogic";
const mediaStreamConstraints = {
video: true,
@@ -29,12 +29,12 @@ const offerOptions = {
export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentViewProps & FieldViewProps> {
@observable private localVideoEl: HTMLVideoElement | undefined;
@observable private peerVideoEl: HTMLVideoElement | undefined;
- // private roomText: HTMLInputElement | undefined;
+ private roomText: HTMLInputElement | undefined;
// private roomOfCam: string = "";
// private isChannelReady = false;
// private isInitiator = false;
// private isStarted = false;
- // @observable remoteVideoAdded: boolean = false;
+ @observable remoteVideoAdded: boolean = false;
// localStream: MediaStream | undefined;
// private pc: any;
// remoteStream: MediaStream | undefined;
@@ -56,17 +56,22 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
// };
componentDidMount() {
- // DocumentDecorations.Instance.addCloseCall(this.closeConnection);
- setTimeout(() => initialize(), 10000);
+ DocumentDecorations.Instance.addCloseCall(this.closeConnection);
+ // setTimeout(() => initialize(), 10000);
// let self = this;
// window.onbeforeunload = function () {
// self.sendMessage('bye');
// };
}
- // closeConnection: CloseCall = () => {
- // this.hangup();
- // }
+ closeConnection: CloseCall = () => {
+ hangup();
+ }
+
+ @action
+ changeUILook = () => {
+ this.remoteVideoAdded = true;
+ }
// componentWillUnmount() {
// }
@@ -335,18 +340,17 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
- // /**
- // * Function that submits the title entered by user on enter press.
- // */
- // private onEnterKeyDown = (e: React.KeyboardEvent) => {
- // if (e.keyCode === 13) {
- // let submittedTitle = this.roomText!.value;
- // this.roomText!.value = "";
- // this.roomText!.blur();
- // this.roomOfCam = submittedTitle;
- // this.init(submittedTitle);
- // }
- // }
+ /**
+ * Function that submits the title entered by user on enter press.
+ */
+ private onEnterKeyDown = (e: React.KeyboardEvent) => {
+ if (e.keyCode === 13) {
+ let submittedTitle = this.roomText!.value;
+ this.roomText!.value = "";
+ this.roomText!.blur();
+ initialize(submittedTitle, this.changeUILook);
+ }
+ }
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DashWebRTCVideo, fieldKey); }
@@ -373,11 +377,11 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
let content =
<div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
<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" autoPlay playsInline ref={(e) => {
+ <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" autoPlay playsInline ref={(e) => {
+ <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
this.peerVideoEl = e!;
}}></video>
diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js
index d4798f72f..ffdcc4241 100644
--- a/src/client/views/webcam/WebCamLogic.js
+++ b/src/client/views/webcam/WebCamLogic.js
@@ -1,15 +1,17 @@
'use strict';
import io from "socket.io-client";
-export function initialize() {
-
- var isChannelReady = false;
- var isInitiator = false;
- var isStarted = false;
- var localStream;
- var pc;
- var remoteStream;
- var turnReady;
+var socket;
+var isChannelReady = false;
+var isInitiator = false;
+var isStarted = false;
+var localStream;
+var pc;
+var remoteStream;
+var turnReady;
+var room;
+
+export function initialize(roomName, handlerUI) {
var pcConfig = {
'iceServers': [{
@@ -25,11 +27,11 @@ export function initialize() {
/////////////////////////////////////////////
- var room = 'foo';
+ room = roomName;
// Could prompt for room name:
// room = prompt('Enter room name:');
- var socket = io.connect(`${window.location.protocol}//${window.location.hostname}:${4321}`);
+ socket = io.connect(`${window.location.protocol}//${window.location.hostname}:${4321}`);
if (room !== '') {
socket.emit('create or join', room);
@@ -62,10 +64,6 @@ export function initialize() {
////////////////////////////////////////////////
- const sendMessage = (message) => {
- console.log('Client sending message: ', message);
- socket.emit('message', message);
- };
// This client receives a message
socket.on('message', function (message) {
@@ -96,6 +94,7 @@ export function initialize() {
var localVideo = document.querySelector('#localVideo');
var remoteVideo = document.querySelector('#remoteVideo');
+
console.log("Local Video: ", localVideo);
console.log("Remote Video: ", remoteVideo);
@@ -241,28 +240,40 @@ export function initialize() {
console.log('Remote stream added.');
remoteStream = event.stream;
remoteVideo.srcObject = remoteStream;
+ handlerUI();
+
};
const handleRemoteStreamRemoved = (event) => {
console.log('Remote stream removed. Event: ', event);
}
-
- const hangup = () => {
- console.log('Hanging up.');
- stop();
- sendMessage('bye');
- }
-
- const handleRemoteHangup = () => {
- console.log('Session terminated.');
- stop();
- isInitiator = false;
+}
+
+export function hangup() {
+ console.log('Hanging up.');
+ stop();
+ sendMessage('bye');
+ if (localStream) {
+ localStream.getTracks().forEach(track => track.stop());
}
-
- const stop = () => {
- isStarted = false;
- pc.close();
- pc = null;
+}
+
+function stop() {
+ isStarted = false;
+ pc.close();
+ pc = null;
+}
+
+function handleRemoteHangup() {
+ console.log('Session terminated.');
+ stop();
+ isInitiator = false;
+ if (localStream) {
+ localStream.getTracks().forEach(track => track.stop());
}
+}
-} \ No newline at end of file
+function sendMessage(message) {
+ console.log('Client sending message: ', message);
+ socket.emit('message', message);
+}; \ No newline at end of file
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index 96694bf72..30e7d6129 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -47,25 +47,25 @@ export namespace WebSocket {
}
socket.on('message', function (message) {
- log('Client said: ', message);
+ console.log('Client said: ', message);
// for a real app, would be room-only (not broadcast)
socket.broadcast.emit('message', message);
});
socket.on('create or join', function (room) {
- log('Received request to create or join room ' + room);
+ console.log('Received request to create or join room ' + room);
var clientsInRoom = socket.adapter.rooms[room];
var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;
- log('Room ' + room + ' now has ' + numClients + ' client(s)');
+ console.log('Room ' + room + ' now has ' + numClients + ' client(s)');
if (numClients === 0) {
socket.join(room);
- log('Client ID ' + socket.id + ' created room ' + room);
+ console.log('Client ID ' + socket.id + ' created room ' + room);
socket.emit('created', room, socket.id);
} else if (numClients === 1) {
- log('Client ID ' + socket.id + ' joined room ' + room);
+ console.log('Client ID ' + socket.id + ' joined room ' + room);
socket.in(room).emit('join', room);
socket.join(room);
socket.emit('joined', room, socket.id);
@@ -107,9 +107,9 @@ 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);
+ //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());
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 20:29:29 +0000