Sign in
Log inSign up
Kannan

110 likes

2.5K reads

18 comments

Ezenwankwo Ugochukwu
Ezenwankwo Ugochukwu
Oct 31, 2020

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

4
1 reply
Kannan
Kannan
Author
Nov 1, 2020

Ezenwankwo Ugochukwu I am glad its helpful

Vivek Tiwari
Vivek Tiwari
Oct 31, 2020

Awesome tutorial. I always wanted to understand how this works. 馃憦

3
1 reply
Kannan
Kannan
Author
Nov 1, 2020

Thanks Vivek

Victoria Lo
Victoria Lo
Oct 31, 2020

This is such an awesome article! Thanks for sharing!

2
1 reply
Kannan
Kannan
Author
Nov 1, 2020

Thanks Victoria

Tapas Adhikary
Tapas Adhikary
Nov 1, 2020

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

2
1 reply
Kannan
Kannan
Author
Nov 1, 2020

Thanks Tapas

1
Murewa Ashiru
Murewa Ashiru
Nov 1, 2020

Awesome! Can't wait to try it out.

2
1 reply
Kannan
Kannan
Author
Nov 2, 2020

Thanks Murewa

Astha Srivastava
Astha Srivastava
Nov 6, 2020

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

2
1 reply
Kannan
Kannan
Author
Nov 6, 2020

Thanks Astha

1
N. M. Ali Hayder
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)

3 replies
Kannan
Kannan
Author
Nov 3, 2020

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

1
N. M. Ali Hayder
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: "",
            credential: "98376683"
          },
          {
            urls: "turn:numb.viagenie.ca",
            username: "",
            credential: "98376683"
          }
        ]
      },
      stream,
    });
4
Kannan
Kannan
Author
Nov 6, 2020
1
Juliano Costa
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 ?

1 reply
Kannan
Kannan
Author
Nov 4, 2020

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.