Here is a simple tutorial on how to use the mobilenet model released by google with tensorflow-js.

This tutorial requires node v >10 and the parcel bundler.
To install node use nvm https://github.com/nvm-sh/nvm
and to install parcel just run npm -i g parcel-bundler

step 1

create a project dir

mkdir mobilenet &&  
cd mobilenet &&  
npm init &&  
npm i -s @tensorflow/tfjs @tensorflow-models/mobilenet  

step 2

create an index.html file with the following content

<html>  
<head>  
<title>Mobilenet test</title>  
</head>  
<body>  
    <pre id="console"></pre>
    <video autoplay playsinline muted id="webcam" width="224" height="224"></video>
    <script src="main.js"></script>
</body>

</html>  

step 3

create a 'main.js' file with the following content

import * as tf from "@tensorflow/tfjs"  
import * as mobilenet from "@tensorflow-models/mobilenet"

const webcamElement = document.getElementById('webcam');

// this function just load the webcam and set the source
// of the webcamElement as the camera stream
function setupWebcam() {  
    return new Promise((resolve, reject) => {
        const navigatorAny = navigator;
        navigator.getUserMedia = navigator.getUserMedia ||
            navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
            navigatorAny.msGetUserMedia;
        if (navigator.getUserMedia) {
            navigator.getUserMedia({ video: true },
                stream => {
                    webcamElement.srcObject = stream;
                    webcamElement.addEventListener('loadeddata', () => resolve(), false);
                },
                error => reject());
        } else {
            reject();
        }
    });
}

var net  
// Load the model.
mobilenet  
    .load()
    .then(mnet => {
        // model is loaded
        net = mnet
        console.log('Sucessfully loaded model');
        // setup the webcam
        return setupWebcam();
    }).then(() => {
        // run classification every second
        setInterval(() => {
            net.classify(webcamElement)
                .then(result => {
                    // write out the result JSON in the pre elem with id console
                    document.getElementById("console").innerText = JSON.stringify(result, "", "\t")
                })
        }, 1000)

    })

step 4

start serving the page using parcel

parcel index.html

step 5

navigate to http://localost:1234 to view the result ...
mobilenet will be activated on the output of your webcam so try to show different objects to see the result.

Bonus

here is a working version of the code, make sure to have your webcam enabled.

In the next article I will show how to use the tensorflow-js c

  



            
        
—Read This Next—

Easy tensorflow.js intro - basic operations


Tensorflow is the defacto standard for building advanced neural networks of any kind. Natively tensorflow is a python library and gives to
—You Might Enjoy—

Transfer learning with mobilenet and KNN


Transfer learning is a popular approach used in machine learning where a model trained on a task is re-purpose a model designed for a differ