Issue with Huawei devices using rear Cameras by Web RTC engine

Question

I provide authentication service for banks and other institution. Authentication service are providing by using App or WEB page by two steps, first End-Users face recognition using front camera and second is Passport, driver license or ID card scan picture using rear cameras.

And the problem is with Web page authentication: start.ondato.com/start

The code snippet of using web rtc engine to call the camera:

Please find snippet:

export default class {
  state = {
    requiredAudio: false,
    cameraConstraints: [
      { audio: false, video: { width: { exact: 1920 }, height: { exact: 1080 } } },
      { audio: false, video: { width: { exact: 1280 }, height: { exact: 720 } } },
      { audio: false, video: { width: { exact: 640 }, height: { exact: 360 } } },
      { audio: false, video: true }
    ],
    facingMode: { exact: 'environment' }
  }

  async startCamera() {
    let error
    for (const cameraSettings of this.state.cameraConstraints) {
      console.log(cameraSettings)
      cameraSettings.video.facingMode = this.state.facingMode
      cameraSettings.audio = this.state.requiredAudio

      const result = await this.getUserMediaInit(cameraSettings)
      if (result) {
        if (result.tracks) return { tracks: result.tracks }
        else if (result.error) error = result.error
      }
    }

    return { error }
  }

  async getUserMediaInit(cameraSettings) {
    try {
      const stream = await navigator.mediaDevices.getUserMedia(cameraSettings)
      if (!stream) return

      const tracks = await this.getUserMediaSuccess(stream)
      if (tracks) return { tracks }
    } catch (error) {
      if (error === errorTypes.cameraStreamInactive ||
        error && (error.name === 'AbortError' || error.name === 'NotReadableError')) {
        return { error: { type: errorTypes.cameraStreamInactive } }
      }
    }
  }

  getUserMediaSuccess(stream) {
    return new Promise((resolve, reject) => {
      const video = document.getElementById(this.state.videoId)
      const videoTrack = stream.getVideoTracks()[0]
      const audioTrack = stream.getAudioTracks()[0]

      video.srcObject = stream
      video.onloadeddata = () => {
        if (!stream.active) {
          videoTrack.stop()
          if (audioTrack) audioTrack.stop()
          return reject(errorTypes.cameraStreamInactive)
        }

        const aspectRatio = video.videoHeight / video.videoWidth
        if (aspectRatio < 1 && this.state.isAndroidPortrait) {
          videoTrack.stop()
          if (audioTrack) audioTrack.stop()
          return reject()
        }

        this.cameraLoaded(video)
        this.state.tracks = {
          videoTrack,
          audioTrack
        }
        resolve(this.state.tracks)
      }
    })
  }
}

There is a page where you have to do Face recognition step and for this one is Front camera are used, there is no problem at all, after Face picture collected, you will be asked to go second step for Passport, Driver licence or ID card scan using back camera. And at this point problems appear, like for ID card reading can be enabled Tele-Photo lens, on P40Pro, P30Pro, or BW camera on P20Pro that Web Page use the Web RTC engine in that web processes, Web front-end request camera, each time receives a separately submitted cameraID and as a result fails to select which rear camera to run.

Since that list from the device comes random，I have no options on how to select and run the required camera for document scanning.

How cameras are classified and how they can be detected and differentiated through a browser?

Answer 1

Solution Analysis: The camera id of Huawei's rear main camera is 0.

At present, webrct's interface has insufficient support for multiple rear cameras. There is no unified solution compatible with all mobile phones.

Resolution Detail: You can refer to https://webrtc.github.io/samples/src/content/devices/input-output/