Ensure live preview is not cached

On some devices, the video preview freezes when the video is hidden and
then shown again (e.g, show preview during countdown; hide preview to
show taken picture; show preview during countdown of the next picture).
This is because the last frame can be cached by the browser when the
preview is hidden, and this cached frame is displayed when the preview
is shown again.
To disable caching, a unique parameter is added to the URL of the
stream of the stream.

Signed-off-by: Nils Bosbach <n.bosbach@gmx.de>

Author: nbosb

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' => [

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>';