I have a NodeJS application that replicates Zoom. I have figured out on how to stream live audio and video between peers. Now I am stuck at a point where I need to add an option of screen sharing. Please tell me a way to change the stream to "screenStream". Screen sharing has to start when a button with id "shareScreen" is clicked.
Here is the script.js file (By the way I am using PeerJS library for P2P call and connection:
var socket = io('/');
var myPeer = new Peer(undefined, {
host: 'peerjs-server.herokuapp.com',
port: '443',
secure: true
});
var videoGrid = document.getElementById('videoGrid');
var myVideo = document.createElement('video');
myVideo.muted = true;
var peers = {};
myPeer.on('open', (id) => {
socket.emit('join-room', roomId, id);
document.getElementById('disconnectButton').onclick = () => {
socket.emit('disconnected');
window.location = "https://www.google.com";
}
});
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then((stream) => {
socket.on('user-connected', (userId) => {
connectToNewUser(userId, stream);
});
addVideoStream(myVideo, stream);
myPeer.on('call', (call) => {
call.answer(stream);
const videoElement = document.createElement('video');
call.on('stream', (userVideoStream) => {
addVideoStream(videoElement, userVideoStream);
});
});
document.getElementById("videoToggler").onclick = () => {
if (stream.getVideoTracks()[0].enabled) {
stream.getVideoTracks()[0].enabled = false;
stream.getVideoTracks()[0].muted = false;
document.getElementById("videoToggler").classList.remove('fa-video');
document.getElementById("videoToggler").classList.add('fa-video-slash');
document.getElementById("videoToggler").style.color = "#FF0000";
} else {
stream.getVideoTracks()[0].enabled = true;
stream.getVideoTracks()[0].muted = true;
document.getElementById("videoToggler").classList.remove('fa-video-slash');
document.getElementById("videoToggler").classList.add('fa-video');
document.getElementById("videoToggler").style.color = "#000000";
}
}
document.getElementById("audioToggler").onclick = () => {
if (stream.getAudioTracks()[0].enabled) {
stream.getAudioTracks()[0].enabled = false;
stream.getAudioTracks()[0].muted = false;
document.getElementById("audioToggler").classList.remove('fa-microphone');
document.getElementById("audioToggler").classList.add('fa-microphone-slash');
document.getElementById("audioToggler").style.color = "#FF0000";
} else {
stream.getAudioTracks()[0].enabled = true;
stream.getAudioTracks()[0].muted = true;
document.getElementById("audioToggler").classList.remove('fa-microphone-slash');
document.getElementById("audioToggler").classList.add('fa-microphone');
document.getElementById("audioToggler").style.color = "#000000";
}
}
});
function connectToNewUser(userId, stream) {
var call = myPeer.call(userId, stream);
peers[userId] = call;
const videoElement = document.createElement('video');
call.on('stream', (userVideoStream) => {
addVideoStream(videoElement, userVideoStream);
});
call.on('close', () => {
videoElement.remove();
});
}
function addVideoStream(videoElement, stream) {
videoElement.autoplay = true;
videoElement.srcObject = stream;
videoGrid.append(videoElement);
}
socket.on('user-disconnected', (userId) => {
peers[userId].close();
});