Tesseract.js get image from video element

I'm using a video element to capture images from the device camera. I want to pass this image directly to Tesseract. It is document that video elements are also a valid source but executing the code the image is not found (altough visible in the video element

HTML

    ...
    <video id="videoFrame" onclick="takePicture()" autoplay></video>
    ...

JS

    const exampleImage=document.getElementById("videoFrame");
    const worker = Tesseract.createWorker({
      logger: m => console.log(m)
    });
    Tesseract.setLogging(true);
    work();

    async function work() {
      await worker.load();
      await worker.loadLanguage('deu');
      await worker.initialize('deu');

      let result = await worker.detect(exampleImage);
    ....

Exception:

    Error in pixReadMem: Unknown format: no pix returned
    put_char @ tesseract-core.wasm.js:8
    write @ tesseract-core.wasm.js:8
    write @ tesseract-core.wasm.js:8
    doWritev @ tesseract-core.wasm.js:8
    _fd_write @ tesseract-core.wasm.js:8
    ___wasi_fd_write @ tesseract-core.wasm.js:8
    (anonymous) @ 0086f856:1
    (anonymous) @ 0086f856:1
    (anonymous) @ 0086f856:1
    (anonymous) @ 0086f856:1
    (anonymous) @ 0086f856:1
    (anonymous) @ 0086f856:1

What is a proper way to pass the Image?