H5提供类似于APP指导用户拍摄证件的一种可能性

首先，这个需求是应为用户上传各种标准证件时，过度随意，致使图片识别率过低，所以要增加拍照引导，用以指导用户拍照。

      其次，要说的是，该功能的难处，由于各种设备，系统对于 H5 的限制，各种兼容性的问题还是很多的，所以，我们提供一种可能性。

      再次，原理，获取用户设备摄像头，以 vidio 标签承载视频流，点击结束时视频流最后一帧，写入 canvas ,调用canvas.toDataURL(),取出图片流。

      最后，需要说明的是，遗留问题，不希望不明真相的小伙伴看完以后发现不能用，浪费时间，这就是我们说的这是一种可能性，而不是成功案例， IOS 系统的各浏览器支持率不高，不不不，是很低，安卓还行，我们这里主要关注的是微信浏览器。由于我们主要用的是getUserMedia 的方法这里有个网站对各种浏览器支持的方法有统计 https://caniuse.com/#search=getUserMedia .

话不多说，上代码
html
        <video id='video' ref={el => this.video = el} muted autoPlay></video>
js
openCamera(type){
  navigator.mediaDevices.enumerateDevices().then(this.gotDevices)
.then(this.getStream).catch(e => console.log('error1',e))
}
gotDevices (deviceInfos) { // 选取设备
    for (let deviceInfo of deviceInfos) {
        if (deviceInfo.kind === 'videoinput') {// 视频设备
            this.videoInputDevice.push(deviceInfo)
        }/* else {// 其他设备
        console.log('Found one other kind of source/device: ', deviceInfo.kind)
        }*/
    }
}
getStream () {
    if (window.streams) {
        window.streams.getTracks().forEach((track) => {
            track.stop()
        })
    }
    let constraints = { // 设置设备参数这个可以百度，参数有很多
    // 包含audio 可声明音频设备调用
    // 声明视频设备调用
    // video: true
        video: {
            deviceId: {// [1].deviceId 表示后置摄像头,默认开启的是前置摄像头
                exact: this.videoInputDevice[1].deviceId
                },
            width: 1200,
            height: 758
        }
    }
    navigator.mediaDevices.getUserMedia(constraints).then(this.gotStream).catch(e => console.log('error2',e))
    // 视频设备初始化
}
gotStream (stream) { // 获取摄像视频流，展示于 video 标签
    window.streams = stream
    this.video.srcObject = stream
}

stopVideo(){      // 这里需要触发，截取最后一帧
    let stream = this.getPhotoStream() // 这个就是你想要的最后一帧图像流
    if (window.streams) { // 关闭设备
        window.streams.getTracks().forEach((track) => {
            track.stop()
        })
    }
}

getPhotoStream(){ // 从video 中获取图片
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')
    let w = this.video.videoWidth
    let h = this.video.videoHeight
    canvas.width = w
    canvas.height = h
    ctx.drawImage(this.video, 0, 0, w, h)
    return canvas.toDataURL('image/jpeg', .75)
}