### Project Setup and Commands

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/CONTRIBUTING.md

Commands to clone the repository, install dependencies, and run various development tasks like testing, building, and linting.

```bash
git clone https://github.com/Recallatk/roughcut-videocontext.git
cd roughcut-videocontext  # or your fork
npm install
npm test          # run unit tests
npm run build     # build dist/
npm run typecheck  # run TypeScript checks
npm run lint      # run ESLint
```

--------------------------------

### Quick Start Video Composition

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Basic example demonstrating how to set up VideoContext, load two videos, apply a crossfade transition, and play the composition. Ensure the canvas element with id 'canvas' exists in your HTML.

```js
import VideoContext from "@videocontext/core";

const canvas = document.getElementById("canvas");
const ctx = new VideoContext(canvas);

const video1 = ctx.video("./video1.mp4");
video1.start(0);
video1.stop(4);

const video2 = ctx.video("./video2.mp4");
video2.start(2);
video2.stop(6);

const crossFade = ctx.transition(VideoContext.DEFINITIONS.CROSSFADE);
crossFade.transition(2, 4, 0.0, 1.0, "mix");

video1.connect(crossFade);
video2.connect(crossFade);
crossFade.connect(ctx.destination);

ctx.play();
```

--------------------------------

### Install VideoContext Core

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Install the VideoContext core package using npm.

```sh
npm install @videocontext/core
```

--------------------------------

### Install Dependencies

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Installs project dependencies using npm.

```bash
npm install
```

--------------------------------

### VideoNode Usage

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Create and connect a VideoNode to the destination. Specify the video source file and its start and stop times.

```js
const videoNode = ctx.video("./video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(4);
```

--------------------------------

### AudioNode Usage

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Create and connect an AudioNode to the destination. Specify the audio source file and its start and stop times.

```js
const audioNode = ctx.audio("./audio.mp3");
audioNode.connect(ctx.destination);
audioNode.start(0);
audioNode.stop(4);
```

--------------------------------

### Define Media Fragment URL

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/AdvancedExamples.md

Example of a URL formatted to request a specific fragment of a video, including start and end times for playback.

```JavaScript
const urlForMediaFragment = "./BigBuckBunny.mp4#t=5,12"
```

--------------------------------

### Conventional Commit Message Examples

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/CONTRIBUTING.md

Examples of commit messages following the Conventional Commits specification, indicating the type of change made.

```text
feat: add adapter boundary for app integration
fix: restore _element guard in _seek
chore: remove jsdoc, update serve
docs: rewrite contributing guide
test: add cache lifecycle integration tests
```

--------------------------------

### ImageNode Usage

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Create and connect an ImageNode to the destination. Specify the image source file and its start and stop times.

```js
const imageNode = ctx.image("./photo.png");
imageNode.connect(ctx.destination);
imageNode.start(0);
imageNode.stop(4);
```

--------------------------------

### Custom HLS Source Node

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Example of creating a custom source node for HLS streams by extending VideoContext.NODES.VideoNode. This includes loading the HLS source and managing the HLS.js instance.

```js
import Hls from "hls.js";

class HLSNode extends VideoContext.NODES.VideoNode {
    constructor(
        src,
        gl,
        renderGraph,
        currentTime,
        playbackRate,
        sourceOffset,
        preloadTime,
        hlsOptions = {}
    ) {
        const video = document.createElement("video");
        super(video, gl, renderGraph, currentTime, playbackRate, sourceOffset, preloadTime);
        this.hls = new Hls(hlsOptions);
        this.hls.attachMedia(video);
        this._src = src;
        this._displayName = "HLSNode";
        this._elementType = "hls";
    }

    _load() {
        if (!this._loadTriggered) {
            this.hls.loadSource(this._src);
        }
        super._load();
    }

    destroy() {
        if (this.hls) this.hls.destroy();
        super.destroy();
    }
}

const hlsNode = ctx.customSourceNode(HLSNode, "https://example.com/stream.m3u8");
hlsNode.start(0);
hlsNode.stop(60);
hlsNode.connect(ctx.destination);
ctx.play();
```

--------------------------------

### Control Individual SourceNode Playback

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Manage the playback of an individual SourceNode. Use `start()` to add to the timeline and `stop()` to signal the end. `clearTimelineState()` resets the node to a 'waiting' state.

