DatamoshLive

Real-time datamosh effects in the browser using WebCodecs. Feed it a camera or video, trigger drops and corruptions, watch frames smear.

Requires Chrome / Edge 94+ over HTTPS or localhost.

Credits: Over-delta technique by Amagi. Inspired by Hydra Datamosh (Emptyflash) and Hydra Synth. API design and H.264 implementation by geikha. General implementation and documentation done using Claude Code.

Install

npm install datamoshlive
npm run build   # → dist/datamoshlive.js + dist/datamoshlive.esm.js

Or use the CDN:

<script src="https://unpkg.com/datamoshlive@latest/dist/datamoshlive.js"></script>

Getting started

const dm = new DatamoshLive({ width: 640, height: 480 });
dm.mount();  // append to document.body (or pass a custom parent element)
await dm.initCam();

// Click to smear
dm.canvas.addEventListener('click', () => dm.drop());

That's it. dm.canvas is a plain <canvas> — customize size and positioning as needed.

Common patterns

Drop on click:

dm.canvas.addEventListener('click', () => dm.drop());

Continuous probabilistic dropping:

dm.dropRate = 0.15;   // 15% chance per frame; 0 = off

Freeze and smear on hold:

dm.canvas.addEventListener('mousedown', () => dm.hold = true);
dm.canvas.addEventListener('mouseup',   () => dm.hold = false);

Persistent datamosh (no auto-recovery):

dm.recover = false;
dm.drop();            // stays glitched until dm.sync()

Parameters as live functions (called every frame):

let mouseX = 0;
document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX / window.innerWidth;
});
dm.speed = () => Math.floor(mouseX * 4) + 1;  // 1–5 based on mouse X

Capture and replay a moment:

dm.sample(30);                       // capture the next 30 frames
setTimeout(() => dm.inject(), 500);  // replay them half a second later
// dm.sampleLoop = true;                // keep looping until stopInject()

API

Constructor

const dm = new DatamoshLive(opts)

| Option | Default | Description | |---|---|---| | width | 640 | Encoder/decoder resolution | | height | 480 | Encoder/decoder resolution | | canvasWidth | width | Output canvas size (can differ from render resolution) | | canvasHeight | height | Output canvas size | | canvas | auto | Provide an existing <canvas> element | | params | {} | Initial parameter overrides |

Sources

All source methods are async. The loop starts automatically unless you pass autoStart: false.

await dm.initCam(selector?, opts?)

Open a webcam. selector is a camera index (number, default 0) or a label string.

await dm.initVideo(source, opts?)

Load a video file. source is a URL string or an existing <video> element. Loops automatically.

await dm.initCanvas(canvas, opts?)

Use any <canvas> as a live source (e.g. a generative sketch).

Loop

dm.start()

Start or restart the capture/encode/decode loop. Safe to call while already running.

dm.stop()

Pause the loop.

Effect calls

dm.drop()

Drop the next encoded frame. The decoder keeps its old reference and decodes subsequent deltas against stale content — producing motion smear. Auto-recovers after recoverAfter frames if recover is enabled.

dm.corrupt()

Zero out a random region of the next encoded frame's bitstream before decode. Produces block corruption and color drift rather than smear. Also auto-recovers.

dm.sync()

Force a clean keyframe and deliver it to the decoder immediately. Cancels any pending drop or recovery. Use this to snap back to a clean image at any time.

Parameters

Set directly as properties or via setParam(name, value) / setParams({...}).

All parameters accept live functions — set a function and it will be called each frame, with automatic type coercion and bounds clamping:

dm.speed = 4;                                             // static
dm.speed = () => Math.sin(Date.now() / 500) * 3 + 4;    // live

Effect

| Parameter | Type | Default | Description | |---|---|---|---| | dm.speed | integer ≥1 | 1 | Times each delta frame is decoded. Higher = stronger smear accumulation | | dm.enabled | boolean | true | false bypasses the codec entirely and draws source frames directly | | dm.hold | boolean | false | Freeze the canvas — drops all incoming frames. On release, smears briefly before recovering |

Drop

| Parameter | Type | Default | Description | |---|---|---|---| | dm.dropRate | 0–1 | 0 | Per-frame drop probability. 0 = off |

Corrupt

| Parameter | Type | Default | Description | |---|---|---|---| | dm.corruptRate | 0–1 | 0 | Per-frame corruption probability. 0 = off | | dm.corruptAmount | 0–1 | 0.3 | Fraction of frame bytes zeroed per corruption event |

Recovery

| Parameter | Type | Default | Description | |---|---|---|---| | dm.recover | boolean | true | Auto-recover after drops and corruptions | | dm.recoverAfter | integer | fps \|\| 30 | Frames to wait before forcing a clean recovery keyframe |

Codec / display

| Parameter | Type | Default | Description | |---|---|---|---| | dm.bitrate | number | 1000000 | Encoder bitrate in bits/s. Lower = more compression artifacts | | dm.codec | string | 'vp8' | 'vp8', 'vp9', 'h264', or 'av1'. H.264 and AV1 availability is browser/platform-dependent | | dm.fit | string | 'fill' | Canvas scaling: 'fill' (crop to fill), 'fit' (letterbox), 'stretch' (distort) | | dm.fps | number | 30 | Frame rate cap. 0 = unlimited |

Codec strings are automatically resolved to the appropriate level for your render resolution. You can also pass a raw WebCodecs codec string directly.

Changing bitrate or codec resets the encoder/decoder pair.

Sample / inject

Capture a buffer of encoded frames and replay it.

dm.sample(n?)

Capture the next n frames into the buffer (default: sampleFrames). Captures post-effect output — artifacts are baked in.

dm.inject()

Replay the buffer instead of encoding the live feed. Plays once then stops unless sampleLoop is true. Also triggers recovery when recover is enabled.

dm.stopInject()

Stop injection and resume live encoding.

| Parameter | Type | Default | Description | |---|---|---|---| | dm.sampleFrames | integer | 1 | Default frame count for sample() | | dm.sampleLoop | boolean | false | true = loop buffer indefinitely, false = play once then stop |

Size

dm.setResolution(width, height)

Change the encoder/decoder resolution. Resets the codec pipeline.

Also: dm.width = 800; dm.height = 600;

dm.resizeCanvas(width, height)

Resize the output canvas. Does not reset the codec.

Display

Remove dm.canvas from the DOM.

dm.show() / dm.hide()

Shortcuts: show() calls mount(), hide() calls unmount().

dm.destroy()

Stop the loop, remove the canvas, close the encoder/decoder.

dm.mount(parent?)

Append dm.canvas to a DOM element (defaults to document.body). Positions canvas absolutely at top-left. Throws an error if parent is not an HTMLElement.

dm.unmount()

How it works

VP8/VP9/H.264/AV1 delta frames are encoded relative to a reference (the last keyframe the decoder received). Drop a frame before the decoder sees it and its reference stays stale — every subsequent delta is decoded against the wrong content, producing the characteristic datamosh smear.

drop() triggers this deliberately. recover schedules a clean keyframe after N frames to restore normal output.

corrupt() works differently: it zeroes out a region of a frame's encoded bitstream before decode. The decoder conceals the loss using surrounding block data, producing block corruption and color drift.

hold freezes the canvas by dropping all incoming chunks. On release, the pipeline skips keyframes and waits for the first delta to composite over the frozen image — a brief smear-on-freeze effect — before recovering.