Use ml5.js to detect human

Real-Time Human Detection with PoseNet using ml5.js

This code enables real-time human detection using the PoseNet model through the ml5.js library, which is built on p5.js for easy use in a browser.

Step 1: Create the HTML File

First, create an HTML file named index.html and include the ml5.js library:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Camera Feed with Human Detection (ml5.js)</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        #video {
            width: 100%;
            height: auto;
            display: block;
        }
        #status {
            font-size: 24px;
            color: white;
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <video id="video" autoplay playsinline></video>
    <div id="status">Initializing...</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ml5/0.10.0/ml5.min.js"></script>
    <script src="app.js"></script>
</body> 
</html>

Step 2: Create the JavaScript File

Next, create a JavaScript file named app.js and add the following code:

const video = document.getElementById('video');
const statusElement = document.getElementById('status');

// Setting up the camera and PoseNet model
function setup() {
    // Create a video capture from the webcam
    const capture = createCapture(VIDEO);
    capture.size(640, 480);
    capture.hide(); // Hide the original capture

    // Load PoseNet model using ml5.js
    const poseNet = ml5.poseNet(capture, modelLoaded);

    // Set up the pose detection callback
    poseNet.on('pose', gotPoses);

    // Link the video element to the capture
    video.srcObject = capture.elt.srcObject;
}

// Callback when the model is loaded
function modelLoaded() {
    statusElement.textContent = 'PoseNet model loaded. Detecting...';
}

// Callback when poses are detected
function gotPoses(poses) {
    if (poses.length > 0) {
        statusElement.textContent = 'Human Detected!';
    } else {
        statusElement.textContent = 'No Human Detected';
    }
}

// Initialize the setup
setup();

Step 3: Link the JavaScript File with HTML

Ensure that the app.js file is linked in your index.html as follows:

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

Step 4: Save and Run the Code

Save both the HTML and JavaScript files. Then, open index.html in a browser to see the real-time human detection in action.

Code Explanation

setup() Function: Initializes the video capture using p5.js and loads the PoseNet model with ml5.js. The video feed is hidden and redirected to the <video> element.
modelLoaded() Function: This function is triggered when the PoseNet model is ready, updating the status text to indicate that detection can begin.
gotPoses() Function: It handles the detection results from PoseNet, checking if any poses are detected and updating the status text accordingly.

Summary

This code allows for real-time human detection using the PoseNet model with ml5.js and p5.js. The index.html file sets up a simple webpage with a <video> element for displaying the camera feed and a status message to indicate whether a human has been detected. The app.js file continuously analyzes the video feed for human poses and updates the status accordingly, providing an easy way to perform real-time human detection directly in a web browser.