```JavaScript
videoNode.start();              //start playback now.

videoNode.start(10);            //start playback in 10 seconds.
videoNode.clearTimelineState(); // stops any upcoming start events and sets state to "waiting"

videoNode.stop();               //stop playback now.
videoNode.stop(10);             //stop playback in 10 seconds.
videoNode.clearTimelineState(); // stops playback and sets state to "waiting"
```

--------------------------------

### Custom VideoNode for Media Fragments

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/AdvancedExamples.md

Extends VideoNode to support media fragments for looping. Parses start and end times from the URL hash and integrates with the VideoContext rendering loop. Note: This implementation relies on private VideoNode APIs and may break in future versions.

```JavaScript
import VideoContext from "videocontext";
import parse from "url-parse";

class MediaFragmentVideoNode extends VideoContext.NODES.VideoNode {
  constructor(
    src,
    gl,
    renderGraph,
    currentTime,
    sourceOffset,
    preloadTime,
    options
  ) {
    /**
     * In this example we're just supporting part of media fragments
     * spec, and only when the element is set to `loop`.
     *
     * First, parse the start and end loop times from the src url
     */
    const fragment = 
      options.loop &&
      parse(src)
        .hash.split("&")
        .filter(str => str.includes("t="))
        .map(str => str.split("t=")[1])
        .map(values => values.split(",").map(parseFloat))
        .map(([start, end]) => ({ start, end }))[0];

    /**
     * We follow the VideoNode implementation pretty closely when
     * calling `super`.
     *
     * The only difference:
     *   - hard code values for playback rate and mediaelement cache
     *   - add our fragement `start` time to the the `sourceOffset`
     **/
    super(
      src,
      gl,
      renderGraph,
      currentTime,
      1 /* playback rate */,
      sourceOffset + (fragment && fragment.start),
      preloadTime,
      undefined /* mediaelement cache */,
      options
    );

    /**
     * Next we update add a couple of custom properties to
     * our class. These will only be accessed within our subclass
     */
    if (fragment) {
      this._loopStart = fragment.start;
      this._loopDuration = fragment.end - fragment.start;
    }

    this._displayName = "MediaFragmentVideoNode";
  }

  /**
   * We extend the VideoNode `_update` method to implement our loop.
   *
   *
   * Normal caveat with custom source nodes: you are tying your
   * code to a private API, be careful when upgrading videocontext! accessed
   *
   * Our `_update` signature matches that of `VideoNode._update`
   * @param {number} currentTime
   * @param {boolean} triggerTextureUpdate
   */
  _update(currentTime, triggerTextureUpdate = true) {
    super._update(currentTime, triggerTextureUpdate);

    /**
     * if no fragment is set `_update` behaves as before.
     * otherwise:
     */
    if (this._loopStart) {
      const loopEndTime = this._startTime + this._loopDuration;
      if (this._currentTime >= loopEndTime) {
        // tell the node that it should start again from now
        this._startTime = loopEndTime;
        // seek the element back to the start
        // sourceOffset already has the loop start included
        this._element.currentTime = this._sourceOffset || 0;
      }
    }
  }
}

const START_LOOP_TIME = 19;
const END_LOOP_TIME = 21;
const MEDIA_FRAGMENT_URL = `http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=${START_LOOP_TIME},${END_LOOP_TIME}`;

// Setup the video context.
const canvas = document.getElementById("canvas");
const ctx = new VideoContext(canvas);

const videoNode1 = ctx.customSourceNode(
  MediaFragmentVideoNode,
  MEDIA_FRAGMENT_URL,
  0,
  4,
  {
    volume: 0,
    loop: true
  }
);

videoNode1.startAt(0);
videoNode1.connect(ctx.destination);

ctx.play();

```

--------------------------------

### CanvasNode Usage

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Create and connect a CanvasNode to the destination using an existing HTML canvas element. Specify its start and stop times.

```js
const srcCanvas = document.getElementById("input-canvas");
const canvasNode = ctx.canvas(srcCanvas);
canvasNode.connect(ctx.destination);
canvasNode.start(0);
canvasNode.stop(4);
```

--------------------------------

### Build with Watch Mode

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Builds the project with watch mode enabled for development.

```bash
npm run dev
```

--------------------------------

