The browser API

Restrictions on browser use of devices

You need to use HTTPS to access the device, and the browser will pop up a window asking if the user is allowed to use the device. Most browsers only need to ask once in the same domain name to remember, but some browsers (Safari in particular) ask every time they visit the device. For HTTP, only 127.0.0.1 and localhost are available to access the device.

Browser obtaining the Microphone

Access the microphone through the browser API

<audio id="localAudio" ></audio>
Copy the code
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({audio: true}).then((mediastream) = > {
    // Return Mediastream, not Audiotrack
    let audioTrack = mediastream.getAudioTracks()[0];

    // If you need to play, you can directly use auido to play
    let audioElement = document.getElementById("localAudio");
    audioElement.srcObject = mediastream;
    audioElement.play().then(() = > {
      // Playback succeeded
    }).catch((err) = > {
      // Playback failed
    })
  }).catch((err) = > {
    Err. name or err.message can be used to determine the cause of the error. Err does not return an error code})}else {
  // The browser does not support device permissions. The page may not be HTTPS, or the browser may not support device permissions
}
Copy the code

When you run the code above, your browser will pop up a window asking if you are allowed to use a microphone

If you click allow, you’ll go to the then section of the code. Disallow will enter the catch.

Camera Acquisition by Browser

Access the camera through the browser’s API

<video id="localVideo" controls ></video>
Copy the code
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({video: true}).then((mediastream) = > {
    // Mediastream is returned, not VideoTrack
    let videoTrack = mediastream.getVideoTracks()[0];

    // If you need to play, you can directly use auido to play
    let videoElement = document.getElementById("localVideo");
    videoElement.srcObject = mediastream;
    videoElement.play();
  }).catch((err) = > {
    Err. name or err.message indicates the cause of the error. Err does not return an error code})}else {
  // The browser does not support device permissions. The page may not be HTTPS, or the browser may not support device permissions
}
Copy the code

Run the code above and the browser will pop up asking if the camera is allowed

If you click allow, you’ll go to the then section of the code. Disallow will enter the catch. In the video, we can see what the camera captures

Browser gets screen share

Get screen sharing through the browser’s API

<video id="localVideo" controls ></video>
Copy the code
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
  navigator.mediaDevices.getDisplayMedia({video: true}).then((mediastream) = > {
  	// Mediastream is returned, not VideoTrack
  	let videoTrack = mediastream.getVideoTracks()[0];

    // If you need to play, you can directly use auido to play
    let videoElement = document.getElementById("localVideo");
    videoElement.srcObject = mediastream;
    videoElement.play();
  }).catch((err) = > {
    Err. name or err.message indicates the cause of the error. Err does not return an error code})}else {
  // The browser does not support screen sharing, either because the current page is not HTTPS or because the current browser does not support screen sharing
}
Copy the code

When you run the code above, the browser pops up a window that lets the user select what they want to share

Select the content you want to share and click Share to enter the then section of the code. Cancelling will enter the catch.

Browser support

Obtaining Device Rights

Obtain Obtain screen share