¡Estoy aprendiendo tesseract.js! Lo que estoy haciendo es transmitir video desde un dispositivo y mostrarlo. Cuando hago clic en un botón, ejecuta una función que dibuja una imagen del video y la muestra. También guarda la imagen como un blob en la variable img. Estoy tratando de ejecutar esto a través de tesseract.js pero sin suerte. ¿Hay una mejor manera de hacer esto?
Donde dice https://tesseract.projectnaptha.com/img/eng_bw.png , he intentado reemplazarlo con la variable img pero no funciona. ¿Qué debo hacer? Principiante completo aquí, lo siento si me equivoco en algún aspecto del formato.
let canvas = document.querySelector("#canvas"); let context = canvas.getContext("2d"); let video = document.querySelector("#video"); let img; let tts; if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => { video.srcObject = stream; video.play(); }); } function onSave() { context.drawImage(video, 0, 0, 640, 480); canvas.toBlob((blob) => { //const timestamp = Date.now().toString(); const a = document.createElement("a"); document.body.append(a); //a.href = URL.createObjectURL(blob); a.target = "_blank"; img = URL.createObjectURL(blob); //a.click(); console.log(img); a.remove(); Tesseract.recognize( 'https://tesseract.projectnaptha.com/img/eng_bw.png', 'eng', { logger: m => console.log(m) } ).then(({ data: { text } }) => { console.log(text); }) }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <script src="https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js"></script> </head> <body> <video id="video" width="640" height="480" autoplay></video> <button id="snap" onclick="onSave()">Take Picture</button> <canvas id="canvas" width="640" height="480"></canvas> <script src="app.js"></script> </body> </html>