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

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
Download patch file Download diff file Expand all files Collapse all files

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;