diff --git a/html5-demos.appspot.com/static/getusermedia/photobooth.html b/html5-demos.appspot.com/static/getusermedia/photobooth.html
index 816471a..45002c2 100644
--- a/html5-demos.appspot.com/static/getusermedia/photobooth.html
+++ b/html5-demos.appspot.com/static/getusermedia/photobooth.html
@@ -20,7 +20,7 @@
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="chrome=1">
-<link href="http://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css">
+<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css">
 <link href="../common.css" rel="stylesheet" type="text/css">
 <title>Photobooth</title>
 <style>
@@ -154,6 +154,12 @@ <h1>CSS Filters Photobooth</h1>
 </article>
 <canvas id="photo" style="display:none"></canvas>
 <script>
+     
+
+if (location.protocol !== 'https:'){
+  location.protocol = 'https:';
+}
+     
 navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
 window.URL = window.URL || window.webkitURL;
 
@@ -227,9 +233,13 @@ <h1>CSS Filters Photobooth</h1>
     intervalId = null;
     return;
   }
+  
+  const monitor = document.getElementById('monitor');
+  monitor.height = video.videoHeight;
+  monitor.width = video.videoWidth;
 
   intervalId = setInterval(function() {
-    ctx.drawImage(video, 0, 0);
+    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
     var img = document.createElement('img');
     img.src = canvas.toDataURL('image/webp');
 
@@ -279,4 +289,4 @@ <h1>CSS Filters Photobooth</h1>
 <script>CFInstall.check({mode: 'overlay'});</script>
 <![endif]-->
 </body>
-</html>
\ No newline at end of file
+</html>
