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

posted @   南巷清风--大R  阅读(201)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示