110 likes
路
2.5K reads
18 comments
Thank you for this! This will surely come handy in the future for me! Bookmarked!
Ezenwankwo Ugochukwu I am glad its helpful
Awesome tutorial. I always wanted to understand how this works. 馃憦
Thanks Vivek
This is such an awesome article! Thanks for sharing!
Thanks Victoria
Kannan, Great tutorial. Thanks for sharing. I'm going to use it in my DemoLab soon.
Thanks Tapas
Awesome! Can't wait to try it out.
Thanks Murewa
Wonderful tutorial. I will surely try it out.. :-)
Thanks Astha
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 ?
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,
});
Thanks N. M. Ali Hayder
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.