Catturare un frame video al cambiamento di stato

[francabbestia]

Ciao ragazzi ho un piccolo problema con la mia pagina html.
La mia pagina, avvia una web cam(con javascript) e individua se c'è un volto o meno, quando viene individuato il volto, lo stato cambierà in "Tracking face".
Attualmente riesco a catturare un frame attraverso il buttom "snap", come faccio a fare scattare la foto ogni volta che viene riconosciuto un volto?
Ecco il codice della mia pagina:

<script src="headtrackr.js"></script>
        
        <canvas id="compare" width="320" height="240" style="display:none"></canvas>
        <video id="vid" autoplay loop width="320" height="240"></video>
        <canvas id="overlay" width="320" height="240"></canvas>
        <canvas id="debug" width="320" height="240"></canvas>
    
        
        <p id='gUMMessage'></p>
        <p>Status : <span id='headtrackerMessage'></span></p>
        <p><input type="button" onclick="htracker.stop();htracker.start();" value="reinitiate facedetection"></input>
        <br/><br/>
        
            <button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
        
        
        
        <script>
         // set up video and canvas elements needed
        
            var videoInput = document.getElementById('vid');
            var canvasInput = document.getElementById('compare');
            var canvasOverlay = document.getElementById('overlay')
            var debugOverlay = document.getElementById('debug');
            var overlayContext = canvasOverlay.getContext('2d');
            canvasOverlay.style.position = "absolute";
            canvasOverlay.style.top = '0px';
            canvasOverlay.style.zIndex = '100001';
            canvasOverlay.style.display = 'block';
            debugOverlay.style.position = "absolute";
            debugOverlay.style.top = '0px';
            debugOverlay.style.zIndex = '100002';
            debugOverlay.style.display = 'none';
            
            // add some custom messaging
            
            statusMessages = {
                "whitebalance" : "checking for stability of camera whitebalance",
                "detecting" : "Detecting face",
                "hints" : "Hmm. Detecting the face is taking a long time",
                "redetecting" : "Lost track of face, redetecting",
                "lost" : "Lost track of face",
                "found" : "Tracking face"
            };
            
            supportMessages = {
                "no getUserMedia" : "Unfortunately, <a href='http://dev.w3.org/2011/webrtc/editor/getusermedia.html'>getUserMedia</a> is not supported in your browser. Try <a href='http://www.opera.com/browser/'>downloading Opera 12</a> or <a href='http://caniuse.com/stream'>another browser that supports getUserMedia</a>. Now using fallback video for facedetection.",
                "no camera" : "No camera found. Using fallback video for facedetection."
            };
            
            document.addEventListener("headtrackrStatus", function(event) {
                if (event.status in supportMessages) {
                    var messagep = document.getElementById('gUMMessage');
                    messagep.innerHTML = supportMessages[event.status];
                } else if (event.status in statusMessages) {
                    var messagep = document.getElementById('headtrackerMessage');
                    messagep.innerHTML = statusMessages[event.status];
                }
            }, true);
            
            // the face tracking setup
            
            var htracker = new headtrackr.Tracker({altVideo : {ogv : "./media/capture5.ogv", mp4 : "./media/capture5.mp4"}, calcAngles : true, ui : false, headPosition : false, debug : debugOverlay});
            htracker.init(videoInput, canvasInput);
            htracker.start();
            
            // for each facetracking event received draw rectangle around tracked face on canvas
            
            document.addEventListener("facetrackingEvent", function( event ) {
                // clear canvas
                overlayContext.clearRect(0,0,320,240);
                // once we have stable tracking, draw rectangle
                if (event.detection == "CS") {
                    overlayContext.translate(event.x, event.y)
                    overlayContext.rotate(event.angle-(Math.PI/2));
                    overlayContext.strokeStyle = "#00CC00";
                    overlayContext.strokeRect((-(event.width/2)) >> 0, (-(event.height/2)) >> 0, event.width, event.height);
                    overlayContext.rotate((Math.PI/2)-event.angle);
                    overlayContext.translate(-event.x, -event.y);
                }
            });
            
            // turn off or on the canvas showing probability
            function showProbabilityCanvas() {
                var debugCanvas = document.getElementById('debug');
                if (debugCanvas.style.display == 'none') {
                    debugCanvas.style.display = 'block';
                } else {
                    debugCanvas.style.display = 'none';
                }
            }
        </script>
        
            <script>

        // Put event listeners into place
        window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                vid = document.getElementById("vid"),
                videoObj = { "vid": true },
                errBack = function(error) {
                    console.log("Video capture error: ", error.code); 
                };

            // Put video listeners into place
            if(navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function(stream) {
                    vid.src = stream;
                    vid.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function(stream){
                    vid.src = window.webkitURL.createObjectURL(stream);
                    vid.play();
                }, errBack);
            } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
                navigator.mozGetUserMedia(videoObj, function(stream){
                    vid.src = window.URL.createObjectURL(stream);
                    vid.play();
                }, errBack);
            }

            // Trigger photo take(ipotizzato da me)
            /*document.getElementById("snap").addEventListener("headtrackrStatus", function(event) {
            if event.status in statusMessages = "found" : "Tracking face";{
            var messagep = document.getElementById('headtrackerMessage');
                    context.drawImage(vid, 0, 0, 154, 128);
                    }
            });
        }, false);
        */
        
        // Trigger photo take
            document.getElementById("snap").addEventListener("click", function() {
                context.drawImage(vid, 0, 0, 240, 180);
            });
        }, false);

[cavicchiandrea]

Accedi al webcam tramite JavaScript interessante pensavo non fosse possibile, potrebbe essere utile conoscere il codice. Per quello che chiedi non credo sia possibile (ma potrei sbagliare)

[francabbestia]

Per quello che chiedi non credo sia possibile (ma potrei sbagliare)

Secondo te non si potrebbe realizzare in nessun linguaggio web?