记录--如何在H5中实现OCR拍照识别身份证功能

米仓里的子神君

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

业务背景

由于当前项目中需要实现身份证拍照识别的功能，如果是小程序可以使用微信提供的 ocr-navigator 插件实现,但是在企业微信的H5中没有提供该插件，所以需要手动实现该功能。
需求分析及资料查阅

众所周知，前端H5中浏览器打开相机打开的是原生相机，无法在相机的界面上覆盖自定义的元素，比如实现类似下面的UI界面,无法使用相机拍照功能来直接实现，所以只能另辟蹊径。
 

• 通过查阅资料发现，可以通过MediaDevices.getUserMedia()来实现媒体流的输出，这时可以在页面中添加video元素，然后把stream流的值赋值给video的srcObject属性，就可以把video输出到页面上，这样就可以在video元素上面添加自定义元素，实现UI效果。
  
• 还需要解决的问题是：如何点击下面的拍照按钮时把获取画面转换成图片，并调用Api实现图片识别功能。 此时需要使用canvas来实现。通过canvas将video视频的当前帧绘制到画布上，然后将其转换成图片，然后调用接口来实现身份证识别。
  

1. snapPhoto() {
2.   const canvas = document.querySelector("#mycanvas");
3.   canvas.width = this.video.videoWidth;
4.   canvas.height = this.video.videoHeight;
5.   canvas.getContext("2d").drawImage(this.video, 0, 0);
6.   const imageBase64 = canvas.toDataURL("image/png", 0.6);
7.   return imageBase64
8. }

复制代码

需求实现

话不多说，直接上代码(注意：该页面代码 vue-cli3 + vue2 + vant + 企业微信环境)

1. <template>
2.   
3.    
4.       
5.       <video ref="videoRef"  autoplay playsinline></video>
6.    
7.     请将证件放于框内拍摄
8.    
9.       
10.         <img src="https://www.cnblogs.com/@/assets/parttime-operator/album.png" alt=""  />
11.       
12.       
13.    
15.     <canvas id="mycanvas" ></canvas>
16.   
17. </template>

复制代码

功能优化及兼容性bug修复

兼容性问题机注意点

• 本地调试打开相机需要使用https协议下才能正常调用获取媒体流的api
  
• ios环境下初次打开相机会展示直播界面，安卓系统正常
  
• 媒体流帧率问题，视频分辨率问题，顶部空白问题。
  
• ios有滚动条问题，安卓系统正常
  
• 页面退出时关闭媒体流输入，关闭相机，进入时打开媒体流输入。
  

解决方案

• 本地开发时开启htpps
  

1.   devServer: {
2.     https: true,
3.     xxx...
4.   }

复制代码

• 页面中的元素使用fixed定位，并设置z-index高一些
  
• 设置视频流帧率和视频流的分辨率大小，下面的width和height可根据实际情况来调整大小
  

1. const constraints = {
2.     audio: false,
3.     video: {
4.       width: 1150,
5.       height: 768,
6.       frameRate: { ideal: 60 }, // 视频流帧率
7.       facingMode: "environment" // 后置摄像头
8.     }
9. };

复制代码

• ios有滚动条问题，尝试了一些css处理方案，无效，欢迎大家评论区指点迷津。
  
• 调用ocr图片识别可以调用后端接口或者第三方的API来实现，例如腾讯云OCR 最后实现效果
  

本文转载于:

https://juejin.cn/post/7293778347607097394

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

来源:https://www.cnblogs.com/smileZAZ/p/17808224.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！