bugfix: ensure live preview is not cached#1267
Merged
andi34 merged 2 commits intoPhotoboothProject:devfrom Oct 28, 2025
Merged
Conversation
Contributor
|
Hey and thanks for your pull request!
Could you please adjust the config entries there too? |
Contributor
Author
|
Hi, thanks for the hint. I have updated the files, too. |
Contributor
|
Thanks for the update. I am now thinking about how to handle already configured Photobooth to not break. Any ideas? |
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>
When the config has been created by a previous version, the preview.url
field may contain values wrapped in `url("...")`. The updated version no
longer requires this wrapper. If the preview.url field starts with `url(`
and ends with `)`, the `url(...)` wrapper and any surrounding quotes are
removed.
Signed-off-by: Nils Bosbach <n.bosbach@gmx.de>
nbosb
commented
Oct 28, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I use a setup with a live preview showing an MJPEG-based stream created by Go2rtc during the countdown. When using an iPad to control the photobooth, the preview works fine when taking a picture. However, when I click the
newPhotobutton on the results page, only the last frame of the previous live stream is shown. Everything works fine when I use Firefox on Windows. I think this is exactly the same issue as described in #942.It seems that Safari (iOS 17.7.10) and Chrome (141.0.7390.41) on the iPad cache the last frame when the
preview--ipcamelement is hidden, and only use this frame when it is shown again instead of fetching the stream.Prerequisites checklist
What is the purpose of this pull request? (put an "x" next to an item)
What changes did you make? (Give an overview)
It seems that caching cannot be disabled for background images applied to
divelements.As a workaround, I added a cache-busting query parameter to the stream URL so that it’s unique each time the
preview--ipcamelement is shown.To simplify handling the stream source, I changed the
preview--ipcamelement from adivwith a CSS background image to an<img>element. This allows the stream URL to be passed directly via thesrcattribute instead of usingurl('...').A timestamp (
t=<timestamp>) is appended to the URL to ensure it’s different each time and therefore not cached by the browser.Tested on
Note
The stream URL must now be passed directly to the
<img>element; theurl('...')syntax is no longer needed.Is there anything you'd like reviewers to focus on?
As I’m not a JS/PHP developer, I’d appreciate it if you could check whether I’ve missed any best practices or made any mistakes in the implementation. Please feel free to point out any issues with the code, especially if something seems unconventional or my implementation causes problems I am not aware of.