added state machine for portrait mirror slideshow

index.html

@@ -16,48 +16,125 @@
       position: relative;
     }
     #video{position:absolute; top: 0px; left: 0px;}
-    #video2{position:absolute; bottom: 0px; left: 0px;}
-    canvas{position:absolute; top: 0px; right: 0px;}
+    #mirror{position:absolute; bottom: 0px; left: 0px;}
+    #photo{position:absolute; bottom: 0px; right: 0px;}
+    #slides{position:absolute; top: 0px; right: 0px;}
   </style>
 
   <video id=video></video>
-  <video id=video2></video>
-	<canvas id="photo"></canvas>
+  <video id=mirror></video>
+  <canvas id=photo></canvas>
+	<canvas id=slides width=480 height=800></canvas>
 
   <script src="face-api.js"></script>
 
   <script>  
   
+  
+     var state=null;
+
+     var states=[];
+          
+     function switch_state(new_state){
+        if(state==new_state) return;
+        console.log('Switch to state '+new_state+'(was '+state+')');       
+        states[new_state]();
+        state=new_state;
+     }
+  
+  
+     states.idle=function(){
+        document.querySelector('#mirror').style.visibility='hidden';
+        document.querySelector('#slides').style.visibility='hidden';
+     }
+     
+  
+     states.preroll=function(){
+       setTimeout(function(){switch_state('show_mirror')},5000);
+     }
+     
+     states.show_mirror=function(){
+       document.querySelector('#mirror').style.visibility='visible';
+       setTimeout(function(){switch_state('show_slideshow')},5000);
+     }
+
+    var slides=[];
+    for(var i=0; i<20; i++)
+      slides.push(document.createElement('canvas'));
+    var slide_capture_index=0;     
+    var slide_show_index=0;
+    var slide_interval;
+    
+     states.show_slideshow=function(){
+       document.querySelector('#slides').style.visibility='visible';
+       slide_show_index=slide_capture_index;
+       slide_interval=setInterval(function(){
+         var ctx=document.getElementById('slides').getContext('2d');
+         ctx.drawImage(slides[slide_show_index], 0,0);				
+         slide_show_index=(slide_show_index+1) % slides.length;
+       },1000);
+       
+       slide_capture_index=(slide_capture_index+1) % slides.length;
+       
+       setTimeout(function(){switch_state('hide_mirror')},20000);       
+     }
+     
+
+     states.hide_mirror=function(){
+       document.querySelector('#mirror').style.visibility='hidden';
+       setTimeout(function(){switch_state('hide_slideshow')},5000);       
+     }
+     
+     states.hide_slideshow=function(){
+       clearInterval(slide_interval);
+       document.querySelector('#slides').style.visibility='hidden';
+       setTimeout(function(){switch_state('idle')},6000);       
+     }
+       
 //    faceapi.loadSsdMobilenetv1Model('/models');
     faceapi.loadTinyFaceDetectorModel('/models');
 //    faceapi.loadFaceLandmarkModel('/models')
 
   	  	  	  	
     var time=0,frame_time=0; // running time
-    var canvas_photo=document.getElementById('photo');
-
+    
     var update = async function()
     {    
-      // enqueue next update
-      requestAnimationFrame(update);
-    
       // get animation time
       var current_time=Date.now();
       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);
-      var detection = await faceapi.detectSingleFace(video,new faceapi.TinyFaceDetectorOptions()); //.withFaceLandmarks();
+			video=get_video(1);
+			if(!video || video.videoWidth==0) {
+	      // enqueue next update
+        requestAnimationFrame(update);
+			  return;
+			}
+			
+      var canvas_photo=document.getElementById('photo');
+      canvas_photo.width=video.videoWidth; canvas_photo.height=video.videoHeight;
+      var ctx2d = canvas_photo.getContext('2d');
+      ctx2d.drawImage(video,0,0);
+        
+      var detection = await faceapi.detectSingleFace(canvas_photo,new faceapi.TinyFaceDetectorOptions()); //.withFaceLandmarks();
 			
 			if(detection && detection.box.height>150)
 			{
 				var box=detection.box;
-        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);				
+				var pad=0.2;
+        var w=box.width*(1+pad*2);
+        var h=800./480.*w;
+        var canvas=slides[slide_capture_index];
+				canvas.width=480; canvas.height=800; //box.width+2*pad_x; canvas.height=box.height+2*pad_y;
+        var ctx2d = canvas.getContext('2d');
+        ctx2d.drawImage(canvas_photo, box.x-box.width*pad, box.y-box.height*pad,w,h,0,0,480,800);				
+        
+        if(state=='idle') switch_state('preroll');
 			}
+  
+      requestAnimationFrame(update);
     };
 
     var videos={};
@@ -110,7 +187,7 @@
           }
           recorder.start(1000);
         }
-        video2=document.getElementById('video2');
+        video2=document.getElementById('mirror');
         video2.src=URL.createObjectURL(source);        
         var capture_stream=video.captureStream();
         setTimeout(function(){
@@ -140,6 +217,9 @@
     navigator.mediaDevices.enumerateDevices().then(function(devices){
       onSourcesAcquired(devices);
     });
+
+    switch_state('idle');
+
   </script>
 </body>
 </html>