diff --git a/front/src/Connection.ts b/front/src/Connection.ts index f2c72d64..b7926328 100644 --- a/front/src/Connection.ts +++ b/front/src/Connection.ts @@ -81,7 +81,13 @@ export interface WebRtcDisconnectMessageInterface { export interface WebRtcSignalMessageInterface { userId: string, - receiverId: string, + receiverId: string, // TODO: is this needed? (can we merge this with WebRtcScreenSharingMessageInterface?) + roomId: string, + signal: SignalData +} + +export interface WebRtcScreenSharingMessageInterface { + userId: string, roomId: string, signal: SignalData } @@ -213,7 +219,7 @@ export class Connection implements Connection { return this.socket.on(EventMessage.WEBRTC_SIGNAL, callback); } - public receiveWebrtcScreenSharingSignal(callback: Function) { + public receiveWebrtcScreenSharingSignal(callback: (message: WebRtcScreenSharingMessageInterface) => void) { return this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, callback); } diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index d7b40c39..b63dc515 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -6,9 +6,6 @@ const videoConstraint: boolean|MediaTrackConstraints = { height: { ideal: 720 }, facingMode: "user" }; -interface MediaServiceInterface extends MediaDevices{ - getDisplayMedia(constrain: any) : Promise; -} type UpdatedLocalStreamCallback = (media: MediaStream) => void; type UpdatedScreenSharingCallback = (media: MediaStream) => void; @@ -71,14 +68,14 @@ export class MediaManager { this.monitorClose = this.getElementByIdOrFail('monitor-close'); this.monitorClose.style.display = "block"; - this.monitorClose.addEventListener('click', (e: any) => { + this.monitorClose.addEventListener('click', (e: MouseEvent) => { e.preventDefault(); this.enabledMonitor(); //update tracking }); this.monitor = this.getElementByIdOrFail('monitor'); this.monitor.style.display = "none"; - this.monitor.addEventListener('click', (e: any) => { + this.monitor.addEventListener('click', (e: MouseEvent) => { e.preventDefault(); this.disabledMonitor(); //update tracking @@ -191,8 +188,8 @@ export class MediaManager { this.localScreenCapture = stream; return stream; }) - .catch((err: any) => { - console.error("Error => getScreenMedia => " + err); + .catch((err: unknown) => { + console.error("Error => getScreenMedia => ", err); throw err; }); }catch (err) { @@ -203,10 +200,13 @@ export class MediaManager { } private _startScreenCapture() { - if ((navigator as any).getDisplayMedia) { - return (navigator as any).getDisplayMedia({video: true}); - } else if ((navigator.mediaDevices as any).getDisplayMedia) { - return (navigator.mediaDevices as any).getDisplayMedia({video: true}); + // getDisplayMedia was moved to mediaDevices in 2018. Typescript definitions are not up to date yet. + // See: https://github.com/w3c/mediacapture-screen-share/pull/86 + // https://github.com/microsoft/TypeScript/issues/31821 + if ((navigator as any).getDisplayMedia) { // eslint-disable-line @typescript-eslint/no-explicit-any + return (navigator as any).getDisplayMedia({video: true}); // eslint-disable-line @typescript-eslint/no-explicit-any + } else if ((navigator.mediaDevices as any).getDisplayMedia) { // eslint-disable-line @typescript-eslint/no-explicit-any + return (navigator.mediaDevices as any).getDisplayMedia({video: true}); // eslint-disable-line @typescript-eslint/no-explicit-any } else { //return navigator.mediaDevices.getUserMedia(({video: {mediaSource: 'screen'}} as any)); return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars @@ -302,13 +302,13 @@ export class MediaManager { userId = `screen-sharing-${userId}`; this.webrtcInAudio.play(); // FIXME: switch to DisplayManager! - let elementRemoteVideo = this.getElementByIdOrFail("activeScreenSharing"); + const elementRemoteVideo = this.getElementByIdOrFail("activeScreenSharing"); elementRemoteVideo.insertAdjacentHTML('beforeend', `
`); - let activeHTMLVideoElement : HTMLElement|null = document.getElementById(userId); + const activeHTMLVideoElement : HTMLElement|null = document.getElementById(userId); if(!activeHTMLVideoElement){ return; } diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 582b8eb2..72786d63 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -1,6 +1,6 @@ import { Connection, - WebRtcDisconnectMessageInterface, + WebRtcDisconnectMessageInterface, WebRtcScreenSharingMessageInterface, WebRtcSignalMessageInterface, WebRtcStartMessageInterface } from "../Connection"; @@ -64,7 +64,7 @@ export class SimplePeer { }); //receive signal by gemer - this.Connection.receiveWebrtcScreenSharingSignal((message: WebRtcDisconnectMessageInterface) => { + this.Connection.receiveWebrtcScreenSharingSignal((message: WebRtcScreenSharingMessageInterface) => { this.receiveWebrtcScreenSharingSignal(message); }); @@ -200,7 +200,7 @@ export class SimplePeer { }); peer.on('data', (chunk: Buffer) => { - let constraint = JSON.parse(chunk.toString('utf8')); + const constraint = JSON.parse(chunk.toString('utf8')); console.log("data", constraint); if (constraint.audio) { mediaManager.enabledMicrophoneByUserId(user.userId); @@ -264,7 +264,7 @@ export class SimplePeer { private closeScreenSharingConnection(userId : string) { try { mediaManager.removeActiveScreenSharingVideo(userId); - let peer = this.PeerScreenSharingConnectionArray.get(userId); + const peer = this.PeerScreenSharingConnectionArray.get(userId); if (peer === undefined) { console.warn("Tried to close connection for user "+userId+" but could not find user") return; @@ -312,12 +312,12 @@ export class SimplePeer { * @param userId * @param data */ - private sendWebrtcScreenSharingSignal(data: any, userId : string) { + private sendWebrtcScreenSharingSignal(data: unknown, userId : string) { console.log("sendWebrtcScreenSharingSignal", data); try { this.Connection.sendWebrtcScreenSharingSignal(data, this.WebRtcRoomId, userId); }catch (e) { - console.error(`sendWebrtcSignal => ${userId}`, e); + console.error(`sendWebrtcScreenSharingSignal => ${userId}`, e); } } @@ -339,14 +339,14 @@ export class SimplePeer { } } - private receiveWebrtcScreenSharingSignal(data: any) { + private receiveWebrtcScreenSharingSignal(data: WebRtcScreenSharingMessageInterface) { console.log("receiveWebrtcScreenSharingSignal", data); try { //if offer type, create peer connection if(data.signal.type === "offer"){ this.createPeerConnection(data, true); } - let peer = this.PeerScreenSharingConnectionArray.get(data.userId); + const peer = this.PeerScreenSharingConnectionArray.get(data.userId); if (peer !== undefined) { peer.signal(data.signal); } else { @@ -386,11 +386,11 @@ export class SimplePeer { */ private addMedia (userId : string) { try { - let PeerConnection = this.PeerConnectionArray.get(userId); + const PeerConnection = this.PeerConnectionArray.get(userId); if (!PeerConnection) { throw new Error('While adding media, cannot find user with ID ' + userId); } - let localStream: MediaStream | null = mediaManager.localStream; + const localStream: MediaStream | null = mediaManager.localStream; PeerConnection.write(new Buffer(JSON.stringify(mediaManager.constraintsMedia))); if(!localStream){ @@ -406,12 +406,12 @@ export class SimplePeer { } } - private addMediaScreenSharing (userId : any = null) { - let PeerConnection = this.PeerScreenSharingConnectionArray.get(userId); + private addMediaScreenSharing(userId : string) { + const PeerConnection = this.PeerScreenSharingConnectionArray.get(userId); if (!PeerConnection) { throw new Error('While adding media, cannot find user with ID ' + userId); } - let localScreenCapture: MediaStream | null = mediaManager.localScreenCapture; + const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture; if(!localScreenCapture){ return; } @@ -436,11 +436,11 @@ export class SimplePeer { if(!userId){ return; } - let screenSharingUser: UserSimplePeerInterface = { + const screenSharingUser: UserSimplePeerInterface = { userId, initiator: true }; - let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser, true); + const PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser, true); if (!PeerConnectionScreenSharing) { return; } @@ -457,7 +457,7 @@ export class SimplePeer { if (!userId || !this.PeerScreenSharingConnectionArray.has(userId)) { return; } - let PeerConnectionScreenSharing = this.PeerScreenSharingConnectionArray.get(userId); + const PeerConnectionScreenSharing = this.PeerScreenSharingConnectionArray.get(userId); console.log("updatedScreenSharing => destroy", PeerConnectionScreenSharing); if (!PeerConnectionScreenSharing) { return;