### Initialize VideoContext

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Instantiate a new VideoContext object to manage synchronized media playback.

```JavaScript
var ctx = new VideoContext()
```

--------------------------------

### Set Up Video Transitions and Compositing

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Defines a sequence of video nodes and transitions to create a timeline effect. This includes setting up transition nodes, connecting them to an output, and registering a listener for render updates. Note the use of `transition` and `progress` properties for controlling the animation.

```javascript
var v1Node, v2Node, v3Node; //SourcesNodes
var v1v2Tranisition, v2v3Transition = ctx.createTransition(VideoContext.Transitions.XFADE); //Tr
var outputComposit;

v1Node.connect(v1v2Transition, 0);
v2Node.connect(v1v2Transition, 1);

v1v2Transition.transistion(2,1);


v2Node.connect(v2v3Transition, 0);
v3Node.connect(v2v3Transition, 1);

v2v3Transition.transition(5,1);


v1v2Tranisition.connect(outputComposit,0);
v2v3Tranisition.connect(outputComposit,1);




ctx.registeLisner("render", function(currentTime){
   tranistionNode.progres = 0.0 - 1.0; 
});


tranistion.transition(time, duration, function(progress){
    return 0.0-10;
});
traniston.progress = 0.5;
```

--------------------------------

### Connect Inputs by Name or Index

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Demonstrates connecting video nodes to a transition node using either named inputs ('image_a') or by index (1).

```javascript
videoNode1.connect(crossfade, "image_a"); // by name
videoNode2.connect(crossfade, 1); // by index
```

--------------------------------

### Initialize VideoContext on Window Load

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/test/e2e/html/index.html

Initializes the VideoContext when the window loads. Catches and logs any errors during initialization.

```javascript
window.onload = function () { try { window.ctx = new VideoContext(canvas); } catch (e) { window.ctxError = e.message || String(e); console.error("VideoContext init failed:", e); } };
```

--------------------------------

### Run Unit and Integration Tests

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Executes unit and integration tests for the project.

```bash
npm test
```

--------------------------------

### VideoContext Constructor Options

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Configure VideoContext behavior by passing an options object to the constructor. Options include manual update control, end-on-last-source behavior, video element caching, stall detection, and seek debouncing.

```js
const ctx = new VideoContext(canvas, {
    manualUpdate: false, // drive updates yourself via ctx.update()
    endOnLastSourceEnd: true, // auto-pause when the last source ends
    useVideoElementCache: true, // reuse <video> elements
    videoElementCacheSize: 6, // how many to keep pooled
    stallTimeout: 3000, // ms before a stalled source is skipped
    seekDebounce: 200 // ms debounce for seek operations
});
```

--------------------------------

### Create VideoSourceNode

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Create a VideoSourceNode by providing either a URL string or an existing DOM element. The context manages element lifecycle when a URL is provided.

```JavaScript
var videoNode  = ctx.createVideoSourceNode(element);
var videoNode  = ctx.createVideoSourceNode(str);
```

--------------------------------

### Create and Connect Video Nodes and Effects

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Initializes video sources, effect nodes, and compositing nodes, then connects them to form a basic video processing pipeline. Ensure correct node types and connection order.

```javascript
var presenterSource = ctx.createVideoSourceNode("presenter.mp4");
var backgroundSource = ctx.createVideoSourceNode("background.png");
var titleSource = ctx.createVideoSourceNode("title.mp4");


var effectNode = ctx.createEffectNode(VideoContext.Effects.GreenScreen);
var transitionNode = ctx.createTransitionNode(VideoContext.Transitions.Crossfade);
var compositingNode = ctx.createCompositingNode(VideoContext.Composit.AlphaBlend);


presenterSource.connect(effectNode);
effectNode.connect(compositingNode,0);
backgroundSource.connect(compositingNode,1)
```

--------------------------------

### Format Code

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Formats the code using Prettier.

```bash
npm run format
```

--------------------------------

### Create Compositing Node

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Creates a COMBINE compositor node to layer multiple video sources into a single output. Connects three video nodes to the compositor.

```javascript
const combine = ctx.compositor(VideoContext.DEFINITIONS.COMBINE);

videoNode1.connect(combine);
videoNode2.connect(combine);
videoNode3.connect(combine);
combine.connect(ctx.destination);
```

