H5 调用人脸识别

其实这个东西就是调用户的摄像头，之后把录制的每一帧都加到 canvas 里面，再利用<video> 标签回显出来，以下是简单实例

保证你的 HTML 有以下结构

    <!-- 回显的视频 -->
    <div class="showVideo"> <video autoplay></video></div>

    <!-- 存储视频的 canvas -->
    <canvas class="canvas"></canvas>

    <!-- 点击开始录制的按钮 -->
    <div class="VFace">VFace</div>

JavaScript 首先，找下元素

// 回显的视频元素
let showVideo = document.querySelector('.showVideo video')

// 存储视频的 canvas 元素
let canvas = document.querySelector('canvas')

// 按钮
let VFace = document.querySelector('.VFace')

第二步 获取用户的摄像头 （ 需要用户手动确认权限 ）

注意一下这个分辨率 如果你想控制最后录制完视频的大小 这个很关键

也就是 ： video:{width:200,height:200} 这句代码

navigator.mediaDevices.getUserMedia({ video:{width:200,height:200} })
.then(stream => {
    showVideo.srcObject = stream

    // 获取分辨率使用情况
    let videoTrack = stream.getVideoTracks()[0]
    let settings = videoTrack.getSettings()
    
    console.log( `Width:${settings.width} , Height:${settings.height}` )
})
.catch(error => console.error('获取摄像头失败 : ' + error))

之后 当按钮点击时 开始录制 我这里设置了 3秒后自动停止录制 ， 并监听录制结束之后的一系列操作，

VFace.addEventListener('click',()=>{
    // 录制源对象
    let mediaRecorder = new MediaRecorder(showVideo.srcObject)

    // 录制片段
    let chunks = []

    // 开始录制 
    mediaRecorder.start()

    // 设置定时器 停止录制
    setTimeout(() => {
        mediaRecorder.stop()
    }, 3100)

    // 向片段数组增加录制的数据
    mediaRecorder.ondataavailable = (e) => chunks.push(e.data)

    // 监听录制停止
    mediaRecorder.onstop = () => {

        // 创建 blob 对象
        let blob = new Blob(chunks, { type: 'video/webm' })

        // 录制完的路径
        let videoUrl = URL.createObjectURL(blob)

        // 录制完的大小
        let videoSize = (blob.size / 1000000).toFixed(2) + ' MB'
    }
})