js to call the network camera and handle common errors

Recently, due to business reasons, I need to access and debug various network cameras on the Web page, and I encountered many incredible problems (that is, I can read the brand of the camera, but not the resolution of the camera). So I compiled this article as a memo, and hope it can help friends with similar problems.

Basic code

navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {

  let video = document.getElementById('#video')
 
  // Compatibility monitoring if( 'srcObject' in video ) {
    
    video.srcObject = stream
  } else {
    // This method is no longer supported on browsers that support srcObject video.src = URL.createObjectURL(stream)
  }
  
  await video.play()
})

compatibility

Judging from the compatibility of caniuse, the overall compatibility is average. IE series browsers are not supported at all. iOS not only requires iOS 11 or above, but also cannot be called through the API in the embedded page of the APP.

Various problems encountered in development

The browser console prompts mediaDevices.getUserMedia is not a function

Due to browser limitations, navigator.mediaDevices.getUserMedia can be used normally under the https protocol, but only the two domain names localhost/127.0.0.1 are allowed to access under the http protocol. Therefore, disaster recovery should be done during development, and it is necessary to confirm whether the production environment is under the https protocol when going online.

let mediaDevices = navigator.mediaDevices || null  
if( mediaDevices === null ) {    
  console.warn(`Please make sure you are in the https protocol environment`)
  return 
}  
mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {})

Get the hardware parameters of the camera

There are two main types of hardware parameters that I need to use in project development: brand and resolution. It is relatively simple to obtain the brand name of the camera. You can directly use mediaDevices.enumerateDevices() to obtain a list of peripherals available on the computer and filter out cameras using the kind field.

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
    
 console.log("The browser does not support the enumerateDevices property")
 return
}
  
navigator.mediaDevices.enumerateDevices().then((devices) => {
    
  let devicesList = devices.filter((device) => device.kind === 'videoinput')
    
  // devicesList -> [{ kind: 'videoinput', name: 'FaceTime HD Camera (Built-in)', deviceId: xxx }]
  // The deviceId obtained in devicesList can be used to switch cameras. // Specific method: mediaDevices.getUserMedia({ audio: false, video: { deviceId } })
})

The resolution cannot be obtained directly through the official API. The reason found on MDN is to protect the user's personal privacy, and the resolution is within the scope of protection. (I am very curious why resolution is private?)

MDN original text (link):

For privacy reasons, the user's camera and microphone information cannot be accessed

But it is not completely impossible to obtain, because the content recorded by the camera can be played on the web page through the video tag, and the video tag will set the size to the same size as the camera by default, so the resolution of the camera can be obtained by obtaining the size of the video.

After testing, the obtained value is not affected by the style, so the size of the video can be controlled by the style, but it will not affect the resolution.

let mediaDevices = navigator.mediaDevices || null  
if( mediaDevices === null ) {    
  console.warn(`Please make sure you are in the https protocol environment`)
  return 
}
  
mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {    
  let video = document.getElementById('#video')
  video.srcObject = stream  
  await video.play()    
 // 1280,720  
  console.log(video.videoWidth, video.videoHeight)
})

Handling of errors such as no camera/no permission to use

getUserMedia itself integrates several common error prompts, such as no camera, no permission to use, etc. Most similar errors can be handled through catch.

let mediaDevices = navigator.mediaDevices || null
  
if( mediaDevices === null ) {
  
  console.warn(`Please make sure you are in the https protocol environment`)
  return 
}
  
mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {
  
  let video = document.getElementById('#video')
  
  video.srcObject = stream
  
  await video.play()
  
}).catch((error) => {
  
  let message = error.message || error,
    response = {
      'permission denied': 'The browser prohibits this page from using the camera, please enable the relevant permissions',
      'requested device not found': 'No camera detected'
    }  
  alert(response[ message.toLowerCase() ] || 'Unknown error')
})

Unplug the camera to check

Since the camera on the mobile phone is built into the phone, there is generally no need to check whether the camera is unplugged. However, if the camera data cable is unplugged on the PC, it is necessary to monitor the status of the camera.
The first thing that comes to mind is that getUserMedia may report an error through catch when the camera is unplugged. However, after many experiments, getUserMedia will not respond with an error that the camera cannot be found when the camera is unplugged, and it is not feasible to directly monitor it through catch.
When I had almost no idea, I saw this sentence in the getUserMedia document:

getUserMedia returns a Promise. The callback function after the Promise succeeds takes a MediaStream object as its parameter.

MediaStream is an object that receives multimedia (including audio and video) content streams. After printing on the console of Google Chrome (other browsers have not been tested), its property values ​​are as follows:

id is the unique identifier of the MediaStream object, active is whether the current content stream is active, and the following fields are hooks provided by Google Chrome.

The moment the camera is unplugged, active will change from true to false, and the oninactive hook will be triggered at the same time. With status monitoring, things become much simpler. After testing the code, it was found that it is also effective for users to change camera permissions.

// Determine whether the camera is online let cameraIsOnline = false
  
const loadWebCamera = () => {
    
  let mediaDevices = navigator.mediaDevices || null
  
  if( mediaDevices === null ) {
  
    console.warn(`Please make sure you are in the https protocol environment`)
    return 
  }
  
  mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {
  
    let video = document.getElementById('#video')
  
    video.srcObject = stream
      
    // Compatibility processing if ( stream.oninactive === null ) {
      // Listen for stream interruptions. After the stream is interrupted, it will call itself again to monitor the status stream.oninactive = () => loadWebCamera()
    }
  
    await video.play()

    cameraIsOnline = true
  
  }).catch((error) => {
  
    let message = error.message || error,
      response = {
        'permission denied': 'The browser prohibits this page from using the camera, please enable the relevant permissions',
        'requested device not found': 'No camera detected',
        'could not start video source': 'Unable to access the camera, please replug and try again'
      }
   
    cameraIsOnline = false
    alert(response[ message.toLowerCase() ] || 'Unknown error')
  })
}

However, compatibility is also very urgent, and many fields are still in the proposal stage. It is recommended to do a good job of compatibility during the development stage to prevent problems in the production environment.

This is the end of this article about js implementation of calling webcam and common error handling. For more relevant js calling webcam content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!