Commit 44cf8c91 authored by dronus's avatar dronus
Browse files

added state machine for portrait mirror slideshow

parent 608c12a5
......@@ -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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment