code cleanup

index.html

@@ -32,27 +32,10 @@
     faceapi.loadTinyFaceDetectorModel('/models');
 //    faceapi.loadFaceLandmarkModel('/models')
 
-  	var mode='none';
-  	var markers;
-  	var running;
-  	var countdown=0;
-  	
-  	var restart_timeout_handle=false;
-  	function restart_timeout()
-  	{
-  		if(restart_timeout_handle) clearTimeout(restart_timeout_handle);
-			restart_timeout_handle=setTimeout(function(){document.location.reload();},60000);
-  	}  	
   	  	  	  	
     var time=0,frame_time=0; // running time
-    var preview_cycle=0;
-    var preview_enabled=false;
-    var screenshot_cycle=0;
-    var preview_canvas=null;
     var canvas_photo=document.getElementById('photo');
-    var chain=null;
 
-    // main update function, shows video frames via glfx.js canvas
     var update = async function()
     {    
       // enqueue next update
@@ -63,44 +46,20 @@
       frame_time=frame_time*0.9 + (current_time-time)*0.1;
       time=current_time;
 
-
-
 			//grab the context from your destination canvas
 			video=get_video(0);
-	/*		if(!canvas_photo.width) {canvas_photo.width=video.width;canvas_photo.height=video.height};
-
-		*/	var detection = await faceapi.detectSingleFace(video,new faceapi.TinyFaceDetectorOptions()); //.withFaceLandmarks();
+      var detection = await faceapi.detectSingleFace(video,new faceapi.TinyFaceDetectorOptions()); //.withFaceLandmarks();
 			
-			if(detection)
+			if(detection && detection.box.height>150)
 			{
-		/*		var getCenter=function(points){
-				  var cx=0,cy=0;
-				  
-				  for(var point of points){
-            cx+=point.x; cy+=point.y;
-				  }
-				  cx/=points.length; cy/=points.length;
-				  
-				  return [cx,cy];
-				}
-				
-				markers=[getCenter(detection.landmarks.getMouth()), getCenter(detection.landmarks.getLeftEye()), getCenter(detection.landmarks.getRightEye())];
-			*/
-			//	console.log(JSON.stringify(detection));
 				var box=detection.box;
-        var pad=box.width*0.5;
+        var pad=box.width*0.1;
 				canvas_photo.width=box.width+2*pad; canvas_photo.height=box.height+2*pad;
         var ctx2d = canvas_photo.getContext('2d');
         ctx2d.drawImage(video, box.x-pad, box.y-pad,box.width+2*pad,box.height+2*pad,0,0,box.width+2*pad, box.height+2*pad);				
 			}
-
-	if(window.gc) window.gc();
     };
 
-    // get the video feed from a capture device name by source_index into source_ids
-    // opens the capture device and starts streaming on demand
-    // the consumer may receive a still starting <video> object, so it has to add and handle 'canplay' event before properties like videoWidth are read.
-    //
     var videos={};
     var get_video=function(source_index,width,height)
     {
@@ -119,7 +78,7 @@
       var constraints = {
         video:
         {
-          optional: [{sourceId: source_ids.video[source_index]}]
+          deviceId: source_ids.videoinput[source_index]
         },
         audio:false
       };
@@ -131,18 +90,16 @@
       }
       
       // initalize getUserMedia() camera capture
-      var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.oGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;        
-      getUserMedia.call(navigator, constraints, function(stream){
-      
+      navigator.getUserMedia(constraints, function(stream)
+      {      
         console.log("Got camera!");
-        // capture device was successfully acquired
         video.autoplay = true;
         video.muted=true;
         video.srcObject=stream;
         video.stream=stream;
 
+        // create a MediaSource / MediaRecorder / Video element for delayed playback
         var source=new MediaSource();        
-        
         source.onsourceopen=function(){
           var sourceBuffer=source.addSourceBuffer("video/webm;codecs=vp8");
           var recorder=new MediaRecorder(stream);
@@ -155,16 +112,12 @@
         }
         video2=document.getElementById('video2');
         video2.src=URL.createObjectURL(source);        
-
-        
         var capture_stream=video.captureStream();
         setTimeout(function(){
-                  
-         
           video2.play();
-          
         },5000);
 
+        // start the camera video
         video.play();
         document.body.appendChild(video);
       }, function(err){
@@ -172,24 +125,21 @@
       });
     }
             
-      
     // enumerate the available sources at startup and start update loop if found
-    var source_ids={audio:[],video:[]};
+    var source_ids={audioinput:[],videoinput:[]};
     function onSourcesAcquired(sources) 
     {
       for (var i = 0; i != sources.length; ++i) {      
         var source = sources[i];
-        source_ids[source.kind].push(source.id);
+        if(source_ids[source.kind]) source_ids[source.kind].push(source.deviceId);
       }      
       // start frequent canvas updates
       update();
     }
-    setTimeout(function(){
-      if(MediaStreamTrack.getSources)
-        MediaStreamTrack.getSources(onSourcesAcquired);
-      else
-        onSourcesAcquired([]);
-    },1000);
+    
+    navigator.mediaDevices.enumerateDevices().then(function(devices){
+      onSourcesAcquired(devices);
+    });
   </script>
 </body>
 </html>