This is the 21st day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The MediaDevices API provides access to devices connected to media input, such as cameras and microphones, as well as screen sharing. It allows you to access media data from any hardware resource.

Note: The MediaDevices API can only access the webcam if it serves the content over HTTPS. The API is also based on the Promise specification.

The following is the support provided by Can I Use:

Accessing the Camera Example

The simple HTML structure is as follows:

<button id="start-webcam-btn">Enabling the Camera</button>
<button id="stop-webcam-btn">Stop the camera</button>

<div id="container">
  <video autoplay="true" id="videoElement"></video>
</div>
Copy the code

CSS is as follows:

.videoElement {
  width: 500px;
  height: 500px;
  border: 10px solid plum;
}
Copy the code

Enabling the Camera

Use the navigator. MediaDevices. GetUserMedia (constraints) access to the camera. Assigns the returned stream to a

var video = document.querySelector('#videoElement')

const start = () = > {
  if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then(stream= > {
        video.srcObject = stream
      })
      .catch(err= > {
        console.log('ERROR: ', err)
      })
  }
}
Copy the code

👉 Check the effect

If you click the button and the camera doesn’t turn on, you may be blocking browser access. If you’re using Google Chrome, you’ll see the following on the far right of the browser’s address bar:

You can allow or disable the browser from using your camera.

Stop the Webcam

const stop = e= > {
  const stream = video.srcObject
  const tracks = stream.getTracks()

  for ( i = 0; i < tracks.length; i++) {
    var track = tracks[i]
    track.stop()
  }

  video.srcObject = null
}
Copy the code

Constraints parameters

In present use mediaDevices getUserMedia (constraints), need to know something about constraints parameters configuration options.

Constraints — Specifies the media type of the request and the corresponding parameters.

The following requests both audio and video without any parameters:

const constraints = {
  audio: true.video: true
}
Copy the code

If true is set for a media type, the resulting stream needs to have tracks of that type.

If one of these is not available for some reason, getUserMedia() will generate an error.

When the user’s camera and microphone information is not accessible for privacy reasons, an application can request the camera and microphone capabilities it needs or wants using the additional CONSTRAINTS parameter. Here’s an example of how the app wants to use a camera resolution of 1280 x 720:

const constraints = {
  audio: true.video: { width: 1280.height: 720}}Copy the code

The browser will try to satisfy the request parameters, but it may return other resolutions if the request parameters are not exactly satisfied or if the user chooses to override the request parameters.

To force a specific size, use the keywords min, Max, or exact (i.e. Min == Max). The following parameters indicate a minimum resolution of 1280 x 720.

const constraints = {
  audio: true.video: {
    width: { min: 1280 },
    height: { min: 720}}}Copy the code

If the camera does not support the requested resolution or higher, the returned Promise is in the Rejected state and the user will not be prompted to request authorization.

The reason for the difference in performance is that the keywords min, Max, and exact are intrinsically mandatory as opposed to the simple request value and ideal keyword. Here’s a more detailed example:

const constraints = {
  audio: true.video: {
    width: { min: 1024.ideal: 1280.max: 1920 },
    height: { min: 776.ideal: 720.max: 1080}}}Copy the code

When a request contains an Ideal value, this value carries a higher weight, meaning that the browser will first try to find the Settings or camera (if the device has more than one camera) that are closest to the specified ideal value.

Simple request values can also be interpreted as applying ideal values, so our first request to specify resolution can also be written as follows:

const constraints = {
  audio: true.video: {
    width: { ideal: 1280 },
    height: { ideal: 720}}}Copy the code

Not all constraints are numbers. For example, on mobile devices, the following example shows preference for front-facing cameras (if any) :

const constraints = {
  audio: true.video: {
    facingMode: 'user'}}Copy the code

To force the use of rear camera, you can use:

const constraints = {
  audio: true.video: {
    facingMode: {
      exact: 'environment'}}}Copy the code

In some cases, such as when limited bandwidth transport is used on WebRTC, a lower frame rate may be more appropriate.

const constraints = { 
  video: { 
    frameRate: { 
      ideal: 10.max: 15}}}Copy the code