--------------------------------

### MediaNode Implicit FrameSource Implementation

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/docs/webcodecs-boundary.md

Illustrates how the existing `MediaNode` implicitly implements the `FrameSource` interface through its internal methods and properties. This mapping serves as a reference for creating new frame source implementations.

```html
<table><thead><tr><th>Adapter method</th><th>Current equivalent</th></tr></thead><tbody><tr><td><code>seek(t)</code></td><td><code>_element.currentTime = t</code></td></tr><tr><td><code>play(rate)</code></td><td><code>_element.playbackRate = rate; _element.play()</code></td></tr><tr><td><code>pause()</code></td><td><code>_element.pause()</code></td></tr><tr><td><code>getCurrentFrame()</code></td><td><code>_element</code> (the video element itself is the TexImageSource)</td></tr><tr><td><code>hasNewFrame</code></td><td><code>_hasNewFrame</code> (gated by rVFC)</td></tr><tr><td><code>destroy()</code></td><td><code>_unload()</code></td></tr></tbody></table>
```

--------------------------------

### Create Video Transition with TransitionNode

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Creates a CROSSFADE transition and tweens the 'mix' property from 0 to 1 over a specified time range. Connects two video nodes to the transition.

```javascript
const crossfade = ctx.transition(VideoContext.DEFINITIONS.CROSSFADE);

// Transition the "mix" property from 0 → 1 between t=8s and t=10s
crossfade.transition(8.0, 10.0, 0.0, 1.0, "mix");

videoNode1.connect(crossfade);
videoNode2.connect(crossfade);
crossfade.connect(ctx.destination);
```

--------------------------------

### Create ImageSourceNode

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Create an ImageSourceNode by providing either a URL string or an existing DOM element. The context manages element lifecycle when a URL is provided.

```JavaScript
var imageNode  = ctx.createImageSourceNode(element);
var imageNode  = ctx.createImageSourceNode(str);
```

--------------------------------

### Capture Frame During Transition with VideoContext

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/AdvancedExamples.md

Captures a specific frame from a video transition by registering a timeline callback. Adjusts playback rate for precision and seeks to a time just before capture. Ensure canvas dimensions are set for optimal rendering.

```javascript
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../dist/videocontext.js"></script>
</head>
<body>
    <!--
        A canvas needs to define its width and height to know how many pixels you can draw onto it.
        Its CSS width and height will define the space it takes on screen
        If omitted, the canvas dimensions will be 300x150 and your videos will not rendered at their
        optimal definition
        https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
    -->
    <canvas id="canvas" width="1280" height="720" style="width: 852px; height: 480px"></canvas>

    <!-- This image element will be populated with the captured frame -->
    <img id="snapshot" />

    <script type="text/javascript">
        window.onload = function() {
            // we're going to capture halfway through a horizontal wipe transition
            var TIME_TO_CAPTURE = 3;

            var canvas = document.getElementById("canvas");
            var videoCtx = new VideoContext(canvas);

            // set the first video to run from 0 - 4 seconds
            var videoNode1 = videoCtx.video("./video1.mp4");
            videoNode1.start(0);
            videoNode1.stop(5);

            // set the second video to run from 0 - 4 seconds
            var videoNode2 = videoCtx.video("./video2.mp4");
            videoNode2.start(0);
            videoNode2.stop(5);

            /**
             * add a horizontal wipe transition from `videoNode1` to `videoNode2`
             * to start 2 seconds in and finish 2 seconds later.
             */
            var horizontalWipe = videoCtx.transition(
                VideoContext.DEFINITIONS.HORIZONTAL_WIPE
            );
            horizontalWipe.transition(2, 4, 0.0, 1.0, "mix");

            // set-up the processing chain
            videoNode1.connect(horizontalWipe);
            videoNode2.connect(horizontalWipe);
            horizontalWipe.connect(videoCtx.destination);

            // register a callback at the time we want to capture
            videoCtx.registerTimelineCallback(TIME_TO_CAPTURE, () => {
            // stop the player from progressing past this frame
            videoCtx.pause();

            // capture the canvas as an image
            var img = canvas.toDataURL("image/jpeg", 1.0);

            // apply it to our image tag
            document.getElementById("snapshot").setAttribute("src", img);
            });

            /**
             * We slow down the playback rate to increase the chance of the registered
             * timeline callback always executing on exactly the same frame.
             *
             * This value must be within the range 0.0625 - 16, otherwise Chrome will throw
             * an error, see https://developers.google.com/web/updates/2017/12/chrome-63-64-media-updates#unsupported-playbackRate-raises-exception
             */
            videoCtx.playbackRate = 0.0625;

            /**
             * Seeking directly to the time won't execute the registered
             * callback, so we seek to just before the target time and play
             * through.
             */
            videoCtx.currentTime = TIME_TO_CAPTURE - 0.05;

            // start playback and wait for the callback
            videoCtx.play();

        };
    </script>
</body>
</html>
```

