Do you have the document detection in real time while using the camera to get the photo through MediaCapture API ? about jscanify HOT 5 CLOSED

adantart commented on July 17, 2024

Do you have the document detection in real time while using the camera to get the photo through MediaCapture API ?

from jscanify.

Comments (5)

ColonelParrot commented on July 17, 2024 1

Have you tried the example on the README? It's here

from jscanify.

adantart commented on July 17, 2024 1

Yes, sorry, I should have said it ... I tried it but it seems is broken since I see my webcam, and two divs (canvas and result) with just a zoomed in part of the camera (the top left part).
Sorry for the drawing, but something like this:

In mobile it's not working at all.
That's because I asked, maybe if you have a "whole" working HTML to check.

I have this:

<html>
<body>
<script src="src/opencv.js" async></script>
<script src="src/jscanify.js"></script>

<video id="video"></video>
<canvas id="canvas"></canvas>
<canvas id="result"></canvas>

<script>
const scanner = new jscanify();
const canvasCtx = canvas.getContext("2d");
const resultCtx = result.getContext("2d");
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
  video.srcObject = stream;
  video.onloadedmetadata = () => {
    video.play();

    setInterval(() => {
      canvasCtx.drawImage(video, 0, 0);
      const resultCanvas = scanner.highlightPaper(canvas);
      resultCtx.drawImage(resultCanvas, 0, 0);
    }, 10);
  };
});
</script>
</body>
</html>

from jscanify.

adantart commented on July 17, 2024 1

Yes, I did it that way forcing the width/height (setting them by javascript). No problem in that.
Thank you !

from jscanify.

adantart commented on July 17, 2024

It's because the canvas width and height. By default is always 300 x 150

from jscanify.

ColonelParrot commented on July 17, 2024

Interesting. I haven't taken a look at the specifics yet, but have you tried setting the dimensions of result to that of resultCanvas?

from jscanify.

Recommend Projects

Do you have the document detection in real time while using the camera to get the photo through MediaCapture API ? about jscanify HOT 5 CLOSED

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent