diff --git a/index.html b/index.html index 3a7d40562bfab308fb216ca8c91a0f2188364883..000b4d6756fe8cc3a7df371ce563dad1d5bffeb3 100644 --- a/index.html +++ b/index.html @@ -12,13 +12,13 @@ padding: 0px; margin: 0px; overflow: hidden; - background-color: #366092; + background-color: #000; position: relative; } - #video{position:absolute; top: 0px; left: 0px;} - #mirror{position:absolute; bottom: 0px; left: 0px;} - #photo{position:absolute; bottom: 0px; right: 0px;} - #slides{position:absolute; top: 0px; right: 0px;} + #video{display:none; position:absolute; top: 0px; left: 0px;} + #mirror{position:absolute; top:0px; bottom: 0px; left: 0px;} + #photo{display:none; position:absolute; bottom: 0px; right: 0px;} + #slides{position:absolute; top: 0px; bottom:0px; right: 0px;} </style> <video id=video></video> @@ -123,13 +123,14 @@ if(detection && detection.box.height>150) { var box=detection.box; - var pad=0.2; - var w=box.width*(1+pad*2); + var pad_x=0.1, pad_y=0.4; + var w=box.width*(1+pad_x*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; + if(canvas.width!=480) {canvas.width=480; canvas.height=800;} 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); + ctx2d.fillRect(0,0,480,800); + ctx2d.drawImage(canvas_photo, box.x-box.width*pad_x, box.y-box.height*pad_y,w,h,0,0,480,800); if(state=='idle') switch_state('preroll'); }