I'am working on a project basically using Javascript (mainly webcam libraries). What i want to achieve is to manage when and where to use each library on a specific purpose.
To walk you through, first of all I provide different features that would potentially work according to what is selected from the radio buttons (See Figure 1).
For example in Default Mode none features are applied, however on the second radio button (Face Tracking Mode), I want to access a specific library and detect the face from the given input - which works.
The issue here is that I want to :
1)stop tracking faces, 2)clear everything on the canvas,
in case of changing the radio input selection.
My first idea to solve this, is to create a function that would do that every time i call it (when i change mode-radio button) -> see last function resetCanvasFeatures() that would basically use something like faceTracking.stop();
Im not sure if the following ideas (threads or jquery) would help here.
Please if you have any suggestions let me know.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Face Tracking</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Libraries Declaration -->
<!-- p5js -->
<script type="text/javascript" src="libraries/p5.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.dom.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.sound.min.js"></script>
<!-- tracking.js -->
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/tracking.js"></script>
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/data/face-min.js"></script>
<script src="libraries/tracking.js-master/tracking.js-master/examples/assets/stats.min.js"></script>
<!-- jquery.min.js-->
<script src="libraries/jquery-3.3.1.min.js"></script>
<!--
<script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
-->
<!-- MY SCRIPT -->
<script src="scripts/faceTrackingTool.js"></script>
<!-- Reference Cascade Style Sheet -->
<link rel="stylesheet" type="text/css" href="styles\styles.css">
</head>
<body>
<!-- ADD TITLE ELEMENT -->
<div>
<h1 id="main_Title">Mirror Mirror on the Wall</h1>
<p id="description">Welcome to this website. After enabling your webcam, simply select an option from the sections below.</p>
</div>
<!-- ADD RADIO BUTTONS (Program functionality is performed) -->
<div id="radioButtonController-container">
<form name="radioButtonControllerForm">
<section id="radioButtonsSection">
<!-- DEFAULT -->
<div>
<input type="radio" id="radio0" name="radioButtonController"
value="default">
<label for="radio0">
<h2>Default Mode : </h2>
<p>Canvas draws every frame of the video - No features are implemented here</p>
</label>
</div>
<!-- FACE TRACKING -->
<div>
<input type="radio" id="radio1" name="radioButtonController"
value="faceTracking" onClick="faceTracking()">
<label for="radio1">
<h2>Face Tracking Mode : </h2>
<p>Uses tracking.js library - Detects one or more faces from the given input</p>
</label>
</div>
<!-- SLIM TOOL -->
<div>
<input type="radio" id="radio2" name="radioButtonController"
value="slimTool">
<label for="radio2">
<h2>Slim Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- HAIR TOOL -->
<div>
<input type="radio" id="radio3" name="radioButtonController"
value="hairTool" disabled>
<label for="radio3">
<h2>Hair Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- BACKGROUND TOOL -->
<div>
<input type="radio" id="radio4" name="radioButtonController"
value="backgroundTool">
<label for="radio4">
<h2>Background Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- MORPH WITH TOOL -->
<div>
<input type="radio" id="radio5" name="radioButtonController"
value="morphTool">
<label for="radio5">
<h2>Morph Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
</section>
</form>
</div>
<br/><br/>
<!-- ADD EDITED CANVAS DIV ELEMENT -->
<div id="editingCanvas-container">
<!-- <canvas id="editingCanvas-element"></canvas> is added here from faceTrackingTool.js -->
<!-- <h3>Edited Canvas</h3> -->
</div>
<!-- ADD ORIGINAL VIDEO DIV ELEMENT -->
<div id="originalVideo-container">
<!-- <video id="originalVideo-element"></video> is added here from faceTrackingTool.js -->
<!-- <h3>Original Canvas</h3> -->
</div>
</body>
</html>
JAVASCRIPT FILE:
var canvas;
var canvasWidth = 640;
var canvasHeight= 480;
var videoElement; //Holds the video element (<video....>)
var frame; //Holds an image() object of every frame of the video
var selectedRadioButton; //Holds the value of the selected radio button
var tracker;
var trackingTask;
var faceTrackingMode = false; //TRUE- Open Tracking, FALSE-Declare variables once
function setup(){
//Set Default Radio Button (Get access from <form> element)
document.radioButtonControllerForm.radioButtonController[0].checked= true; //Default Mode
//Create original canvas and move it
//so it’s inside <div id="editedCanvas-container">
canvas = createCanvas(canvasWidth, canvasHeight); //480p
canvas.parent('editingCanvas-container');
canvas.id("editingCanvas-element");
//Change the style of the canvas so it presents a mirror
document.getElementById("editingCanvas-element").style.border = "1px solid black";
document.getElementById("editingCanvas-element").style.borderRadius = "40px";
//Activate Web-Camera,set attributes and move it
//so it’s inside <div id="originalVideo-container">
videoElement = createCapture(VIDEO);
videoElement.parent('originalVideo-container');
videoElement.id("originalVideo-element");
videoElement.size(canvasWidth, canvasHeight); //480p
//originalCapture.hide(); //Do not Hide Original Capture
var canvasTitle = createElement("h3", "Editing Canvas");
canvasTitle.parent('editingCanvas-container');
var videoTitle = createElement("h3", "Original Video");
videoTitle.parent('originalVideo-container');
}
function draw(){
/* Store every frame in the variable (Holds image() Object)*/
frame = image(videoElement, 0, 0, width, height);
// (Default, Face Tracking, Slim Tool, Hair Tool, Background Tool, Morph Tool)
selectedRadioButton = getSelectedRadioButtonValue();
radioButtonsMananger(selectedRadioButton); //Pass the selected Option Value to function
}
function getSelectedRadioButtonValue(){
var selected; //Set variable to hold selected value
//Default
if (document.radioButtonControllerForm.radioButtonController[0].checked) {
selected = document.radioButtonControllerForm.radioButtonController[0].value;
}
...........
else if (document.radioButtonControllerForm.radioButtonController[5].checked) {
selected = document.radioButtonControllerForm.radioButtonController[5].value;
}
return selected; //Return selected values
}
function radioButtonsMananger(selectedOption){
switch(selectedOption){
case "default":
resetCanvasFeatures();
//console.log("use default");
break;
case "faceTracking":
resetCanvasFeatures();
//faceTracking();
break;
...........
}
}
function faceTracking(){
//Check if the variables are already declared
if(faceTrackingMode === false){
myVideo = document.getElementById('originalVideo-element');
myCanvas = document.getElementById('editingCanvas-element');
myCanvasContext = myCanvas.getContext('2d');
//Open Tracker from tracking.js library
//Open tracker - use array (ObjectTracker(['face','eye','mouth']))
tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
trackingTask = tracking.track(myVideo, tracker, { camera: true });
faceTrackingMode = true; //Set to TRUE - Do not declare those variables again
}
trackingTask.run();
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
myCanvasContext.strokeStyle = '#a64ceb';
myCanvasContext.strokeRect(rect.x, rect.y, rect.width, rect.height);
myCanvasContext.font = '11px Arial';
myCanvasContext.fillStyle = '#000000 ';
myCanvasContext.fillText('x: ' + rect.x + 'px', rect.x +
rect.width + 5, rect.y + 11);
myCanvasContext.fillText('y: ' + rect.y + 'px', rect.x +
rect.width + 5, rect.y + 22);
});
});
}
function resetCanvasFeatures(){
setTimeout(function () {
trackingTask.stop();
}, 10000);
}
FIGURE
Using onchange tag on the input seems to be working great. no repeated loop functions.