Question

我正在使用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);
}

图

Answer 1

在输入上使用onchange标记似乎效果很好。没有重复的循环功能。

<input type/id/name/value onchange="nameOfTheFunction()">

网站功能，有关选择单选按钮的不同库

1 个答案: