Я работаю над проектом, в основном использующим Javascript (в основном библиотеки веб-камер). Чего я хочу добиться, так это управлять тем, когда и где использовать каждую библиотеку для конкретной цели.
Для ознакомления, в первую очередь, я предоставляю различные функции, которые потенциально могут работать в соответствии с тем, что выбрано из переключателей (см. Рисунок 1).
Например, в режиме по умолчанию никакие функции не применяются, однако на втором переключателе (режим слежения за лицом) я хочу получить доступ к определенной библиотеке и определить лицо по заданному входу - что работает.
Проблема в том, что я хочу:
1) прекратить отслеживание лица,
2) очистить все на холсте,
в случае изменения выбора радиовхода.
Моя первая идея решить эту проблему - создать функцию, которая будет делать это каждый раз, когда я вызываю ее (когда я изменяю переключатель режима) -> увидеть последнюю функцию resetCanvasFeatures (), которая в основном будет использовать что-то вроде faceTracking.stop ();
Я не уверен, что следующие идеи (темы или jquery) могли бы помочь здесь.
Пожалуйста, если у вас есть предложения, дайте мне знать.
HTML-код:
<!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:
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);
}
РИСУНОК
