How to establish Audio Video call and Screen Share option using WebRTC in Angular 11
During COVID situation, when most of us are working from home or remote area, we need to connect with our friends, office colleagues via the internet using Zoom, MS Teams, Whatsapp, and whatnot. They are really offering a good solution for us to connect with our co-workers. I don't know, what technology they are using to do audio, video & screen sharing, but there are some dependencies behind each solution, like, you need to install a team on your computer or mobile. You do not know, whether they are saving your data or not, and also sometimes they add a timer in behind, whenever the mentioned time elapses, your call will disconnect automatically.
Here, in this article I am trying to create a very small and easy way to create Audio, video calls with the Screen share option enable. To do this, I am using RTC (Real-Time Communication) for establishing a connection between two parties.
What is WebRTC?
- Web Real-Time Communications – WebRTC – is an HTML5 specification that allows you to communicate in real-time directly between browsers without any third-party plugins. WebRTC can be used for multiple tasks (like audio, video, screen share, even file sharing) but real-time peer-to-peer audio and video communication is obviously the primary feature.
WebRTC is designed for high-performance, high-quality communication of video, audio, and arbitrary data.
WebRTC apps need a service via which they can exchange network and media metadata, a process known as signaling. However, once signaling has taken place, video/audio/data is streamed directly between clients, avoiding the performance cost of streaming via an intermediary server.
WebRTC provides Real Time Communication between Browsers.
Today, the video chat landscape is much simpler thanks to WebRTC: an open-source project built and maintained by Google, Mozilla, Opera, and others. WebRTC allows you to easily build real-time communication software in your browser and is being standardized at the W3C & IETF levels. Using WebRTC, you can build real-time video chat applications in the browser that actually works well!
WebRTC is now supported by most of the modern browser
WebRTC can only workes over HTTPS protocol. (localhost being allowed but shared IP with HTTP WebRTC will not work, for that, you do need HTTPS)
After establishing a connection, it's difficult to identify which one is a parent and which one is a child.
WebRTC library is huge and difficult to understand, it takes some time to understand how it works without any backend.
WebRTC is definitely a great feature but to leverage this, you do need a little patience and debug the code.
Where it can be used?
- It can be used in
Stream Audio
Stream Video
Screen Share
File Share
Video Chat
Audio Chat
P2P data sharing service
even multiplayer game
Demo:
Let's jump into the code and Understand each piece of it.
To achieve my goal for WebRTC, I am using the PeerJS library for establishing connections between two parties using an id.
HTML code -
Install peerjs using npm command and generate peer id also handling incoming calls -
In the above I am using navigator.mediaDevices.getUserMedia({ video: true, audio: true } which enables the in build hardware camera & microphone and ask for permission. Once the user approves that, video & audio streaming will be in place. That stream I am sending to another peer after establishing a communication channel.
If you could see above, there is one method to attach the streaming video (this.streamRemoteVideo()) to HTML. There I am just appending the stream object to HTML <video> tag and play it.
Here the code -
Now it's time to call another peer, have the following method to call another peer by passing the unique peer id generated by the peerJS library.
I believe you are now able to establish a P2P connection and having an audio video chat with your peers. Cheers!
Now let's add a screen sharing feature on top of it. Having in mind this will not work in mobile devices, as the mobile browser still now supporting it. To do the screen share I am going to use navigator.mediaDevices.getDisplayMedia({ params... }) which again requires user permission and prompt user to choose which screen they want to share. Let's see the code now.
Okay now, thats all I needed to connect with my friends, co workers. It's pretty simple and robust solution to connect P2P. Though I have not used any session or SSL cert to establishing a secure connection, that I leave it to domain SSL. You can find the complete code from here.
Hope you enjoyed the article, if you have any othere suggestions please comments below.
Loading comments...