Build a screen share application like zoom and google meet

Hello there, In this article, I would be showing you how you can make a web application that allows you to share your screen with other people.

Now, very important note, in order to create this application you need to understand WebRTC and this tutorial is an extended to my previous article in which I had thought about how to build a video call application using webRTC. If you have already read that article you are ready to go. If not, please go and read that first.

Link: Build video call application with webRTC

Let's begin

Okay, trust me, this is going to be a very short and easy tutorial. You need to add few lines to our video call application that we build here-> Build video call application with webRTC

Just add the following code and boom! now you are able to share your screen as well, along with video.

const getUserMedia = async () => {

          const userMedia = await navigator.mediaDevices.getUserMedia({
              video: true
          });

          // Capture the screen stream
          const screenSteam = await navigator.mediaDevices.getDisplayMedia();

          const videoEle = document.getElementById('local-video');
          videoEle.srcObject = userMedia;
          videoEle.play()

          // This is our webcam stream
          for (let track of userMedia.getTracks()) {
                  peer.addTrack(track, userMedia)
          }

          // Finally add the screen stream to peer
          for (let track of screenSteam.getTracks()){
                  peer.addTrack(track, userMedia)
          }
 }

Okay, there is a task for you, we made a `peer.ontrack event listener which receives an array of streams. You have to loop over these streams and render multiple video tags dynamically and add the stream to the video's srcObject. Good luck 🙂

Hint In peer.ontrack method, we can get video and audio tracks:

peer.ontrack = async(ev) => {
    ev.streams[0].getAudioTracks(); // Returns all the audio tracks
    ev.streams[0].getVideoTracks(); // Returns all the audio tracks
}

Just in case, you want me to make a full tutorial on this, do leave a comment.

Happy learning

Build a screen share application like zoom and google meet

Comments

WebRTC - Web real-time communications

How to build a file transfer application with node and webRTC

More from this blog

FullStack Twitter Clone

Tic Tac Toe Game in Javascript

Deploying Node.js functions to AWS Lambda | Serverless

Uploading images to firebase storage with node.js

How I built a real-time collaborative IDE with video chat

Command Palette

Comments

WebRTC - Web real-time communications

How to build a file transfer application with node and webRTC

More from this blog