H5人脸识别项目，代码免费开源啦，可以不写但一定要看会，万一未来用上了呢

用处广泛的人脸识别成了当今大型项目实名认证的标配，利用webRTC技术在移动端人脸识别轻松搞定，废话不多说，直接上干货，可以不写但一定要看会，先收藏下万一未来用上了呢，下面我将介绍一下H5人脸识别前端技术实现步骤：

• 1.调取手机摄像头并成功打开摄像头

• 2.针对不同机型的手机做好UI兼容，调取摄像头时因为安卓手机和苹果手机会出现兼容问题，比如苹果手机成像出现镜像问题，而且部分配置较低的安卓手机无法直接根据后置摄像头id打开后置摄像头，需要动态切换才能打开

• 3.对不同机型的成像图做出特俗处理。因为考虑到UI设计场景，需要有框覆盖在摄像头画面上（调取本地原生摄像头是不支持这种UI设计的，所以采用图层的方式一层一层覆盖来实现这种UI方案，成像照根据获取到的stream在video层自动播放，点击按钮自动截图video，根据截取的图片动态生成照片，后面根据安卓手机和苹果手机机型的成像特点进行区分处理图片。需要获取录取人脸识别视屏的也可以通过这种方式，然后获取每一帧图片，最后合成录制的视频）。

  下面我门来一步一步实现代码：

• 1.调取本地设备的摄像头id列表，然后根据这些摄像头列表默认打开后置摄像头，打开摄像头后把获取到的stream给到dom的video中，并自动播放video，生成实时摄像头拍摄的画面。

getUserMediaId() {
   
    let self = this
    let sUserAgent = navigator.userAgent.toLowerCase();
    let isAndroid = sUserAgent.includes('android');
    let isRedmi = sUserAgent.includes('redmi');
    let isXiaomi = sUserAgent.includes('xiaomi');
    let isVivo = sUserAgent.includes('vivo');
    if (!isAndroid) {
   
      //苹果手机可以直接打开后置摄像头，无需自动切换
      const mediaConstraints = {
    video: {
    facingMode: {
    exact: "environment" } }, audio: false };//打开后置摄像头
      self.openDevice(mediaConstraints)
      return
    }
    let videoDeviceArray = []
    navigator.mediaDevices.getUserMedia({
    video: true }).then((stream) => {
   
      if (stream) {
   
        stream.getTracks().forEach(track => {
   
          track.stop();
        });
      }
    })
    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
   
      console.log("不支持 enumerateDevices() .");
    }
    navigator.mediaDevices.enumerateDevices().then(function (devices) {
   
      //寻找摄像头id
      devices.forEach(device => {
   
        if (device.kind === 'videoinput') {
   
          videoDeviceArray.push(device.deviceId