andi34 · andi34 · Jun 1, 2020 · May 21, 2020 · May 28, 2020 · May 28, 2020
diff --git a/config/config.inc.php b/config/config.inc.php
@@ -21,6 +21,7 @@
 $config['previewFromCam'] = false; // experimental see https://github.com/andreknieriem/photobooth/pull/30
 $config['previewCamTakesPic'] = false; // HTTPS required to use tablet- or mobile phone camera
 $config['previewCamFlipHorizontal'] = true;
+$config['previewCamBackground'] = false;
 $config['previewFromIPCam'] = false;
 $config['ipCamPreviewRotation'] = '0deg';
 $config['ipCamURL'] = null;

diff --git a/index.php b/index.php
@@ -40,6 +40,7 @@
 	<?php endif; ?>
 </head>
 
+<video id="video--preview" autoplay playsinline></video>
 <body class="deselect">
 	<div id="wrapper">
 	<?php if( !$config['login_enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true || !$config['protect_index'])): ?>

diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
@@ -222,6 +222,11 @@
 			'name' => 'previewCamFlipHorizontal',
 			'value' => $config['previewCamFlipHorizontal']
 		],
+		'previewCamBackground' => [
+			'type' => 'checkbox',
+			'name' => 'previewCamBackground',
+			'value' => $config['previewCamBackground']
+		],
 		'previewFromIPCam' => [
 			'type' => 'checkbox',
 			'name' => 'previewFromIPCam',

diff --git a/resources/js/core.js b/resources/js/core.js
@@ -5,6 +5,7 @@ const photoBooth = (function () {
     const public = {},
         loader = $('#loader'),
         startPage = $('#start'),
+        wrapper = $('#wrapper'),
         timeToLive = config.time_to_live,
         gallery = $('#gallery'),
         resultPage = $('#result'),
@@ -17,6 +18,7 @@ const photoBooth = (function () {
             }
         },
         videoView = $('#video--view').get(0),
+        videoPreview = $('#video--preview').get(0),
         videoSensor = document.querySelector('#video--sensor');
 
     let timeOut,
@@ -72,9 +74,12 @@ const photoBooth = (function () {
         $('.spinner').hide();
         $('.send-mail').hide();
         $('#video--view').hide();
+        $('#video--preview').hide();
         $('#video--sensor').hide();
         $('#ipcam--view').hide();
         public.resetMailForm();
+        $('#loader').css('background', config.colors.background_countdown);
+        $('#loader').css('background-color', config.colors.background_countdown);
     }
 
     // init
@@ -85,6 +90,9 @@ const photoBooth = (function () {
 
         resultPage.hide();
         startPage.addClass('open');
+        if (config.previewCamBackground) {
+            public.startVideo('preview');
+        }
     }
 
     public.openNav = function () {
@@ -99,7 +107,12 @@ const photoBooth = (function () {
         $('#mySidenav').toggleClass('sidenav--open');
     }
 
-    public.startVideo = function () {
+    public.startVideo = function (mode) {
+
+        if (config.previewCamBackground) {
+            public.stopVideo('preview');
+        }
+
         if (!navigator.mediaDevices) {
             return;
         }
@@ -112,37 +125,54 @@ const photoBooth = (function () {
 
         if (config.previewCamFlipHorizontal) {
             $('#video--view').addClass('flip-horizontal');
+            $('#video--preview').addClass('flip-horizontal');
         }
 
         getMedia.call(navigator.mediaDevices, webcamConstraints)
             .then(function (stream) {
-                $('#video--view').show();
-                videoView.srcObject = stream;
+                if (mode === 'preview') {
+                    $('#video--preview').show();
+                    videoPreview.srcObject = stream;
+                    public.stream = stream;
+                    wrapper.css('background-image', 'none');
+                    wrapper.css('background-color', 'transparent');
+                } else {
+                    $('#video--view').show();
+                    videoView.srcObject = stream;
+                }
                 public.stream = stream;
             })
             .catch(function (error) {
                 console.log('Could not get user media: ', error)
             });
     }
 
-    public.stopVideo = function () {
+    public.stopVideo = function (mode) {
         if (public.stream) {
             const track = public.stream.getTracks()[0];
             track.stop();
-            $('#video--view').hide();
+            if (mode === 'preview') {
+                $('#video--preview').hide();
+            } else {
+                $('#video--view').hide();
+            }
         }
     }
 
     public.thrill = function (photoStyle) {
         public.closeNav();
         public.reset();
 
+        if (config.previewCamBackground) {
+            wrapper.css('background-color', config.colors.panel);
+        }
+
         if (currentCollageFile && nextCollageNumber) {
             photoStyle = 'collage';
         }
 
         if (config.previewFromCam) {
-            public.startVideo();
+            public.startVideo('view');
         }
 
         if (config.previewFromIPCam) {
@@ -202,7 +232,7 @@ const photoBooth = (function () {
                 videoSensor.height = videoView.videoHeight;
                 videoSensor.getContext('2d').drawImage(videoView, 0, 0);
             }
-            public.stopVideo();
+            public.stopVideo('view');
         }
 
         if (config.previewFromIPCam) {
@@ -221,11 +251,15 @@ const photoBooth = (function () {
             data.collageNumber = nextCollageNumber;
         }
 
+        loader.css('background', config.colors.panel);
+        loader.css('background-color', config.colors.panel);
+
         jQuery.post('api/takePic.php', data).done(async function (result) {
             console.log('took picture', result);
             $('.cheese').empty();
             if (config.previewCamFlipHorizontal) {
                 $('#video--view').removeClass('flip-horizontal');
+                $('#video--preview').removeClass('flip-horizontal');
             }
 
             // reset filter (selection) after picture was taken

diff --git a/resources/lang/de.json b/resources/lang/de.json
@@ -100,6 +100,7 @@
   "nextPhoto": "Nächstes Bild",
   "polaroid_effect": "Polaroid Effekt",
   "preserve_exif_data": "Exif-Daten erhalten",
+  "previewCamBackground": "Stream der Gerätekamera als Hintergrund nutzen",
   "previewCamFlipHorizontal": "Bild von der Gerätekamera horizontal spiegeln",
   "previewCamTakesPic": "Gerätekamera zur Bildaufnahme verwenden",
   "previewFromCam": "Vorschau aus der Gerätekamera anzeigen",

diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -162,6 +162,7 @@
   "manual_newest_first": "If enabled, latest images will be shown first inside the gallery.",
   "manual_polaroid_effect": "If enabled, a polaroid effect is applied to your picture after it was taken.",
   "manual_preserve_exif_data": "If enabled, EXIF data is preserved while taking pictures. Please setup the \"EXIFtool command\" inside the \"Commands\" tab.",
+  "manual_previewCamBackground": "If enabled, device cam is used as background on start screen.",
   "manual_previewCamFlipHorizontal": "If enabled, preview by device cam is flipped horizontal.",
   "manual_previewCamTakesPic": "If enabled, a picture is taken from device cam instead executing the \"Take picture command\". Please note that the resolution depends on the given hight and width because it's acts like taking a screenshot.",
   "manual_previewFromCam": "If enabled, a preview by your device cam is used at countdown. Preview by \"device cam\" will always use the camera of the device where Photobooth get opened in a Browser (e.g. on a tablet it will always show the tablet camera while on a smartphone it will always show the smartphone camera instead)! A secure origin or exception is required! You can find out how to set an exception <a href=\"https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339\"  target=\"_blank\">here</a>.",
@@ -216,6 +217,7 @@
   "percent": "%",
   "polaroid_effect": "Polaroid effect",
   "preserve_exif_data": "Preserve EXIF data",
+  "previewCamBackground": "Use stream from device cam as background",
   "previewCamFlipHorizontal": "Flip image from device cam horizontally",
   "previewCamTakesPic": "Device cam takes picture",
   "previewFromCam": "See preview by device cam",

diff --git a/resources/sass/style.scss b/resources/sass/style.scss
@@ -87,7 +87,6 @@
   display: none;
   align-items: center;
   justify-content: center;
-  background: $background_countdownColor;
   background-size: cover;
   background-position: center center;
   color: $countdownColor;
@@ -105,7 +104,6 @@
     bottom: 0;
     left: 0;
     z-index: -1;
-    background-color: $background_countdownColor;
     opacity: 1;
     transition: opacity 0.5s;
   }
@@ -343,6 +341,15 @@ hr.small {
   object-fit: cover;
 }
 
+#video--preview {
+  top: 0;
+  left: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
 #ipcam--view {
   background-image: none;
   background-size: cover;