How to change a live stream during call between peers in PeerJs?

746 Views Asked by At

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();
});
0

There are 0 best solutions below