--------------------------------

### Create CanvasSourceNode

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Create a CanvasSourceNode by providing an existing DOM element. The user is responsible for the lifecycle of the provided element.

```JavaScript
var canvasNode = ctx.createCanvasSourceNode(element);
```

--------------------------------

### Lint Code

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Runs ESLint to check for code style and potential errors.

```bash
npm run lint
```

--------------------------------

### Render Video Timeline Utility

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

A utility function to render a video timeline using the provided VideoContext and CanvasContext. This is a helper for visualizing or outputting the video composition.

```javascript
VideoContext.Utils.renderTimeline(videoCtx, canvasCtx);
```

--------------------------------

### SourceNode Playback States

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Defines the possible playback states for a SourceNode: 'waiting', 'sequenced', 'playing', or 'ended'.

```JavaScript
enum SourceNodePlaybackState {"waiting", "sequenced", "playing", "ended"};
```

--------------------------------

### Current Video Frame Upload

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/docs/webcodecs-boundary.md

The engine currently uploads video frames using `gl.texImage2D` with an `HTMLVideoElement`. Frame timing is managed by `requestVideoFrameCallback`.

```typescript
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, element);
```

--------------------------------

### Basic Effect Definition Structure

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Provides the basic structure for defining a custom video effect, including shaders, properties, and inputs.

```javascript
const effectDefinition = {
    title: "", // Effect name
    description: "", // What it does
    vertexShader: "", // GLSL vertex shader
    fragmentShader: "", // GLSL fragment shader
    properties: {}, // Uniforms exposed as JS properties
    inputs: ["u_image"] // sampler2D uniform names for texture inputs
};
```

--------------------------------

### Run End-to-End Tests

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Runs Playwright end-to-end tests.

```bash
npm run test-e2e
```

--------------------------------

### VideoContext API

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

The VideoContext synchronizes all media played through it. It provides methods to control the playback of all associated media.

```APIDOC
## VideoContext

### Description
Manages synchronized playback of multiple media sources.

### Methods
- `new VideoContext()`: Initializes a new VideoContext.
- `play()`: Plays all media sources synchronized within the context.
- `pause()`: Pauses all media sources synchronized within the context.

### Properties
- `currentTime` (number): Gets or sets the current playback time for all media sources.
```

--------------------------------

### FFmpeg Encoding for Video

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Command to encode video with a fast-decode profile using FFmpeg for optimal performance with VideoContext.

```sh
ffmpeg -i input.mp4 -tune fastdecode output.mp4
```

--------------------------------

### Define Custom Effect with GLSL Shaders

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Defines a custom 'Monochrome' effect using GLSL vertex and fragment shaders. Allows adjustment of input and output color mixes.

```javascript
const monochromeDefinition = {
    title: "Monochrome",
    description: "Single-chroma filter with adjustable color mix.",
    vertexShader: `
        attribute vec2 a_position;
        attribute vec2 a_texCoord;
        varying vec2 v_texCoord;
        void main() {
            gl_Position = vec4(vec2(2.0,2.0)*a_position-vec2(1.0, 1.0), 0.0, 1.0);
            v_texCoord = a_texCoord;
        }`,
    fragmentShader: `
        precision mediump float;
        uniform sampler2D u_image;
        uniform vec3 inputMix;
        uniform vec3 outputMix;
        varying vec2 v_texCoord;
        void main(){
            vec4 color = texture2D(u_image, v_texCoord);
            float mono = color[0]*inputMix[0] + color[1]*inputMix[1] + color[2]*inputMix[2];
            color[0] = mono * outputMix[0];
            color[1] = mono * outputMix[1];
            color[2] = mono * outputMix[2];
            gl_FragColor = color;
        }`,
    properties: {
        inputMix: { type: "uniform", value: [0.4, 0.6, 0.2] },
        outputMix: { type: "uniform", value: [1.0, 1.0, 1.0] }
    },
    inputs: ["u_image"]
};
```

