Using Phone Cameras with getUserMedia

Multi camera cases

Even cheap phones can have multiple cameras, but the default camera for getUserMedia is probably not the "primary", and may lack focus feature, which is important for scanning barcodes.

const changeCamera = (video, {index} = {}) => {
  const devices = (await navigator.mediaDevices.enumerateDevices()).filter(
    device => device.deviceId && device.kind === 'videoinput'
  )
  if (video.srcObject && devices.length === 1) {
    return
  }
  const lastIndex =
    devices.findIndex(device => device.deviceId === ref.deviceId) || 0
  ref.deviceId = devices[index ?? (lastIndex + 1) % devices.length].deviceId
  await ref.request
  if (video.srcObject) {
    const tracks = video.srcObject?.getVideoTracks?.() || []
    tracks.forEach(track => track.stop())
  }
  ref.request = navigator.mediaDevices.getUserMedia(
    next
      ? {focusMode: 'continuous', deviceId: next}
      : {focusMode: 'continuous', facingMode: 'environment'}
  )
  const stream = await ref.request
  video.srcObject = stream
}