<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识别与自定义照相机的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。