IOS Compatibility

[warisab]

Camer freeze in IOS browsers any solution please?

[ColonelParrot]

Can you attach the code you used?

[warisab]

Capture Image

const scanner = new jscanify();
const canvas = document.getElementById("canvas");
const result = document.getElementById("result");
const canvasCtx = canvas.getContext("2d");
const capturedImage = document.getElementById("capturedImage");
// const imageResult = result.getContext("2d");
let videoStream = null;
var resultCanvas = null;

async function startCamera() {
    try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter((device) => device.kind === "videoinput");

        if (videoDevices.length > 0) {
            const videoConstraints = {
                video: {
                    facingMode: "environment",
                    width: { ideal: 800 },
                    height: { ideal: 600 }
                },
                audio: false
            };

            videoStream = await navigator.mediaDevices.getUserMedia(videoConstraints);
            const video = document.createElement("video");
            video.srcObject = videoStream;

            video.onloadedmetadata = () => {
                video.play();

                // Set canvas size to match the screen dimensions
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

                const renderInterval = 100; // Set a frame rate (approximately 30 fps)

                let lastRenderTime = 0;
                const renderFrame = (currentTime) => {
                    if (currentTime - lastRenderTime >= renderInterval) {
                        canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);

                        const options = {
                            color:"blue",
                            thickness: 5
                        }
                        // Highlight the paper and draw it on the same canvas
                        resultCanvas = scanner.highlightPaper(canvas, options);
                        canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
                        canvasCtx.drawImage(resultCanvas, 0, 0, canvas.width, canvas.height);

                        lastRenderTime = currentTime;
                    }

                    requestAnimationFrame(renderFrame);
                };

                requestAnimationFrame(renderFrame);

                document.getElementById("captureButton").addEventListener("click", () => {
                    if (videoStream) {
                        const paperWidth = 500;
                        const paperHeight = 1000;
                        const image = new Image();
                        image.src = resultCanvas.toDataURL("image/png");

                        image.onload = function () {
                            const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight);
                            // imageResult.drawImage(resultCanvas, 0, 0);
                            // document.body.appendChild(resultCanvas);
                            capturedImage.style.outline = "none";
                            capturedImage.style.display = "block";
                            capturedImage.src = resultCanvas.toDataURL("image/png");

                            // Add a download button
                            const downloadButton = document.createElement("a");
                            downloadButton.href = resultCanvas.toDataURL("image/png");

                            downloadButton.download = "captured_image.png";
                            downloadButton.textContent = "Download Image";

                            // Append the download button to the DOM
                            document.body.appendChild(downloadButton);

                            // Trigger a click event on the download button to initiate the download
                            downloadButton.click();
                        };
                    }
                });
            };
        } else {
            alert("No video input devices found.");
        }
    } catch (error) {
        console.error("Error accessing camera:", error);
    }
}

startCamera();

[warisab]

I also tried to copy paste the extact code from documentation it still get freeze

[warisab]

Can you attach the code you used?

Hello sir are you available?

[ColonelParrot]

I'm taking a look right now

[warisab]

I'm taking a look right now

Thank you so much

[ColonelParrot]

Can you send your HTML too?

[warisab]

Can you send your HTML too?

Capture Image

[ColonelParrot]

Is that all the HTML? You are using canvases in your code.

[warisab]

Is that all the HTML? You are using canvases in your code.

yes, im just doing testing

[ColonelParrot]

I think I'm missing some HTML here. Can you include the full HTML? For instance, I'm missing a #captureButton.

[warisab]

ok sure

[warisab]

Capture Image

[ColonelParrot]

I tested out the code and it appears to be OK. What behavior are you observing on iOS? Is it reading from the camera properly? When does the freezing happen

[warisab]

I don't know whenever i opened the page camera stuck works well in android

[ColonelParrot]

OK so it freezes immediately when you open the page on iOS?

[warisab]

Yes

![Uploading Skype_Picture_2023_11_02T23_29_45_273Z.jpeg…]()

[warisab]

[ColonelParrot]

Check if this fixes your issue https://github.com/opencv/opencv/issues/15707

[warisab]

ok I'll try this and let you know tomorrow

[warisab]

can you tell me how to highlightpaper on video tag you are using it on canvas

[warisab]

Hello sir have you checked that?

[ColonelParrot]

You can directly write a video to a canvas with drawImage.

const video = document.querySelector('video')
const canvas = document.querySelector('canvas')
canvas.getContext('2d').drawImage(video, 0, 0)

[warisab]

sir can you tell me how to get the size of highliter box I want to download exact size of picture of highlited box

const resultCanvas = scanner.highlightPaper(overlayCanvas, options); // test = resultCanvas; overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); // Clear the overlay canvas overlayCtx.drawImage(resultCanvas, 0, 0); // Draw the highlighted paper on the overlay canvas

[warisab]

the captured picture is too blury

[justnixx]

Hi @warisab the jscanify.highlightPaper() method returns a canvas element containing the image.

[ColonelParrot]

If you are still having an issue, please let me know and I'll reopen this ticket.