Accessing DOM element from web worker

Question

I've implemented face detection using face-api.js. Everything is working properly but the problem I faced is that the face detection process for weak devices can be trouble and cause lags because of the main thread.
The approach that came to my mind was to implement the face detection process inside a Web Worker.
I'm passing the video element to face-api.js for live detection. So, I need to access the DOM to select the video element and pass it to the API.

faceApi.worker.js

import * as faceApi from 'face-api.js' // Used worker-loader

const video = document.getElementById('live-video') // 2nd approach

const processVideo = video => {
    faceApi.detectSingleFace(video, new faceApi.TinyFaceDetectorOptions())
        .then(detection => postMessage(!!detection))
        .then(() => requestionAnimationFrame(() => processVideo()))
}

onmessage = e => {
    faceApi.nets.tinyFaceDetector.loadfromUri('/auth/models')
        .then(() => e.data.addEventListener('play', () => processVideo(e.data)))
}

1st approach

const video = document.getElementById('live-video')
const worker = new Worker('/faceApi.worker.js')
worker.postMessage(video)

Error: DOMException: Failed to execute 'postMessage' on 'Worker': HTMLVideoElement object could not be cloned.

2nd approach
Selecting the video element inside the worker instead of passing it to the worker.

const video = document.getElementById('live-video')

Error: faceApi.worker.js:2 Uncaught ReferenceError: document is not defined at onmessage

Q: How do I access the DOM in order to select the video element?
There might be other ways to achieve it, any helps would be appreciated.

Does this answer your question? [Access dom by web worker](https://stackoverflow.com/questions/37704641/access-dom-by-web-worker) — DBS, Jul 04 '23 at 08:24
The library you use doesn't support Workers environments. You should ask them to implement it since they can now use OffscreenCanvas from there. — Kaiido, Jul 04 '23 at 09:20
Note that there is a [FaceDetector](https://wicg.github.io/shape-detection-api/#face-detection-api) API being developed by Chrome, so it's not sure which of both will be ready first. — Kaiido, Jul 04 '23 at 09:25

score 1 · Answer 1 · answered Jul 04 '23 at 08:29

Error: faceApi.worker.js:2 Uncaught ReferenceError: document is not defined at onmessage

You can't access the DOM from the Worker. The points of workers is that they are kept separate so you can do computationally expensive things without blocking the event loop that has access to the DOM.

Error: DOMException: Failed to execute 'postMessage' on 'Worker': HTMLVideoElement object could not be cloned.

When you use postMessage any data you send needs to be serialised before it can be sent to the Worker.

The browser has no standard way to serialise a <video>. You need to extract the data you care about from the <video> in your main script and send only that data to the Worker with postMessage.

(See this related question).

Let's say it's impossible to access main thread from another thread. — Amini, Jul 06 '23 at 05:55

Accessing DOM element from web worker

1 Answers1