WebRTC, real-time Web API

Through this simple tutorial, how to use WebRTC to create a direct webcam communication application

WebRTC representativeNetwork real-time communication.

It allows the creation of direct data communication between browsers.

You can use it to

  • Streaming audio
  • Streaming video
  • Share files
  • Video communication
  • Create a peer-to-peer data sharing service
  • Create a multiplayer game

And more.

In order to use Web technology to make the creation of real-time communication applications easy, efforts are made to eliminate the need for third-party plug-ins or external technologies next to the Web browser.

There will be no need for plug-ins to perform RTC in the future, but everyone should rely on the standard technology-WebRTC.

All modern browsers support it (some of Edge's support does not support itRTCDataChannel-Look again later):

WebRTC implements the following APIs:

  • MediaStreamData streams can be accessed from the user side, such as cameras and microphones
  • RTCPeerConnectionHandle audio and video streaming communication between peers
  • RTCDataChannel: Processing other types of data (arbitrary data) communication

Through video and audio communication, you will useMediaStreamwithRTCPeerConnection.

Other types of applications, such as games, file sharing and other dependenciesRTCDataChannel.

In this article, I will create an example using WebRTC to connect two remote webcams.Network socketServer usageNode.js.

Tip: In your project, you may use a library that abstracts many details. This tutorial aims to illustrate WebRTC technology, so you can understand what is going on behind the scenes.

Media stream

Through this API, you can use JavaScript to access the camera and microphone streams.

This is a simple example that requires you to access the camera and play the video on the page:

Look at the penSimple WebRTC MediaStream exampleBy Flavio Copes (@flaviocopes) InCipher pen.

Tech Wiki Online!