From 8dbca61cefd1ecd4a676682aa083739efb5c3cfe Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Thu, 21 May 2020 15:34:06 +0200 Subject: [PATCH 1/3] Allow using devicecam as background for preview Change-Id: I3dd3e470661a950454143978324f49e95cc040af --- config/config.inc.php | 1 + index.php | 1 + lib/configsetup.inc.php | 5 ++++ resources/js/core.js | 52 +++++++++++++++++++++++++++++++++++++++ resources/lang/de.json | 1 + resources/lang/en.json | 2 ++ resources/sass/style.scss | 9 +++++++ 7 files changed, 71 insertions(+) diff --git a/config/config.inc.php b/config/config.inc.php index 17f455062..69f3685c1 100644 --- 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 index eadf57f02..2ec90290d 100644 --- a/index.php +++ b/index.php @@ -40,6 +40,7 @@ +
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..fa0b037e7 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,6 +74,7 @@ const photoBooth = (function () { $('.spinner').hide(); $('.send-mail').hide(); $('#video--view').hide(); + $('#video--preview').hide(); $('#video--sensor').hide(); $('#ipcam--view').hide(); public.resetMailForm(); @@ -85,6 +88,9 @@ const photoBooth = (function () { resultPage.hide(); startPage.addClass('open'); + if (config.previewCamBackground) { + public.startPreview(); + } } public.openNav = function () { @@ -99,7 +105,40 @@ const photoBooth = (function () { $('#mySidenav').toggleClass('sidenav--open'); } + public.startPreview = function () { + if (!navigator.mediaDevices) { + return; + } + + const getMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia || false); + + if (!getMedia) { + return; + } + + if (config.previewCamFlipHorizontal) { + $('#video--preview').addClass('flip-horizontal'); + } + + getMedia.call(navigator.mediaDevices, webcamConstraints) + .then(function (stream) { + $('#video--preview').show(); + videoPreview.srcObject = stream; + public.stream = stream; + wrapper.css('background-image', 'none'); + wrapper.css('background-color', 'transparent'); + }) + .catch(function (error) { + console.log('Could not get user media: ', error) + }); + } + public.startVideo = function () { + + if (config.previewCamBackground) { + public.stopPreview(); + } + if (!navigator.mediaDevices) { return; } @@ -133,10 +172,22 @@ const photoBooth = (function () { } } + public.stopPreview = function () { + if (public.stream) { + const track = public.stream.getTracks()[0]; + track.stop(); + $('#video--preview').hide(); + } + } + public.thrill = function (photoStyle) { public.closeNav(); public.reset(); + if (config.previewCamBackground) { + wrapper.css('background-color', config.colors.panel); + } + if (currentCollageFile && nextCollageNumber) { photoStyle = 'collage'; } @@ -226,6 +277,7 @@ const photoBooth = (function () { $('.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..7775f8283 100644 --- a/resources/sass/style.scss +++ b/resources/sass/style.scss @@ -343,6 +343,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; From b2360f9e267700cadb5b1b722f314b7db1b8b22b Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Thu, 28 May 2020 20:20:44 +0200 Subject: [PATCH 2/3] devicecam background: remove duplicate code Change-Id: I06c7d0ccbe98fe40f125cf35d02ae0dfb42ebf50 --- resources/js/core.js | 67 +++++++++++++++----------------------------- 1 file changed, 22 insertions(+), 45 deletions(-) diff --git a/resources/js/core.js b/resources/js/core.js index fa0b037e7..f39471d03 100644 --- a/resources/js/core.js +++ b/resources/js/core.js @@ -89,7 +89,7 @@ const photoBooth = (function () { resultPage.hide(); startPage.addClass('open'); if (config.previewCamBackground) { - public.startPreview(); + public.startVideo('preview'); } } @@ -105,38 +105,10 @@ const photoBooth = (function () { $('#mySidenav').toggleClass('sidenav--open'); } - public.startPreview = function () { - if (!navigator.mediaDevices) { - return; - } - - const getMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia || false); - - if (!getMedia) { - return; - } - - if (config.previewCamFlipHorizontal) { - $('#video--preview').addClass('flip-horizontal'); - } - - getMedia.call(navigator.mediaDevices, webcamConstraints) - .then(function (stream) { - $('#video--preview').show(); - videoPreview.srcObject = stream; - public.stream = stream; - wrapper.css('background-image', 'none'); - wrapper.css('background-color', 'transparent'); - }) - .catch(function (error) { - console.log('Could not get user media: ', error) - }); - } - - public.startVideo = function () { + public.startVideo = function (mode) { if (config.previewCamBackground) { - public.stopPreview(); + public.stopVideo('preview'); } if (!navigator.mediaDevices) { @@ -151,12 +123,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) { @@ -164,19 +145,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(); - } - } - - public.stopPreview = function () { - if (public.stream) { - const track = public.stream.getTracks()[0]; - track.stop(); - $('#video--preview').hide(); + if (mode === 'preview') { + $('#video--preview').hide(); + } else { + $('#video--view').hide(); + } } } @@ -193,7 +170,7 @@ const photoBooth = (function () { } if (config.previewFromCam) { - public.startVideo(); + public.startVideo('view'); } if (config.previewFromIPCam) { @@ -253,7 +230,7 @@ const photoBooth = (function () { videoSensor.height = videoView.videoHeight; videoSensor.getContext('2d').drawImage(videoView, 0, 0); } - public.stopVideo(); + public.stopVideo('view'); } if (config.previewFromIPCam) { From f2077dd329a227bd42440cfcbd373c55c88d7018 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Thu, 28 May 2020 18:58:35 +0200 Subject: [PATCH 3/3] style: #loader style background via js Change-Id: I0d8054a682b287369e91f357c507430ffefd77a2 --- resources/js/core.js | 5 +++++ resources/sass/style.scss | 2 -- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/resources/js/core.js b/resources/js/core.js index f39471d03..cb28d3f05 100644 --- a/resources/js/core.js +++ b/resources/js/core.js @@ -78,6 +78,8 @@ const photoBooth = (function () { $('#video--sensor').hide(); $('#ipcam--view').hide(); public.resetMailForm(); + $('#loader').css('background', config.colors.background_countdown); + $('#loader').css('background-color', config.colors.background_countdown); } // init @@ -249,6 +251,9 @@ 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(); diff --git a/resources/sass/style.scss b/resources/sass/style.scss index 7775f8283..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; }