lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Fix peer connexion for two player with screen sharing

Browse source
This commit is contained in:
Gregoire Parant 2020-06-14 20:53:18 +02:00 committed by David Négrier
parent a8f27e6084
commit 4b72958193
4 changed files with 45 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,6 @@ 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",
@ -45,6 +44,8 @@ export class IoSocketController {
private nbClientsGauge: Gauge<string>;
private nbClientsPerRoomGauge: Gauge<string>;
private offerScreenSharingByClient: Map<string, Map<string, unknown>> = new Map<string, Map<string, unknown>>();
constructor(server: http.Server) {
this.Io = socketIO(server);
this.nbClientsGauge = new Gauge({
@ -235,16 +236,6 @@ export class IoSocketController {
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, () => {
const Client = (socket as ExSocketInterface);
try {
@ -310,8 +301,16 @@ export class IoSocketController {
console.warn('Invalid WEBRTC_SIGNAL message received: ', data);
return;
}
if(data && data.signal && (data.signal as any).type === "offer"){
let roomOffer = this.offerScreenSharingByClient.get(data.roomId);
if(!roomOffer){
roomOffer = new Map<string, unknown>();
}
roomOffer.set(data.userId, data.signal);
this.offerScreenSharingByClient.set(data.roomId, roomOffer);
}
//share at all others clients send only at user
return socket.broadcast.emit(event, data);
return socket.in(data.roomId).emit(event, data);
}
searchClientByIdOrFail(userId: string): ExSocketInterface {

18
front/dist/resources/style/style.css vendored
View file

@ -370,28 +370,34 @@ body {
.active-screen-sharing video{
transform: scaleX(1);
}
.screen-sharing-video-container {
width: 25%;
position: absolute;
}
.active-screen-sharing .screen-sharing-video-container video:hover{
width: 50%;
width: 200%;
z-index: 11;
}
.active-screen-sharing .screen-sharing-video-container video{
position: absolute;
width: 25%;
width: 100%;
height: auto;
left: 0;
top: 0;
transition: all 0.2s ease;
z-index: 1;
}
.active-screen-sharing .screen-sharing-video-container video:nth-child(1){
.active-screen-sharing .screen-sharing-video-container:nth-child(1){
/*this is for camera of user*/
top: 0%;
}
.active-screen-sharing .screen-sharing-video-container video:nth-child(2){
.active-screen-sharing .screen-sharing-video-container:nth-child(2){
top: 25%;
}
.active-screen-sharing .screen-sharing-video-container video:nth-child(3){
.active-screen-sharing .screen-sharing-video-container:nth-child(3){
top: 50%;
}
.active-screen-sharing .screen-sharing-video-container video:nth-child(4) {
.active-screen-sharing .screen-sharing-video-container:nth-child(4) {
top: 75%;
}

12
front/src/Connection.ts
View file

@ -13,7 +13,6 @@ enum EventMessage{
WEBRTC_SIGNAL = "webrtc-signal",
WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
WEBRTC_START = "webrtc-start",
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
@ -198,13 +197,6 @@ export class Connection implements Connection {
});
}
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,
@ -217,10 +209,6 @@ export class Connection implements Connection {
this.socket.on(EventMessage.WEBRTC_START, callback);
}
public receiveWebrtcScreenSharingStart(callback: (message: WebRtcDisconnectMessageInterface) => void) {
this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_START, callback);
}
public receiveWebrtcSignal(callback: (message: WebRtcSignalMessageInterface) => void) {
return this.socket.on(EventMessage.WEBRTC_SIGNAL, callback);
}

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

@ -63,14 +63,6 @@ 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: WebRtcDisconnectMessageInterface) => {
this.receiveWebrtcScreenSharingSignal(message);
@ -106,31 +98,6 @@ 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}`, mediaManager.localScreenCapture)
if (!mediaManager.localScreenCapture) {
return;
}
try {
for (const track of mediaManager.localScreenCapture.getTracks()) {
PeerConnectionScreenSharing.addTrack(track, mediaManager.localScreenCapture);
}
} catch (e) {
console.error("updatedScreenSharing => ", e);
}
mediaManager.addStreamRemoteScreenSharing(screenSharingUser.userId, mediaManager.localScreenCapture);
}
/**
* server has two people connected, start the meet
*/
@ -464,7 +431,28 @@ export class SimplePeer {
updatedScreenSharing() {
if (mediaManager.localScreenCapture) {
this.Connection.sendWebrtcScreenSharingStart(this.WebRtcRoomId);
//this.Connection.sendWebrtcScreenSharingStart(this.WebRtcRoomId);
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 mediaManager.localScreenCapture.getTracks()) {
PeerConnectionScreenSharing.addTrack(track, mediaManager.localScreenCapture);
}
}catch (e) {
console.error("updatedScreenSharing => ", e);
}
mediaManager.addStreamRemoteScreenSharing(screenSharingUser.userId, mediaManager.localScreenCapture);
} else {
if (!this.Connection.userId || !this.PeerScreenSharingConnectionArray.has(this.Connection.userId)) {
return;