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

Continue screen sharing

Browse source
This commit is contained in:
Gregoire Parant 2020-06-08 22:52:25 +02:00 committed by David Négrier
parent 3e2c5049f2
commit 0bbed7717a
3 changed files with 53 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
front/dist/index.html vendored
View file

@ -108,12 +108,11 @@
<img id="monitor" src="resources/logos/monitor.svg">
<img id="monitor-close" src="resources/logos/monitor-close.svg">
</div>
<!--<div class="btn-call">
<img src="resources/logos/phone.svg">
</div>-->
</div>
</div>
-->
<div id="activeScreenSharing" class="active-screen-sharing active">
</div>
<div id="webRtcSetup" class="webrtcsetup">
<img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
<video id="myCamVideoSetup" autoplay muted></video>

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

@ -365,3 +365,33 @@ body {
.chat-mode > div:last-child {
flex-grow: 5;
}
/*SCREEN SHARING*/
.active-screen-sharing video{
transform: scaleX(1);
}
.active-screen-sharing .screen-sharing-video-container video:hover{
width: 50%;
}
.active-screen-sharing .screen-sharing-video-container video{
position: absolute;
width: 25%;
height: auto;
left: 0;
top: 0;
transition: all 0.2s ease;
}
.active-screen-sharing .screen-sharing-video-container video:nth-child(1){
/*this is for camera of user*/
top: 0%;
}
.active-screen-sharing .screen-sharing-video-container video:nth-child(2){
top: 25%;
}
.active-screen-sharing .screen-sharing-video-container video:nth-child(3){
top: 50%;
}
.active-screen-sharing .screen-sharing-video-container video:nth-child(4) {
top: 75%;
}

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

@ -289,14 +289,22 @@ export class SimplePeer {
*/
private addMedia (userId : string) {
try {
let localStream: MediaStream | null = mediaManager.localStream;
let localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
let PeerConnection = this.PeerConnectionArray.get(userId);
if (!PeerConnection || PeerConnection === undefined) {
if (!PeerConnection) {
throw new Error('While adding media, cannot find user with ID ' + userId);
}
PeerConnection.write(new Buffer(JSON.stringify(Object.assign(mediaManager.constraintsMedia, {screen: localScreenCapture !== null}))));
if(userId.indexOf("screenSharing") > -1 && mediaManager.localScreenCapture){
for (const track of mediaManager.localScreenCapture.getTracks()) {
PeerConnection.addTrack(track, mediaManager.localScreenCapture);
}
return;
}
let localStream: MediaStream | null = mediaManager.localStream;
let localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
PeerConnection.write(new Buffer(JSON.stringify(Object.assign(this.MediaManager.constraintsMedia, {screen: localScreenCapture !== null}))));
if(!localStream){
return;
@ -321,15 +329,21 @@ export class SimplePeer {
if (this.MediaManager.localScreenCapture) {
let screenSharingUser: UserSimplePeerInterface = {
userId: `screenSharing-${this.Connection.userId}`,
name: 'screenSharing',
initiator: true
};
let PeerConnectionScreenSharing = this.createPeerConnection(screenSharingUser);
if (!PeerConnectionScreenSharing) {
return;
}
for (const track of this.MediaManager.localScreenCapture.getTracks()) {
PeerConnectionScreenSharing.addTrack(track, this.MediaManager.localScreenCapture);
try {
for (const track of this.MediaManager.localScreenCapture.getTracks()) {
PeerConnectionScreenSharing.addTrack(track, this.MediaManager.localScreenCapture);
}
}catch (e) {
console.error("updatedScreenSharing => ", e);
}
this.MediaManager.addStreamRemoteVideo(screenSharingUser.userId, this.MediaManager.localScreenCapture);
} else {
if (!this.PeerConnectionArray.has(`screenSharing-${this.Connection.userId}`)) {
return;