--------------------------------

### Control Global Playback

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

Control the playback of all media synchronized by the VideoContext. Use `currentTime` to seek through the timeline.

```JavaScript
ctx.play();     //play all
ctx.pause();    //pause all
ctx.currentTime //set to seek through timeline
```

--------------------------------

### Apply GPU Shader Effect with EffectNode

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Applies a built-in MONOCHROME effect to a video source and connects it to the destination. Adjusts output mix for color intensity.

```javascript
const sepiaEffect = ctx.effect(VideoContext.DEFINITIONS.MONOCHROME);
sepiaEffect.outputMix = [1.25, 1.18, 0.9];

videoNode.connect(sepiaEffect);
sepiaEffect.connect(ctx.destination);
```

--------------------------------

### SourceNode API

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

SourceNodes represent individual media elements (Image, Video, Canvas) that can be added to the VideoContext timeline. Users can create nodes from URLs or existing DOM elements.

```APIDOC
## SourceNode

### Description
Represents a media source (Image, Video, Canvas) that can be added to the VideoContext timeline.

### Creating SourceNodes
- `ctx.createVideoSourceNode(element: HTMLVideoElement | string)`: Creates a video source node.
- `ctx.createImageSourceNode(element: HTMLImageElement | string)`: Creates an image source node.
- `ctx.createCanvasSourceNode(element: HTMLCanvasElement | string)`: Creates a canvas source node.

### Properties
- `state` (SourceNodePlaybackState): Read-only property indicating the current playback state ('waiting', 'sequenced', 'playing', 'ended').

### Methods
- `start(delay?: number)`: Adds the node to the timeline and starts playback. If `delay` is provided, playback starts after the specified seconds. Can only be called when state is 'waiting'.
- `stop(delay?: number)`: Signals the end of playback for the node. If `delay` is provided, playback stops after the specified seconds. Can only be called when state is 'sequenced' or 'playing'. If called in 'sequenced' state, resets state to 'waiting'.
- `clearTimelineState()`: Stops any upcoming start events, removes the node from the timeline, and sets its state to 'waiting'.
```

--------------------------------

### FrameSource Interface Definition

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/docs/webcodecs-boundary.md

Defines the minimal interface for a frame source, including methods for seeking, playback control, frame retrieval, and resource management. This interface is intended to abstract away the underlying frame delivery mechanism.

```typescript
interface FrameSource {
  /** Seek the source to a media time (seconds). */
  seek(mediaTime: number): void;

  /** Start continuous frame delivery. */
  play(rate: number): void;

  /** Stop frame delivery. */
  pause(): void;

  /**
   * Get the current frame for GPU upload.
   * Returns a TexImageSource (HTMLVideoElement | VideoFrame | ImageBitmap | …)
   * or null if no new frame is available.
   */
  getCurrentFrame(): TexImageSource | null;

  /** Whether a new frame is available since the last getCurrentFrame() call. */
  readonly hasNewFrame: boolean;

  /** Clean up resources (close VideoFrames, release decoder, etc.) */
  destroy(): void;
}
```

--------------------------------

### ProcessingNode API

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/plan.md

ProcessingNodes are used for applying effects, transitions, and compositions to media streams within the VideoContext.

```APIDOC
## ProcessingNode Types

### TransitionNode
- **Inputs**: 2 (Video to transition from, Video to transition to)
- **Output**: 1 (Result of the transition)
- **Required Parameters**: `progress` (number, 0 to 1)

### EffectNode
- **Inputs**: 1 (Video to apply effect to)
- **Output**: 1 (Result of the effect)
- **Required Parameters**: None

### CompositingNode
- **Inputs**: * (Any number of input nodes, render order by index)
- **Output**: 1 (Result of the composition)
- **Required Parameters**: None
```

--------------------------------

### TypeScript Strict Check

Source: https://github.com/recallatk/roughcut-videocontext/blob/main/README.md

Performs a strict type check using TypeScript.

```bash
npm run typecheck
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.