Examples

Open an example to try it, or view its source to build your own layout, overlay, or controls. Some examples need devices, account credentials, or a connected VDO.Ninja session.

64 examples

Layouts & switching

  • 360° viewer

    Look around a live 360-degree stream or a local panorama/video.

    360.html
  • Draggable views

    Arrange multiple video windows by dragging and resizing them.

    draggable.html
  • Dual view

    Place two video feeds together in one view.

    dual.html
  • Iframe grid

    Arrange a set of page URLs in a responsive grid.

    grid.html
  • Scene mixer

    Place streams into a custom scene layout.

    mixer.html
  • Multiple rooms

    Monitor several director rooms from a single page.

    multi.html
  • Video switcher

    Switch the visible feed between selected stream IDs.

    custom_video_switcher.html
  • Player views

    Choose which player point-of-view feeds to show.

    esports.html
  • Round-robin viewer

    Cycle through the participants in a room.

    roundrobin.html
  • Rotated output

    Rotate a scene for a portrait or sideways display.

    rotated.html
  • Sliding zoom

    Adjust the position and zoom of an embedded view.

    slidingzoom.html
  • Capture preview

    Open a local preview for fullscreen window capture.

    zoom.html

Controls & devices

  • Add to scene

    Add or remove known streams from a scene.

    addtoscene.html
  • Large mute button

    Give a guest a simple microphone mute control.

    bigmutebutton.html
  • Layout controls

    Send layout commands to a director scene.

    control.html
  • Guest mute controls

    Control the audio of a guest in an embedded scene.

    muteguestiframe.html
  • Microphone switcher

    Switch between the microphones of two guests.

    switchmics.html
  • OBS remote

    Control OBS through a VDO.Ninja connection.

    obsremote.html
  • OBS remote setup

    Configure the OBS WebSocket connection for remote control.

    obs_remote/index.html
  • OBS control interface

    Open the companion interface for the OBS remote example.

    obs_remote/interface.html
  • Slide remote

    Send presentation controls while showing a live slide view.

    powerpoint.html
  • Camera PTZ

    Send pan, tilt, and zoom commands to a remote camera.

    ptz.html
  • Game controller display

    Show gamepad input as an on-screen controller.

    gamecontroller.html
  • MIDI controls

    Use MIDI input to trigger VDO.Ninja actions.

    midi.html
  • WebHID controls

    Try controls from a compatible USB HID device.

    webhid.html
  • Teleprompter controller

    Send script text and settings to the talent display.

    teleprompt.html
  • Teleprompter display

    Show the script received from the controller.

    teleprompter.html

Overlays & sensors

  • Chat shout overlay

    Show chat messages in a large text overlay.

    chat.html
  • Chat overlay

    Display chat messages with configurable presentation.

    chatoverlay.html
  • Guest labels

    Build a lower-third overlay from guest labels.

    custom_labels.html
  • Custom overlay

    Change overlay artwork using connection information.

    custom_overlay.html
  • Label-only view

    Display a guest label without the video.

    labelonly.html
  • Overlay page

    Combine an external overlay page with a video feed.

    overlay.html
  • Logo overlay

    A minimal image overlay example.

    test_overlay.html
  • Status ticker

    Display incoming status messages as a ticker.

    status.html
  • Waiting screen

    Show a standby message while waiting for a feed.

    waitingroom.html
  • GPS mini-map

    Display a circular map with heading, speed, and street information.

    gtamap.html
  • Sensor overlay

    Put location and speed information over a video feed.

    sensoroverlay.html
  • Mobile sensors

    Display sensor readings alongside camera input.

    sensors.html

Chat & integrations

  • IRL chat and camera

    Publish a mobile camera while reading Twitch, Kick, or YouTube chat.

    irl.html
  • Kick chat and video

    Show a Kick chat beside a VDO.Ninja feed.

    kick.html
  • YouTube chat and video

    Put YouTube live chat and a video feed in the same window.

    youtube.html
  • Social chat

    Combine social chat integrations with a video feed.

    socal.html
  • Gemini vision chat

    Try live audio and video interaction with Gemini using your API key.

    googleai.html
  • WebXR sender

    Send camera video and AR pose information from a compatible device.

    webxr-ar-sender.html
  • WebXR receiver

    Receive an AR feed and display tracked 3D content.

    webxr-ar-receiver.html

API & media tools

  • Data-only room

    Exchange messages between two room participants without camera or microphone access.

    room-data.html
  • File-sharing previews

    Publish a media file with a small or hidden preview.

    fileshare-preview.html
  • Mixer scene recording

    Record a mixed scene with guest video and audio.

    mixer-recording.html
  • Mixer guest controls

    Open co-director controls inside the mixer using a private example room.

    mixer-guest-controls.html
  • Buffer3 audio sync (experimental)

    Compare receiver buffering modes and fixed audio delay.

    buffer3.html
  • API sandbox

    Explore commands for embedding and controlling VDO.Ninja.

    sandbox.html
  • Remote API controls

    Try remote actions and control macros.

    remoteapi.html
  • Inbound statistics

    Request connection statistics from an embedded viewer.

    iframe.inbound-stats.html
  • Outbound statistics

    Open the hosted example to inspect an embedded publisher's connections.

    iframe.outbound-stats.html
  • QR connection tool

    Connect devices using QR codes.

    ../qr.html
  • Peer data example

    Exchange data between paired embedded pages.

    p2p.html
  • Canvas capture

    Copy a received video view to a canvas for further processing.

    rip.html
  • Buffer controls

    Explore receiver buffering through the IFRAME API.

    chunked-buffer-iframe-api.html
  • Music synchronization

    Delay incoming video to align it with separately played music.

    music-sync-buffer-demo.html
  • Video degradation preference

    Compare how video adapts when bandwidth is limited.

    degradation-preference.html
  • Noise gate settings

    Convert OBS noise gate values for use with VDO.Ninja.

    noisegate.html
  • Password hash tool

    Generate a password hash for a VDO.Ninja link.

    changepass.html
  • Link builder

    Create a link for sharing a camera feed.

    simplelink.html
  • SDP compression

    Inspect and experiment with compressed connection descriptions.

    testsdp.html
  • Manual connection lab

    Explore manual message exchange and connection setup.

    wireless.html

Hosted tools & redirects