tfjs-converter | Convert TensorFlow SavedModel and Keras models | Machine Learning library

Seems that you can do two things.

Install @tensorflow/tfjs-node and use tf: require("@tensorflow/tfjs-node"), Or you can use this.tf.getBackend(); (even with this tf: require("@tensorflow/tfjs"))

The example in the comment didn't work for me, but I followed the instructions and settled upon something like this

The 's width and height attributes set "the dimensions of the visual content of the element" ^ref, this means, only how it will be presented.
Your face detector is working on the video data, at the video's intrinsic dimensions, that is, the ones defined by the media itself and not by the element, which is either stretching or shrinking the visual content when displaying it.

On the other hand, the canvas' width and height attributes do set its intrinsic dimensions.

So both media's intrinsic dimensions are actually different, and the coords that are found in the video do not match the ones of the canvas.

To fix that, you can simply set your canvas' width and height to the video.videoWidth and video.videoHeight respectively for it to match the intrinsic dimensions of your video content, and then through CSS, resize it so it matches the display dimensions of the element.

However note that MediaStreams can change their dimensions while playing, so you may want to listen for the resize event of your .

Link to updated codepen since StackSnippets don't allow gUM.

And the most notable changes:

I am updating my previous answer. You don't want to use set interval like I put in my former solution. When I used it for more than a few minutes it filled up my gpu memory and crashed webgl. I was able to comb through the developers demo.js file, and found a solution. In your js file replace your main() function with the below code:

So I understand your confusion but you have half part ready. So your keras model has the following files and folders if I understand correctly:

The tensor is not well generated. fromPixels is mostly used to get a tensor from an htmlImageElement. Printing a summary of the tensor and compare it with the one generated for python can suffice to tell that.

Is there an issue with jpeg-js ?

First we need to know how the imageData works. An image Data pixel is a 4 numerical values R, G, B, A. When using the data decoded by jpeg_js.decode as argument of tf.browser.fromPixel with 3 channels (formatAsRGBA:false), it is considered as an image data. Let's consider the data [a, b, c, d, e, f] = jpeg_js.decode("path", {formatAsRGBA:false}) and the tensor t created from it t = tf.browser.fromPixels({data, width: 2, height: 1}). How it is interpreted ? tf.browser.fromPixels, will create an ImageDate of height: 1 and of width: 2. Consequently, the imageData will be of size 1 * 2 * 4 (instead of 1 * 2 * 3) and has all its values set to 0. Then it will copy the data decoded to the imageData. So imageData = [a, b, c, d, e, f, 0, 0]. As a result, the slice (t.slice([0, 0, 0], [-1, -1, 3]) will be [a, b, c, e, f, 0]. Neither is jpeg_js the issue, nor tf.browser.fromPixels. This is how imageData works

What can be done ?

• keep the alpha channel of the decoded image formatAsRGBA:true
• Instead of using tf.browser.fromPixels, use directly tf.tensor to create the tensor

In the python code there is the following after the predition :