$ show opentok/opentok-web-samples
This repository is a collection of sample applications demonstrating features of the OpenTok.js (Vonage Video API) SDK. It contains 14 standalone sub-projects, each focusing on a specific capability: basic video chat, archiving, signaling, background blur, audio/video transformers, canvas publishing, device selection, stereo audio, stream filters, and end-to-end encryption. The samples are implemented in vanilla JavaScript with HTML/CSS, and a Node.js server for the encryption demo. The code is well-structured and serves as reference implementations for developers integrating Vonage video into web applications. The most technically interesting components involve media processing with Web Workers, Canvas pixel manipulation, and the Web Audio API for stereo streaming.
The LLM identified 5 files worth highlighting for reuse:
A self-contained module implementing grayscale, sepia, and invert image filters via pixel-level manipulation of Uint8ClampedArray data. It provides a clean filter selection pattern and can be extracted for use in any canvas-based video processing pipeline. The implementation uses standard luminosity and sepia algorithms, making it a reusable building block for custom video filters.
Implements a low-pass audio filter using the Web Audio API's AudioData format. Processes audio per-channel with a simple RC filter (alpha = dt/(rc+dt)) and demonstrates the transformer pattern expected by the MediaProcessor API. The file is isolated, with no external dependencies beyond standard Web APIs, and can be reused in any project requiring audio transformation.
A video transformer that applies a threshold filter (converts to black/white based on luminance) using OffscreenCanvas and VideoFrame. It demonstrates the pattern for frame-by-frame video processing with the MediaProcessor API, including proper canvas context initialization and frame lifecycle management. This pattern is reusable for any per-frame video effect.
A reusable wrapper class that creates a Web Worker and delegates MediaProcessor operations (init, transform, destroy) via postMessage. It abstracts the complexity of worker communication and can be extracted to offload any media processing to a separate thread, following the same pattern used in the audio and video transformer samples.
Demonstrates creation of a custom audio stream from an MP3 file using the Web Audio API, including stereo panning with a StereoPannerNode. It shows how to fetch an audio file, decode it, create a looped buffer source, and connect to a MediaStreamDestination. The pattern is reusable for streaming any audio source with effects (e.g., audio files, generated tones) into a WebRTC call.