| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Webcam Image Classification using MobileNet and p5.js</title> | |
| </head> | |
| <body> | |
| <h1>Webcam Image Classification using MobileNet and p5.js</h1> | |
| <p id='status'>Loading Model...</p> | |
| <p> | |
| The MobileNet model labeled this as "<span id="result">...</span>" | |
| <br/>with a confidence of <span id="probability">...</span>. | |
| </p> | |
| </body> | |
| </html> |
| // Derived from: https://ml5js.org/docs/video-classification-example | |
| let classifier; | |
| let video; | |
| const threshold = 0.6; | |
| let iftttEventInput; | |
| let iftttKeyInput; | |
| let targetClassNameInput; | |
| let count = 0; | |
| let isRunning = false; | |
| function setup() { | |
| noCanvas(); | |
| iftttEventInput = createInput("IFTTT event"); | |
| iftttKeyInput = createInput("IFTTT key"); | |
| targetClassNameInput = createInput("class name"); | |
| // Create a camera input | |
| video = createCapture(VIDEO); | |
| // Initialize the Image Classifier method with MobileNet and the video as the second argument | |
| classifier = ml5.imageClassifier("MobileNet", video, modelReady); | |
| } | |
| function modelReady() { | |
| // Change the status of the model once its ready | |
| select("#status").html("Model Loaded"); | |
| // Call the classifyVideo function to start classifying the video | |
| classifyVideo(); | |
| } | |
| // Get a prediction for the current video frame | |
| function classifyVideo() { | |
| classifier.predict(gotResult); | |
| } | |
| // When we get a result | |
| function gotResult(err, results) { | |
| // The results are in an array ordered by probability. | |
| select("#result").html(results[0].className); | |
| select("#probability").html(nf(results[0].probability, 0, 2)); | |
| const className = results[0].className; | |
| const probability = results[0].probability; | |
| if (className === targetName && probability > threshold) { | |
| count = count + 1; | |
| select("#status").html("Count: " + count); | |
| if (count >= 10) { | |
| triggerEvent(); | |
| count = 0; | |
| } | |
| } else { | |
| count = 0; | |
| } | |
| if (isRunning) { | |
| classifyVideo(); | |
| } | |
| } | |
| function mousePressed() { | |
| if (isRunning) { | |
| isRunning = false; | |
| select("#status").html("Paused"); | |
| } else { | |
| isRunning = true; | |
| select("#status").html("Running"); | |
| classifyVideo(); | |
| } | |
| } | |
| function triggerEvent() { | |
| console.log("event: " + iftttEventInput.value()); | |
| console.log("key: " + iftttKeyInput.value()); | |
| const url = | |
| "https://maker.ifttt.com/trigger/" + | |
| event.value() + | |
| "/with/key/" + | |
| apiKey.value(); | |
| console.log(url); | |
| httpPost( | |
| url, | |
| result => { | |
| console.log("OK: " + result); | |
| }, | |
| error => { | |
| console.log("ERROR: " + error); | |
| } | |
| ); | |
| } |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script> |
This is an extension of "Video Classification" of ml5.js. When an object with the specified class name is recognized for a specified period, request IFTTT to make a trigger.
A Pen by Shigeru Kobayashi on CodePen.
A Pen by Shigeru Kobayashi on CodePen.