diff --git a/examples/indexeddb-caching-example/README.md b/examples/indexeddb-caching-example/README.md new file mode 100644 index 0000000..712e410 --- /dev/null +++ b/examples/indexeddb-caching-example/README.md @@ -0,0 +1,62 @@ +# IndexedDB Video Caching Example + +This example demonstrates how to use IndexedDB for caching video content in a BrightSign HTML5 application. The application creates a video playlist that intelligently caches videos in the background for smooth playback. + +## File Structure + +- `index.html`: Main HTML application with video player and caching logic +- `autorun.brs`: BrightSign autorun script which loads the HTML application + +## Usage + +1. Copy the `autorun.brs` and `index.html` files to the root of an SD card +2. Insert the SD card in the BrightSign player and power it on +3. The `autorun.brs` script will automatically launch the HTML application + +## How It Works + +1. **Database Setup**: Creates an IndexedDB database (`videos_db`) with an object store (`videos_os`) to store video blobs +2. **Playlist Loading**: Loads a predefined playlist of sample videos from Google's test video collection +3. **Smart Caching Strategy**: + - First video: Downloads and plays immediately, then starts background caching + - Subsequent videos: Plays from cache if available, otherwise downloads from network + - Background caching: Downloads remaining videos with 1-second delays between requests +4. **Automatic Playback**: Videos play continuously with automatic progression to the next video + +## Configuration Options + +### BrightSign Configuration (autorun.brs) +- `url`: Path to the HTML file. This can be modified to point to a remote server URL that serves the HTML file. +- `mouse_enabled`: Enable/disable mouse interaction (default: false) +- `javascript_enabled`: Enable/disable JavaScript (default: true) +- `nodejs_enabled`: Enable/disable Node.js (default: false) +- `storage_path`: Directory for local storage cache +- `storage_quota`: Maximum cache size + +See the [roHtmlWidget](https://docs.brightsign.biz/developers/rohtmlwidget#23vJS) page for more details on configuration options. + +### Video Configuration (index.html) +- Modify the `fetchPlaylist()` function to add your own video URLs +- Adjust the background caching delay by changing the `TIMEOUT_DELAY` value +- Customize video display properties in the `displayVideo()` function + +## Error Handling + +The application includes comprehensive error handling for: +- Network connectivity issues +- IndexedDB operation failures +- Duplicate cache entries (ConstraintError) +- Video loading and playback errors + +## Performance Considerations + +- **Storage**: Videos are stored as blobs in IndexedDB, which uses available disk space +- **Network**: Background caching uses staggered requests (1-second delays) to avoid overwhelming the network +- **Memory**: Video blobs are created using `URL.createObjectURL()` for efficient memory usage + +## Troubleshooting + +1. **Videos not caching**: Check console for IndexedDB errors +2. **Network errors**: Verify internet connectivity and video URLs +3. **Storage full**: Check available disk space and storage quota settings +4. **Playback issues**: Ensure video formats are supported by the player diff --git a/examples/indexeddb-caching-example/autorun.brs b/examples/indexeddb-caching-example/autorun.brs new file mode 100644 index 0000000..08bfdc1 --- /dev/null +++ b/examples/indexeddb-caching-example/autorun.brs @@ -0,0 +1,40 @@ +Sub Main() + width = 1920 + height = 1080 + + vidmode = CreateObject("roVideoMode") + if type(vidmode) = "roVideoMode" + width = vidmode.GetResX() + height = vidmode.GetResY() + end if + + msgPort = CreateObject("roMessagePort") + rect = CreateObject("roRectangle", 0, 0, width, height) + + 'inspector disabled currently + 'inspectorServer = { + ' port: 3010 + '} + + config = { + url: "file:/SD:/index.html", ' you can use a server or website URL here - "https://example.com/index.html" + mouse_enabled: false, ' set to true to enable mouse/keyboard + 'inspector_server: inspectorServer ' uncomment to enable inspector server + security_params: { websecurity: true } + javascript_enabled: true, ' Else set to false to disable JavaScript + nodejs_enabled: true, ' Else set to false to disable Node.js + storage_path: "/cache", ' Name of the directory for local storage cache + storage_quota: "2147483648", ' 2GB + port: msgPort, + } + + html = CreateObject("roHtmlWidget", rect, config) + html.Show() + + syslog = CreateObject("roSystemLog") + + while true + event = wait(0, msgPort) + syslog.sendline("@@ type(event)="+ type(event)) + end while +End Sub diff --git a/examples/indexeddb-caching-example/index.html b/examples/indexeddb-caching-example/index.html new file mode 100644 index 0000000..3dc7f8f --- /dev/null +++ b/examples/indexeddb-caching-example/index.html @@ -0,0 +1,189 @@ + +
+ + + + +