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

Feature screen sharing

Browse source 
- Send stream of screen sharing in peer connexion
 - Add button for share your screen
This commit is contained in:
Gregoire Parant 2020-06-06 17:03:10 +02:00
parent d6031ba5c5
commit 39f44b8a9d
6 changed files with 166 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,12 +3,18 @@ const videoConstraint: {width : any, height: any, facingMode : string} = {
height: { ideal: 720 },
facingMode: "user"
};
interface MediaServiceInterface extends MediaDevices{
getDisplayMedia(constrain: any) : Promise<any>;
}
export class MediaManager {
localStream: MediaStream|null = null;
localScreenCapture: MediaStream|null = null;
remoteVideo: Array<any> = new Array<any>();
myCamVideo: HTMLVideoElement;
cinemaClose: any = null;
cinema: any = null;
monitorClose: any = null;
monitor: any = null;
microphoneClose: any = null;
microphone: any = null;
webrtcInAudio: HTMLAudioElement;
@ -52,6 +58,21 @@ export class MediaManager {
this.disabledCamera();
//update tracking
});
this.monitorClose = document.getElementById('monitor-close');
this.monitorClose.style.display = "block";
this.monitorClose.addEventListener('click', (e: any) => {
e.preventDefault();
this.enabledMonitor();
//update tracking
});
this.monitor = document.getElementById('monitor');
this.monitor.style.display = "none";
this.monitor.addEventListener('click', (e: any) => {
e.preventDefault();
this.disabledMonitor();
//update tracking
});
}
activeVisio(){
@ -106,6 +127,58 @@ export class MediaManager {
});
}
enabledMonitor() {
this.monitorClose.style.display = "none";
this.monitor.style.display = "block";
this.getScreenMedia().then((stream) => {
this.updatedLocalStreamCallBack(stream);
});
}
disabledMonitor() {
this.monitorClose.style.display = "block";
this.monitor.style.display = "none";
this.localScreenCapture?.getTracks().forEach((track: MediaStreamTrack) => {
track.stop();
});
this.localScreenCapture = null;
this.getCamera().then((stream) => {
this.updatedLocalStreamCallBack(stream);
});
}
//get screen
getScreenMedia() : Promise<MediaStream>{
try {
return this._startScreenCapture()
.then((stream: MediaStream) => {
this.localScreenCapture = stream;
return stream;
})
.catch((err: any) => {
console.error("Error => getScreenMedia => " + err);
throw err;
});
}catch (err) {
return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
reject(err);
});
}
}
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});
} else {
//return navigator.mediaDevices.getUserMedia(({video: {mediaSource: 'screen'}} as any));
return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
reject("error sharing screen");
});
}
}
//get camera
getCamera() {
let promise = null;

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

@ -127,22 +127,11 @@ export class SimplePeer {
videoActive = true;
}
});
if(microphoneActive){
this.MediaManager.enabledMicrophoneByUserId(user.userId);
}else{
this.MediaManager.disabledMicrophoneByUserId(user.userId);
}
if(videoActive){
this.MediaManager.enabledVideoByUserId(user.userId);
}else{
this.MediaManager.disabledVideoByUserId(user.userId);
}
this.stream(user.userId, stream);
});
/*peer.on('track', (track: MediaStreamTrack, stream: MediaStream) => {
this.stream(user.userId, stream);
});*/
peer.on('close', () => {
@ -158,9 +147,19 @@ export class SimplePeer {
});
peer.on('data', (chunk: Buffer) => {
let data = JSON.parse(chunk.toString('utf8'));
if(data.type === "stream"){
this.stream(user.userId, data.stream);
let constraint = JSON.parse(chunk.toString('utf8'));
if (constraint.audio) {
this.MediaManager.enabledMicrophoneByUserId(user.userId);
} else {
this.MediaManager.disabledMicrophoneByUserId(user.userId);
}
if (constraint.video) {
this.MediaManager.enabledVideoByUserId(user.userId);
} else {
this.stream(user.userId);
this.MediaManager.disabledVideoByUserId(user.userId);
}
});
@ -216,7 +215,7 @@ export class SimplePeer {
* @param userId
* @param stream
*/
private stream(userId : any, stream: MediaStream) {
private stream(userId : any, stream?: MediaStream) {
if(!stream){
this.MediaManager.disabledVideoByUserId(userId);
this.MediaManager.disabledMicrophoneByUserId(userId);
@ -231,25 +230,21 @@ export class SimplePeer {
*/
private addMedia (userId : any = null) {
try {
let transceiver : any = null;
let localStream: MediaStream|null = this.MediaManager.localStream;
let localStream: MediaStream | null = this.MediaManager.localStream;
let localScreenCapture: MediaStream | null = this.MediaManager.localScreenCapture;
let peer = this.PeerConnectionArray.get(userId);
if(localStream === null) {
//send fake signal
if(peer === undefined){
return;
}
peer.write(new Buffer(JSON.stringify({
type: "stream",
stream: null
})));
return;
}
if (peer === undefined) {
throw new Error('While adding media, cannot find user with ID '+userId);
throw new Error('While adding media, cannot find user with ID ' + userId);
}
for (const track of localStream.getTracks()) {
peer.addTrack(track, localStream);
peer.write(new Buffer(JSON.stringify(this.MediaManager.constraintsMedia)));
if (localScreenCapture !== null) {
for (const track of localScreenCapture.getTracks()) {
peer.addTrack(track, localScreenCapture);
}
} else if (localStream) {
for (const track of localStream.getTracks()) {
peer.addTrack(track, localStream);
}
}
}catch (e) {
console.error(`addMedia => addMedia => ${userId}`, e);