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)
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」