Image slideshow for OBS with captions generated from filenames of images in a folder
- Download Browser Image Slideshow and follow install instructions step 0 in the project description.
- Put images in the
/images/
folder. - Rename image files to:
Title, ####, Author..ext
…where #### is year of creation (if unsure, use c.####-####), and .ext is the file extension, such as .gif or .jpg. - In Open Broadcaster Software (OBS), in the Sources window, click + and select Browser, give the source a name like Slideshow and click OK, then check the checkbox by Local file and select the downloaded BrowserImageSlideshow.html
- Check checkboxes for both Shutdown source when not visible and Refresh browser when scene becomes active.
- Run the following command from a macOS Terminal command prompt inside the BrowserImageSlideshow folder whenever a new image is added to the folder, including the first time you run it:
./RefreshImages.sh
On Windows I think you need to runRefreshImagesW.cmd
instead.
If you want diacritics (accented characters) in image captions, add the following line directly below <!DOCTYPE html>
in BrowserImageSlideshow.html: <meta charset="UTF-8">
To change slideshow look and layout edit the CSS styles at the top of BrowserImageSlideshow.html, save the file, then click the eye icon next to Slideshow in OBS’s Sources twice to refresh the source and see changes.
To change slide duration, order (default is random), autoplay, and enable or disable captions, edit the settings.js file in the BrowserImageSlideshow folder.
Change slide fade duration to 1 second by changing:
let fadeDuration = slideDuration * 0.25;
…to:
let fadeDuration = 1000; // 1 second fade duration
in the JavaScript in BrowserImageSlideshow.html
Thanks to dustymethod, NaGeLBaileyVT, and SocksTheWolf for making BrowserImageSlideshow.
You can see it running during my Co-working & Studying Sound Space streams at twitch.tv/hypertexthero.
· ˖ ✦ . ˳
Possibly Related:
- Browser image slideshow for OBS
- HyperTextHero streaming guide
- Dark mode website theme switcher with CSS and JavaScript using localStorage instead of cookies
- HyperTextHero Lego camera holder
- Separate music and game audio in OBS
˳ · ˖
Prior entry: Video game fonts
Next entry: Mount & Blade II: Bannerlord