DEV Community

Cover image for WebRTC - A Simple Video Chat With JavaScript (Part 1)

WebRTC - A Simple Video Chat With JavaScript (Part 1)

Jefferson Xavier on November 11, 2020

The WebRTC (Web Real-Time Communications) is a technology with a set of features that allow an user get audio/video medias and transmit this inform...
Collapse
 
streammer profile image
Streammer • Edited

Hi, where is <script src="/socket.io/socket.io.js"></script>

Collapse
 
jeffersonxavier profile image
Jefferson Xavier

Hello, is in node_modules folder.

Collapse
 
muhammadsaleh profile image
Muhammad Saleh

Thanks for the great tutorial.
I wonder if there is a way to answer offers without sending stream in return. The purpose of that is to allow some users to just watching without broadcasting, some joined users wouldn't allow media permissions. So you might consider it as a one-way call.

Collapse
 
jeffersonxavier profile image
Jefferson Xavier

Hi, thanks for your comment. Yes, that's possible, you can just disable audio and video in getUserMedia to customer users and to broadcast enable this features.

Collapse
 
denisroot profile image
Denis-root

Thank you very much for your help, you have helped me understand new things.
Just a doubt, I did it step by step, I used visual code, it works locally for me. I uploaded it to heroku, as long as I use it locally I can make video calls, however trying to connect between different networks does not work. How can I make it work remotely.

Collapse
 
jeffersonxavier profile image
Jefferson Xavier

Hi, thanks for your comment. It's necessary configure a turn server to make video calls in internet. Read more about that here webrtc.org/getting-started/turn-se... and html5rocks.com/en/tutorials/webrtc....

Collapse
 
teofi28 profile image
Joe

Hello Jefferson,
Thanks for this tutorial... I´d really appreciate your help. I just got an iceserver with stun and turn servers on twilio. Where should this configuration be done? I see signaling is already set in your code. Thanks and Regards..
Joe Nassar

Collapse
 
dcsan profile image
dc

I assume this is using p2p web RTC? how easy is it to get it working for say a four-way chat even with voice only

Collapse
 
jeffersonxavier profile image
Jefferson Xavier

Hi, thanks for your comment.

It's simple, to open stream with voice only just pass the option video with false to getUserMedia() function like

{video: false, audio: true}

To open connection with multiple users the dynamic is same. Use all array received in other-users socket event calling the new RTCPeerConnection to any user and change the variables localConnection and remoteConnection to store a array with all connections initiated or received.