Learn about WebRTC – MediaStream

Tram Ho


Recently, I have been very interested in WebRTC so I will do some articles to learn about this WebRTC. The article is based on my limited knowledge, I hope the a / c / e will give me more suggestions. Please. We also get started.


WebRTC stands for Web Real-Time Communication very popular with programmers. WebRTC allows browsers to communicate with each other in real time. For example: phone calls, videos, play games, … In addition, WebRTC is a product of the World Wide Web Consortium (W3C). It has the ability to support real-time communication browser via Video Call, Voice Call or transfer data P2P (peer-to-peer), no need for plugins or other software.

In general, WebRTC has a lot to consider and research. So in today’s article, I will only introduce one of the main components of WebRTC .

MediaStream APIs

To initiate a Video call, we first need access to the webcam (to record video), the microphone (to record audio). And to do this WebRTC provides us MediaStream API. It is designed to easily access the media streams of the computer or phone we are using. Usually these are called via the navigator.mediaDevices object. From this object we can list all the connected devices, listen for device changes (when the device is connected or disconnected) and use a device to access the Media Stream ( see below).

Calling the getUserMedia function will ask the user (the users of the system) to ask for permission to access the device’s camera and microphone.

  • If the user allows, the promise will be passed along with a MediaStream including the video and audio tracks
  • If the user does not allow it, a PermissionDeniedError will be fired
  • If the device does not have video or audio hardware, a NotFoundError will be fired.

1: Querying media devices

In more complex applications or devices with multiple media devices (For example, phones with two cameras, for example, front and back cameras). We will get access to more hardware and our job is to let the user choose the appropriate hardware. This can be done using the enumerateDevices() function.

It will return a promise and go bad with an array of MediaDevicesInfo (Each of these objects will describe the information of the Media Device that the user provides). And from this information we can give the user permission to choose the media device they want to use. Each MediaDevicesInfo contains an attribute named kind whose value is audioinput , audiooutput , videoinput to identify the media device type.

2: Listen for change of devices.

Most computers today support multiple media devices plugged in. It can be a webcam via USB, Micro and headphone via Bluetooth or an external audio-visual device. To support this, the web app can listen for changes in media devices. We can do this using the devicechange event in navigator.mediaDevices :

3: Media constraints.

In some complex applications, media devices with different specifications may be required. This object is built on top of MediaStreamConstraints . This object is used as a param in getUserMedia() that allows us to request the correct devices as required by the app.

Requirements can be very loose as basic as including audio and video or very complex (what device ID must be or camera resolution). As follows :

4: Local playback

Once the user has given us permission to use the media device, the Web Browser has been allowed to start and use the device. Then we have a MediaStream that can be used. And our job is to tag them video and audio in the browser and play it in the browser:

The HTML section needs a typical video through the getUserMedia function. We should use 2 attributes:

  • autoplay : Let the video auto be played every time a new stream is added to the same element
  • playsinline : Allows video to play inline, instead of just full screen, on some mobile browsers

You should also use control = "false" for live strean streams, unless the user can pause them:


Ok, so I’ve finished my little research today. The article is still flawed. Hope everyone comments and suggestions for me. Thank you for watching all of your posts





Share the news now

Source : Viblo