Simple Real-Time Object Detection in the Web Browser using ml5.js

Posted on 2021-06-17 11:18:38

Overview

We are going to create a simple web application that can detect objects (Ex. Person, Cat, Dog, Cellphone, etc) in real time through our Web Cam. 

We will use ml5.js. It is very beginner friendly, high level  machine learning library for Web. They make creating or developing AI in the browser as easy as possible.

2101

Prerequisite:

We just need a simple text editor for our html page and javascript. We don't need a web server, we can run it directly on our browser. 

Create our HTML page

Create a file called index.html and add this HTML code.


<html lang="en">
    <head>
        <meta charset="UTF-8">

        <title>ML5.JS Tutorial - Simple Real time Object Detection using ml5.js</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
        <style>
        #canvas {
            min-height: 360px;
            min-width: 480px;
            border: 1px solid #ccc;
        }
        </style>
    </head>
    <body>
        <h1 class="text-center mt-2">Simple Real time Object Detection using ml5.js</h1>
    
        <div class="row">
            <div class="col-md-7 text-center">
                <video id="video"></video>
                <canvas id="canvas"></canvas>
                <div class="mt-4">
                    <button id='btn-start' class='btn btn-primary'>Start</button>
                    <button class="btn btn-primary" id='btn-stop'>Stop</button>
                </div>      
            </div>
            <div class="col-md-5">
                <div id='info'></div>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>

Things to note here: 

We added the ml5.js library on our head section


<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>

We created a video and canvass element.


<video id="video"></video>
<canvas id="canvas"></canvas>

We also added index.js script that we will create later.


<script src="index.js"></script>

Create our index.js Script

Create a file called index.js in the same directory as our index.html file.

Place this code in our index.js file


let objectDetector;
let status;
let objects = [];
let video;
let canvas, ctx;
let width = 480;
let height = 360;
let isDetecting = true;
let buttonStart = document.getElementById('btn-start');
let buttonStop = document.getElementById('btn-stop');
let info = document.getElementById('info');

async function make() {
    video = await getVideo();

    objectDetector = await ml5.objectDetector('cocossd', startDetecting)

    canvas = createCanvas(width, height);
    ctx = canvas.getContext('2d');
}

window.addEventListener('DOMContentLoaded', function() {
    make();
});

buttonStart.addEventListener('click', function() {
    isDetecting = true;
    detect();
});

buttonStop.addEventListener('click', function() {
    isDetecting = false;
});

function startDetecting(){
    console.log('model loaded')
}

function detect() {
    if (!isDetecting) {
        return;
    }
    objectDetector.detect(video, function(err, results) {
        if(err){
            console.log(err);
            return
        }
        objects = results;

        if(objects){
            draw();
        }

        detect();
    });
}

function draw(){
    ctx.fillStyle = "#000000"
    ctx.fillRect(0,0, width, height);


    ctx.drawImage(video, 0, 0);
    var infoHtml = "";
    if (isDetecting) {
        for (let i = 0; i < objects.length; i++) {
            ctx.font = "32px Arial";
            ctx.fillStyle = "red";
            ctx.fillText(objects[i].label, objects[i].x + 4, objects[i].y + 16); 
            infoHtml += "<p>Object: " + (objects[i].label).toUpperCase() + " Confidence: " + (objects[i].confidence * 100).toFixed(2) + "%</p>"
            ctx.beginPath();
            ctx.rect(objects[i].x, objects[i].y, objects[i].width, objects[i].height);
            ctx.strokeStyle = "red";
            ctx.stroke();
            ctx.closePath();
        }  
    }
    info.innerHTML = infoHtml;
}

async function getVideo(){
    const videoElement = document.getElementById('video');
    videoElement.setAttribute("style", "display: none;"); 
    videoElement.width = width;
    videoElement.height = height;

    const capture = await navigator.mediaDevices.getUserMedia({ video: true })
    videoElement.srcObject = capture;
    videoElement.play();

    return videoElement
}

function createCanvas(w, h){
    const canvas = document.getElementById("canvas"); 
    canvas.width  = w;
    canvas.height = h;
    return canvas;
}

First we create a make function that's responsible in creating our video and creating our ml5 object detector method using cocossd model.


async function make() {
    video = await getVideo();

    objectDetector = await ml5.objectDetector('cocossd', startDetecting)

    canvas = createCanvas(width, height);
    ctx = canvas.getContext('2d');
}

Then we run it when them DOM content was loaded.


window.addEventListener('DOMContentLoaded', function() {
    make();
});

We also have start and stop button so we can start and stop detecting objects on our web cam.


buttonStart.addEventListener('click', function() {
    isDetecting = true;
    detect();
});

buttonStop.addEventListener('click', function() {
    isDetecting = false;
});

 

That's It!

Open your index.html file on the browser. Allow it to use your web cam. Click the start button and you can now detect objects in real time on your browser. Visit ml5.js website for in depth tutorials and more.

Related Articles