Uniapp或H5之ORC识别与自定义照相机

     <div id="max-bg" class="backgroud">将机器码摆正放入窗口<!-- 展示相机画面 --><video id="webcam" loop preload> </video></div><div id="" class="backgroud"><!-- 画出相机画面 --><canvas id="canvas" width="300" height="100"></canvas></div><!-- 输出识别的文字 --><div id="ztext"></div>

         let constraints = {//摄像头参数// audio: true,video: {width: 100,height: 300,// facingMode: 'user', //前置摄像头facingMode: {exact: "environment"}, //后置摄像头}};// 调用摄像头navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {// 在video载入摄像头画面let video = document.querySelector('video');video.srcObject = mediaStream;video.onloadedmetadata = function(e) {console.log(e);video.play();//画布canvasRender(video)};}).catch(function(err) {console.log(err.name + ": " + err.message);}); // always check for errors at the end.//画布function canvasRender(video) {let c = document.getElementById("canvas");let ctx = c.getContext("2d");//没过3秒把相机里的画面画在画布上setInterval(() => {ctx.drawImage(video, 0, 0, 300, 100);//得到画布上的画base64let img = convertCanvasToImage(c)// console.log(img.src);Tesseract.recognize(img,'eng', {logger: m => console.log(m),//进度workerPath: './js/worker.min.js',langPath: './js/',corePath: './js/tesseract-core.wasm.js',}).then(({data: {text}}) => {console.log(text);document.getElementById("ztext").innerHTML = text}).catch(e => {console.log(e);})}, 3000)// window.requestAnimationFrame(canvasRender(video))}function convertCanvasToImage(canvas) {let image = new Image();image.src = canvas.toDataURL("image/png");return image;}

ocr识别js库tesseract.js

Uniapp或H5之ORC识别与自定义照相机相关推荐

uniapp开发h5调摄像头识别二维码信息
因为html5+是要在app环境下运行,所以先创建一个5+项目我是觉得一个页面想要扫码识别后拿到数据不是很方便就创建了两个vue来进行测试,也可以在一个页面进行 index.vue <temp ...
uniapp 转H5 实现微信浏览器自定义分享样式
uniapp 转H5后实现微信浏览器自定义分享样式 uniapp 项目转 h5 1.在manifest.json文件中,找到H5配置一下路径,需要注意这个名字需要和布到线上的文件夹名字一致 2.就是 ...
【Android】虹软、安卓、Uniapp、SpringBoot 实现人脸识别
[Android]虹软.安卓.Uniapp.SpringBoot 实现人脸识别简要概述后台使用的是springboot,本地开发集成的是window是的版本,发布到线上需要改成Linux的版本如 ...
uniapp 在h5 模式下扫码
uniapp 在h5下是不支持扫码功能只能自己找api去搞 qrcode.js 解析二维码(源码)https://blog.csdn.net/z_jing0927/article/details/1 ...
UNIAPP中H5微信登录
UNIAPP中H5微信登录 UNIapp中自带封装好的接口,但是在打包成H5中,微信登录对于新手来说网上教程比较少,大部分是分享的教程 H5微信登录之前你需要先在微信公众平台配置js接口安全域名,切记 ...
uniapp 开发H5打包微信小程序样式失效的解决之道
使用uniapp开发H5,样式已经按照UI设计稿全部实现.但是在打包微信小程序调试的时候,遇到很多样式失效的问题.问了度娘很久,并没有完全解决样式失效的问题.于是自己按照从度娘上查到的方法去进行组合尝 ...
uni-app text、文本、selectable、自定义长按选择菜单、修改系统菜单键(双端)
uni-app text.文本.selectable.自定义长按选择菜单.修改系统菜单键(双端):https://ext.dcloud.net.cn/plugin?id=10586 <templ ...
uniapp 打包H5，打包小程序，打包app分享到微信聊天、朋友圈
1.uniapp打包H5操作手法:Hbuilder->发行->网站-PC-WEB端或手机端H5访问,需要填写个访问域名,即发布后访问的域名路径 2.uniapp打包H5配置注意事项:uni ...
uni-app打包H5出现“网络不给力，点击屏幕重试” 和 H5端接口请求{“errMsg“:“request:fail“}解决方法
uni-app打包H5出现"网络不给力,点击屏幕重试" 和 H5端接口请求{"errMsg":"request:fail"}解决方法 1.m ...
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法参考文章: (1)Thinkphp5.1允许uni-app的H5跨域请求接口解决方法 (2)https://www.cnblogs. ...

Uniapp或H5之ORC识别与自定义照相机

Uniapp或H5之ORC识别与自定义照相机相关推荐

最新文章

热门文章