For details about the getUserMedia interface, see developer.mozilla.org/zh-CN/docs/…

The official existing instructions will not repeat, here mainly record getUserMedia interface in the actual use of the problem and need to pay attention to the point, encountered new problems timely update ~

Call enumerateDevices without authorization

When calling enumerateDevices to get a list of devices before using getUserMedia to get access to the webcam/microphone, there are two different representations of the problem:

  1. In browsers on Windows and Firefox on Linux, enumerateDevices can get all microphone/camera devices, but the label field is an empty string
  2. In Chrome running Linux, enumerateDevices cannot obtain all microphone or camera devices. In addition to label information, deviceId field is empty string and only groupId information is obtained

The first case only affects display but not usage, and the second case affects usage.

PS: The second case is represented in the complete environment as follows: In Fadora34 using Chrome, the camera/microphone is Acassis’s 4-way SDI acquisition card. Due to the limited time, I did not go through various situations and found a solution to the problem, so I did not continue my research.

2. Access to camera/microphone

Use the following code to ask the user for permission to use the camera/microphone. If the user accesses it for the first time, the permission window will pop up in the upper right corner

navigator.mediaDevices.getUserMedia({ video: true.audio: true });
Copy the code

If the user terminal does not have a microphone or camera, the browser will return the NotFoundError exception without the permission window. In this case, you need to pay attention to traversal only the camera or microphone.

The complete code can be found in another article I wrote: Obtaining Camera/microphone permissions

3. Specify the camera resolution

When obtaining a video, you can specify the resolution of the video in the following way

 navigator.mediaDevices.getUserMedia({ video: { width: 1920.height: 1080 }, audio: false });
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.

In this case, the video is available if the camera is available, but the resolution of the video may not be specified. In particular, it should be noted that if a video has been requested and has not been released, there is a high probability that the video with the previous resolution will be obtained. If resolution selection is involved, the previous stream must be released first.

The width/height attribute can also be specified as an object. To force a specific size, use the keyword min, Max, or exact

 navigator.mediaDevices.getUserMedia({
     video: { 
         width: { min: 1280.max: 1920 },
         height: { min: 720.max: 1280}},audio: false});Copy the code

If the camera does not support the requested resolution, the Promise returned is in the Rejected state, NotFoundError is used as the Rejected callback, and the user is not prompted to request authorization.

In this case, if the resolution supported by the camera is not within the range, the video will not be available

Width: {exact: 1920} and width: {min: 1920, Max: 1920} are equivalent.

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.

idealHas a higher weight, will result in the specifieddeviceIdInvalid, use with caution!!

Use a front-facing camera

When using the front or rear cameras, do not carry the deviceId parameter

 navigator.mediaDevices.getUserMedia({
     video: { 
         facingMode: "user",},audio: false});Copy the code

5. Automatic microphone gainautoGainControl

In use, some microphone hardware comes with automatic gain. In this case, if the automatic gain attribute of the browser is also turned on, the two will affect each other, resulting in poor sound pickup quality. In this case, you can turn off either automatic gain.