puffinsoft / jscanify

Open-source Javascript mobile document scanner.
https://puffinsoft.github.io/jscanify/
MIT License
949 stars 52 forks source link

Does not work inside vue.js or nuxt project #9

Closed matijaparavac closed 1 year ago

matijaparavac commented 1 year ago

Every time I try, I get this message when loading and camera does not turn on:

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at node_modules/jsdom/lib/jsdom/virtual-console.js 

node version: v18.16.0

code for Scanner.vue component:

<script setup lang="ts">
import {onMounted, ref} from "vue";
import useScript from '../composables/useScript';
//const jscanify = require('jscanify');
//@ts-ignore
import jscanify from 'jscanify'
const openCVURL = 'https://docs.opencv.org/4.7.0/opencv.js';
let scanner:any = new jscanify();

const canvas: HTMLCanvasElement | null = <HTMLCanvasElement> document.getElementById("canvas");
const result: HTMLCanvasElement | null = <HTMLCanvasElement> document.getElementById("result");
const video: HTMLVideoElement | null = <HTMLVideoElement> document.getElementById("video");

onMounted(async () => {
  await useScript(openCVURL);
  const canvasCtx = canvas.getContext("2d");
  const resultCtx = result.getContext("2d");
  scanner = new jscanify();
  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>

<template>
  <video id="video"></video>
  <canvas id="canvas"></canvas>
  <!-- original video -->
  <canvas id="result"></canvas>
  <!-- highlighted video -->
<h2>Document scanner component TODO</h2>
</template>
ColonelParrot commented 1 year ago

Hello, Thanks for bringing this to my attention! jscanify unfortunately does not support Vue.js right now. Right now I'm swamped so I can't get to it, though I'd be happy to accept a PR.

MrTartuf0 commented 1 year ago

I've the same issue with plain javascript and vite.js, but the CDN works fine.

matijaparavac commented 1 year ago

Hello, Thanks for bringing this to my attention! jscanify unfortunately does not support Vue.js right now. Right now I'm swamped so I can't get to it, though I'd be happy to accept a PR.

@ColonelParrot As @MrTartuf0 said it works when you import over CDN...so I do not know what you mean Vue.js is not supported. If this is javascript it should work in every Js framework, right?

ColonelParrot commented 1 year ago

Unfortunately I won't be able to implement this soon. If anyone wants to open a PR though, I'd be happy to accept it.