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识别与自定义照相机的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。