米仓里的子神君 发表于 2023-11-4 00:02:57

记录--如何在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]
查看完整版本: 记录--如何在H5中实现OCR拍照识别身份证功能