WebRTC video calls implemented in React

Click for: original source

Having been implementing WebRTC in production systems for almost a year now, we wanted to add this resource to the documentation available for the architecture of WebRTC videocalls. Partly to share our knowledge and common gotchas, and also to give back to the web standard that has supported us so well. By yown.it.

The introduction of WebRTC as a web standard is a process that has taken place across major browsers over many years. This means that it is intentionally “un-opinionated” when it comes to being used within frameworks.

This also means that most examples, while freely available, focus on vanilla javascript HTML implementations, the cleanest simplest way of streaming media streams between browsers.

The article deals with:

  • The “problem” with WebRTC
  • Discovery & data persistence
  • Initiation, hang-ups and identification
  • Perfect negotiation
  • Code Samples

Overcoming Perfect negotiation issue in React relies on using the event driven architecture, and we’ve included our code as a bonus. It took us a long time to implement perfect negotiation using the React component lifecycle and we don’t see many online examples. This article is excellent source of information on WebRTC topic. You will also get links to further reading and code samples. Nice one!

[Read More]

Tags app-development web-development frontend react javascript