bugfix: ensure live preview is not cached

admin/captureconfig.php

@@ -34,7 +34,7 @@
 $config['picture']['cheese_time'] = '0';
 
 $config['preview']['mode'] = 'url';
-$config['preview']['url'] = 'url("http://' . Environment::getIp() . ':1984/api/stream.mjpeg?src=photobooth")';
+$config['preview']['url'] = 'http://' . Environment::getIp() . ':1984/api/stream.mjpeg?src=photobooth';
 $config['preview']['camTakesPic'] = false;
 
 try {

admin/wgetcaptureconfig.php

@@ -34,7 +34,7 @@
 $config['picture']['cheese_time'] = '0';
 
 $config['preview']['mode'] = 'url';
-$config['preview']['url'] = 'url("http://' . Environment::getIp() . ':1984/api/stream.mjpeg?src=photobooth")';
+$config['preview']['url'] = 'http://' . Environment::getIp() . ':1984/api/stream.mjpeg?src=photobooth';
 $config['preview']['camTakesPic'] = false;
 
 try {

assets/js/preview.js

@@ -1,5 +1,22 @@
 /* eslint n/no-unsupported-features/node-builtins: "off" */
 /* globals photoBooth photoboothTools */
+
+function addCacheBustingParam(url) {
+    const timestamp = new Date().getTime();
+
+    if (url.includes('?')) {
+        return `${url}&t=${timestamp}`;
+    }
+
+    return `${url}?t=${timestamp}`;
+}
+
+function getRootProperty(property) {
+    const root = document.documentElement;
+    const style = getComputedStyle(root);
+    return style.getPropertyValue(property).trim();
+}
+
 const photoboothPreview = (function () {
     // vars
     const CameraDisplayMode = {
@@ -163,8 +180,8 @@ const photoboothPreview = (function () {
                 } else if (config.preview.mode === PreviewMode.URL.valueOf()) {
                     photoboothTools.console.logDev('Preview: Preview at countdown from URL.');
                     setTimeout(function () {
+                        url.attr('src', addCacheBustingParam(getRootProperty('--background-preview')));
                         url.show();
-                        url.addClass('streaming');
                     }, config.preview.url_delay);
                 }
                 break;
@@ -175,8 +192,8 @@ const photoboothPreview = (function () {
                 } else if (config.preview.mode === PreviewMode.URL.valueOf()) {
                     photoboothTools.console.logDev('Preview: Preview from URL.');
                     setTimeout(function () {
+                        url.attr('src', addCacheBustingParam(getRootProperty('--background-preview')));
                         url.show();
-                        url.addClass('streaming');
                     }, config.preview.url_delay);
                 }
                 break;
@@ -201,8 +218,8 @@ const photoboothPreview = (function () {
             api.stream.getTracks()[0].stop();
             api.stream = null;
         }
-        url.removeClass('streaming');
         url.hide();
+        url.attr('src', '');
         video.hide();
         pictureFrame.hide();
         collageFrame.hide();

assets/js/test-preview.js

@@ -96,7 +96,7 @@ const photoboothPreviewTest = (function () {
         if (config.preview.mode === PreviewMode.DEVICE.valueOf()) {
             photoboothPreview.stopVideo();
         } else if (config.preview.mode === PreviewMode.URL.valueOf()) {
-            previewIpcam.removeClass('streaming');
+            previewIpcam.attr('src', '');
             previewIpcam.hide();
         }
 

assets/sass/components/_preview.scss

@@ -92,9 +92,3 @@
     scale: 1 -1;
   }
 }
-
-#preview--ipcam {
-  &.streaming {
-    background-image: var(--background-preview);
-  }
-}

docs/faq/index.md

@@ -468,7 +468,7 @@ If you like to have the same preview independent of the device you access Photob
 Make sure to have a stream available you can use (e.g. from your Webcam, Smartphone Camera or Raspberry Pi Camera)
 
 -   Admin panel config _"Preview mode"_: `from URL`
--   Admin panel config _"Preview-URL"_ example (add needed IP address instead): `url(http://192.168.0.2:8081)`
+-   Admin panel config _"Preview-URL"_ example (add needed IP address instead): `http://192.168.0.2:8081`
 
 **Note**
 
@@ -480,7 +480,7 @@ Make sure to have a stream available you can use (e.g. from your Webcam, Smartph
 
 If you want to use a stream from your DSLR or Pi Camera, install go2rtc and setup needed service to use.
 
-go2rtc can be accessed at `http://localhost:1984`. Use `url("http://localhost:1984/api/stream.mjpeg?src=photobooth")` as _"Preview-URL"_ (replace `localhost` with Photobooths IP for remote access).
+go2rtc can be accessed at `http://localhost:1984`. Use `http://localhost:1984/api/stream.mjpeg?src=photobooth` as _"Preview-URL"_ (replace `localhost` with Photobooths IP for remote access).
 To be able to also capture images you need to adjust the capture command.
 _"Commands"_: _"Take picture command"_: `capture %s`
 

lib/configsetup.inc.php

@@ -1365,7 +1365,7 @@
         'preview_url' => [
             'type' => 'input',
             'name' => 'preview[url]',
-            'placeholder' => 'url(http://localhost:8081)',
+            'placeholder' => 'http://localhost:8081',
             'value' => htmlentities($config['preview']['url'] ?? ''),
         ],
         'preview_url_delay' => [

src/Service/ConfigurationService.php

@@ -161,6 +161,11 @@ protected function processMigration(array $config): array
             $config['preview']['mode'] = 'device_cam';
         }
 
+        // Migrate Preview URL
+        if (isset($config['preview']['url']) && substr($config['preview']['url'], 0, 4) === 'url(' && substr($config['preview']['url'], -1) === ')') {
+            $config['preview']['url'] = trim(substr($config['preview']['url'], 4, -1), '"\'');
+        }
+
         return $config;
     }
 

template/components/preview.php

@@ -44,7 +44,7 @@
 echo '<div id="preview-container" style="aspect-ratio: ' . $comp . '">';
 echo '<div id="preview-wrapper" style="aspect-ratio:' . $comp . '">';
 echo '<video id="preview--video" style="' . $composed_style . '" class="' . $previewFlipClass . ' ' . $previewStyleClass . '" autoplay playsinline></video>';
-echo '<div id="preview--ipcam" style="' . $composed_style . '" class="' . $previewFlipClass . ' ' . $previewStyleClass . '"></div>';
+echo '<img id="preview--ipcam" style="' . $composed_style . '" class="' . $previewFlipClass . ' ' . $previewStyleClass . '"></img>';
 echo '<div id="preview--none">' . $languageService->translate('no_preview') . '</div>';
 echo '</div></div>';