Discussion on "Let's build a video conferencing app"

Kannan · 2020-10-31T08:27:32.165Z

Hello Everyone👋, In this article we will see how to build a video conferencing app. Prerequisites: Basics of Webrtc To implement this we will be using the following libraries: React Nodejs simple-peer socket.io chance Setup Server: touch app.js ya...

Responses8

Markdown supported · ⌘↵ to post

Astha Srivastava

Nov 6, 2020

Wonderful tutorial. I will surely try it out.. :-)

Kannan

Nov 6, 2020

Thanks Astha

Juliano Costa

Nov 4, 2020

Hey buddy.

I'm trying to use a local ip like 192.168.0.49, but it does not work. Do u know what could be happen ?

Is the application loading in your other device ?. If it is not loading I think you have to allow inbound traffic for the port.

If it is loading and you just dont see the video stream then it might be due to the browser which blocks the web rtc stream if the website does not have https associated with it. It will work only in localhost with http.

In either these case you can use ngrok npm to publish the port (aka proxy) from local server to internet.

just install ngrok globally via npm / yarn

In terminal you can run ngrok by ngrok http <ClientAppPort>

In another window ngrok http <ServerAppPort>

Once you get the server proxy url make sure you replace it in the client application.

N. M. Ali Hayder

Nov 3, 2020

Hi Kannan, I've hosted the server into Heroku and the client into firebase hosting. Now, If I test on my own network using multiple devices then it's working fine. But on another network, the video becomes black when I test it with a friend. An error shows in the console is like: Uncaught Error: Connection failed. at d.value (index.js:658) at RTCPeerConnection.t._pc.onconnectionstatechange (index.js:116)

Hi N. M. Ali Hayder Can you share your client Url here please ?

Murewa Ashiru

Nov 1, 2020

Awesome! Can't wait to try it out.

Kannan

Nov 2, 2020

Thanks Murewa

Tapas Adhikary

Nov 1, 2020

Kannan, Great tutorial. Thanks for sharing. I'm going to use it in my DemoLab soon.

Kannan

Thanks Tapas

Victoria Lo

Oct 31, 2020

This is such an awesome article! Thanks for sharing!

Kannan

Nov 1, 2020

Thanks Victoria

Ezenwankwo Ugochukwu

Oct 31, 2020

Thank you for this! This will surely come handy in the future for me! Bookmarked!

Kannan

Nov 1, 2020

Ezenwankwo Ugochukwu I am glad its helpful

Vivek Tiwari

Oct 31, 2020

Awesome tutorial. I always wanted to understand how this works. 👏

Kannan

Nov 1, 2020

Thanks Vivek

N. M. Ali Hayder

Nov 6, 2020

Hi, Kannan I solved the issue by configuring the ice servers. The snippet looks like this now.

const peer = new Peer({
      initiator: true,
      trickle: false,
      config: {
        iceServers: [
          {
            urls: "stun:numb.viagenie.ca",
            username: "sultan1640@gmail.com",
            credential: "98376683"
          },
          {
            urls: "turn:numb.viagenie.ca",
            username: "sultan1640@gmail.com",
            credential: "98376683"
          }
        ]
      },
      stream,
    });

Search Hashnode

Let's build a video conferencing app

Written by

Responses8