DEV Community

Cover image for I WebRTC you - building a video chat in JavaScript

I WebRTC you - building a video chat in JavaScript

Michael Neu on August 20, 2019

For a recent university project, our team was tasked to deliver a video calling feature for both our iOS and web app. There are many solutions out ...
Collapse
 
jakeofalltrades profile image
jakeofalltrades • Edited

Hi Michael,

Why it is not displaying the camera video? Only black rectangle.
When I open the inspect element, I could see this:

Uncaught TypeError: Cannot read property 'getUserMedia' of undefined

Any thoughts?
Thanks
Jake

Collapse
 
saxenaudit profile image
saxena uditanshu

it doesn't give error on mozilla, only on chrome

Collapse
 
htho profile image
Hauke T.

Thank you for your Article! It really helped me to grasp the concepts.

I know it's been a while.
I write a browser based app (game) that does not require a server for its mechanics - it could be delivered with GitHub Pages.

But I want two players to be able to play a PvP match.

I imagine the process like this:

  • Player A creates a link and shares it with player B (copy to clipboard).
  • Player B visits this link and they should be able to play.

I as a developer am lazy and aware of the responsibilities that come with providing and implementing servers. Therefore I want to avoid to write ANY code that runs on a server.

Here are my questions:

  1. Is this possible with WebRTC?
    • If not: Are there any (free) services that make this possible?
  2. Is stun.stunprotocol.org a free and public service, or is it a placeholder for I server I need to provide?

Best Wishes!

Collapse
 
umtcylmz profile image
umtcylmz • Edited

Hello Michael, I like your article thanks for your effort.

Moreover, I want to mention an open source video conferencing tool that I am using. It is here

It is ready to use! It includes the frontend, all APIs and user interface to build large-scale, ultra-low latency video and audio conferencing and webinars.

You can also ask for a demo request: antmedia.io/portmeet-app/

Collapse
 
miroslavpejic85 profile image
Miroslav Pejic

Hello Michael,

Very nice article!

If I may also mention MiroTalk :)

MiroTalk is an Open-Source Self Hosted WebRTC, Simple, Secure, Scalable, Fast Real-Time Video Conferences Up to 4k and 60fps, compatible with all browsers and platforms.

MiroTalk P2P

GitHub: github.com/miroslavpejic85/mirotalk
Demo: mirotalk.up.railway.app/

MiroTalk SFU

GitHub: github.com/miroslavpejic85/mirotal...
Demo: sfu.mirotalk.org

Difference

github.com/miroslavpejic85/mirotal...

Presentation

canva.com/design/DAE693uLOIU/view

Many thanks!

Collapse
 
stutinath profile image
Stuti Nath

Good fortune of reading your article regarding WebRTC. You can also go through this article for reference so you can make the best of it with 5000+participant support and 10,000 free minutes every month . For further Read you can prefer this article . dev.to/videosdk/video-calling-in-j....

Collapse
 
chanduthedev profile image
chanduthedev

Hi Michael,

Thank you for nice article. I would like to ask one question, you mentioned in the article that ICE servers are STUN/TURN servers which generates ICE candidates. I just want to know if ICE servers are not specified webrtc client object(assume both parties are in the same network), who creates ICE candidates?

Collapse
 
room_js profile image
JavaScript Room

Nice article!

Collapse
 
missamarakay profile image
Amara Graham

I like the point you made at the top about minimum required steps - its so hard to find in the video and chat space!

Great post, thanks for sharing!

Collapse
 
chrisachard profile image
Chris Achard

This is great! I was just looking at how to do this, but there are a lack of good up-to-date tutorials out there. Thanks!

Collapse
 
manvendrask profile image
Manvendra Singh

Can you please explain how can we achieve this for an iOS and Android application?

Collapse
 
tbobker profile image
Tim

I've been using ant media server webrtc data channel to build a live chat system. antmedia.io you can also add ultra-low latency video.