How to use blobs with tesseract.js/

2 years ago

#56258

Eashaan Bhattacharyya

I am learning tesseract.js! What I am doing is streaming video from a device and displaying it. When I click a button, it runs a function that draws an image from the video and displays that. It also saves the image as a blob to the img variable. I am trying to run this through tesseract.js but with no luck. Is there a better way of doing this?

Where it says https://tesseract.projectnaptha.com/img/eng_bw.png, I have tried to replace it with the img variable but that does not work. What do I do? Complete beginner here so sorry If I get any formatting stuff wrong

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>

javascript

html

tesseract

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs