Utility scripts for UCSC game dev courses.
Add these to your project with a <script> tag.
gallery.democlips.dev
Records a single page element (e.g. your game canvas) using the browser's
screen capture API, cropped to just that element. Saves a .webm
file locally that you can upload to
DemoClips.
A dialog appears on page load. Remove the script tag when you're done recording.
<script type="module" src="https://scripts.democlips.dev/demo-clip-recorder.mjs" data-clip-root="YOUR_ELEMENT_ID"></script>
Required: set data-clip-root to the id of the element
to record. The script will tell you if the attribute is missing or the element can't be found.
Optional: set data-upload-url to a
DemoClips
upload key URL (from the upload page's "external tool" option) to POST
the recording directly to the gallery instead of saving a local file.
Note: Place the script tag after the target element in your HTML
(e.g. at the end of <body>) so the element exists when the script runs.
Uses type="module" so nothing leaks into your global scope.