diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
index 74ff6b2cb..f0e01bc80 100644
--- 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
index 5e8e4a7ba..cb28d3f05 100644
--- 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,12 +125,21 @@ 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) {
@@ -125,11 +147,15 @@ const photoBooth = (function () {
});
}
- 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();
+ }
}
}
@@ -137,12 +163,16 @@ const photoBooth = (function () {
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
index 7a4d5cf89..5d6c268da 100644
--- 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
index f70428bf5..42bf52b44 100644
--- 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
here.",
@@ -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
index 64dbe3bab..0d6b2fc9b 100644
--- 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;