华为设备通过 Web RTC 引擎使用后置摄像头的问题

Question

我为银行和其他机构提供认证服务。身份验证服务通过应用程序或网页分两步提供，首先使用前置摄像头识别最终用户的面部，然后使用后置摄像头扫描护照、驾照或身份证照片。

问题出在网页验证上：start.ondato.com/start

使用web rtc引擎调用摄像头的代码片段：

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)
      }
    })
  }
}

有一个页面需要做Face recognition step，这个是用Front camera，完全没有问题，收集完Face picture后，会要求你去第二步passport，使用后置摄像头扫描驾驶执照或身份证。而此时问题就出现了，比如身份证读取可以开启长焦镜头，在P40Pro，P30Pro，或者P20Pro上的BW摄像头，Web页面使用Web RTC引擎在web进程中，Web前端请求摄像头，每次收到单独提交的 cameraID，结果无法 select 哪个后置摄像头运行。

由于设备的列表是随机的，我无法选择如何select和运行文档扫描所需的相机。

摄像头是如何分类的，如何通过浏览器进行检测和区分？

Answer 1

方案分析：华为后置主摄像头的camera id为0.

目前webrct的接口对后置多摄像头支持不足。没有统一的方案兼容所有手机

决议详情：可以参考https://webrtc.github.io/samples/src/content/devices/input-output/

华为设备通过 Web RTC 引擎使用后置摄像头的问题

Issue with Huawei devices using rear Cameras by Web RTC engine

android

android-camera

huawei-mobile-services

huawei-developers