Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create event to start webrtc screen charing

Browse source
This commit is contained in:
Gregoire Parant 2020-06-14 14:47:16 +02:00
parent 3f579914dc
commit 409b1a5591
5 changed files with 143 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

25
back/src/Controller/IoSocketController.ts
View file

@ -17,7 +17,7 @@ import os from 'os';
import {TokenInterface} from "../Controller/AuthenticateController";
import {isJoinRoomMessageInterface} from "../Model/Websocket/JoinRoomMessage";
import {isPointInterface, PointInterface} from "../Model/Websocket/PointInterface";
import {isWebRtcSignalMessageInterface} from "../Model/Websocket/WebRtcSignalMessage";
import {isWebRtcSignalMessageInterface, isWebRtcScreenSharingSignalMessageInterface, isWebRtcScreenSharingStartMessageInterface} from "../Model/Websocket/WebRtcSignalMessage";
import {UserInGroupInterface} from "../Model/Websocket/UserInGroupInterface";
enum SockerIoEvent {
@ -30,6 +30,7 @@ enum SockerIoEvent {
WEBRTC_SIGNAL = "webrtc-signal",
WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
WEBRTC_START = "webrtc-start",
WEBRTC_SCREEN_SHARING_START = "webrtc-screen-sharing-start",
WEBRTC_DISCONNECT = "webrtc-disconect",
MESSAGE_ERROR = "message-error",
GROUP_CREATE_UPDATE = "group-create-update",
@ -227,7 +228,17 @@ export class IoSocketController {
});
socket.on(SockerIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL, (data: unknown) => {
this.emit((socket as ExSocketInterface), data, SockerIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL);
this.emitScreenSharing((socket as ExSocketInterface), data, SockerIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL);
});
socket.on(SockerIoEvent.WEBRTC_SCREEN_SHARING_START, (data: unknown) => {
console.log(SockerIoEvent.WEBRTC_SCREEN_SHARING_START, data);
if (!isWebRtcScreenSharingStartMessageInterface(data)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SIGNAL message.'});
console.warn('Invalid WEBRTC_SIGNAL message received: ', data);
return;
}
this.Io.in(data.roomId).emit(SockerIoEvent.WEBRTC_SCREEN_SHARING_START, data);
});
socket.on(SockerIoEvent.DISCONNECT, () => {
@ -289,6 +300,16 @@ export class IoSocketController {
return client.emit(event, data);
}
emitScreenSharing(socket: ExSocketInterface, data: unknown, event: SockerIoEvent){
if (!isWebRtcScreenSharingSignalMessageInterface(data)) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Invalid WEBRTC_SIGNAL message.'});
console.warn('Invalid WEBRTC_SIGNAL message received: ', data);
return;
}
//share at all others clients send only at user
return socket.broadcast.emit(event, data);
}
searchClientByIdOrFail(userId: string): ExSocketInterface {
const client: ExSocketInterface|undefined = this.sockets.get(userId);
if (client === undefined) {

11
back/src/Model/Websocket/WebRtcSignalMessage.ts
View file

@ -7,4 +7,15 @@ export const isWebRtcSignalMessageInterface =
roomId: tg.isString,
signal: tg.isUnknown
}).get();
export const isWebRtcScreenSharingSignalMessageInterface =
new tg.IsInterface().withProperties({
userId: tg.isString,
roomId: tg.isString,
signal: tg.isUnknown
}).get();
export const isWebRtcScreenSharingStartMessageInterface =
new tg.IsInterface().withProperties({
userId: tg.isString,
roomId: tg.isString
}).get();
export type WebRtcSignalMessageInterface = tg.GuardedType<typeof isWebRtcSignalMessageInterface>;

33
front/src/Connection.ts
View file

@ -13,7 +13,7 @@ enum EventMessage{
WEBRTC_SIGNAL = "webrtc-signal",
WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
WEBRTC_START = "webrtc-start",
WEBRTC_JOIN_ROOM = "webrtc-join-room",
WEBRTC_SCREEN_SHARING_START = "webrtc-screen-sharing-start",
JOIN_ROOM = "join-room", // bi-directional
USER_POSITION = "user-position", // bi-directional
USER_MOVED = "user-moved", // From server to client
@ -122,17 +122,24 @@ export interface ConnectionInterface {
sharePosition(x: number, y: number, direction: string, moving: boolean): void;
/*webrtc*/
sendWebrtcSignal(signal: any, roomId: string, userId?: string|null, receiverId?: string): void;
sendWebrtcScreenSharingSignal(signal: any, roomId: string, userId?: string|null, receiverId?: string): void;
receiveWebrtcSignal(callBack: Function): void;
receiveWebrtcScreenSharingSignal(callBack: Function): void;
receiveWebrtcStart(callBack: (message: WebRtcStartMessageInterface) => void): void;
disconnectMessage(callBack: (message: WebRtcDisconnectMessageInterface) => void): void;
/*webrtc - screen sharing*/
sendWebrtcScreenSharingStart(roomId: string): void;
sendWebrtcScreenSharingSignal(signal: any, roomId: string, userId?: string|null): void;
receiveWebrtcScreenSharingSignal(callBack: Function): void;
receiveWebrtcScreenSharingStart(callBack: (message: WebRtcDisconnectMessageInterface) => void): void;
}
export class Connection implements ConnectionInterface {
@ -294,10 +301,16 @@ export class Connection implements ConnectionInterface {
});
}
sendWebrtcScreenSharingSignal(signal: any, roomId: string, userId? : string|null, receiverId? : string) {
sendWebrtcScreenSharingStart(roomId: string) {
return this.getSocket().emit(EventMessage.WEBRTC_SCREEN_SHARING_START, {
userId: this.userId,
roomId: roomId
});
}
sendWebrtcScreenSharingSignal(signal: any, roomId: string, userId? : string|null) {
return this.getSocket().emit(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, {
userId: userId ? userId : this.userId,
receiverId: receiverId ? receiverId : this.userId,
userId: userId,
roomId: roomId,
signal: signal
});
@ -307,6 +320,10 @@ export class Connection implements ConnectionInterface {
this.getSocket().on(EventMessage.WEBRTC_START, callback);
}
receiveWebrtcScreenSharingStart(callback: (message: WebRtcDisconnectMessageInterface) => void) {
this.getSocket().on(EventMessage.WEBRTC_SCREEN_SHARING_START, callback);
}
receiveWebrtcSignal(callback: Function) {
return this.getSocket().on(EventMessage.WEBRTC_SIGNAL, callback);
}

16
front/src/WebRtc/MediaManager.ts
View file

@ -320,7 +320,6 @@ export class MediaManager {
* @param stream
*/
addStreamRemoteVideo(userId : string, stream : MediaStream){
console.log("this.remoteVideo.get(userId)"+" => "+userId, this.remoteVideo.get(userId));
this.remoteVideo.get(userId).srcObject = stream;
}
addStreamRemoteScreenSharing(userId : string, stream : MediaStream){
@ -331,9 +330,15 @@ export class MediaManager {
*
* @param userId
*/
removeActiveVideo(userId : string){
removeActiveVideo(userId : string) {
console.log("removeActiveVideo", userId);
try {
throw `removeActiveVideo ${userId}`;
} catch (e) {
console.error(e);
}
let element = document.getElementById(`div-${userId}`);
if(!element){
if (!element) {
return;
}
element.remove();
@ -359,6 +364,7 @@ export class MediaManager {
}
isError(userId : string): void {
console.log("isError", `div-${userId}`);
let element = document.getElementById(`div-${userId}`);
if(!element){
return;
@ -369,6 +375,10 @@ export class MediaManager {
}
errorDiv.style.display = 'block';
}
isErrorScreenSharing(userId : string): void {
this.isError(`screen-sharing-${userId}`);
}
private getSpinner(userId : string): HTMLDivElement|null {
let element = document.getElementById(`div-${userId}`);

105
front/src/WebRtc/SimplePeer.ts
View file

@ -46,8 +46,16 @@ export class SimplePeer {
this.receiveWebrtcSignal(message);
});
this.Connection.receiveWebrtcScreenSharingStart((message: WebRtcDisconnectMessageInterface) => {
console.log("receiveWebrtcScreenSharingStart => initiator", message.userId === this.Connection.userId);
if(message.userId === this.Connection.userId) {
console.log("receiveWebrtcScreenSharingStart => initiator => create peer connexion");
this.receiveWebrtcScreenSharingStart(message);
}
});
//receive signal by gemer
this.Connection.receiveWebrtcScreenSharingSignal((message: any) => {
this.Connection.receiveWebrtcScreenSharingSignal((message: WebRtcDisconnectMessageInterface) => {
this.receiveWebrtcScreenSharingSignal(message);
});
@ -81,6 +89,31 @@ export class SimplePeer {
this.startWebRtc();
}
private receiveWebrtcScreenSharingStart(data: WebRtcDisconnectMessageInterface) {
console.log("receiveWebrtcScreenSharingStart", data);
let screenSharingUser: UserSimplePeerInterface = {
userId: data.userId,
initiator: this.Connection.userId === data.userId
};
let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser, true);
if (!PeerConnectionScreenSharing) {
console.error("receiveWebrtcScreenSharingStart => cannot create peer connexion", PeerConnectionScreenSharing);
return;
}
console.log(`receiveWebrtcScreenSharingStart => ${screenSharingUser.initiator}`, this.MediaManager.localScreenCapture)
if (!this.MediaManager.localScreenCapture) {
return;
}
try {
for (const track of this.MediaManager.localScreenCapture.getTracks()) {
PeerConnectionScreenSharing.addTrack(track, this.MediaManager.localScreenCapture);
}
} catch (e) {
console.error("updatedScreenSharing => ", e);
}
this.MediaManager.addStreamRemoteScreenSharing(screenSharingUser.userId, this.MediaManager.localScreenCapture);
}
/**
* server has two people connected, start the meet
*/
@ -98,8 +131,10 @@ export class SimplePeer {
* create peer connection to bind users
*/
private createPeerConnection(user : UserSimplePeerInterface, screenSharing: boolean = false) : SimplePeerNamespace.Instance | null{
console.log("createPeerConnection => screenSharing", screenSharing)
if(this.PeerConnectionArray.has(user.userId)) {
if(
(screenSharing && this.PeerScreenSharingConnectionArray.has(user.userId))
|| (!screenSharing && this.PeerConnectionArray.has(user.userId))
){
return null;
}
@ -111,14 +146,15 @@ export class SimplePeer {
}
}
this.MediaManager.removeActiveVideo(user.userId);
if(screenSharing) {
this.MediaManager.removeActiveScreenSharingVideo(user.userId);
this.MediaManager.addScreenSharingActiveVideo(user.userId);
}else{
this.MediaManager.removeActiveVideo(user.userId);
this.MediaManager.addActiveVideo(user.userId, name);
}
let peer : SimplePeerNamespace.Instance = new Peer({
let peerOption = {
initiator: user.initiator ? user.initiator : false,
reconnectTimer: 10000,
config: {
@ -132,8 +168,10 @@ export class SimplePeer {
credential: 'itcugcOHxle9Acqi$'
},
]
},
});
}
};
console.log("peerOption", peerOption);
let peer : SimplePeerNamespace.Instance = new Peer(peerOption);
if(screenSharing){
this.PeerScreenSharingConnectionArray.set(user.userId, peer);
}else {
@ -142,7 +180,6 @@ export class SimplePeer {
//start listen signal for the peer connection
peer.on('signal', (data: any) => {
console.log("screenSharing", screenSharing);
if(screenSharing){
this.sendWebrtcScreenSharingSignal(data, user.userId);
return;
@ -151,7 +188,7 @@ export class SimplePeer {
});
peer.on('stream', (stream: MediaStream) => {
this.stream(user.userId, stream);
this.stream(user.userId, stream, screenSharing);
});
/*peer.on('track', (track: MediaStreamTrack, stream: MediaStream) => {
@ -160,12 +197,17 @@ export class SimplePeer {
peer.on('close', () => {
if(screenSharing){
this.closeScreenSharingConnection(user.userId);
return;
}
this.closeConnection(user.userId);
});
peer.on('error', (err: any) => {
console.error(`error => ${user.userId} => ${err.code}`, err);
console.error(`error => ${user.userId} => ${err.code} => screenSharing: ${screenSharing}`, err);
if(screenSharing){
//this.MediaManager.isErrorScreenSharing(user.userId);
return;
}
this.MediaManager.isError(user.userId);
});
@ -176,6 +218,7 @@ export class SimplePeer {
peer.on('data', (chunk: Buffer) => {
let constraint = JSON.parse(chunk.toString('utf8'));
console.log("data", constraint);
if (constraint.audio) {
this.MediaManager.enabledMicrophoneByUserId(user.userId);
} else {
@ -215,7 +258,8 @@ export class SimplePeer {
// I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
//console.log('Closing connection with '+userId);
peer.destroy();
this.PeerConnectionArray.delete(userId)
this.PeerConnectionArray.delete(userId);
this.closeScreenSharingConnection(userId);
//console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size);
} catch (err) {
console.error("closeConnection", err)
@ -268,7 +312,7 @@ export class SimplePeer {
private sendWebrtcScreenSharingSignal(data: any, userId : string) {
console.log("sendWebrtcScreenSharingSignal", data);
try {
this.Connection.sendWebrtcScreenSharingSignal(data, this.WebRtcRoomId, null, userId);
this.Connection.sendWebrtcScreenSharingSignal(data, this.WebRtcRoomId, userId);
}catch (e) {
console.error(`sendWebrtcSignal => ${userId}`, e);
}
@ -299,11 +343,11 @@ export class SimplePeer {
if(data.signal.type === "offer"){
this.createPeerConnection(data, true);
}
let peer = this.PeerConnectionArray.get(data.userId);
let peer = this.PeerScreenSharingConnectionArray.get(data.userId);
if (peer !== undefined) {
peer.signal(data.signal);
} else {
console.error('Could not find peer whose ID is "'+data.userId+'" in PeerConnectionArray');
console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal');
}
} catch (e) {
console.error(`receiveWebrtcSignal => ${data.userId}`, e);
@ -315,7 +359,16 @@ export class SimplePeer {
* @param userId
* @param stream
*/
private stream(userId : string, stream?: MediaStream) {
private stream(userId : string, stream?: MediaStream, screenSharing?: boolean) {
console.log(`stream => ${userId} => screenSharing => ${screenSharing}`, stream);
if(screenSharing){
if(!stream){
this.MediaManager.removeActiveScreenSharingVideo(userId);
return;
}
this.MediaManager.addStreamRemoteScreenSharing(userId, stream);
return;
}
if(!stream){
this.MediaManager.disabledVideoByUserId(userId);
this.MediaManager.disabledMicrophoneByUserId(userId);
@ -373,34 +426,18 @@ export class SimplePeer {
updatedScreenSharing() {
if (this.MediaManager.localScreenCapture) {
if(!this.Connection.userId){
return;
}
let screenSharingUser: UserSimplePeerInterface = {
userId: this.Connection.userId,
initiator: true
};
let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser, true);
if (!PeerConnectionScreenSharing) {
return;
}
try {
for (const track of this.MediaManager.localScreenCapture.getTracks()) {
PeerConnectionScreenSharing.addTrack(track, this.MediaManager.localScreenCapture);
}
}catch (e) {
console.error("updatedScreenSharing => ", e);
}
this.MediaManager.addStreamRemoteScreenSharing(screenSharingUser.userId, this.MediaManager.localScreenCapture);
this.Connection.sendWebrtcScreenSharingStart(this.WebRtcRoomId);
} else {
if (!this.Connection.userId || !this.PeerScreenSharingConnectionArray.has(this.Connection.userId)) {
return;
}
let PeerConnectionScreenSharing = this.PeerScreenSharingConnectionArray.get(this.Connection.userId);
console.log("updatedScreenSharing => destroy", PeerConnectionScreenSharing);
if (!PeerConnectionScreenSharing) {
return;
}
PeerConnectionScreenSharing.destroy();
this.PeerScreenSharingConnectionArray.delete(this.Connection.userId);
}
}
}