DemoClips Scripts

demo-clip-recorder.mjs 7.5 KB

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.

DemoClipRecorder.cs 37 KB

A Unity MonoBehaviour that records your scene camera to a .webm file in your Videos folder. Attach it to a Camera in your scene, hit Play, and a clip is saved when you stop. Optionally uploads directly to DemoClips via an upload URL. Extend it to add on-screen widgets (sliders, numbers, checkboxes, color pickers) that display your demo's parameters.

Download and place in your Unity project's Assets folder. Download

Setup: Download the script, add it to your project's Assets/ folder, create a Camera in your scene, and attach the DemoClipRecorder component to it.
Upload URL: Paste a DemoClips upload key URL (from the upload page's "Generate Upload Link" option) into the Upload Url field to auto-upload clips when recording finishes.
Follow Scene Camera: When enabled, the recorder camera follows the Scene View camera so you can control it with Unity's built-in scene navigation.
Custom scripts: Extend DemoClipRecorder and override RunDemo() to add interactive widgets like AddSlider, AddNumber, AddCheckbox, and AddColor that appear on-screen during recording.

How-To Videos

Option A — Basic Recording

Add the script to your project, attach it to a camera, and start recording.

Option B — Upload URL

Configure the upload URL to automatically send your clip to DemoClips when recording finishes.

Option C — Custom Demo Script

Extend DemoClipRecorder to add on-screen widgets that expose your demo's parameters during recording.