记录--如何在H5中实现OCR拍照识别身份证功能
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助业务背景
由于当前项目中需要实现身份证拍照识别的功能，如果是小程序可以使用微信提供的 ocr-navigator 插件实现,但是在企业微信的H5中没有提供该插件，所以需要手动实现该功能。
需求分析及资料查阅
众所周知，前端H5中浏览器打开相机打开的是原生相机，无法在相机的界面上覆盖自定义的元素，比如实现类似下面的UI界面,无法使用相机拍照功能来直接实现，所以只能另辟蹊径。
[*]通过查阅资料发现，可以通过MediaDevices.getUserMedia()来实现媒体流的输出，这时可以在页面中添加video元素，然后把stream流的值赋值给video的srcObject属性，就可以把video输出到页面上，这样就可以在video元素上面添加自定义元素，实现UI效果。
[*]还需要解决的问题是：如何点击下面的拍照按钮时把获取画面转换成图片，并调用Api实现图片识别功能。 此时需要使用canvas来实现。通过canvas将video视频的当前帧绘制到画布上，然后将其转换成图片，然后调用接口来实现身份证识别。
snapPhoto() {
const canvas = document.querySelector("#mycanvas");
canvas.width = this.video.videoWidth;
canvas.height = this.video.videoHeight;
canvas.getContext("2d").drawImage(this.video, 0, 0);
const imageBase64 = canvas.toDataURL("image/png", 0.6);
return imageBase64
}需求实现
话不多说，直接上代码(注意：该页面代码 vue-cli3 + vue2 + vant + 企业微信环境)
<template>
<video ref="videoRef"autoplay playsinline></video>
请将证件放于框内拍摄
<img src="https://www.cnblogs.com/@/assets/parttime-operator/album.png" alt=""/>
<canvas id="mycanvas" ></canvas>
</template>功能优化及兼容性bug修复
兼容性问题机注意点
[*]本地调试打开相机需要使用https协议下才能正常调用获取媒体流的api
[*]ios环境下初次打开相机会展示直播界面，安卓系统正常
[*]媒体流帧率问题，视频分辨率问题，顶部空白问题。
[*]ios有滚动条问题，安卓系统正常
[*]页面退出时关闭媒体流输入，关闭相机，进入时打开媒体流输入。
解决方案
[*]本地开发时开启htpps
devServer: {
https: true,
xxx...
}
[*]页面中的元素使用fixed定位，并设置z-index高一些
[*]设置视频流帧率和视频流的分辨率大小，下面的width和height可根据实际情况来调整大小
const constraints = {
audio: false,
video: {
width: 1150,
height: 768,
frameRate: { ideal: 60 }, // 视频流帧率
facingMode: "environment" // 后置摄像头
}
};
[*]ios有滚动条问题，尝试了一些css处理方案，无效，欢迎大家评论区指点迷津。
[*]调用ocr图片识别可以调用后端接口或者第三方的API来实现，例如腾讯云OCR 最后实现效果
本文转载于:
https://juejin.cn/post/7293778347607097394
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
来源:https://www.cnblogs.com/smileZAZ/p/17808224.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]