Skip to content

Instantly share code, notes, and snippets.

@steveseguin

steveseguin/vdoninja-documentation.md

Created September 2, 2025 04:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save steveseguin/074b4ea1bfcacf0e01f31256929f734a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save steveseguin/074b4ea1bfcacf0e01f31256929f734a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vdoninja-documentation.md

Conventions & Limits (v28)

Encoding

  • URL parameters that carry freeform text or URLs should be URL‑encoded. Examples: label, password, endpage, avatarimg, bgimage, overlayimage, discordwebhook, WHIP/WHEP URLs.
  • The app decodes many fields internally via decodeURIComponent(...) (e.g., images, webhooks, endpage) and encodes some (e.g., password) before transport. When in doubt, encode.
  • Booleans accept: true (presence), or strings true/1/yes/on; falsy strings false/0/no/off disable.
  • Lists: comma‑separated (e.g., view=SID1,SID2, include=SID3,SID4).

IDs and Names

  • Stream ID (push/id/permaid):
    • Allowed chars: A‑Z, a‑z, 0‑9, _ (non‑word characters are replaced by _).
    • Max length: trimmed to 70 characters (practical cap ~64 before internal salting).
    • Auto‑generation: if empty, an 8‑char ID is generated. IDs shorter than 3 or test are warned as insecure on vdo.ninja if using default password.
    • Screenshare ID (screenshareid) follows the same sanitization.
  • Room name (room/r/roomid):
    • Allowed chars: A‑Z, a‑z, 0‑9, _ (non‑word characters become _).
    • Max length: 30 characters (longer names are trimmed with a warning).
  • Label (label/l): sanitized HTML‑safe and truncated to 100 chars.
  • Passwords: accepted as provided; internally encodeURIComponent is applied. Hash/CRC checks use a maximum of 6 characters.

Viewer selection & suffixes

  • view accepts multiple IDs, comma‑separated.
  • :s suffix on an ID allows only its screen‑share track (e.g., view=ID1,ID2:s).
  • include can add allowed IDs on top of view.

LAN, STUN/TURN, and relays

  • LAN by default: WebRTC negotiates host candidates automatically; peers on the same network typically connect over LAN without extra parameters.
  • Force LAN only: &lanonly prefers local/host candidates and avoids external routes.
  • Force relays/turn: &privacy/&relay sets iceTransportPolicy=relay and throttles bitrate caps to protect shared TURN. Use only with your own TURN if possible.
  • Candidate filtering/tcp: &and-icefilter and &and-tcp can restrict candidate types.

Timing and limits

  • retrytimeout: reconnect delay; clamped to a minimum of 5000 ms.
  • whipwait/whepwait: default 2000 ms; clamped to ≥0.
  • autoend: defaults to 10 minutes when present without a value.
  • audiobitrate: clamped to 510 kbps max; disabled on iOS.
  • maxvideobitrate/bitrate: auto‑adaptation may further constrain; privacy/relay mode caps to 4000–6000 kbps depending on context.

Boolean defaults by context

  • stats: on by default in some program views; passing 0/false/off disables.
  • showdirector: when numeric 2, forces video‑only; otherwise A/V.
  • IFrames: nohistory defaults to true inside IFRAME embeds.

Misc

  • Discord webhook: accepts full or shortened form; code normalizes to https://discord.com/api/webhooks/....
  • Endpage redirect: use endpage with a URL‑encoded link; optional endpagetimer delay (ms).
  • OBS fixes: obsfix is numeric (default 1) for progressively stronger workarounds.

FAQ (canonical answers)

  • Does VDO.Ninja support H.265/HEVC?
    • Yes, when the sending and receiving environments expose HEVC in WebRTC. Safari commonly supports HEVC publishing; modern Chrome can decode HEVC on many platforms. You can hint with &codec=h265 (or hevc). Actual selection depends on encoder/decoder availability. Test page: https://vdo.ninja/h265
  • Should I URL‑encode parameters?
    • Yes for free‑form strings and URLs (display names, passwords, image/overlay URLs, webhooks, redirect targets). The app decodes many of these; when in doubt, encode.
  • How long can stream IDs be, and what characters are allowed?
    • IDs are sanitized to alphanumerics and _; non‑word characters become _. IDs longer than ~64 are trimmed to 70; very short IDs (<3) or test warn as insecure when using default password.
  • Does it work automatically over LAN?
    • Yes. WebRTC will use local/host candidates by default when available; peers on the same network generally connect via LAN without flags. Use &lanonly to force LAN only; use &privacy/&relay to force relays (TURN).

Core Concepts

  • Purpose: VDO.Ninja provides ultra‑low latency, peer‑to‑peer WebRTC links to capture and route audio/video between browsers and production apps (e.g., OBS) with minimal infrastructure.
  • Topologies: Direct peer links, group rooms (director orchestrated), and optional relays/SFU helpers for scale or NAT traversal.
  • Entities: Sources (publishers), Viewers (subscribers), Rooms (collections orchestrated by a director), Director/Co‑Director (control plane), and External APIs (iframe/remote).
  • Identity: Streams use IDs (push/view). Rooms optionally use passwords/realms. Links encode behavior via URL parameters.
  • Media pipeline: Browser getUserMedia → WebRTC PeerConnection → ICE/STUN/TURN → remote peer. Codecs and bitrates adjust per constraints; stats are available live.
  • Latency vs resilience: Parameters trade off end‑to‑end latency, quality, and robustness (buffer, bitrate caps, codec choices, SVC/simulcast where available, packet loss strategies).
  • Hostnames: Production instances include vdo.ninja and alternates. Self‑hosting handshake servers is possible; peer traffic remains P2P unless relayed.

Key Terms

  • Stream ID: Unique identifier for a published stream; viewers subscribe via this ID. Auto‑generated if not provided for guests.
  • Room: Named space for multi‑party sessions managed by a director; can apply room‑wide settings (bitrate, permissions).
  • Director: Room controller; can configure layout, permissions, and visibility; supports co‑director.
  • Realm/Password: Namespace fence for stream/room IDs; the same ID in different realms does not collide.
  • Remote control: Optional API/iframe mechanisms to observe stats and invoke actions when permitted.

Notes

  • v28 is the basis for behavior; when docs conflict, prefer source-code/main.js and source-code/webrtc.js.

Code Insights (v28)

This page summarizes implementation details from source-code/main.js and source-code/webrtc.js that inform behavior beyond parameter descriptions.

  • Controls persistence and sticky sessions

    • sticky: Saves full URL to storage with a permission cookie and auto-redirects on load if accepted. Clears when declined.
    • UI logic avoids sticky in iframes/OBS and hides Save Room when in studio software.

  • Preview and autoplay nuances

    • nopreview flips to minipreview=3 on iOS to comply with autoplay/device policies; forcecontrols repeatedly re-applies <video controls> for stubborn UIs.
    • cleanviewer/cleanoutput disable some visual meters by design (e.g., audioMeterGuest=false).

  • Director quality and motion controls

    • showdirector: numeric value 2 locks video-only; otherwise enables both A/V.
    • bitratecutoff defaults to 300 kbps for low-bitrate handling; quality buttons toggle directorViewBitrate and pressed states.
    • motionswitch/motionrecord: motion thresholds (default 15) drive scene switching and motion-triggered recording.

  • Stats, connections, and overlays

    • showconnections enables remote guest connection counts as a stat; showlist toggles side list visibility in broadcast/program.
    • obsfix integer level (default 1) applies workarounds optimized for OBS Browser Source playback.

  • Reconnect and timers

    • retrytimeout has a floor of 5000 ms; autoreload (minutes) and autoreload24 (HH:MM) schedule a hangup/reload.
    • autoend defaults to 10 minutes if present with no value.

  • WHIP/WHEP and relays

    • whipwait/whepwait default to 2000 ms and clamp to 0 minimum; Cloudflare token helper (cftoken) rewrites to https://cloudflare.vdo.ninja/....
    • nomeshcast also toggled by nowhep; meshcastcode short alias mccode.

  • History and embedding behavior

    • nohistory default in iframes to reduce back/forward pollution; iframetarget controls postMessage origin enforcement.
    • transparent sets several CSS variables for full alpha compositing and removes margins in director layout.

  • Audio pipeline notes

    • Stereo/pro-audio modes disable echoCancellation, autoGainControl, and noiseSuppression automatically; mono coerces stereo modes and often sets audiobitrate=128.
    • micsamplerate and micsamplesize can override capture settings but are bound by device/browser support.
    • latency/micdelay enable WebAudio path and offset playout; panning triggers WebAudio spatialization.

  • Scene/view composition

    • include supports :s suffix to selectively allow screenshares; directoronly restricts views to director.
    • fakeguests/fakefeeds/fakeusers create test video elements sourced from ./media/fakesteve.webm for layout validation.

  • Security and auth

    • password + hash/crc/check perform a short hash verification (max 6 chars). Legacy salt obs.ninja is still supported as fallback.
    • requireencryption and secure affect UI/security posture; unsafe unlocks advanced operations.

  • Electron integration

    • When running in Electron, window.prompt is overridden via contextBridge if available; version updates are sent to the host.
    • deleteWhipOnLoad sessionStorage entry triggers a DELETE to a WHEP endpoint on load to clean up previous sessions.

  • Codec preferences (webrtc.js)

    • Viewers and iframe API can request codec preferences; H.264 gets special handling on Android/hardware encoders.
    • nacks_per_second and other stats are propagated for diagnosing packet loss; availableOutgoingBitrate informs adaptation.

Use these notes to augment parameter guidance with real behavior and defaults when clarifying with users.

Quick Start

Direct Link: Publish → View

  • Publish camera/mic: https://vdo.ninja/?push=MYID&label=Guest+1
  • View in OBS: https://vdo.ninja/?view=MYID&stats&buffer=0
  • Optional password realm: add &password=ROOMPASS to both links.

Room Workflow (Director + Guests)

  • Director: https://vdo.ninja/?director=myshow&password=ROOMPASS
  • Guest invite (auto-join): https://vdo.ninja/?room=myshow&password=ROOMPASS&label=Guest+1&autostart
  • Program view (scene/composite): https://vdo.ninja/?scene&room=myshow&password=ROOMPASS&stats

Screen Share With System Audio

  • Publisher: https://vdo.ninja/?push=SCREEN1&screenshare&label=Screen&autostart
  • Viewer: https://vdo.ninja/?view=SCREEN1&buffer=0&stats

Low Bandwidth / CPU Mode

  • Publisher: &bitrate=800&frameRate=15&width=640&height=360
  • Viewer: &buffer=150&stats

Remote Monitoring / Control

  • Enable remote: add &remote to the target link.
  • Monitor stats: use the speed test monitor link or a remote panel configured with the same API key if applicable.

Examples Library

Direct Publish/View

Program/Scene in Room

Screen Share with Stereo System Audio

Low‑Bandwidth Interview

Pro‑Audio Music Jam

Director Remote Monitoring

Meshcast for Larger Audience

Advanced Examples

Remote API (iframe postMessage)

  • Mute a specific stream ID:
    • parent.postMessage({ mute: { streamID: "SID123", state: true } }, "*")
  • Change layout to grid-4:
    • parent.postMessage({ layout: { name: "grid", slots: 4 } }, "*")
  • Request continuous stats to parent:
    • parent.postMessage({ requestStatsContinuous: { intervalMs: 1000 } }, "*")
  • Set target video bitrate for a connection:
    • parent.postMessage({ targetBitrate: { streamID: "SID123", kbps: 2500 } }, "*")
  • Fetch device list:
    • parent.postMessage({ getDeviceList: true }, "*")

HTTP/WSS Remote API (keyed)

  • Enable: add &api=MYKEY to session URLs and use a controller with the same key.
  • Example POST webhook on event (using &postapi):
    • ?postapi=https%3A%2F%2Fwebhook.site%2FMYID
    • Payloads include connection and stat updates; use to monitor and orchestrate.

Co‑Director Workflow

  • Create director link: https://vdo.ninja/?director=show&password=PASS
  • In the director UI, generate a co-director invite and select permissions (mute, remove, solo, scene control).
  • Share the co-director link with trusted operator; revoke by changing room/password.

Complex Multi‑Input Audio Routing

  • Two local mics and one USB interface into one guest:
    • ?push=BAND&adevice=USB+Mic,Line+In&channelcount=2&stereo=1&audiobitrate=192&autostart
    • Viewer: ?view=BAND&buffer=0&stats
  • Screen-share stereo DAW output while keeping mic mono for talkback:
    • ?push=LIVE&screenshare&screensharestereo=1&adevice=USB+Mic&monomic&autostart
    • Viewer: ?view=LIVE&buffer=120&stats

Global Parameters

Name: password | pass | pw | p

  • Scope: global/room
  • Type/Default: string | default per instance; may be absent
  • Description: Sets the realm/room password; impacts stream/room ID namespace and access validation. Supports hash checks via &hash.
  • Interactions: &hash, &salt, room/director links, guest auto‑generation of stream IDs.
  • Examples: ?room=show&password=ROOMPASS | ?view=ID&password=ROOMPASS
  • Source: main.js search: session.password = urlParams.get("password")

Name: hash | crc | check; salt

  • Scope: global/room
  • Type/Default: string (hash prefix) | optional salt
  • Description: Validates realm/room password via short hash; if mismatch, session is tainted and UI restricted.
  • Interactions: requires password. Legacy salt obs.ninja supported.
  • Examples: ?room=r1&password=pass&hash=abcd
  • Source: main.js search: generateHash(session.password + session.salt, 6)

Name: label | l | defaultlabel | labelsuggestion | ls

  • Scope: global
  • Type/Default: string | prompt if required
  • Description: Display name used in UI and director view; sanitized. defaultlabel prompts with suggestion.
  • Interactions: &showlabels, &sizelabel, director/scene labels.
  • Examples: ?label=Guest+One, ?defaultlabel=Jane
  • Source: main.js search: session.label = urlParams.get("label")

Name: remote | rem

  • Scope: global/viewer
  • Type/Default: boolean | false
  • Description: Grants permission for remote stat access and limited control by authorized tools.
  • Interactions: Speedtest monitor; remote control integrations.
  • Examples: ?view=ID&remote
  • Source: main.js search: session.remote = urlParams.get("remote")

Name: stats

  • Scope: viewer/global
  • Type/Default: boolean | true (varies by view)
  • Description: Enables/disables on‑screen stats overlay. 0/false/off disables.
  • Interactions: &remote, director view, program scene.
  • Examples: ?view=ID&stats
  • Source: main.js search: if (urlParams.get("stats") == "0")

Name: buffer | buffer2

  • Scope: viewer
  • Type/Default: number (ms) | 0
  • Description: Adds playback buffer to reduce glitching at the cost of latency. buffer2 includes RTT component.
  • Interactions: &sync, network jitter; OBS vs browser decoding differences.
  • Examples: ?view=ID&buffer=120, ?view=ID&buffer2=80
  • Source: main.js search: session.buffer = parseFloat(urlParams.get("buffer"))

Name: frameRate | fr | fps; maxframerate | mfr | mfps

  • Scope: source
  • Type/Default: number | defaults per device
  • Description: Requests capture/encode frame rate; maxframerate caps it.
  • Interactions: &bitrate, &width/height, CPU/GPU limits; Chrome may constrain.
  • Examples: ?push=ID&frameRate=30, ?push=ID&maxframerate=30
  • Source: main.js search: session.frameRate = urlParams.get("frameRate")

Name: videobitrate | bitrate | vb; maxvideobitrate | maxbitrate | maxvb | mvb

  • Scope: source
  • Type/Default: number (kbps) | 8000 default; max unset
  • Description: Target video bitrate and hard cap. Values may be adjusted by bandwidth estimation.
  • Interactions: Room bitrate controls; outbound overrides.
  • Examples: ?push=ID&bitrate=2500&maxbitrate=3000
  • Source: main.js search: session.bitrate = urlParams.get("videobitrate")

Name: audiobitrate | ab

  • Scope: source/viewer
  • Type/Default: number (kbps) | false (auto)
  • Description: Sets Opus target bitrate. iOS disables custom audio bitrates due to distortion risk.
  • Interactions: Echo/noise cancellation settings; stereo/mono.
  • Examples: ?push=ID&audiobitrate=128
  • Source: main.js search: session.audiobitrate = urlParams.get("audiobitrate")

Name: codec | codecs | videocodec

  • Scope: source
  • Type/Default: string | auto
  • Description: Preferred video codec selection (e.g., h264, vp9, av1) subject to browser support.
  • Interactions: Simulcast/SVC, hardware acceleration, OBS decoder.
  • Examples: ?push=ID&codec=h264
  • Source: main.js search: session.codecs = urlParams.get("codec")

Name: secure; requireencryption; unsafe

  • Scope: global
  • Type/Default: boolean | off
  • Description: Security toggles; secure enables enhanced UI guards, requireencryption enforces DTLS‑SRTP only, unsafe permits advanced operations.
  • Interactions: Iframe/script injections, device prompts, warnings.
  • Examples: ?secure, ?requireencryption
  • Source: main.js search: if (urlParams.has("secure"))

Name: retrytimeout

  • Scope: global
  • Type/Default: number (ms) | min 5000
  • Description: Sets reconnection retry timeout; values <5000 are clamped to 5000.
  • Examples: ?retrytimeout=8000
  • Source: main.js search: session.retryTimeout

Name: tz

  • Scope: interop/relay
  • Type/Default: number | false
  • Description: Legacy flag used with meshcast/turn; parsed as integer or false.
  • Examples: ?tz=2
  • Source: main.js search: session.tz

Name: random | randomize

  • Scope: global
  • Type/Default: boolean | off
  • Description: Enables randomization behaviors in some UI/flows.
  • Examples: ?random
  • Source: main.js search: session.randomize

Name: ln | language

  • Scope: global
  • Type/Default: string | auto
  • Description: Override the UI language template. Accepts language codes; falls back based on stored preference.
  • Examples: ?ln=de, ?language=es
  • Source: main.js translation block near startup.

Name: notios; notmobile

  • Scope: global/platform
  • Type/Default: boolean | off
  • Description: Override platform detection to treat the environment as non‑iOS or non‑mobile.
  • Source: main.js search: notios, notmobile.

Name: clearstorage | clear

  • Scope: global
  • Type/Default: boolean | off
  • Description: Clear local/session storage and cached flags for a clean start.
  • Source: main.js search: clearstorage.

Name: locksize

  • Scope: global/viewer
  • Type/Default: boolean/string | on
  • Description: Prevent resizing of the window/canvas to stabilize layout.
  • Source: main.js search: locksize.

Name: auth | requireauth

  • Scope: global/room
  • Type/Default: boolean | off
  • Description: Enables authentication mode. &auth enables optional sign‑in UI; &requireauth enforces sign‑in for protected rooms and director actions when the auth service indicates it’s required.
  • Interactions: &authtoken, &universaltoken, room/director links; auth UI may prefill &label and avatar on success.
  • Examples: ?room=show&auth, ?room=show&requireauth.
  • Source: auth-client.js search: session.authMode, session.requireAuth.

Name: authtoken

  • Scope: global
  • Type/Default: string (JWT) | none
  • Description: Injected by the auth service on redirect; persists to localStorage and used to fetch user info, assign stream IDs, and authorize room access.
  • Interactions: &auth/&requireauth; cleans itself from URL after storing.
  • Examples: ?authtoken=... (not user‑set; comes from OAuth redirect).
  • Source: auth-client.js search: session.authToken = urlParams.get("authtoken").

Name: universaltoken

  • Scope: global/viewer/scene
  • Type/Default: string (token) | none
  • Description: Grants room‑scoped viewing privileges without per‑user authentication. Useful for sharing view/scene links; can bypass &requireauth for viewing.
  • Interactions: Room access checks; used by scenes and solo links; directors can mint via UI.
  • Examples: ?view=ID&universaltoken=...
  • Source: auth-client.js search: urlParams.has("universaltoken") and validate-universal endpoint usage.

Networking & Handshake

Name: proxy

  • Scope: global
  • Type/Default: boolean | off
  • Description: Route WSS via proxy path when session.wss is overridden.
  • Source: main.js search: session.proxy.

Name: pie

  • Scope: global (deprecated)
  • Type/Default: string/boolean | off
  • Description: PieSocket support (deprecated); may set custom WSS URL.
  • Source: main.js search: session.customWSS, session.wssSetViaUrl.

Name: apiserver

  • Scope: global
  • Type/Default: string | none
  • Description: Override API server base for remote control/backends.
  • Source: main.js search: session.apiserver.

Name: speedtest

  • Scope: global/networking
  • Type/Default: boolean/string | off
  • Description: Enables speed test mode (may force UDP‑like behavior and apply bitrate limits). In privacy/relay mode, speedtest adjusts bitrate caps (e.g., 6000 kbps) and sets relay policy.
  • Source: main.js search: setupSpeedtest(), session.speedtest, relay caps

Name: secure; requireencryption; unsafe

  • Scope: global
  • Description: Security posture toggles; may affect ICE transport policy and UI.
  • Source: main.js search around security flags.

Notes

  • TURN/relay usage is negotiated via ICE; session may set iceTransportPolicy = "relay" under certain conditions.
  • For self‑hosting signaling, see general-settings/pie.md and the websocket server repo referenced there.

Additional Networking Flags

  • Name: bundle

    • Scope: networking
    • Type/Default: string | browser default
    • Description: Set RTCPeerConnection bundle policy (e.g., max-bundle).
    • Source: main.js search: session.bundlePolicy.

  • Name: addstun

    • Scope: networking
    • Type/Default: string (STUN URL) | none
    • Description: Append a STUN server to the ICE server list.
    • Examples: ?addstun=stun:stun.example.com:3478
    • Source: main.js search: urlParams.get("addstun").

  • Name: lanonly

    • Scope: networking
    • Type/Default: boolean | off
    • Description: Prefer local/LAN candidates only; useful for on-prem setups.
    • Source: advanced-settings/turn-and-stun-parameters/and-lanonly.md

  • Name: privacy

    • Scope: networking
    • Type/Default: boolean | off
    • Description: Enhance privacy of ICE candidates/addresses where supported.
    • Source: advanced-settings/turn-and-stun-parameters/and-privacy.md

  • Name: tcp | and-tcp; icefilter

    • Scope: networking
    • Type/Default: boolean/list | off
    • Description: Restrict candidate types or prefer TCP-only flows; filter ICE candidates.
    • Source: general-settings/and-tcp.md, general-settings/and-icefilter.md

Source Parameters

Name: push | id | permaid

  • Scope: source
  • Type/Default: string | auto‑generated if not set via UI
  • Description: Declares the stream ID for publishing. If omitted, guests auto‑generate one and URL updates include &push.
  • Interactions: &password, &label, device and encoding settings.
  • Examples: ?push=GUEST123
  • Source: main.js search: session.permaid = urlParams.get("push")

Name: videodevice | vdevice | vd | device | d | vdo

  • Scope: source
  • Type/Default: string/number | 1 (default camera)
  • Description: Selects camera by label/index; supports 0/false/off to disable video.
  • Interactions: &width/&height, &frameRate, facing mode on mobile.
  • Examples: ?vdevice=Logitech, ?vdo=0
  • Source: main.js block near video device parsing

Name: audiodevice | adevice | ad | device | d | ado

  • Scope: source
  • Type/Default: string/list/index | 1 (default mic)
  • Description: Selects microphone(s) by label/index; supports comma‑separated list, 0/false/off disables.
  • Interactions: Echo/noise cancellation, stereo, mixdown.
  • Examples: ?adevice=USB+Mic, ?ado=Line+In,USB+Mic
  • Source: main.js search: session.audioDevice = urlParams.get("audiodevice")

Name: facing

  • Scope: source (mobile)
  • Type/Default: string | false
  • Description: Hints front/back camera selection on mobile devices.
  • Interactions: &vdevice may override.
  • Examples: ?facing=user or ?facing=environment
  • Source: main.js search: session.facingMode = urlParams.get("facing")

Name: width | w; height | h

  • Scope: source
  • Type/Default: number | device default
  • Description: Capture constraint hints for resolution.
  • Interactions: &frameRate, &bitrate, device capability; browser may downscale.
  • Examples: ?width=1280&height=720
  • Source: main.js search: session.width = urlParams.get("width")

Name: frameRate | fr | fps

  • Scope: source
  • See global page for details.

Name: screenshare | ss; smallshare | smallscreen

  • Scope: source
  • Type/Default: boolean | off
  • Description: Enables display/window/tab capture; smallshare suppresses notify banner.
  • Interactions: &audiodevice for system audio; browser permissions.
  • Examples: ?push=ID&screenshare
  • Source: main.js search: screensharesupport and related flags

Name: preview | showpreview | nopreview | np | minipreview | mini | largepreview | minipreviewoffset | mpo

  • Scope: source UI
  • Type/Default: boolean/number | varies
  • Description: Controls pre‑publish local preview visibility and size.
  • Interactions: Autostart, mobile constraints, OBS/browser differences.
  • Examples: ?minipreview=1, ?nopreview
  • Source: main.js search: session.nopreview, session.minipreview

Mute/Unmute at Source

  • Name: mute | muted | m

    • Scope: source
    • Type/Default: boolean | off
    • Description: Start with microphone muted.
    • Source: main.js search around urlParams.has("mute").

  • Name: videomute | videomuted | vm

    • Scope: source
    • Type/Default: boolean | off
    • Description: Start with camera video muted.
    • Source: main.js search around urlParams.has("videomute").

Name: autostart | autojoin | aj | as

Additional Source/Session Controls

  • Name: nopush | viewonly | viewmode

    • Scope: source
    • Type/Default: boolean | off
    • Description: Disable publishing and join in view-only mode for test/monitoring.
    • Source: main.js search: nopush, viewonly, viewmode

  • Name: maxconnections | mc; maxviewers

    • Scope: source
    • Type/Default: number | unlimited
    • Description: Limit number of peer connections/viewers from this publisher.
    • Source: source-settings/and-maxconnections.md, source-settings/and-maxviewers.md

  • Name: queuetransfer | queue | audience

    • Scope: room/director
    • Type/Default: boolean/number | off
    • Description: Enable audience/queue flows, including transfer of queued guests to the stage.
    • Source: general-settings/queue.md, advanced-settings/settings-parameters/and-queuetransfer.md

  • Name: allowedscenes

    • Scope: director/room
    • Type/Default: list | all
    • Description: Restrict which scenes a guest may appear in; useful in director workflows.
    • Source: advanced-settings/settings-parameters/and-allowedscenes.md

  • Name: framegrab

    • Scope: source
    • Type/Default: string (image URL) | none
    • Description: Publishes a still-image based source using a frameshare pipeline. Loads the image and exposes it as a video stream; useful for slates/standby.
    • Examples: ?framegrab=https://example.com/standby.png
    • Source: main.js search: session.publishFrameSource; lib.js CanvasStreamSource.

  • Name: overlayimage | overlayimg | userforegroundimage

    • Scope: source/viewer
    • Type/Default: URL | none
    • Description: Overlay a foreground image above the video; useful for logos/watermarks. Accepts direct URLs.
    • Examples: ?overlayimg=https://example.com/logo.png
    • Source: main.js search: userforegroundimage/overlayimage/overlayimg handling.

Sensors

  • Name: sensors | sensor; gyro | gyros | accelerometer

    • Scope: source/global
    • Type/Default: number (Hz) | 30
    • Description: Enable sensor data capture (orientation/position/gyro/accel) and set update rate.
    • Source: main.js/webrtc.js/lib.js search: session.sensorData.

  • Name: sensorfilter | sensorsfilter | filtersensor | filtersensors

    • Scope: source/global
    • Type/Default: CSV list | all
    • Description: Limit which sensor streams send (e.g., pos,lin,ori,mag,gyro,acc).
    • Source: main.js/webrtc.js search: session.sensorDataFilter.

Mic‑Only Option

  • Name: miconlyoption | moo
    • Scope: source UI
    • Type/Default: boolean | off
    • Description: Expose a “mic‑only” option in UI for simplified audio‑only publishing.
    • Source: main.js search: optionalMicOnly.
  • Scope: source
  • Type/Default: boolean | off
  • Description: Auto‑start publishing (and screenshare) without additional clicks.
  • Interactions: &consent shows director control notice; browser autoplay policies may still gate audio.
  • Examples: ?push=ID&autostart
  • Source: main.js search: session.autostart = true
  • Name: feedbackbutton | fb
    • Scope: source UI
    • Type/Default: number (%) | none
    • Description: Adds a UI button to locally unmute and hear your own mic at a given percentage; sets tooltips accordingly.
    • Source: main.js search: unmuteSelf, session.selfVolume

Diagnostic Push Flags

  • Name: pusheffectsdata

    • Scope: source/diagnostics
    • Type/Default: boolean | off
    • Description: Enable pushing effects data to connected peers/IFRAME for diagnostics.
    • Source: main.js search: session.pushEffectsData

  • Name: pushloudness | getloudness

    • Scope: source/diagnostics
    • Type/Default: boolean | off
    • Description: Push audio loudness metering for remote monitoring.
    • Source: main.js search: session.pushLoudness

  • Name: pushfaces | getfaces

    • Scope: source/diagnostics
    • Type/Default: boolean | off
    • Description: Push face detection data to connected peers/IFRAME where supported.
    • Source: main.js search: session.pushFaces

Video Capture & Constraints

Name: videodevice | vdevice | vd | vdo

  • Scope: source
  • Type/Default: string/index | 1
  • Description: Select camera by label/index; 0/false/off disables.
  • Source: main.js (video device parsing section).

Name: width | w; height | h; frameRate | fr | fps; maxframerate | mfr | mfps

  • Scope: source
  • Type/Default: number | device/browser defaults
  • Description: Capture constraints and caps. Actual values depend on device and browser negotiation.
  • Source: main.js search: session.width, session.height, session.frameRate, session.maxframeRate.

Name: codec | codecs | videocodec

  • Scope: source
  • Type/Default: string | auto
  • Description: Preferred codec hint (h264/vp9/av1/hevc|h265) subject to support. Notes:
    • HEVC/H.265: Safari commonly supports HEVC encode/decode; modern Chrome builds can decode HEVC natively on many platforms. Chrome HEVC encode is still limited; don’t assume Chrome can publish HEVC.
    • Negotiation picks the first mutually supported codec regardless of hint if encode/decode are not available.
  • Source: main.js search: session.codecs.

Name: videobitrate | bitrate | vb; maxvideobitrate | maxbitrate | maxvb | mvb; outboundvideobitrate | outboundbitrate | ovb

  • Scope: source
  • Type/Default: kbps | defaults vary; 8000 typical starting point
  • Description: Target and cap video bitrate; outbound variants affect sender encoder directly.
  • Source: main.js search: session.bitrate, session.maxvideobitrate, session.outboundVideoBitrate.

Name: obsfix

  • Scope: viewer
  • Type/Default: boolean/number | 1
  • Description: Apply workarounds for OBS browser source playback quirks; numeric levels for intensity.
  • Source: main.js search: session.obsfix.

Name: preview | showpreview | nopreview | np | minipreview | mini | largepreview | minipreviewoffset | mpo

  • Scope: source UI
  • Description: Control local preview size/visibility and offset.
  • Source: main.js search: session.nopreview, session.minipreview, session.leftMiniPreview.

Name: screenshare | ss; smallshare | smallscreen

Screen Share Tuning Name: aspectratio | ar

  • Scope: source (camera capture)
  • Type/Default: number/string | auto
  • Description: Force camera capture aspect ratio. Accepts numbers (e.g., 1, 1.0, 1.333, 1.777), or keywords portrait (9/16), landscape (16/9), square (1/1). Parsed to a float.
  • Examples: ?push=ID&aspectratio=1.333, ?ar=portrait
  • Source: main.js search: session.forceAspectRatio.

Name: screenshareaspectratio | ssar

  • Scope: source (screen share capture)

  • Type/Default: number/string | 16/9

  • Description: Force screen share capture aspect ratio to a ratio or keyword (portrait/landscape/square).

  • Examples: ?push=ID&ssar=1.777, ?screenshareaspectratio=square

  • Source: main.js search: session.forceScreenShareAspectRatio.

  • Name: screensharetype; displaysurface

    • Scope: source
    • Type/Default: string | browser default
    • Description: Hint the share surface type (tab/window/screen) or direct display surface constraints when supported.
    • Source: newly-added-parameters/and-screensharetype.md; advanced-settings/screen-share-parameters/and-displaysurface.md

  • Name: screensharecontenthint

    • Scope: source
    • Type/Default: string | motion/text
    • Description: Set content hint (e.g., motion vs text) to guide encoder/scaler.
    • Aliases: sscontenthint; screensharecontenttype; sscontent; sshint
    • Source: main.js search: screensharecontenthint, sscontenthint, screensharecontenttype, sscontent, sshint.

  • Name: contenthint | contenttype | content | hint

    • Scope: source (camera capture)
    • Type/Default: string | detail
    • Description: WebRTC content hint for the camera track. Common values: detail (text), motion (video).
    • Source: main.js search: session.contentHint.

  • Name: audiocontenthint | audiocontenttype | audiocontent | audiohint

    • Scope: source (audio capture)
    • Type/Default: string | music
    • Description: WebRTC content hint for the audio track. Common values: speech, music.
    • Source: main.js search: session.audioContentHint.

  • Name: prefercurrenttab; selfbrowsersurface

    • Scope: source
    • Type/Default: boolean | off
    • Description: Prefer the current tab when starting capture; allow capturing the app’s own tab surface where supported.
    • Source: advanced-settings/screen-share-parameters/and-prefercurrenttab.md; advanced-settings/screen-share-parameters/and-selfbrowsersurface.md

  • Name: sharperscreen

    • Scope: source
    • Type/Default: boolean | off
    • Description: Bias capture and scaling toward sharp text rendering for screen shares.
    • Source: advanced-settings/screen-share-parameters/and-sharperscreen.md

  • Name: systemaudio

    • Scope: source
    • Type/Default: boolean | off
    • Description: Request system/application audio with screen share where supported.
    • Source: advanced-settings/screen-share-parameters/and-systemaudio.md

  • Name: screensharebitrate | ssbitrate

    • Scope: source (screen share)
    • Type/Default: kbps | 2500
    • Description: Target bitrate specifically for the screen-share track.
    • Examples: ?screensharebitrate=3500
    • Source: main.js search: session.screenShareBitrate.

Encoder Hints

  • Name: h264profile

    • Scope: source
    • Type/Default: string | auto
    • Description: Request an H.264 profile (e.g., baseline/main/high) when using H.264.
    • Source: newly-added-parameters/and-h264profile.md

  • Name: screensharestyle | ssstyle

    • Scope: source (screen share)
    • Type/Default: number | 1
    • Description: Selects a screenshare styling preset for layout/composition of the shared surface.
    • Source: main.js search: session.screenshareStyle.

Viewer Display for Screen Share

  • Name: screensharelabel | sslabel

    • Scope: source/viewer
    • Type/Default: string | empty
    • Description: Label shown for screen-share stream tiles; can be used to differentiate content.
    • Source: main.js/lib.js search: session.screenShareLabel.

  • Name: screensharecursor | cursor

    • Scope: source/viewer
    • Type/Default: boolean | off
    • Description: Show the mouse cursor in the screen-share capture when supported.
    • Source: main.js search: session.screensharecursor.

  • Name: screensharevideoonly | ssvideoonly | ssvo

    • Scope: source/viewer
    • Type/Default: boolean | off
    • Description: Hide the camera tile and show only the screen-share video.
    • Source: main.js/lib.js search: session.screenshareVideoOnly.

  • Name: screensharefps | ssfps

    • Scope: source
    • Type/Default: number (fps) | 2
    • Description: Set a target frame rate for the screenshare track.
    • Source: main.js search: session.screensharefps.

  • Name: screensharequality | ssq

    • Scope: source
    • Type/Default: preset/number | 0
    • Description: Quality preset for screenshare resolution/scale. Accepts 4k/2160p/2160=-2, 2k/1440p/1440=-3, fullhd/1080p/1080/high=0, 720p/720/hd=1, 360p/360/low=2, or a number.
    • Source: main.js search: session.screensharequality.

  • Name: screenshareid | ssid

    • Scope: source
    • Type/Default: string | <streamID>_ss
    • Description: Override the stream ID used for the screenshare track; sanitized by the app.
    • Source: main.js search: session.screenshareid.

  • Name: sspaused | sspause | ssp

    • Scope: source
    • Type/Default: boolean | off
    • Description: Start a screenshare in a paused state.
    • Source: main.js search: session.screenShareStartPaused.

Video Effects & Tuning

  • Name: flip

    • Scope: source/viewer
    • Type/Default: boolean | on
    • Description: Mirror‑flip the local video horizontally (off with &flip=0/false/off).
    • Source: main.js search: urlParams.has("flip").

  • Name: digitalzoom

    • Scope: source
    • Type/Default: number | 1
    • Description: Set initial digital zoom level when using the Zoom effect; value becomes the default effectvalue.
    • Source: main.js search: digitalzoom.

  • Name: whitebalance | wb; exposure; saturation; sharpness; contrast; brightness

    • Scope: source
    • Type/Default: string/number | device/browser dependent
    • Description: Request camera property adjustments where supported by the device driver. Effect depends on hardware/browser.
    • Source: main.js search: whitebalance, exposure, saturation, sharpness, contrast, brightness.

  • Scope: source

  • Description: Display/window/tab capture; smallshare hides banner.

  • Source: main.js search for screenshare flags and screensharesupport. Screen Share Surface

  • Name: surfaceswitching

    • Scope: source
    • Type/Default: boolean | on
    • Description: Allow switching surfaces (tab/window/screen) without renegotiation where supported.
    • Source: lib.js search: constraints.surfaceSwitching.

Audio Processing & Routing

Name: stereo | s | proaudio; mono; channelcount | ac | inputchannels; monomic

  • Scope: source/viewer
  • Type/Default: mixed; see below
  • Description: Controls channel layout and pro‑audio mode.
  • Behavior:
    • stereo values map to modes: 0=mono, 1=stereo, 2=in, 3=out/mono, 4=quad/multi, 5=guest profile, 6=5.1, 8=7.1.
    • mono forces mono and may set audiobitrate=128 depending on prior state.
    • channelcount sets input channel count; monomic forces 1.
  • Interactions: Enabling stereo disables echoCancellation, autoGainControl, and noiseSuppression.
  • Examples: ?push=ID&stereo=1, ?push=ID&mono, ?push=ID&channelcount=2
  • Source: main.js search: session.stereo, session.mono, session.audioInputChannels.

Name: screensharestereo | sss | ssproaudio

  • Scope: source (screenshare)
  • Type/Default: mixed; see mapping above
  • Description: Same as stereo but for screen-share capture audio routing and channel mode.
  • Source: main.js search: session.screenshareStereo.

Name: echocancellation | aec | ec

  • Scope: source
  • Type/Default: boolean | browser default
  • Description: Toggle echo cancellation on mic input.
  • Interactions: Disabled automatically when stereo/pro‑audio modes are used.
  • Examples: ?push=ID&ec=false
  • Source: main.js search: session.echoCancellation.

Name: noaudioprocessing | noap

  • Scope: source
  • Type/Default: boolean | off
  • Description: Disable browser audio processing (AEC/AGC/Denoise) for a raw input path.
  • Source: main.js search: noaudioprocessing.

Name: autogain | ag | agc

  • Scope: source
  • Type/Default: boolean | browser default
  • Description: Toggle automatic gain control on mic input.
  • Source: main.js search: session.autoGainControl.

Name: denoise | dn; voiceisolation | vi | isolation

  • Scope: source
  • Type/Default: boolean | browser default
  • Description: Toggle noise suppression and platform voice isolation.
  • Source: main.js search: session.noiseSuppression, session.voiceIsolation.

Name: screenshareaec | ssec | ssaec; screenshareautogain | ssag | ssagc; screensharedenoise | ssdn

  • Scope: source (screenshare)
  • Type/Default: boolean | browser default
  • Description: Apply AEC/AGC/Denoise to screen-share audio path.
  • Source: main.js search: session.screenshareAEC, session.screenshareAutogain, session.screenshareDenoise.

Name: audiobitrate | ab; outboundaudiobitrate | oab

  • Scope: source
  • Type/Default: kbps | auto; oab as encoder hint
  • Description: Control Opus target bitrate; iOS disables custom bitrates.
  • Source: main.js search: session.audiobitrate, session.outboundAudioBitrate.

Name: playchannel

  • Scope: viewer
  • Type/Default: number | none
  • Description: Selects which output channel to playback locally.
  • Source: main.js search: session.playChannel.

Name: panning | pan; latency | al | audiolatency; micdelay | delay | md

  • Scope: viewer/source
  • Type/Default: boolean/number
  • Description: Spatialize audio, add playout latency, or delay mic input.
  • Source: main.js search: session.panning, session.audioLatency, session.micDelay.

Name: deafen | deaf; mutespeaker | sm | ms | speakermute

  • Scope: viewer
  • Type/Default: boolean | off
  • Description: Disable or mute local playback.
  • Source: main.js search lines around 1582–1630.

Additional Audio Controls

  • Name: audiogain | gain | g | muteguest | volume

    • Scope: source
    • Type/Default: number (dB or normalized) | auto
    • Description: Manually adjust mic gain prior to encode; pairs with autogain (AGC) when disabled.
    • Source: advanced-settings/audio-parameters/and-audiogain.md

  • Name: compressor | comp

    • Scope: source
    • Type/Default: boolean | off
    • Description: Enable a dynamics compressor on the microphone path.
    • Source: main.js search: compressor/comp.

  • Name: samplerate | sr; outboundsamplerate | obsr; micsamplerate | msr; micsamplesize

    • Scope: source
    • Type/Default: number | 48000 Hz; size 16-bit
    • Description: Override mic capture/output sample rate and sample size, subject to device/browser limits.
    • Source: main.js search: micsamplerate, micsamplesize

  • Name: audiocodec

    • Scope: source
    • Type/Default: string | opus
    • Description: Select publishing audio codec. Supported cases include opus (default), red, lyra, pcm (where available). Value is lowercased.
    • Interactions: red/lyra may alter FEC/RED behavior. Viewer preference (preferaudiocodec) can also influence negotiation.
    • Examples: ?audiocodec=red, ?audiocodec=lyra
    • Source: main.js search: session.audioCodec.

  • Name: preferaudiocodec

    • Scope: interop
    • Type/Default: string | opus
    • Description: Request a preferred audio codec where supported.
    • Source: advanced-settings/audio-parameters/and-preferaudiocodec.md

  • Name: dtx | usedtx; cbr | vbr

    • Scope: source
    • Type/Default: boolean | off (DTX); CBR off by default
    • Description: Enable Opus Discontinuous Transmission; enabling dtx disables cbr automatically. &cbr forces constant bitrate; &vbr explicitly disables CBR.
    • Source: main.js search: session.dtx, session.cbr.

  • Name: ptime; minptime; maxptime

    • Scope: source
    • Type/Default: ms | ptime default 20; min 10, max 300
    • Description: Control Opus packetization time and bounds. Browser may clamp to supported ranges.
    • Source: main.js search: session.ptime, session.minptime, session.maxptime.

FEC/ACK Controls

  • Name: fecaudio; pfecaudio; nofec

    • Scope: interop/audio
    • Type/Default: boolean | off
    • Description: Enable Opus FEC/RED parameters; pfecaudio toggles partial FEC; nofec disables.
    • Source: main.js search: session.fecAudio, session.pfecAudio, session.noFEC.

  • Name: nonack | nonacks

    • Scope: interop
    • Type/Default: boolean | off
    • Description: Disable NACKs on the connection where supported.
    • Source: main.js search: nonacks.

Playback Constraints

  • Name: suppresslocalaudio

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Request suppressed local audio playback where supported by the browser (experimental constraint).
    • Source: lib.js search: suppressLocalAudioPlayback.

  • Name: noisegatesettings

    • Scope: director/scene
    • Type/Default: list | implementation default
    • Description: Fine-tune noise gate thresholds/attack/hold; used with noisegate.
    • Source: main.js search: noisegatesettings

  • Name: nodirectoraudio

    • Scope: room/director
    • Type/Default: boolean | off
    • Description: Prevent director audio from being injected to program/guests.
    • Source: advanced-settings/audio-parameters/and-nodirectoraudio.md

  • Name: channeloffset

    • Scope: viewer
    • Type/Default: number | 0
    • Description: Offset output channel mapping; helpful with multichannel workflows.
    • Source: advanced-settings/audio-parameters/and-channeloffset-1.md

Viewer Parameters

Name: view | v | streamid | pull

  • Scope: viewer
  • Type/Default: string/list | none
  • Description: Comma‑separated stream IDs to subscribe to. :s suffix whitelists screenshares only.
  • Interactions: &include adds IDs; director/scene links compose views.
  • Examples: ?view=ID1,ID2:s
  • Source: main.js search: session.view = urlParams.get("view")

Name: include

  • Scope: viewer
  • Type/Default: list | none
  • Description: Adds allowed streams on top of &view.
  • Examples: ?view=ID1&include=ID2,ID3
  • Source: main.js search: if (urlParams.has("include"))

Name: buffer | buffer2; sync

  • Scope: viewer
  • See global page for details.

Name: stats

  • Scope: viewer
  • See global page for details.

Name: mutespeaker | sm | ms | speakermute | speakermuted

  • Scope: viewer
  • Type/Default: boolean | on
  • Description: Starts with local audio playback muted; useful for headless/monitor contexts.
  • Examples: ?view=ID&mutespeaker
  • Source: main.js search: urlParams.get("mutespeaker")

Name: deafen | deaf

  • Scope: viewer
  • Type/Default: boolean | off
  • Description: Disables audio playback entirely.
  • Examples: ?view=ID&deafen
  • Source: see general settings docs; enforced in audio path

Name: cleanviewer | cv; cleanoutput | clean | cleanish

  • Scope: viewer/global
  • Type/Default: boolean | off
  • Description: Hides UI elements; better for embedding and program feeds.
  • Examples: ?view=ID&cleanviewer
  • Source: main.js search: session.cleanViewer, session.cleanOutput

Name: hideheader | noheader | hh; showheader

  • Scope: viewer/global
  • Type/Default: boolean | hide by default in some clean modes
  • Description: Hide or force-show the header bar. hideheader/noheader/hh hides; showheader forces it visible.
  • Examples: ?view=ID&hideheader, ?showheader
  • Source: main.js search around header handling.

Name: showcontrols | videocontrols | forcecontrols | nocontrols

  • Scope: viewer
  • Type/Default: boolean | off
  • Description: Toggle native player controls; forcecontrols re‑applies periodically.
  • Examples: ?view=ID&showcontrols, ?forcecontrols
  • Source: main.js search: session.showControls
  • Name: showconnections
  • Scope: viewer
  • Type/Default: boolean | off
  • Description: Shows remote guest connection counts in stats.
  • Source: main.js search: session.showConnections

Name: fullscreenbutton | fsb | nofullscreenbutton | nofsb

  • Scope: viewer/global
  • Type/Default: boolean | off
  • Description: Show or hide the page-level fullscreen toggle. Hidden on iOS/iPadOS. nofsb suppresses it.
  • Examples: ?view=ID&fsb, ?nofsb
  • Source: main.js search: session.fullscreenButton.

Name: nocontrolbar | nocontrolbarspace

  • Scope: viewer
  • Type/Default: boolean | off
  • Description: Hide the control bar UI. nocontrolbarspace also removes its reserved layout space for tighter embedding.
  • Examples: ?view=ID&nocontrolbarspace
  • Source: main.js search: nocontrolbar, gridlayout.classList.add("nocontrolbar").

Name: nocursor | hidecursor | nomouse | hidemouse

  • Scope: viewer
  • Type/Default: boolean | off
  • Description: Hide the mouse cursor over the video element(s); useful for program feeds and kiosk modes.
  • Examples: ?view=ID&nocursor
  • Source: main.js search: session.nocursor.

Name: clock | clock24

  • Scope: viewer
  • Type/Default: boolean | off (24h when clock24 used)
  • Description: Show on-screen clock; clock24 enables 24‑hour format.
  • Examples: ?view=ID&clock24
  • Source: main.js search: session.clock24.

Closed Captions

  • Name: closedcaptions | captions | cc

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Enable on-screen closed captions rendering, where available.
    • Source: main.js search: session.closedCaptions.

  • Name: nocaptionlabels | nocclabels | nocaptionlabel | nocclabel

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Hide speaker labels in closed captions.
    • Source: main.js search: session.nocaptionlabels.

  • Name: cccolor | cccolored | cccoloured | coloredcc | colorcc

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Colorize caption lines per speaker.
    • Source: main.js/lib.js search: session.ccColored.

Name: statsinterval

  • Scope: viewer
  • Type/Default: ms | 3000
  • Description: Interval for requesting remote stats updates displayed in overlays/menus.
  • Examples: ?view=ID&statsinterval=5000
  • Source: main.js search: session.statsInterval.

Name: autohide

  • Scope: viewer/global
  • Type/Default: boolean | off
  • Description: Hide major UI chrome when not in use (kiosk/clean layouts); interacts with cleanviewer/cleanoutput.
  • Source: main.js/webrtc.js search: session.autohide.

Name: automute | am

  • Scope: viewer
  • Type/Default: boolean/string | off
  • Description: Start with local audio playout muted; a non-"2" value allows unmute on interaction. Used for autoplay policy compliance.
  • Source: main.js/lib.js search: session.automute.

Name: outputdevice | od | audiooutput

  • Scope: viewer
  • Type/Default: string (device label substring) | default
  • Description: Selects audio output device by matching a substring of the device label. Requires speaker selection support; falls back gracefully if not permitted.
  • Examples: ?view=ID&audiooutput=Headphones, ?od=VB-Audio
  • Source: main.js search: session.outputDevice.

Name: sink

  • Scope: viewer
  • Type/Default: deviceId | default
  • Description: Set audio output device by exact deviceId (advanced); complements outputdevice (label matching).
  • Examples: ?view=ID&sink=1234abcd
  • Source: main.js search: session.sink.

Name: forcelandscape | forcedlandscape | fl; forceportrait | forcedportrait | fp

  • Scope: viewer/mobile
  • Type/Default: boolean | off
  • Description: Locks page orientation for better fullscreen playback on mobile. On Firefox, also forces fullscreen to simplify orientation.
  • Examples: ?view=ID&forcelandscape, ?fp
  • Source: main.js search: session.orientation.

Name: forceviewerlandscape; forceviewerportrait

  • Scope: viewer
  • Type/Default: number (deg) | 270 and 90 respectively if no value
  • Description: Keeps incoming videos displayed in landscape or portrait by rotating them. Values are degrees if provided.
  • Examples: ?view=ID&forceviewerlandscape=270, ?forceviewerportrait=90
  • Source: main.js search: session.keepIncomingVideosInLandscape, session.keepIncomingVideosInPortrait.

Name: rotatewindow; rotatepage

  • Scope: viewer
  • Type/Default: degrees | 90
  • Description: Rotates the window or entire page render by a set angle.
  • Examples: ?view=ID&rotatepage=180
  • Source: main.js search: rotatewindow, rotatepage.

Playback Aspect Ratio

  • Name: portrait | 916 | vertical; square | 11; 43
    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Forces playback layout aspect ratio (9:16, 1:1, or 4:3) for the tile layout; useful for signage and vertical video.
    • Source: main.js search: session.aspectRatio.

Name: overlaycontrols

  • Scope: viewer
  • Type/Default: boolean | off
  • Description: Show overlay controls on the viewer UI for quick access.
  • Source: main.js search: session.overlayControls.

Name: overlayimg | overlayimage | userforegroundimage

  • Scope: viewer
  • Type/Default: URL | none
  • Description: Overlay a foreground image (logo/watermark) on the viewer composition when supported by the page layout.
  • Examples: ?overlayimg=https://example.com/logo.png
  • Source: main.js search: userforegroundimage/overlayimage/overlayimg.

Theme & Styling

  • Name: darkmode | nightmode | darktheme; lightmode | lighttheme; whitemode | whitetheme

    • Scope: viewer/global
    • Type/Default: boolean | inferred from theme variable
    • Description: Switch UI theme. whitemode/whitetheme adds a specific white theme class. Defaults vary by environment.
    • Source: main.js search: session.darkmode, theme toggles.

  • Name: chroma

    • Scope: viewer
    • Type/Default: hex string | 0F0
    • Description: Set page background chroma key color (e.g., &chroma=000 for black).
    • Source: main.js search: getById("main").style.backgroundColor.

  • Name: margin

    • Scope: viewer
    • Type/Default: number (px) | 10
    • Description: Adjust video tile margins.
    • Source: main.js search: session.videoMargin.

  • Name: rounded | round

    • Scope: viewer
    • Type/Default: number (px) | 50
    • Description: Border radius for tiles (CSS variable --video-rounded).
    • Source: main.js search: --video-rounded.

  • Name: holdercolor

    • Scope: viewer
    • Type/Default: hex | #000
    • Description: Background color behind video tiles (CSS variable --video-holder-color).
    • Source: main.js search: --video-holder-color.

  • Name: menuoffset

    • Scope: viewer
    • Type/Default: CSS length | 50px
    • Description: Adjusts the bottom offset of the controller UI.
    • Source: main.js search: menuoffset.

  • Name: userbackgroundimage | userbgimage | ubgimg; bgimage | bgimage2 | bgimage3 | bgimg*

    • Scope: viewer/global
    • Type/Default: URL | defaults set to local assets
    • Description: Set background images (general, talking, and screaming states) via CSS variables; use avatarimg* aliases as well to set background placeholders.

  • Source: main.js search: userbackgroundimage, bgimage*, avatarimg*.

  • Name: imagelist

    • Scope: viewer
    • Type/Default: JSON‑encoded array/URL | none
    • Description: Provide a list (JSON or single URL) of background images to use as defaults.
    • Source: main.js search: imagelist.

UI Sliders & Meters

  • Name: showslider

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Show bitrate/control sliders in supported views.
    • Source: webrtc.js search: session.showSlider.

  • Name: signalmeter

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Show CPU/signal meter overlays on tiles.
    • Source: webrtc.js search: signalMeter.

  • Name: showmeta

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Show extra metadata overlays (diagnostic info) on tiles.
    • Source: main.js search: session.showmeta.

Scene Slots

  • Name: slotslist
    • Scope: viewer/scene
    • Type/Default: CSV of slot indices | off
    • Description: Restrict scene processing to specific slot indices (e.g., slotslist=0,2,4). Empty/invalid list disables filter.
    • Source: main.js search: session.slotsList.

Playback Volume

  • Name: volumecontrol | volumecontrols | vc

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Show UI for per‑tile playback volume control.
    • Source: main.js/webrtc.js search: session.volumeControl.

  • Name: volume | vol

    • Scope: viewer
    • Type/Default: percent (0–100) | 100
    • Description: Default playback volume for new video elements.
    • Source: main.js search: session.volume.

Labels & Sorting

  • Name: showlabels | showlabel | sl

    • Scope: viewer
    • Type/Default: boolean/string | off
    • Description: Show labels; optional style string is sanitized and applied.
    • Source: main.js search: session.showlabels, session.labelstyle.

  • Name: sizelabel | labelsize | fontsize

    • Scope: viewer
    • Type/Default: percent | 100
    • Description: Scale label font size percentage (or accept CSS font-size for widgets that support it).
    • Source: main.js search: session.labelsize.

  • Name: orderby

    • Scope: viewer
    • Type/Default: string | id
    • Description: Sort order for streams: id (default) or label.
    • Source: main.js search: session.orderby.

Raise Hand

  • Name: hand | hands
    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Enable “raise hand” controls/indicator for guests.
    • Source: main.js/lib.js search: raisehand, hands.

Device/Platform Tweaks

  • Name: forceios; androidfix
    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Apply iOS/Android playback/codec handling tweaks. forceios adjusts mobile playback rules; androidfix enables Android H.264 handling fix.
    • Source: main.js/webrtc.js search: session.forceios, session.AndroidFix.

Fonts (overlays/widgets)

  • Name: font
    • Scope: overlays/widgets
    • Type/Default: string | inherited
    • Description: Override CSS font family for pages that honor --font-family. Use fonts helper at source-code/fonts.html to generate values.
    • Source: fonts.html search: urlParams.get("font").

Misc UI/Playback

  • Name: pauseinvisible

    • Scope: viewer
    • Type/Default: boolean | off

  • Description: Pause playback when the page isn’t visible to reduce CPU usage.

  • Source: main.js search: session.pauseInvisible.

  • Name: zoomslider; ptzslider

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Show UI sliders to control zoom/PTZ where supported.

  • Source: main.js search: session.zoomSlider, session.ptzSlider.

Slides & PPT

  • Name: pptcontrols | slides | ppt | powerpoint
    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Enable UI controls to remotely control slideshow/presentations where configured.
    • Source: main.js search: session.pptControls.

Picture-in-Picture

  • Name: pip; pip2; pip3 | mypip | pipme; pipall

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Enable picture‑in‑picture for the main/selected video (pip), alternate modes (pip2, pip3/mypip/pipme), or apply to all where supported (pipall).
    • Source: main.js/webrtc.js search: session.pip, session.pip3.

  • Name: hideusermenu | nousermenu | hum

    • Scope: viewer
    • Type/Default: boolean | off

  • Description: Hide the user menu (three dots/gear) for kiosk/clean views.

  • Source: main.js search: hideusermenu.

Visibility Toggles

  • Name: hidevideo | showonly; hideaudio

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Suppress remote video or audio playback. showonly acts like hidevideo for non-target elements.
    • Source: main.js search: novideo/hidevideo, noaudio/hideaudio.

  • Name: hidesolo | hs; hidescreenshare | hidess | sshide | screensharehide

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Hide solo button or screen-share controls/tiles in the UI.
    • Source: main.js search: hidesolo, hidescreenshare.

  • Name: hidemenu | hm; hidetranslate

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Hide the bottom control menu or translate button.
    • Source: main.js search: hidemenu, hidetranslate.

Header & Buttons

  • Name: headertitle
    • Scope: viewer
    • Type/Default: string | none
    • Description: Override page header title text.
    • Source: lib.js search: headertitle.

Stats Toggle

  • Name: nostats

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Disable the stats menu/overlay regardless of &stats.
    • Source: main.js search: nostats.

  • Name: hangupbutton | hub | humb64; hangupmessage | hum | humb64

    • Scope: viewer
    • Type/Default: boolean/string | off
    • Description: Add a hangup button and optional message (plain or base64). humb64 can carry either the button label or message in base64.
    • Source: main.js search: hangupbutton, hangupmessage.

Director Visibility

  • Name: nodirectorvideo
    • Scope: viewer/scene
    • Type/Default: boolean | off
    • Description: Suppress the director’s video in scenes or viewer playback.
    • Source: main.js/webrtc.js search: session.nodirectorvideo.

Layout Fit

  • Name: cover; fit

    • Scope: viewer
    • Type/Default: boolean | off
    • Description: Control object-fit behavior of video tiles. cover scales to fill (may crop), fit contains within (may letterbox).
    • Source: main.js search: cover, fit.

  • Name: batterymeter

    • Scope: viewer
    • Type/Default: boolean/string | auto
    • Description: Enable showing remote battery meter on tiles; accepts truthy/falsey values.
    • Source: main.js/webrtc.js search: session.batteryMeter.

  • Name: tally; tallyoff | notally | disabletally | to

    • Scope: viewer/scene
    • Type/Default: boolean | off
    • Description: Enable or disable tally light indicators for live/on-deck states.
    • Source: main.js search: tallyoff, tally.

Custom CSS/JS Injection

  • Name: css; cssb64 | cssbase64 | b64css | base64css

    • Scope: viewer/global
    • Type/Default: URL/base64 | none
    • Description: Inject external CSS by URL (css=) or inline base64‑encoded CSS (cssb64/b64css and aliases).
    • Source: main.js search: styles injection around 2209–2241.

  • Name: b64js | base64js

    • Scope: viewer/global
    • Type/Default: base64 string | none
    • Description: Inject base64‑encoded JS blob; use with care (security implications).
    • Source: main.js search: base64js/b64js.

Name: showmutestatus | mutestatus | showmuted | showmutestate; showunmutestatus | unmutestatus | showunmuted | showunmutestate

  • Scope: viewer/global
  • Type/Default: boolean | off
  • Description: Show a visible indicator when the local playout is muted or unmuted.
  • Examples: ?view=ID&showmuted, ?showunmuted
  • Source: main.js search: session.showMuteState, session.showUnMuteState.

Room and Director Parameters

Name: director | dir

  • Scope: director
  • Type/Default: string/boolean | if boolean, director landing
  • Description: Enters director mode for a given room name. Without a value, shows landing.
  • Examples: ?director=myshow, ?dir
  • Source: main.js search: session.director = urlParams.get("director")

Name: directorpassword | dirpass | maindirpass

  • Scope: director/room
  • Type/Default: string | none
  • Description: Protect director access to a room with a password. maindirpass can designate a main password for elevated control.
  • Source: webrtc.js search: session.directorPassword, session.mainDirectorPassword.

Name: codirector

  • Scope: director/room
  • Type/Default: string | none
  • Description: Co‑director password token used in invite links or for joining as a co‑director. Equivalent to providing &directorpassword.
  • Examples: ?dir=ROOM&codirector=SECRET
  • Source: main.js search: urlParams.get("codirector") → session.directorPassword.

Name: directorsonly

  • Scope: director/room
  • Type/Default: boolean | off
  • Description: Restrict access to the director interface to authorized users only.
  • Source: main.js/webrtc.js; search: directorsonly.

Name: hidedirectors | hideusermenu

  • Scope: director UI
  • Type/Default: boolean | off
  • Description: Hide co‑director listings or the user menu for a cleaner UI or kiosk use.
  • Source: main.js; search these flags for DOM toggles.

Name: hidecodirector | hidecodirectors

  • Scope: director UI
  • Type/Default: boolean | off
  • Description: Hide co‑director UI elements; aliases for the co‑director visibility toggle.
  • Source: main.js search: hidecodirectors.

Name: hideguest

  • Scope: director/viewer
  • Type/Default: boolean | off
  • Description: Hide the director’s video (or guest tile) from scenes; sets internal directorVideoMuted state.
  • Source: main.js search: hideguest.

Name: queue | queuetransfer | audience

  • Scope: room/director
  • Type/Default: number/boolean | off
  • Description: Enable audience/greenroom queueing behavior and transfer from queue to stage.
  • Source: main.js search: queuetransfer; webrtc.js search: session.queue and queue handling.

Name: audience

  • Scope: relay/rooms
  • Type/Default: string/token | none
  • Description: Enables audience listen/publish mode using dedicated audience WSS endpoints. Viewer endpoints adjust session.wss based on the token.
  • Source: main.js/lib.js search: session.audience, audience.vdo.ninja.

Name: joinscene | joinscenes

  • Scope: room/director
  • Type/Default: boolean/list | off
  • Description: Auto‑place or restrict a guest to specific scenes on join. Provide a list to limit allowed scenes.
  • Source: lib.js and main.js (scene composition); joinscene flags.

Name: room | r | roomid

  • Scope: room
  • Type/Default: string | none
  • Description: Selects room for guests, scenes, and director. Combine with &password to isolate realm.
  • Examples: ?room=myshow&password=ROOMPASS
  • Source: main.js search: roomid = urlParams.get("room")

Name: codirector (invite via UI)

  • Scope: director
  • Type/Default: link with scoped permissions
  • Description: Co‑director support with configurable permissions; link generated from director UI.
  • Source: docs: director-settings/codirector.md

Name: scene | scn

  • Scope: room/program
  • Type/Default: number | 0
  • Description: Program/compositor view within a room.
  • Examples: ?scene&room=myshow
  • Source: main.js search: session.scene = urlParams.get("scene")

Name: showdirector | sd; directorview | dv; directoronly | do

  • Scope: director/viewer
  • Type/Default: boolean/number | varies
  • Description: Show director video, enable director’s view overlay, or restrict view to director only.
  • Examples: ?room=myshow&directorview
  • Source: main.js search: session.showDirector, session.directorView, session.viewDirectorOnly

Name: showdirector | sd (numeric semantics)

  • Scope: director/viewer
  • Type/Default: number/boolean | true
  • Description: When present, shows director feed; value 2 restricts to video-only (no audio). Any truthy non-numeric enables video+audio.
  • Source: main.js search: session.showDirector

Name: bitratecutoff | bitcut

  • Scope: director/room
  • Type/Default: kbps | 300
  • Description: Threshold for low-bitrate cutoff used in director logic.
  • Source: main.js search: session.lowBitrateCutoff

Name: motionswitch | motiondetection; motionrecord | recordmotion

  • Scope: director/room
  • Type/Default: number | 15
  • Description: Motion detection threshold used to auto-switch scenes or start motion-based recording.
  • Source: main.js search: session.motionSwitch, session.motionRecord

Name: locked

  • Scope: director/room
  • Type/Default: boolean/string | off
  • Description: Locks certain room interactions; used by director UI to prevent changes.
  • Source: main.js search: session.locked = urlParams.get("locked") Name: roombitrate | roomvideobitrate | rbr; controlroombitrate | crb; minroombitrate | mrb
  • Scope: director/room
  • Type/Default: kbps | varies
  • Description: Room‑wide bitrate targets and control behavior (min, control enable).
  • Examples: ?room=myshow&roombitrate=2000&controlroombitrate
  • Source: main.js search: session.roombitrate, session.controlRoomBitrate

Name: slotmode | slotsmode

  • Scope: director UI
  • Type/Default: number | 1
  • Description: Director slot layout behavior.
  • Source: main.js search: session.slotmode

Director & Layout Controls

Name: slotmode | slotsmode

  • Scope: director UI
  • Type/Default: number | 1
  • Description: Controls how guests map to slots in the director interface.
  • Source: main.js search: session.slotmode.

Name: activespeaker | speakerview | sas; activespeakerdelay | speakerviewdelay | sasdelay

  • Scope: director/scene
  • Type/Default: number | 1; delay ms | 0
  • Description: Auto‑switch to active speaker; optional delay before switching.
  • Source: main.js search: session.activeSpeaker, session.activeSpeakerTimeout.

Name: noisegate | gating | gate | ng; noisegatesettings

  • Scope: director/scene
  • Type/Default: number | 1; settings list
  • Description: Quiet others and tune gate behavior.
  • Source: main.js search: session.quietOthers, session.noisegateSettings.

MIDI & Hotkeys

  • Name: midi | hotkeys; disablehotkeys

    • Scope: director/viewer
    • Type/Default: number/bool | off
    • Description: Enable MIDI/hotkey profile (1–N). disablehotkeys turns off keyboard shortcuts.
    • Source: main.js search: session.midiHotkeys, disablehotkeys.

  • Name: midiremote | remotemidi

    • Scope: director
    • Type/Default: number | 1/4 depending on context
    • Description: Allow remote MIDI control channel bridging.
    • Source: main.js search: session.midiRemote.

  • Name: midipush | midiout | mo; midipull | midiin | midin | mi

    • Scope: director
    • Type/Default: boolean/number | off/true
    • Description: Send (midipush/midiout) or receive (midipull/midiin) MIDI.
    • Source: main.js search: session.midiOut, session.midiIn.

  • Name: midichannel; mididevice; mididelay; midioffset; midiiframe

    • Scope: director
    • Type/Default: varies | defaults in code
    • Description: MIDI routing channel/device selection, delay/offset adjustments, iframe mode.
    • Source: main.js/webrtc.js around the MIDI blocks.

  • Name: timecode | tc | showtimecode

    • Scope: director
    • Type/Default: boolean/string | off
    • Description: Enable/show MIDI timecode overlay/state.
    • Source: main.js search: session.midiTimecode.

  • Layout & Director Controls

  • Name: layouts

    • Scope: director UI
    • Type/Default: string | auto
    • Description: Select built-in or custom layout presets via director UI/API.
    • Source: advanced-settings/director-parameters/and-layouts.md

  • Name: layout; viewslot; updateonslotschange | uosc

    • Aliases: updateonslotchange
    • Scope: director/scene
    • Type/Default: object/index/bool | off
    • Description: Apply a specific layout JSON (&layout= raw/URL‑encoded or base64), force a specific viewslot, and control whether updates should apply on slot change (disable with &uosc=false).
    • Source: main.js search: session.layout, session.viewslot, session.updateOnSlotChange.

  • Name: previewmode | pausepreview | hidecodirectors

    • Scope: director UI
    • Type/Default: boolean | off
    • Description: Control director preview behavior and visibility; manage co-director UI elements. Aliases include hidecodirector and hidedirectors.
    • Source: advanced-settings/director-parameters/and-previewmode.md, and-pausepreview.md, and-hidecodirectors.md

  • Name: maindirectorpassword

    • Scope: director/room
    • Type/Default: string | none
    • Description: Set/require a main director password for elevated control.
    • Source: advanced-settings/director-parameters/and-maindirectorpassword.md

  • Name: autoadd

    • Scope: director/scene
    • Type/Default: list | off
    • Description: Comma-separated stream IDs to auto-add to the scene as they connect.
    • Source: main.js/lib.js search: session.autoadd.

  • Name: showdirector | sd; hidedirector | hidedirectors

    • Scope: director/scene
    • Type/Default: number/bool | 0
    • Description: Controls director presence in scenes: 0=none, 1=video+audio (no iframe/widgets), 2=video‑only, 3=screenshare‑only, 4=all. hidedirector forces director hidden.
    • Source: main.js/webrtc.js search: session.showDirector, application in scene rules.

  • Name: inclusivelayoutaudio | exclusivelayoutaudio

    • Scope: director/scene
    • Type/Default: boolean | exclusive by default for viewslot
    • Description: Audio mixing policy for layout scenes; exclusive limits audio to visible slots vs inclusive mixes others.
    • Source: main.js search: session.exclusiveLayoutAudio.

Room Bitrate Controls

  • Name: limittotalbitrate | ltb

    • Scope: director/room
    • Type/Default: kbps | disabled
    • Description: Limit total room video bitrate; visible in the director UI when active.
    • Source: main.js search: limittotalbitrate, ltb.

  • Name: hiddenscenebitrate

    • Scope: director/room
    • Type/Default: kbps | 0
    • Description: Target bitrate used for hidden scene tiles when rendered offscreen.
    • Source: main.js/lib.js search: hiddenSceneViewBitrate.

  • Name: lowbitratescene | cutscene

    • Scope: director/room
    • Type/Default: string | cutscene
    • Description: Lower bitrate policy on scene transitions to reduce load.
    • Source: main.js search: lowBitrateSceneChange.

  • Name: totalroombitrate | totalroomvideobitrate | trb | totalbitrate | tb

    • Scope: director/room
    • Type/Default: kbps | default from session
    • Description: Set total room bitrate for all senders/viewers; director can adjust dynamically.
    • Source: main.js/webrtc.js search: session.totalRoomBitrate.

Room Timer (API)

  • Tokens: timer; timeouts

    • Scope: director/room (API‑driven)
    • Description: Room timer is controlled via API/iframe commands (start/pause/stop). Not a URL parameter.
    • Source: lib.js search: startRoomTimer, pauseRoomTimer, stopRoomTimer.

  • Name: totalscenebitrate | maxtotalscenebitrate | tsb | mtsb | totalbitrate | tb

    • Scope: director/room
    • Type/Default: kbps | none
    • Description: Set or cap the total scene bitrate budget; alias family of parameters.
    • Source: main.js search: session.totalSceneBitrate.

Groups

  • Name: group | groups; groupview | viewgroup | gv; groupmode | gm
    • Scope: director/scene
    • Type/Default: string | empty
    • Description: Assign streams to named groups and set group view/mode for layout logic.
    • Source: main.js search: session.group, session.groupView, session.groupMode.

Scene Link Settings

  • Name: scenelinkbitrate; scenelinkcodec

    • Scope: director/scene
    • Type/Default: kbps/string | none
    • Description: Hint total bitrate/codec to apply in generated scene links for downstream consumers.
    • Source: main.js search: session.bitrateGroupFlag, session.codecGroupFlag.

  • Name: scenetype | type; openscene | openscenes

    • Scope: director/scene
    • Type/Default: number/bool | false
    • Description: Configure scene behavior and allow opening scenes via API/links.
    • Source: main.js/webrtc.js search: session.sceneType, session.openscene.

Limits and Publishers

  • Name: maxpublishers | mp
    • Scope: room/director
    • Type/Default: number | unlimited
    • Description: Limit number of publishers/guests allowed to join.
    • Source: main.js search: session.maxpublishers.

Iframe / Remote APIs

Remote Flag

  • &remote enables remote stat access and limited control permissions for monitoring tools.

HTTP/WSS Remote Control API

  • Parameter: &api=KEY (see docs general-settings/api.md).
  • Use: A companion controller with the same API key may send commands to the session.

Iframe Integration

  • PostMessage and DOM hooks allow embedding and control. Prefer using explicit &remote and API keys where applicable.

Notes

  • Keep API keys secret; use realm/password and hash checks for public links.
  • Some actions depend on user gesture or browser policy; remote commands cannot bypass autoplay/device permission gates.

Remote/OSC and Webhooks

  • Name: api | osc

    • Scope: global
    • Type/Default: string | off
    • Description: Enables Remote/OSC control using the provided key/value. When set, the app initializes the OSC client shortly after load.
    • Source: main.js search: session.api, oscClient()

  • Name: postapi | posturl

    • Scope: global
    • Type/Default: URL | off
    • Description: Sends JSON webhooks to the given endpoint with connection/stat events; expects HTTPS. Value is URL‑decoded by the app.
    • Source: main.js search: session.postApi = decodeURI(session.postApi)

Commands Quick Reference (from source)

  • Message schema: postMessage/remote API payload supports { action, value?, value2?, target? }.
    • action: string key (see below). value/value2: arguments; strings "true"/"false" normalized to boolean.
    • target: UUID or streamID when applicable; omit to apply to self or globally. Some actions accept "*" to apply to all.
    • Source: lib.js search: processMessage, Commands.

Session/media toggles

  • mic | speaker | camera | video: boolean or "toggle". Returns current state.
  • hangup: ends the session.
  • bitrate: number kbps (0=off, -1=auto) applied to all peers.
  • volume: 0–100 percent (per WebAudio pipeline if active).
  • reload: soft‑reload view.

Chat

  • sendChat, sendChatMessage: send text to chat; showChatOverlay displays an overlay of a message.

Groups/scenes

  • group/joinGroup/leaveGroup: add/remove from scene groups.
  • viewGroup/joinViewGroup/leaveViewGroup: viewer group selection.
  • soloVideo | highlight: toggle solo/infocus for the director.
  • activeSpeaker: number (profile) or toggle; enables active‑speaker switching.

Room timer (director)

  • startRoomTimer, pauseRoomTimer, stopRoomTimer: control director room timer (UI driven).

PTZ/zoom/camera control

  • zoom | focus | pan | tilt | exposure: value (float) and optional value2 true|"true"|"abs" to set absolute; else relative.
  • setAspectRatio: float or "W:H" (e.g., "16:9"). Applies camera constraint.
  • videoConstraint: generic constraint setter; value=constraint name, value2=value (boolean/number supported).

Buffering & stats

  • setBufferDelay: value ms; optional value2 target UUID|streamID|"*".
  • getStats: return quick stats; getDetails: return detailed state; getGuestList: list of guests.

Slides / tally

  • prevSlide, nextSlide: controls mapped via MIDI emulation.
  • tallylight: values onair|active|standby|off|false|0 or a number; overrides tally state.

Targeting/returns

  • Most actions return the applied/updated state or true on success. Target may be a UUID or a streamID; where both apply, UUID takes precedence.

Notes

  • Many of these actions have dedicated pages under iframe-api/api-commands/. This section reflects the live in‑code map (lib.js setupCommands()), which backs the Iframe API, the HTTP/WSS remote API, and UI integrations.

Additional Interop & Relay

Name: whipview | whip; whippush | whipout | pushwhip; cftoken | cft

  • Scope: interop
  • Description: WHIP/WHEP ingress/egress controls for interop with streaming services; Cloudflare token helper.
  • Interactions: &noaudiowhipin, &novideowhipin, &whipwait, &whepwait, &endpage.
  • Source: main.js search: whipClient, whipOutput, cftoken
  • Source: main.js search: whipClient, whipOutput, cftoken

WHIP/WHEP Publishing Options

  • Name: whipoutcodec | whipoutvideocodec | woc | wovc; whipoutaudiocodec | woac

    • Scope: interop (publish)
    • Type/Default: string/list | auto
    • Description: Set preferred codecs for WHIP output. Multiple video codecs can be provided comma‑separated. Firefox limits H.264 in some cases. Aliases include Meshcast forms: mccodec (video), and mcab/mcaudiobitrate for audio bitrate.
    • Source: main.js search: session.whipOutCodec, session.whipOutAudioCodec.

  • Name: whipoutvideobitrate | wovb; whipoutaudiobitrate | woab

    • Scope: interop (publish)
    • Type/Default: kbps | none
    • Description: Target encoder bitrates for WHIP output. Aliases include mcb/mcbitrate (video) and mcab/mcaudiobitrate (audio) for Meshcast.
    • Source: main.js search: session.whipOutVideoBitrate, session.whipOutAudioBitrate.

  • Name: whippushtoken | whippush; whepplaytoken | whepplay

    • Scope: interop (auth)
    • Type/Default: string | none
    • Description: Provide tokens for WHIP push and WHEP play endpoints where required.
    • Source: webrtc.js fields: session.whipOutputToken (whip push), session.whepInputToken (whep play).

  • Name: whipoutkeyframe; whipoutkeyframenewviewer

    • Scope: interop (publish)
    • Type/Default: ms | none
    • Description: Force periodic keyframes for WHIP output, and/or trigger on new viewer joins (if supported by encoder).
    • Source: webrtc.js search: session.whipOutKeyframe, session.whipOutKeyframeOnNewViewer.

  • Name: wossbitrate | wosscodec | woscale

    • Scope: interop (publish screenshare)
    • Type/Default: kbps/string/percent | defaults vary
    • Description: WHIP output controls specific to screen-share pipeline (bitrate, codec, scale factor). Aliases include Meshcast forms mcscreensharebitrate/mcssbitrate and mcscreensharecodec/mcsscodec.

  • Source: main.js search: whipoutscreensharebitrate, whipoutscreensharecodec, whipOutScale.

Encryption & Data Channels

  • Name: e2ee | insertablestreams | is

    • Scope: interop/security
    • Type/Default: boolean/string | off
    • Description: Enable Encoded Insertable Streams pipeline. e2ee selects end‑to‑end encryption mode; insertablestreams/is accept values like lyra/e2ee or true.
    • Source: main.js search: session.encodedInsertableStreams.

  • Name: datamode | dataonly

    • Scope: interop/data
    • Type/Default: boolean | off
    • Description: Prefer/limit to datachannel‑only connectivity where supported.
    • Source: main.js search: datamode, dataonly.

Experimental & Misc

  • Name: planb

    • Scope: interop
    • Type/Default: boolean | off
    • Description: Enable legacy SDP Plan B behavior where available.
    • Source: main.js search: planb.

  • Name: resources

    • Scope: interop/data
    • Type/Default: list/bool | off
    • Description: Allow “resources” datachannel to send named resource items; accepts a CSV allowlist or true to allow all.
    • Source: main.js/webrtc.js/lib.js search: resources.

WHEP Host/Share

  • Name: hostwhep | whepout

    • Scope: interop (WHEP host)
    • Type/Default: string | stream ID or false
    • Description: Host a WHEP endpoint for the current stream; uses provided value or stream ID.
    • Source: main.js search: session.whepHost.

  • Name: whepshare | whepsrc; whepsharetoken | whepsrctoken

    • Scope: interop (WHEP ingest)
    • Type/Default: URL/token | none
    • Description: View/ingest a WHEP source URL and optional token; configures whipoutSettings for interop.
    • Source: main.js search: whepshare, whepsrctoken.

  • Name: hearptsn

    • Scope: interop/voice
    • Type/Default: string (code) | none
    • Description: Join an audio listen path via a phone/telephony bridge (experimental).
    • Source: main.js search: hearptsn.

Posting Images (Experimental)

  • Name: postimage; postinterval
    • Scope: interop/UX
    • Type/Default: URL; seconds | 60 (min 5)
    • Description: Periodically POST a captured image (JPEG) to a URL; postinterval controls the cadence.
    • Source: main.js search: postimage, postinterval.

Transcription

  • Name: transcript | transcribe | trans
    • Scope: interop
    • Type/Default: string (locale) | en‑US
    • Description: Enable live transcription with a given locale code.
    • Source: main.js search: session.transcript.

Name: noaudiowhipin; novideowhipin

  • Scope: interop
  • Description: Force disable audio/video on WHIP ingest.
  • Source: main.js search: forceNoAudioWhipIn

Name: whipwait | whipicewait; whepwait | whepicewait

  • Scope: interop
  • Description: ICE gather wait times (ms) before sending offers for WHIP/WHEP.
  • Source: main.js search: session.whipWait, session.whepWait

Name: meshcast; meshcastcode | mccode; nomeshcast | nowhep; chunkcast

  • Scope: relay
  • Description: Meshcast/relay toggles and options for scale or distribution.
  • Source: main.js search: meshcast(true), meshcastCode, noMeshcast, chunkcast

Meshcast (Explicit)

  • Name: meshcast

    • Scope: relay
    • Type/Default: string | any
    • Description: Enable Meshcast and select target (e.g., any/video/audio/server code/id).
    • Source: main.js search: session.meshcast.

  • Name: nomeshcast | nowhep; meshcastfailed

    • Scope: relay
    • Type/Default: boolean | off
    • Description: Disable Meshcast/WHEP relay; meshcastfailed allows auto fallback links.
    • Source: main.js/webrtc.js search: session.noMeshcast, meshcastfailed.

  • Name: meshcastbitrate | mcbitrate; meshcastcodec | mccodec; meshcastscale | mcscale; meshcastab

    • Scope: relay (Meshcast)
    • Type/Default: kbps/string/percent | defaults vary
    • Description: Control Meshcast video bitrate/codec/scale and audio bitrate. See WHIP alias docs above for behavior.
    • Source: main.js search: meshcastbitrate, meshcastcodec, meshcastscale, meshcastab.

Chunked Mode Controls

  • Name: nochunk | nochunked; nochunkaudio | nochunkedaudio

    • Scope: interop/relay
    • Type/Default: boolean | off
    • Description: Disable chunked streaming globally or for audio only.
    • Source: main.js search: nochunk, nochunkaudio.

  • Name: nochunkediframestats

    • Scope: interop/relay
    • Type/Default: boolean | off
    • Description: Disable reporting of chunked IFRAME stats to the iframe API.
    • Source: main.js search: nochunkediframestats.

  • Name: relaywss

    • Scope: relay
    • Type/Default: URL | none
    • Description: Override relay WebSocket endpoint for chunkcast/relay use cases.
    • Source: webrtc.js search: session.relaywss.

Session Redirects and Timers

  • Name: endpage; endpagetimer

    • Scope: interop/UX
    • Type/Default: URL; ms | 3000 ms default
    • Description: Redirect to a URL after hangup; optional delay with endpagetimer.
    • Source: main.js session.redirectHangup, session.redirectHangupTimer

  • Name: autoend

    • Scope: session
    • Type/Default: ms | default 600000 (10 minutes)
    • Description: Auto hangup after a duration (default if no value provided is 10 minutes).
    • Source: main.js session.autoEnd

Recording Automation

  • Name: autorecord; autorecordlocal; autorecordremote

    • Scope: session/recording
    • Type/Default: boolean/string | off
    • Description: Automatically start recording; local (on this device) or remote (where supported). Some platforms (iOS) restrict auto‑start.
    • Source: main.js search: session.autorecord*; lib.js recording guards.

  • Name: waitpage; waitmessage

    • Scope: UX
    • Type/Default: URL/string | none
    • Description: Show a custom intermediate page or message while waiting for a guest/session to resume or connect.
    • Source: main.js/webrtc.js search: session.waitPage, waitmessage.

  • Name: beep | notify | tone; custombeep; beepvolume

    • Scope: UX/notifications
    • Type/Default: boolean/URL/percent | off/0
    • Description: Enable join/leave beep; custombeep provides an audio URL; beepvolume sets volume percent.
    • Source: main.js search: beep, custombeep, beepvolume.

  • Name: welcome | entrymsg | welcomeb64; welcomehtml; welcomeimg | welcomeimage

    • Scope: UX
    • Type/Default: string/base64/URL | none
    • Description: Show a welcome message/HTML/image banner to guests on entry. Base64 variants accepted.
    • Source: main.js search: welcomeMessage, welcomeHTML, welcomeImage.

  • Name: whipme

    • Scope: interop (WIP UI)
    • Type/Default: boolean | off
    • Description: Shows WIP WHIP UI section.
    • Source: main.js search: getById("container-18").classList.remove("hidden")

Media & Performance

  • Codecs: Select via &codec (h264/vp9/av1/hevc|h265) subject to browser/OS support. Hardware H.264 decode benefits OBS; VP9/AV1 improve compression at higher CPU. HEVC/H.265 notes:
    • Publish: Safari commonly supports HEVC; Chrome HEVC encode availability is limited (licensing/OS/GPU dependent). Don’t assume Chrome can publish HEVC.
    • View: Modern Chrome builds can natively decode HEVC on many platforms. OBS Browser Source depends on its bundled CEF; verify CEF HEVC support before relying on it.
    • Negotiation: If both peers expose HEVC in SDP, WebRTC may select it even without &codec. You can hint with &codec=hevc/&codec=h265, but actual selection depends on encode/decode availability.
  • Preferences: Viewers and iframe API can request codecs (webrtc.js prefers H.264/VP8/V9 based on context). Android + hardware H.264 has special handling.

Keyframes & Bandwidth Controls

  • Name: keyframeinterval | keyframerate | keyframe | fki

    • Scope: source/interop
    • Type/Default: number (seconds) | 0 (auto)
    • Description: Request a target keyframe interval for encoders where supported.
    • Source: main.js search: session.keyframeRate.

  • Name: maxbandwidth

    • Scope: source/viewer
    • Type/Default: percent (0–200) | 80 default when set
    • Description: Cap outbound bitrate as a percentage of available bandwidth; clamps to [0,200].
    • Source: main.js/webrtc.js search: session.maxBandwidth, limitMaxBandwidth.

  • Name: maxmobilebitrate

    • Scope: source/viewer (mobile)
    • Type/Default: kbps | 350
    • Description: Mobile maximum video bitrate cap to preserve performance; applied when platform is mobile.
    • Source: webrtc.js search: session.maxMobileBitrate.

Startup Optimization

  • Name: optimize

    • Scope: viewer/scene
    • Type/Default: number | off
    • Description: Optimize bitrate of non-visible tiles to a target kbps; 0 applies aggressive optimize logic.
    • Source: main.js/webrtc.js/lib.js search: session.optimize.

  • Name: preloadbitrate; rampuptime

    • Scope: source/viewer
    • Type/Default: kbps/ms | 1500 kbps, 6000 ms
    • Description: Use preloadbitrate during initial handshake and ramp to estimator over rampuptime.
    • Source: main.js/webrtc.js search: session.preloadbitrate, session.rampUpTime.

  • Name: noremb

    • Scope: interop
    • Type/Default: boolean | off
    • Description: Disable REMB feedback; tests different bandwidth estimator behavior.
    • Source: main.js/webrtc.js search: session.noREMB.

Zoomed View Bitrate

  • Name: zoomedbitrate | zb
    • Scope: viewer/source
    • Type/Default: kbps | 2500
    • Description: Target bitrate to request when a zoomed effect is active.
    • Source: main.js search: session.zoomedBitrate.
  • Bitrate control: &bitrate targets video; &maxbitrate caps. Room director can enforce &roombitrate with &controlroombitrate.
  • Frame rate and resolution: Balance &frameRate, &width/&height with encoder and network capacity.
  • Packet loss/jitter: Use &buffer (viewer) and &sync to trade latency for smoothness. Monitor stats for RTT, dropped frames, and NACK/PLI rates.
  • Audio quality: &audiobitrate adjusts Opus; stereo/echo/noise settings interact with hardware and OS; iOS disables custom bitrates.
  • CPU/GPU: Avoid excessive simultaneous decodes in OBS; use program/scene views and consider &minipreview to reduce local UI load.
  • Network: WebRTC uses STUN/TURN/ICE. Relays/meshcast can help with restrictive NATs or scale; &relay and TURN specifics depend on deployment.
  • Stats: See kb/media-stats.md for field meanings and thresholds; use &stats, &remote, and iframe API continuous stats for monitoring.

Stats & Diagnostics

Key Stats (typical WebRTC)

  • Round-trip time (RTT): End-to-end signaling latency; high values degrade bitrate decisions.
  • Jitter: Variability in packet arrival; contributes to choppy audio/video. Viewer &buffer mitigates.
  • availableOutgoingBitrate: Sender’s estimate of allowed bitrate; capped by encoder and network.
  • Packets lost / NACKs per second: Loss indicator; frequent NACKs suggest congestion or Wi‑Fi issues.
  • Frames dropped/decoded/received: Video pipeline health; decode drops suggest CPU/GPU limits.
  • Audio level (VU): Confirm mic presence and gating.

Where to see them

  • &stats overlay (viewer/program links) and remote monitor tools (&remote, speed test monitor).
  • Iframe/Remote API: request continuous stats via postMessage to parent (see examples).

Useful thresholds

  • RTT > 200 ms: increase &buffer (100–200ms), reduce &bitrate.
  • Jitter > 15 ms sustained: viewer &buffer 150–250ms, prefer wired Ethernet.
  • availableOutgoingBitrate << target: lower &bitrate or enable room bitrate control.
  • Persistent NACKs/PLIs: increase keyframe interval, lower framerate/bitrate.

Source references

  • webrtc.js: stats accumulation (e.g., nacks_per_second), bitrate logic, codec preferences.
  • main.js: &stats toggles and remote monitoring flags.

Integrations

  • OBS
    • Use Browser Source with ?view=ID or room scene URLs. For better playback, consider Electron Capture app for &buffer and A/V sync support.
    • Virtual Cam can feed OBS output back into VDO.Ninja as a source when needed.
  • Self‑hosting handshake
    • Use compatible websocket signaling server; see general-settings/pie.md and referenced repo. Peer traffic remains P2P unless relayed.
  • External platforms
    • WHIP/WHEP: Interop with services like Twitch (special tokens) and CF relay.
    • ATEM/NDI/SRT: Typically via bridge apps; out of scope here beyond detection.

OBS Remote/Controls

  • Name: obscontrols | controlobs | obs | remoteobs | obsremote

    • Scope: viewer/director
    • Type/Default: boolean/string | off
    • Description: Enable OBS control integration states; values like full or truthy enable richer control messaging. false/0/off/no disable.
    • Source: main.js search: session.obsControls; webrtc.js messaging msg.info.obs_control.

  • Name: obsoff | disableobs | oo

    • Scope: global
    • Type/Default: boolean | off
    • Description: Disable OBS‑specific behaviors and UI adjustments.
    • Source: main.js search: session.disableOBS.

Widgets & Favicons

  • Name: widget; widgetleft; widgetwidth

    • Scope: viewer/director
    • Type/Default: URL/boolean/percent | 25%
    • Description: Embed an external widget sidebar; control side (left) and width percentage.
    • Source: main.js/webrtc.js search: session.widget*.

  • Note: Favicons are static in index.html (./media/favicon*). They are not set via URL params.

Social Stream & Streamlabs

  • Name: socialstream

    • Scope: integration mode
    • Type/Default: string | false
    • Description: Enable SocialStream integration mode for compatible overlays.
    • Source: main.js/webrtc.js search: session.socialstream.

  • Name: streamlabs

    • Scope: integration hint (macOS UI notice)
    • Type/Default: boolean | off
    • Description: Enables macOS compatibility messaging for StreamLabs; not a functional behavior toggle.
    • Source: main.js search: streamlabs usage (UI notice only).

OBS UI State Mirrors

  • Name: noobsstream; noobsvirtual; noobsrecord; noobssourceactive; noobsvisibility
    • Scope: OBS integration
    • Type/Default: boolean | off
    • Description: Override OBS UI state indicators (streaming/virtualcam/recording/sourceActive/visibility) in the page; useful for JS integrations or kiosk views.
    • Source: main.js search: session.obsState.* setters.

Troubleshooting Playbook

Approach

  • Quick checks: device permissions, mic/cam selection, local CPU/GPU load, network quality, browser/OS specifics.
  • Deep dive: open stats (&stats), inspect ICE state, RTT, bitrate, dropped frames, audio levels, packet loss.
  • Isolation: test direct link vs room, try relay/meshcast, reduce bitrate/framerate, use &buffer on viewers.

Top Issues

  • No audio/video
    • Check browser permissions; verify &vdo/&ado values; confirm device index/name; try ?vdo=1&ado=1.
    • For screenshare audio, ensure system audio capture is supported and enabled.
  • Appearing then disappearing guest
    • Symptoms of network drops or tab suspends. Add viewer &buffer=120, lower source &bitrate=1500, check power settings.
  • Already in use / claimed errors
    • Stream ID collision across the same realm. Change &push or add/change &password.
  • High latency or choppy playback
    • Increase &buffer on viewer, limit &frameRate, cap &bitrate, check stats for high RTT. Consider relay/meshcast.
  • A/V sync drift
    • Use viewer &buffer with &sync. Prefer Electron Capture for robust sync in display pipelines.
  • OBS playback artifacts
    • Try Browser Source hardware acceleration; reduce concurrent decodes; consider Electron Capture + window capture.
  • Mobile issues (iOS/Android)
    • iOS disables custom audio bitrate; ensure &audiobitrate not set. Use Safari/Chrome latest. Avoid backgrounding tabs.

Diagnostics Links

  • Minimal test publish: https://vdo.ninja/?push=TEST&label=Test&autostart
  • Minimal test view: https://vdo.ninja/?view=TEST&stats&buffer=0

Security & Privacy

  • Link hygiene: Use &password and short &hash checks for publicly shared links; avoid exposing director URLs.
  • Realms: Passwords isolate stream/room ID namespaces; same &push can exist under different passwords without collision.
  • Remote/API: Only enable &remote and &api=KEY when needed; keep keys private and rotate.
  • Permissions: Browsers require user gesture for device capture and audio playback; remote commands cannot bypass.
  • Embeds: Use &cleanviewer and &nocontrols for embeds; consider sandbox attributes when iframing third‑party content.

Side‑Project Routing

Detect and redirect when queries are about:

  • Social Stream Ninja: chat/alerts aggregation for streams; not core to P2P video transport.
  • Raspberry Ninja: Raspberry Pi capture/bridge specifics.
  • Caption Ninja: live captioning/transcription overlays.
  • Electron Capture: stand‑alone window capture with strong playback/&buffer support.
  • Meshcast: relay/SFU helper for larger audiences.

Routing Guidance

  • If user needs chat overlays/alerts → Social Stream Ninja KB/bot.
  • If user mentions Pi hardware capture → Raspberry Ninja KB/bot.
  • If captions/transcripts/subtitles → Caption Ninja KB/bot.
  • If OBS playback quirks or desire for resilient viewing → Electron Capture KB/bot.
  • If scaling viewers beyond P2P → Meshcast docs.

Glossary & Index

  • Stream ID: Unique identifier for a published media stream; used by &view.
  • Room: Named collection for multi‑party sessions; managed by director.
  • Director/Co‑Director: Control plane roles to manage rooms and guests.
  • Realm/Password: Security namespace that isolates stream/room IDs.
  • WHIP/WHEP: HTTP‑based ingest/playout for WebRTC interop with CDNs/services.
  • STUN/TURN/ICE: NAT traversal components; TURN can relay traffic when direct P2P fails.
  • Buffer/Sync: Viewer side latency and A/V alignment controls.

Parameter Index

  • See kb/parameters/ for canonical entries and aliases.

How does it work

VDO.Ninja harnesses the power of WebRTC, a technology that enables secure, real-time communication directly between web browsers. This peer-to-peer approach means most of the action happens right within your browser, ensuring low latency and high-quality video transmission. While VDO.Ninja does utilize servers for initial setup, the actual video data flows directly between devices, leading to a remarkably smooth experience.

Benefits of the Peer-to-Peer Approach

  • Ultra-Low Latency: Experience minimal delays, making interactions feel natural and conversations flow seamlessly.
  • Exceptional Video Quality: Enjoy crisp, clear video, even at high resolutions.
  • Bandwidth Efficiency: When on the same local network, video data stays local, saving you precious bandwidth.
  • OBS Integration: Stream directly into OBS or other browser-enabled applications without any extra software or accounts.
  • Versatility: VDO.Ninja works across a wide range of devices and platforms, from your smartphone to a Tesla!

Simple and Powerful

VDO.Ninja's core functionality revolves around two types of URLs:

  • PUSH URL: This is used on the sending device (your smartphone, webcam, etc.) to capture and transmit the video and audio.
  • VIEW URL: Open this URL on any device, anywhere, to watch the live stream in a clean, full-screen interface.

Collaboration Made Easy

Beyond basic streaming, VDO.Ninja offers group chat rooms, giving you more control and flexibility when working with multiple streams simultaneously. You can manage participants, adjust settings, and even create custom layouts, all within your browser.

URL Parameters: Your Control Center

VDO.Ninja uses URL parameters to fine-tune your streaming experience. These parameters act like commands, allowing you to adjust video quality, enable features, and much more. Think of them as similar to command-line options you might use with software like FFmpeg.

Ready to Dive Deeper?

While VDO.Ninja's default settings are designed to be user-friendly, its extensive feature set offers endless possibilities. Explore our documentation to discover all the advanced options and unleash the full potential of VDO.Ninja for your video production needs.

FAQ

Project Information and Support Links

Web service URL: https://vdo.ninja/
Project development URL: https://github.com/steveseguin/vdo.ninja
Developer/maintainer: [email protected]
Donations: via GitHub Sponsors

Community Support

Discord: https://discord.vdo.ninja
Reddit: https://www.reddit.com/r/VDONinja/

Where can I get support?

The preferred support mechanism is via Reddit or Discord, which offer community-assisted support. Development issues, feature requests, and bugs are tracked on GitHub. For mission critical support issues, or business-related inquiries, you can contact Steve directly.

Where can I report a bug?

It is most helpful to report bugs via the official GitHub. We also monitor the Reddit and Discord channels, though it is easier to miss reports that occur there.

description: Remote control API (HTTP-GET / WSS-based)

&api

General Option! (&push, &room, &view, &scene)

Aliases

  • &osc

Options

Example: &api=SomeAPIKey

ValueDescription
(key)API KEY to control VDO.Ninja remotely

Details

You can use this parameter to enable the HTTP/WSS remote control API for VDO.Ninja. You pass a API KEY value to the parameter, and if it matches the remote control's API KEY, then the remote control interface will be able to send commands to your VDO.Ninja session.

You can control guests in the director's room, or you can control your local microphone and camera, as examples.

Please see https://github.com/steveseguin/Companion-Ninja for documentation and details of this command. There is a module for Bitfocus's Companion available, along with HTTP and WSS API endpoints.

Please see https://companion.vdo.ninja for a sample interface to test this command out with. The Companion module is available here: https://github.com/bitfocus/companion-module-vdo-ninja

Related

{% content-ref url="../guides/hotkey-support/" %} hotkey-support {% endcontent-ref %}

{% content-ref url="../guides/hotkey-support/how-to-control-vdo.ninja-with-touch-portal.md" %} how-to-control-vdo.ninja-with-touch-portal.md {% endcontent-ref %}

description: Allows remote operation of the zoom and focus, and access to statistics

&remote

General Option! (&push, &room, &view, &scene)

Aliases

  • &rem

Options

Example: &remote=somepasscode

Value Description
(some passcode value) this string will have to match on both sides of the connection

Details

{% hint style="info" %} Android devices only! {% endhint %}

Must be enabled by both the sender and viewer with identical passcodes in order to work. This is a security precaution. If you pass no value to &remote, it will still work, so long as both sides leave it blank.

In some ways, the &remote function gives permissions to a viewer that would otherwise be restricted to a director or the sender themselves.

A director of a room can remotely change focus/zoom of a participant without needing the &remote command. This applies to both the main director and any co-director, and that's accessible via their per-guest video settings options.

There is a toggle in the director's room which adds &remote to the guest's invite link. (2).png>)

Remote Zooming using &remote

Use the mouse wheel over the video you wish to zoom in or out of as a viewer. The sender needs to support zoom, which often is limited to some webcams and Android devices.

Remote Focus using &remote

Remote focus may also work as well by holding CTRL (or Command) while using the mouse wheel. The sender needs to support focus for this to work, which often is limited to some webcams and Android devices. It's sometime listed as "focus distance" in the senders video settings menu.

To check if a device supports zoom or focus, go to https://vdo.ninja/supports. It will show whether your browser and the selected camera supports focus/zoom.

If you are the one publishing with an Android device, you can hold the screen down and move your finger up or down to zoom in and out as well; you don't need a remote user or the settings menu to do this.

Remote Statistics using &remote

A bit less accessible, but using &remote also gives the viewer permission to request statistic information. The monitoring tool, also used by the VDO.Ninja speed-test, makes use of the &remote flag to remote access stats.

https://vdo.ninja/monitor

Example usage:

Monitoring Link: https://vdo.ninja/monitor?sid=BaGpHmu,stevetest123

.png>)

It will pull statistics data from the sender of a video stream and visualize it, allowing for remote monitoring of stream quality. For this command to work though, the publisher needs to add &remote to their URL to allow for remote access.

This reason for needing &remote is privacy related, as the statistical information being shared with the monitor page could include information like browser or system data of remote viewers unconnected to the monitoring user. While likely unneeded, adding &remote=somePassword to both the monitoring and push links will further increase security with a password check.

The VDO.Ninja speed test (https://vdo.ninja/speedtest) has a link at the bottom of the page, which is all already configured to provide remote monitoring of speed test results without needing to play with any parameters or settings.

In regards to &sid, you can pass multiple stream IDs, and so long as each remote sender of that stream ID has &remote added to their URL, the monitoring page will be able to monitor all those outbound streams.

Nacks per second is similar to packet loss, and so a high nack loss rate implies a restriction on network quality. "quality limitation reason" may also be stated, which can imply whether the CPU or Network is the bottleneck in achieving maximum quality.

If viewers of a stream ID being monitor have a label assigned (&label), then that will appear as a label on the monitor page besides the graph, identifying it.

Remote on Basic Push and View Links

When using the &remote control option, the viewer can now remotely hang-up the sender via the right-click menu. The sender needs to remote control enabled for this to work of course.

&remote, if used on a push link without a password added, it will now allow the remote viewer limited control (hangup, focus, zoom, detailed stats), even if they don't have &remote added to their URL also. When using &remote, the option to "reload" the remote browser is now available, so you can potentially reload a remote unattended session that contains&autostart&webcam..png>)

description: >- Sets the audio mode to stereo and changes default audio settings to improve audio quality

&stereo

General Option! (&push, &room, &view, &scene)

Aliases

Options

Example: &stereo=1

ValueDescription
(no value given)It behaves like 3 or 1, depending on if you are a guest or not
0will try to down-mix your mic to mono. Does not enable any pro-audio settings
1enables it for both push and view (if used on both links)
2enables it just for viewing requests and not publishing requests
3enables it for just publishing requests and not viewing requests
4enables 5.1-multichannel audio support (Experimental and may require a Chrome flag to be set)
5This is the default if nothing is set. It behaves like 3 or 1, depending on if you are a guest or not
6solely just enables stereo for both in/out
87.1 surround sound audio #and-stereo-8

Details

Adding &stereo to the URL will apply audio-specific setting presets. For inbound audio streams, it can be used to increase the audio bitrate from 32-kbps to 256-kbps. For outbound streams, it will disable echo-cancellation and noise-reduction. When applied to both the outbound and inbound sides of an audio stream, it will also enable stereo audio if available.

There are a variety of different modes that apply different combination of presets. You can also override any preset with other URL parameters, such as &audiobitrate, &outboundaudiobitrate, and &aec=1.

If using a microphone, wearing headphones is strongly recommended if using this parameter, along with knowledge of correctly setting your microphone gain settings. Echo and feedback issues can occur if this option is used incorrectly.

When using this option in a group room, you can't simply just apply this URL option to the director and have it apply to all guests. You will need to add the flag to each guest and to each scene-link to enable the pro-audio stereo mode. Depending on the value you pass to the URL parameter, you will get slightly different outcomes.

More Details

&stereo and &proaudio currently do the same thing, so they are just aliases of each other. When used, they can be used to setup the audio transfer pipeline to allow for unprocessed, high-bitrate, stereo audio.

Use of this option is generally for advanced users who understand the consequences of enabling this. High-quality audio can cause audio clicking, reduced video quality, feedback issues, low volume levels, and higher background noise levels.

For stereo-channel support to work, you will want both the viewer AND the publisher of the stream to have the respective &stereo flag add to their URL.

You can customize things further using &aec, &ag, &dn, &ab and &mono. These flags will override the presets applied by the &stereo flag. Please note, depending on your browser, enabling &aec, &ag, or &dn can force disable stereo audio.

The most powerful mode is stereo=1 , which if enabled:

  • Turns off audio normalization or auto-gain when publishing (&push)
  • Turns off noise-cancellation when publishing
  • Turns off echo-cancellation when publishing
  • Enables higher audio bitrate playback, up to 256-kbps, when listening (&view)

If the parameter is used, but left without a value, it is treated as a special case (either 1 or 3). Please see follow link for more info:

https://docs.google.com/spreadsheets/d/e/2PACX-1vS7Up5jgXPcmg_tN52JLgXBZG3wfHB3pZDQWimzxixiuRIDbeMdmU11fgrMpdYFT6yy4Igrkc9hnReY/pubhtml

Option alias aec autogain denoise stereo playback stereo output default ab in max ab out limited ab in cbr
&stereo=0 off on on on off no 32 510 510 no
&stereo=1 both off off off on yes 256 510 510 yes
&stereo=2 in on on on on no 256 510 510 yes
&stereo=3 out off off off off yes 32 510 510 no
&stereo=4 multi off off off on (5.1) yes 256 510 510 yes

Newbie mode

The default mode when &stereo is used alone is &stereo=5, which acts like either &stereo=3 or &stereo=1, depending on whether the link its applied to is a room guest or not. This option will make the most sense for most users.

Option Context alias aec autogain denoise stereo playback stereo output default ab in max ab out limited ab in cbr
&stereo=5 Regular/OBS 5 off off off on yes 256 510 510 yes
&stereo=5 Director 5 off off off on yes 32 510 510 no
&stereo=5 Room Guest 5 off off off off yes 32 510 510 no

iOS Devices

Option alias aec autogain denoise stereo playback stereo output default ab in max ab out limited ab in cbr
iOS devices on on on off off 32 32 32 no

Just for reference, the audio codec used by VDO.Ninja is OPUS (48khz), which can provide high-fidelity music transfer when the audio bitrate is set to 80-kbps per channel or higher. The default audio bitrate used is 32-kbps VBR, which is sufficient for most voice applications. Increasing the audio bitrate to a near-lossless 500-kbps or something may end up causing more problems than anything, but that is supported if needed.

WHIP

&stereo now works with the WHIP output, so if enabled, you'll publish stereo 2.0 with a default audio bitrate of around 80 to 100-kbps; otherwise the default is mono at around 60kbps. These defaults bitrates might be changed own the road.

&stereo=8

7.1 surround sound audio is being supported now, in a technical sense, although really only if the source is a server stream. To use, add &stereo=8 on the viewer end. (5.1 multi channel was around supported with &stereo=4 I think)

Related

{% content-ref url="../advanced-settings/view-parameters/audiobitrate.md" %} audiobitrate.md {% endcontent-ref %}

{% content-ref url="../source-settings/and-outboundaudiobitrate.md" %} and-outboundaudiobitrate.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-screensharestereo.md" %} and-screensharestereo.md {% endcontent-ref %}

description: Shows the connection/media stats window by default

&stats

General Option! (&push, &room, &view, &scene)

Details

Adding &stats to a URL shows the connection/media stats window.

On desktop, you can hold CTRL (or CMD) and Left-Click a video to get its stats.
On Version 22 you can Right-Click -> Stats on a video feed to get its stats.

On mobile, you can just rapidly touch the display to trigger the stats window instead.

The &stats URL parameter is for those like vMix users who might not be able to interact with the browser source.

.png>)

description: Forces TURN relay server into use

&relay

General Option! (&push, &room, &view, &scene)

Aliases

  • &private
  • &privacy

Details

Forcing relay mode is provided for testing and emergency purposes. It will typically increase latency; sometimes by a lot.

Alternatives to relay mode include:

  • Using wired Ethernet instead of Wi-Fi will also reduce packet loss.
  • A VPN service, like Speedify, will likely be better than using a TURN server.

Uses of relay mode include:

  • Can potentially reduce packet loss with some guests on bad connections.
  • Some peer to peer connections over residential networks struggle, and introducing a relay server can help avoid those issues.
  • Has the advantage of hiding your IP address from peers.

You can deploy your own TURN server if intending to use this feature a lot or needing more bandwidth.

Please feel free to donate to VDO.Ninja to help support the provided TURN servers.

Currently TURN servers are deployed numerous countries around the world.

Ports that a TURN server may use include 443, 3478, and potentially others.

{% hint style="info" %} More information on what TURN is here {% endhint %}

Difference between &relay and &privacy

If using &privacy on the URL (using TURN server), with the intent being to hide your IP address, a page will prompt you if an IFrame tries to load, asking if you wish to continue.

Using &relay will not do this behavior, despite using the turn server none-the-less; so &privacy is evolving to be a bit more strict than &relay alone.

It will even show if loaded into OBS, as privacy trumps there. (IFrames can steal IP address, etc.).

You can also just use &nowebsite, to disable IFrames from loading at all (always existed as an option).

Certain known sites are excepted; YouTube, Twitch, Vimeo, etc. will not ask for confirmation.

Related

{% content-ref url="turn.md" %} turn.md {% endcontent-ref %}

description: Lets you specify a STUN server for webRTC negotiation

&stun

General Option! (&push, &room, &view, &scene)

Details

This parameter lets you specify a STUN server for webRTC negotiation. The default STUN servers use those provided by Google (and recently also Cloudflare), at stun:stun.l.google.com:19302, but with this command you can set your own.

&stun will overwrite the existing STUN values provided by VDO.Ninja. If you wish to keep the existing STUN server options, adding additional options, or if you wish to add multiple custom STUN servers, you can use the related &addstun parameter. This is the same idea, but when used it won't overwrite the existing STUN options.

Using &stun and &addstun together will let you specify two custom STUN servers.

Setting &stun to false will clear the default STUN servers.

If your STUN server requires a password, you can pass the STUN server address with semi-comma separated values in the form &stun=USERNAME;PASSWORD;ADDRESS

Basic sample usage of &stun:

https://vdo.ninja/?push&stun=stun:stun4.l.google.com:19302

About STUN servers

A STUN (Session Traversal Utilities for NAT) server is used to discover a device's public IP address and port, especially when it is behind a Network Address Translator (NAT), facilitating peer-to-peer communication in technologies like WebRTC.

If your browser has disabled WebRTC IP leaking, then the STUN servers may be pretty useless, as the only IP your browser will share with other peers is any obtained from the relay server.

Without a STUN server though, you will still share your local IP, the HOST candidate type, as well as any RELAY candidates obtained from available turn servers.

The magic with VDO.Ninja and peer-to-peer webRTC is largely made possible by STUN servers.

More about SRFLX vs PRFLX candidate modes

When dealing with ICE (Interactive Connectivity Establishment) candidates, you may encounter terms like "srflx" and "prflx," which refer to different types of ICE candidates. ICE is a protocol used for establishing peer-to-peer communication sessions, often for real-time audio and video communication.

  1. srflx (Server Reflexive):
    • Server reflexive candidates are created when a device behind a Network Address Translator (NAT) sends a request to a STUN (Session Traversal Utilities for NAT) server. The STUN server then sends a response back, and this response contains a reflexive candidate. This reflexive candidate represents the public IP and port of the NAT device.
    • Srflx candidates are used to traverse NATs and allow the devices on both sides to find a route to communicate through the NAT.
    • Srflx is the most common candidate type seen when making a connection with another remote peer on the Internet, via VDO.Ninja.
  2. prflx (Peer Reflexive):
    • Peer reflexive candidates are also a result of communication with a STUN server, but unlike server reflexive candidates, they represent the reflexive address of the remote peer, not the local device. In other words, they are the public IP and port of the other side, as observed by the STUN server.
    • Prflx candidates can be helpful in situations where a WebRTC peer wants to communicate with another peer, and it needs to discover the public address of that peer to establish direct communication.
    • Prflx are not common among VDO.Ninja connections, but may be seen when tethering, using a symmetrical firewall, or other non-common networking setups.

In summary, srflx and prflx candidates both involve the use of STUN servers to discover reflexive addresses, but srflx represents the public address of the local device (behind NAT), while prflx represents the public address of the remote peer. These types of candidates are crucial for WebRTC communication because they help establish peer-to-peer connections across NAT devices and firewalls.

Related

{% content-ref url="../newly-added-parameters/and-addstun.md" %} and-addstun.md {% endcontent-ref %}

{% content-ref url="turn.md" %} turn.md {% endcontent-ref %}

description: Lets you specify a custom TURN server or disable all TURN servers

&turn

General Option! (&push, &room, &view, &scene, &director)

Options

Example: &turn=steve;setupYourOwnPlease;turn:turn.vdo.ninja:443

ValueDescription
(user;pwd;turnserveraddress)Set this TURN server to turnserveraddress with username user and password pwd
false | offDisable the use of the TURN servers

Details

Several TURN servers are provided by Steve for free, for now, and these are automatically selected based on your geographic location. You may wish to use your own privately hosted TURN server instead though, and the &turn is one flexible way to select it.

Locations

  • Canada
  • Germany
  • USA
  • France/UK

Example Usage

https://vdo.ninja/?turn=steve;setupYourOwnPlease;turn:turn.vdo.ninja:443&relay

Note the use of turn:, and in the case of TLS/SSL, turns:

More Info

TURN Servers are designed to help certain users connect when they are behind a firewall or other network restriction. About 1 in 10 users need a TURN server to use VDO.Ninja; if you are having problems, check to see if they are using the TURN server.

Sometimes, rarely, using your own TURN server can improve video quality for some users, if the public network routing is very bad and the TURN server is hosted on a high-quality private network, like Google Cloud. Details are provided in the code repo no how to deploy your own (turnserver.md).

TURN servers are NOT something you can use to share one video stream with multiple viewers. (That is an SFU server, which is out of scope of this article.) A TURN server acts like a middle-man, routing the encrypted data between two peers, mainly when those two peers are unable to speak directly themselves.

Using a TURN server can also hide your IP address from other peers. You will need to use &relay to FORCE the TURN server to be enabled, as otherwise the system will still try to use a direct p2p connection, instead of the TURN server. You may want to add turn and relay flags to both the viewer and the sender side, to ensure things are correctly set.

https://vdo.ninja/speedtest performs a connection test using the TURN server. It will select the closest public TURN server to you. At peak hours, these TURN servers might have lower performance compared to at off-peak hours, so consider hosting your own TURN server if absolute maximum performance is needed.

You can check to see if you are using the TURN server by checking the connection stats window (Left-Click + CTRL while viewing a video. In this stats display, "Relay" implies connected to a TURN server. HOST implies connected via a LAN. SRFLX/PRFLX implies connected directly via STUN.

Installing your own TURN server

Details on how to setup and deploy your own TURN server is here, although there are also plenty of guides online for this, too:

https://github.com/steveseguin/vdo.ninja/blob/develop/turnserver.md

It is possible to store credentials for your TURN server on a server, pulling them as needed via an API, such as from Twilio's API. It is also possible to hard-code the credentials into the app itself. Both these options require self-deploying the website code however.

Related

{% content-ref url="and-tcp.md" %} and-tcp.md {% endcontent-ref %}

{% content-ref url="../common-errors-and-known-issues/hosted-your-own-turn-server.md" %} hosted-your-own-turn-server.md {% endcontent-ref %}

{% content-ref url="and-relay.md" %} and-relay.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-tz.md" %} and-tz.md {% endcontent-ref %}

description: Sets a display name label

&label

General Option! (&push, &room, &view, &scene)

Aliases

  • &l

Options

Example: &label=Steve

Value Description
(no value given) It will prompt the user for a Display Name on load
(string) Sets the label for the guest/browser tab
TITLEn\SUBTITLE Multiple lines

Details

&label sets a display name label to the stream ID.

  • Uses the label in OBS Studio if dragging the link into OBS Studio.
  • Will change the name of the Browser tab to the Label specified.
    .png>)
  • Shows up in the connection debug Stats window.
    (2).png>)
  • If left blank, it will prompt the user for a Display Name on load.
    (1).png>)
  • You can use &showlabels to show the labels in the video sources.

Multiple lines

Until I figure out a better way of doing this, I've enabled a way to have a display name be on multiple-lines in VDO.Ninja.

&label=DisplayNameHere\nSubtitleHere Note the use of as a line break ie:

https://vdo.ninja/?label=Steve_Seguin\n(he/him)\nhttps://twitch.tv/vdoninja&push=JaAiVEH
https://vdo.ninja/?view=JaAiVEH&showlabels

So it's not super obvious how to do this currently, so I think the next goal will be to add the option to let a guest enter their own sub-title, etc, when joining, using dedicated input fields. But until then, I hope this still helps. You can stylize the sub-label within OBS's CSS section, targeting the following CSS, but please note I'll probably be tweaking the CSS/HTML as well in the future:

.video-label>span:nth-child(2) {
    font-size: 50%;
    display: block;
    text-align: center;
}

(1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png>)

Related

{% content-ref url="../advanced-settings/design-parameters/showlabels.md" %} showlabels.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-screensharelabel.md" %} and-screensharelabel.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/setup-parameters/and-labelsuggestion.md" %} and-labelsuggestion.md {% endcontent-ref %}

description: Audio playback is muted

&deafen

General Option! (&push, &room, &view, &scene)

Aliases

  • &deaf

Details

Audio playback is muted in VDO.Ninja. If you just want to mute the speaker button temporarily use &mutespeaker.

Related

{% content-ref url="../source-settings/and-mutespeaker.md" %} and-mutespeaker.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/view-parameters/noaudio.md" %} noaudio.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/video-parameters/and-blind.md" %} and-blind.md {% endcontent-ref %}

description: Support for piesocket.com

&pie

General Option! (&push, &room, &view, &scene)

Options

Example: &pie=YourPiesocketAPIKey

ValueDescription
(API_KEY)the only parameter is your own piesocket.com API key

Details

Third-party handshake-server service option. If using piesocket, you can just do &pie=APKKEY to use that service, without deploying any code or servers yourself.

{% hint style="warning" %} At the time of originally adding this feature, PieSocket was a free service. That has since changed (Dec 2021). VDO.Ninja is not affiliated with PieSocket and never has been. We have no recommendation on whether you should use them or not.

For a free handshake-server though, please instead consider hosting your own on Google Cloud or Amazon AWS with a free micro-server instance. The following server code is compatible with VDO.Ninja: https://github.com/steveseguin/websocket_server {% endhint %}

description: Sets a room ID for the session to join

&room

General Option! (&push, &scene, &solo)

Aliases

  • &roomid
  • &r

Options

Example: &room=RoomID

ValueDescription
(string)1 to 49-characters long: aLphaNumEric-characters; case sensitive.

Details

Rooms broadcast to all participants who have joined.

Rooms are complemented by the &director=roomname function. Directors can have oversight of a room.

Rooms limit the viewing bitrate that guests of a room can request. OBS does not have these viewing limits though.

Rooms have no forced limit on the number of guests allowed, but practically 10 is about the limit I'd recommend.

Adding &showonly=xxx and &roombitrate=0 to the guest's URL can be used to help increase the capacity of rooms to 30 or more.

An alternative to a &room is a faux-room, which can be done with:
https://vdo.ninja/?push=aaa&view=bbb,ccc,ddd

Additional info

There's a documentation page dedicated to rooms here.

There's also a video below looking at what sort of performance and system load there is when using an unoptimized group room.

{% embed url="https://www.youtube.com/watch?v=VYYG4rZffcM" %}

You can reduce CPU load using the &broadcast flag, if hosting a larger room.

You can also transfer guests between group rooms, using the transfer function that the director has.

Related

{% content-ref url="../getting-started/rooms/" %} rooms {% endcontent-ref %}

{% content-ref url="../getting-started/rooms/transfer-rooms.md" %} transfer-rooms.md {% endcontent-ref %}

{% content-ref url="../viewers-settings/director.md" %} director.md {% endcontent-ref %}

description: Disables all webaudio audio-processing pipelines

&noaudioprocessing

General Option! (&push, &room, &view, &scene)

Aliases

  • &noap

Details

&noaudioprocessing disables the web-audio audio processing pipelines of both inbound and outbound audio. This is not the same as disabling echo-cancellation, denoise, or auto-gain; those are not web-audio-based.

Disabling the web-audio processing pipeline can help reduce audio distortion, clicking, and some echo-cancellation issues, especially if your CPU is overloaded.

The web-audio pipeline is like a chain of audio-plugins, loaded into Javascript, which does custom audio processing. This includes the low-cut filters, limiting, compression, audio-visualizers, active-speaker, director-side gain and mute control, and more.

This audio pipeline can start to have problems though if the CPU is overloaded. This can result in odd issues, including clicking. This pipeline is disabled by default in scenes, but it's usually enabled by default for most guest types.

{% hint style="warning" %} Disabling audio processing will disable many features, such as audio-visualizers, gain control, and loudness-monitoring API functions.

The ability to remotely mute a guest as a director (along with &audiogain=0) will not work if audio processing is disabled. {% endhint %}

description: A basic guest queuing and approving system

&queue

Director and/or Sender Option! (&director, &push, &room)

Details

&queue lets the room's director review guests who join a room.

The option can be used in one of two ways; either as a powerful screening room or as a simple approval system, depending on if the &queue option is also used on the director's URL.

{% embed url="https://www.youtube.com/embed/DDJrhhdNX_c" %}

{% hint style="info" %} &queue was changed in v24 to not allow the guest to see the director's video, until the director activates the guest with their pink activate-guest button. Otherwise, it's the same as before. Use &screen for the old version. {% endhint %}

If used on the director's URL, as well as the guest's URL, guests are added to a queue as they join, and the director can connect to those guests with a button in their lower control bar. This feature prevents the director's computer from being overwhelmed with connections.

The guests will not be able to see anyone, until they are transferred or approved. Once approved, the director will be able to see them, and they will be able to see the director.

Guests can be disconnected and they can then rejoin the queue, but when they do they will be at the end of the queue again.

This system can support hundreds of guests in queue, but it is not advisable to use this system if you expect thousands of guests to join.

{% hint style="info" %} Looking for feedback! {% endhint %}

Using &queue on both director + guest links

The &queue option can be added to both the director URL and the guest URL, or just the guest's URL.

Example director link:

https://vdo.ninja?director=roomname&queue

Corresponding room link:

https://vdo.ninja/?room=roomname&queue

When &queue is added both the guests' links and director's link, there will be a new 'wait list' button added to the director's view, which when pressed, will load the next guest in queue in the director's room. The guest will be able to see the director and only the director then.

The director can add more guests this way, kicking out those they don't want, and continue to cycle thru the queue of guests as they join the room. This setup is designed as a screening room, where the director is expected to transfer the guests to the main production room when appropriate.

When transferred, the guest will no longer be considered in 'a queue' and will be able to see everyone in the new room they were transferred to, and vice versa. The guest will not know which room they were transferred to, and will be unable to rejoin without joining the queue again. You can use the "change URL" button in the director's room if you wish to permanent-transfer a guest to a new link.

This setup is ideal for when dozens or hundreds of guests may try joining a room. The director can load a few guests at a time, preventing their system from being overloaded. Relying on a transfer room prevents the main room from being attacked as well.

Using &queue on just the guest invite link

When &queue is added to just the invite link for a guest, and not added to the director's link also, the guest will auto-load for the director, and only for the director. There is no wait-list.

The director will have a button for each joined guest titled "Activate Guest", which will pressed, will accept the guest into the current room as if a normal guest. They will see other activated guests in the room, without needing to be transferred to another room.

This approach to just adding &queue to the guest invite links, and not putting the room itself into a screening room, is well suited when you are only expecting just a few guests to join, and not dozens or hundreds, since the director will auto-load the video of each guest who joins.

Since it's possible for a user to just remove &queue from their URL when joining, bypassing the need for activation, this method is considered less secure versus the use of the screening room where users are transferred to the main room instead.

Exempt certain connections from the queue automatically

As a director, you can use &view in the URL to specify stream IDs that you wish to connect normally, bypassing the queue.

For example:
https://vdo.ninja/?director=MyRoom123&codirector&queue&push=mainDirector123&view=coDirectorStreamID123

https://vdo.ninja/?director=MyRoom123&codirector&queue&push=coDirectorID123&view=mainDirector123

The above links allows a co-director join the room, despite the main director and co-director being in queuing-mode. By specifying each other's stream ID as a listed view value, they can both bypass each other's queue together.

&view can accept a list of stream IDs. When in &queue mode, &view allows connections to join that are not listed, but only if they are brought in via the queue. This makes it a bit of a special case for &view, where it otherwise is pretty strict about who connects or not.

Other queue modes

The "queue" mode, when applied only to the guest-link, has been extended with new options. These modes do not apply when you have &queue also on the director's link, however, rather just when added to the guest-invite link only.

These options might be appealing for screening guests when either you don't want to use a transfer room or don't expect too many guests to be in queue.

and-screen-alpha.md

and-hold-alpha.md

and-holdwithvideo-alpha.md

Related

{% content-ref url="../advanced-settings/guest-queuing-parameters/and-screen-alpha.md" %} and-screen-alpha.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/guest-queuing-parameters/and-hold-alpha.md" %} and-hold-alpha.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/guest-queuing-parameters/and-holdwithvideo-alpha.md" %} and-holdwithvideo-alpha.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/settings-parameters/and-queuetransfer.md" %} and-queuetransfer.md {% endcontent-ref %}

description: Puts guests into sub-groups, so they only see others in the same group

&group

General Option! (&push, &room, &view, &scene)

Aliases

  • &groups

Options

Example: &group=Groupname

ValueDescription
1adds the guest or director to group 1
2adds the guest or director to group 2
3,4,5,6adds the guest or director to group 3, 4, 5 and 6
(string)creates/adds the guest or director to a custom group

Details

The idea is, you can put guests of a room into sub-groups. When added to a sub group, those guests will only be able to see and hear others in that same sub group.

Guests can be assigned to multiple subgroups. Groups can be specified via the URL using &group=1,5,6 or/and the director can dynamically assign sub-groups, as seen in the below image.

.png>)

If not in a group, that guest will still see/hear everyone, regardless of which group they are in, even if a guest in another group may not be able to see/hear that guest back.

Scenes can be put into groups as well, via the URL group option, such &group=3, but the director will not be able to dynamically change which group a scene is in. Not yet at least.

Using this group function is an alternative to transfer rooms, however it's perhaps less secure, as a guest could just tinker with their URL parameters or just refresh their page to perhaps see everyone in the room again.

&groupaudio can be used to enable audio in-between different groups, instead of audio being group-specific. Useful for blind-dating show formats or such.

New in Version 22

Custom groups used by remote guests now show in the director's view, just like custom scenes do. If you use &groups=group,test,vdo, new group buttons will appear.
.png>)

With &groupmode added to your URL, when not assigned to a group, you don't hear or see anything. This also goes for remote participants who are not in a group - you will not see or hear them if they are not in a group, even if you also are not in a group.

Related

{% content-ref url="and-groupaudio.md" %} and-groupaudio.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/setup-parameters/and-groupview.md" %} and-groupview.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/setup-parameters/and-groupmode.md" %} and-groupmode.md {% endcontent-ref %}

{% content-ref url="../director-settings/rooms.md" %} rooms.md {% endcontent-ref %}

description: Tells the system to not filter out audio streams when using &group

&groupaudio

General Option! (&push, &room, &view, &scene)

Aliases

  • &ga

Details

This just enables the guest or scene to not filter out audio streams that are contained in other sub-groups.

By default a stream assigned to one group won't be visible or audible to those in another group. &groupaudio prevents audio from being filtered, but keeps the video filtering in place.

Related

{% content-ref url="and-group.md" %} and-group.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/setup-parameters/and-groupmode.md" %} and-groupmode.md {% endcontent-ref %}

description: Filters ICE candidates

&icefilter

General Option! (&push, &room, &view, &scene)

Options

Example: &icefilter=tcp

ValueDescription
tcpFilters TCP ICE candidates
udpFilters UDP ICE candidates
hostFilters HOST ICE candidates

Details

Filters out ICE candidates that do not include the specified word in the candidate string.

Added for advanced use-cases and testing purposes.

{% hint style="warning" %} This is an advanced parameter that can stop your links from working correctly. {% endhint %}

description: Forces TCP mode

&tcp

General Option! (&push, &room, &view, &scene)

Details

Forces TCP mode if connected to a TURN server.

Versus the default, which may be UDP or TCP.

Related

{% content-ref url="turn.md" %} turn.md {% endcontent-ref %}

description: Shows a help-screen on the guest joining

&tips

Sender-Side Option! (&push)

Details

Shows a help-screen on the guest joining.
.png>)

Also available as a director room toggle to add to the guest's invite link.
(2).png>)

description: Pre-configures the selected video device

&videodevice

Sender-Side Option! (&push)

Aliases

  • &vdevice
  • &vd

Options

Example: &videodevice=BRIO_4K

ValueDescription
0disable the video camera automatically. No option to change it during setup is provided.
1 | (no value given)auto-select the default video camera. No option to change it will be allowed.
(string value)auto-select a video device that has a label containing that same string specified. Whitespaces in names can be replaced with underscores.

Device IDs can also be used; exact match only in that case.

Details

It can be changed after the connection has been established.
.png>)

Useful for helping a remote guest skip-past the complex setup of their camera/audio.

You can use this option to also disable a guest's camera, potentially allowing for guest connections that have no video or audio. This is a great option if you want to use midi-only transport, add some hidden IFRAME control, or just wanted to text chat.

For a device like an iPhone, you can pass a string value such as &videodevice=back to specify the back camera by default. For Android, you might try rear instead of back, but it will depend on the name the manufacture gave the camera.

When combined with &webcam and &autostart, you can have the camera start publishing instantly, often without any user interaction at all. Keep in mind that some browsers will still need to ask for permissions or require a user-gesture for things to function correctly though.

{% hint style="info" %} See vdo.ninja/devices to see the device IDs and device names. DeviceIDs are specific to VDO.Ninja's domain, while device names are not. The page will also auto-create links for you, just by clicking on the respective device. {% endhint %}

When using &videodevice=videoDevice, the name matching order sorts based on "NameStartsWith", then "ExactDeviceID", and then finally "NameIncludes". This should avoid the Streamlabs OBS Virtual Cam being selected when you actually want the OBS Virtual Camera being selected, as the two devices both contain obs virtual camera in their name.

Director's room toggles

Auto-selects the default camera of a guest by adding &vd to the guest's invite link.
.png>)

Disables the guest's camera by adding &vd=0 to the guest's invite link.
(2).png>)

Related

{% content-ref url="../newly-added-parameters/and-vdo.md" %} and-vdo.md {% endcontent-ref %}

{% content-ref url="audiodevice.md" %} audiodevice.md {% endcontent-ref %}

{% content-ref url="and-nosettings.md" %} and-nosettings.md {% endcontent-ref %}

{% content-ref url="and-webcam.md" %} and-webcam.md {% endcontent-ref %}

{% content-ref url="and-autostart.md" %} and-autostart.md {% endcontent-ref %}

{% content-ref url="and-device.md" %} and-device.md {% endcontent-ref %}

description: Pre-configures the selected audio device

&audiodevice

Sender-Side Option! (&push)

Aliases

  • &adevice
  • &ad

Options

Example: &audiodevice=Cable_Output

Value Description
0 disable audio source automatically; no option to change it during setup is provided.
1 | (no value given) auto-select the default audio; no option to change it will be allowed.
Cable_Output will match against "CABLE Output (VB-Audio Virtual Cable). Use any other string to match against other device names.

Details

It can be changed after the connection has been established. Useful for helping a remote guest skip-past the complex setup of their camera/audio.
.png>)

You can pass a string name to auto-select an audio device that has a label containing that same string.

You can pass a device ID as well; see vdo.ninja/devices to see the device IDs (specific to VDO.Ninja's domain).

Setting this option to &audiodevice=0 will also disable the guest's microphone, potentially allowing for guest connections that have no video or audio. You might do this if you needed midi-only transport, hidden IFRAME control, or just to chatting.

{% hint style="info" %} See vdo.ninja/devices to see the device IDs and device names. DeviceIDs are specific to VDO.Ninja's domain, while device names are not.

This web-based tool will also auto-create links for you, just by clicking on the respective device. {% endhint %}

There is a toggle in the director's room which adds &ad to the guest's invite link. (2).png>)

Update in V22

&audiodevice can accept multiple audio devices now. &audiodevice=cam,cable for example, will select the camlink and virtual audio cable devices as an audio source when joining.

&audiodevice={device name} will now also now show the selected audio devices before joining, while &audiodevice=1 or &audiodevice=0 will still hide the option to change or see audio devices.

Related

{% content-ref url="and-nosettings.md" %} and-nosettings.md {% endcontent-ref %}

{% content-ref url="videodevice.md" %} videodevice.md {% endcontent-ref %}

description: Set a custom screenshare quality

&screensharequality

Sender-Side Option! (&push)

Aliases

  • &ssq

Options

Example: &screensharequality=1

Value Description
0 1080p
1 720p
2 360p
-1 unconstrained

Details

{% hint style="info" %} Update on V22:
&screensharequality applies now to both primary and secondary types of screen-shares. Before &quality was needed for primary screen share quality setting. {% endhint %}

When a guest shares their screen during a group chat, it creates a secondary VDO.Ninja session to share that screen, alongside their active webcam. Two streams as a result.

Using this parameter will give you control over the quality of the screen share, specifically, overriding what you might have set with &quality. It will not impact the webcam quality.

Set a target quality for your screen share, when you screen share as a secondary stream (in a room).

Achieving higher sharpness

If looking to screen share a document at the highest quality possible, consider the follow URL parameters:

  • &screensharequality=-1 may be a good option for screen sharing documents, where more sharpness is needed.

  • &screensharecontenthint=detail to hint to use higher resolution over frame rates; this would be applied to the viewer's URL.

  • &codec=av1 can also be applied to the viewer's URL to change to a better video codec.

  • &screensharebitrate=6000 on the viewer side can increase the video bitrate, but you can go upwards of 20000-kbps if needed for heavier motion-based video.

  • &sharperscreen on the viewer end can avoid scaling down the image if the playback window is smaller than the video's native resolution. This will avoid double aliasing issues.

  • As well, if using OBS Studio for playback, you can add a sharpness filter to the video to improve the clarity. This can undo some of the softness caused by video compression, improving edge sharpness.

  • If in a group room, as a guest, the director can increase the total bitrate of the room, which will improve the screen share quality for all the guests in the room. By default, guests and directors view a screen share at a relatively low bitrate.
    \

Related

{% content-ref url="../advanced-settings/video-parameters/and-quality.md" %} and-quality.md {% endcontent-ref %}

{% content-ref url="screenshareid.md" %} screenshareid.md {% endcontent-ref %}

{% content-ref url="screensharefps.md" %} screensharefps.md {% endcontent-ref %}

description: Applies effects to the video/audio feeds

&effects

Sender-Side Option! (&push)

Aliases

  • &effect

Options

Example: &effects=7 or &effects=zoom

ValueDescription
(no value given)Shows a "Digital Video Effects" panel when setting up devices
0 | false | offDisables effects
1 | facetrackingFace tracker
-1Flip image
2Mirror image
-2Flip + mirror image
3Background blur
4Virtual Greenscreen
5Background replacement
6Avatar
7 | digitalzoomZoom (software-based zoom)
8#and-effects-8
9Face tracking
10Face tracking
11 | anonAnonymous face mask
13New experimental background blur effect; it's not supported by most browsers/systems and its in origin trial

Details

Adding &effects to a guest link enables the drop-down menu for Digital Video Effects. The guest can then choose the digital video effect via the drop-down menu.
(2) (1).png>)

This is on by default when using a basic push link outside of a room.

You can pre-select the digital video effect by adding &effects=X (see Options above) to a guest/push link.

The guest can change the digital video effect dynamically via the video settings panel if you have added &effects to the guest's URL.

You can also pre-select the effect value by adding &effectvalue to the URL. ie: the amount of blur.

Greenscreen performance

&effects=4 enables a virtual Greenscreen on the publisher side.

Green screen doesn't require SIMD support to work, although it won't work as well without it on. There's a little warning info icon (!) if SIMD is not enabled.

Please do enable Webassembly-SIMD support under chrome://flags/ if you'd like to see a large reduction in CPU load when using this feature.

Important Note for &effects=1

{% hint style="warning" %} &effects=1 requires the use of the Chromium experimental face detection API, as I'm using the built-in browser face-tracking model for this. You can enable the API flag here: chrome://flags/#enable-experimental-web-platform-features
My hope is that this feature will eventually be enabled by default within Chromium, as loading a large ML model to do face detection otherwise is a bit heavy; you may need to enable this within the OBS CLI if wishing to use it there? {% endhint %}

&effects=8

Added &effects=8, which might be useful if using a Camlink or simple HDMI capture device and &record mode. The current &record mode doesn't seem to always scale down the video before recording (browser issue it seems), so local file recordings might be 4K in size, despite the target resolution being set much lower. &effects=8 will use a canvas to first resize the video though, and then recordings will be based on that, making smaller recording sizes possible. (You could also use &effects=7, which then provides digital zooming controls and is otherwise the same thing).

This &effects=8 mode might also be helpful in solving issues with cameras disconnecting or having their frame rate change while recording, causing issues with the recording. The canvas acts as a reliable middle man between the camera and output video stream, so if the camera's input stream fails, the recording stream will not be impacted, other than perhaps skipping some frames. The canvas is sensitive to CPU load or browser throttling though, so frame rates may fluctuate more often when using it, so I can't suggest using it unless the guest/user is known to have a problematic camera.

&effects=7 (Zoom)

&effectvalue=1.2 will now work with &digitalzoom (&effects=7), so you can trigger the camera to digitally zoom in on load. This works regardless of whether the camera supports zooming or not, as it is software based. Software zoom offers lower quality than hardware-based or driver-based zoom, but the zoom effect itself is often quite smooth in comparison to hardware based zoom.

Related

{% content-ref url="../newly-added-parameters/and-effectvalue.md" %} and-effectvalue.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-chunked.md" %} and-chunked.md {% endcontent-ref %}

description: Sets whether audio auto-normalization is ON or OFF

&autogain

Sender-Side Option! (&push)

Aliases

  • &agc
  • &ag

Options

Example: &autogain=1

Value Description
0 audio auto-normalization off
1 audio auto-normalization On

Details

Audio auto-normalization is ON by default in VDO.Ninja.

You can turn off auto-normalization by adding &autogain=0 to a source link (guest). If you are using &proaudio, auto-normalization gets turned off. You can enable it again with &proaudio&autogain=1.

You can also switch it on or off via the audio settings. If you want the guests to be able to change the audio settings by themselves, use &mediasettings on the guests' link, as per default only the director can change the audio settings of the guests.

.png>)

Your browser will try to keep optimum audio levels.

Known issues with auto-gain

Some microphones or devices with software-based gain controls can have problems with auto-gain. The microphone volume might go to high, causing clipping, for example, or it might interfere with the gain of other applications.

If using a Chromium-based browser, like Chrome, Edge or Brave, you can either disable auto-gain or you can go into your browser's settings and disable the browser from being able to control the device's input volume. The link to this option is here: chrome://flags/#enable-webrtc-allow-input-volume-adjustment (as of March 2024 at least)

Please note that this issue seems to be a Chromium-related issue, and it is not VDO.Ninja specific. If you do disable auto-gain within VDO.Ninja, the option to manually increase your gain is still normally available also.

Related

{% content-ref url="../newly-added-parameters/and-screenshareautogain.md" %} and-screenshareautogain.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/audio-parameters/and-audiogain.md" %} and-audiogain.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/audio-parameters/and-volume.md" %} and-volume.md {% endcontent-ref %}

description: >- Lowers your mic volume to 10% of its current value based on volume-level activity

&noisegate

Sender-Side Option! (&push)

Aliases

  • &gating
  • &gate
  • &ng

Options

Example: &noisegate=1

Value Description
0 hides it from the menu
1 | (no value given) enables the new noise gate (see Details)
2 will mute the speakers when you are talking
3 will mute the speakers when someone else is talking (mainly for debugging)
4 will mute the microphone when someone else is speaking

Details

The default setting is OFF. You can switch on the noise gate in the audio settings:
.png>)

This is a new noise gate, that lowers your mic volume to 10% of its current value based on volume-level activity. If you haven't made a significant sound in few seconds, the noise gate kicks in, and will re-enable when a significant noise is detected. It will take about 300-ms for the volume to recover once the noise triggers it back on, which can be a small bit harsh/distracting at times.

The point of this feature is to allow guests who might be in a rather noisy room or who are unable to use echo cancellation to still engage with a chat, without them introducing feedback back into the room.

This is a very hard and aggressive noise filter, and a guest won't be audible to others in the room if others in the room are currently talking.

User feedback on this feature welcomed.

Noise Gate Settings

&noisegatesettings is used in conjunction with &noisegate. This feature lets you tweak the noise-gate's variables, making it more or less aggressive as needed.

It takes a comma separated list:

  • First value is target gain (0 to 100), although 0 to 40 is probably the recommended range here.
  • Second value is the threshold value where the gate is triggered if below it. ~ 100 is loudly speaking, ~ 20 is light background noise levels, and under 5 is quiet background levels.
  • Third value is how 'sticky' the gate-open position is, in milliseconds. Having this set to a few seconds should prevent someone from being cut off while speaking or if taking a short pause.

Example:
https://vdo.ninja/alpha/?noisegate&noisegatesettings=10,25,3000

To help users with testing the noise gate and configurating the noise gate settings, there's an interactive page here for it: https://vdo.ninja/noisegate

Related

{% content-ref url="../advanced-settings/audio-parameters/and-noisegatesettings.md" %} and-noisegatesettings.md {% endcontent-ref %}

{% content-ref url="and-denoise.md" %} and-denoise.md {% endcontent-ref %}

description: Automatic echo-cancellation is ON or OFF

&echocancellation

Sender-Side Option! (&push)

Aliases

  • &aec
  • &ec

Options

Example: &echocancellation=1

Value Description
0 Turns OFF the automatic echo-cancellation
1 Turns ON the automatic echo-cancellation

Details

Automatic echo-cancellation is ON by default in VDO.Ninja.

You can turn off echo-cancellation by adding &aec=0 to a source link (guest). If you are using &proaudio, echo-cancellation gets turned off. You can enable it again with &proaudio&aec=1.

You can also switch it on or off via the audio settings. If you want the guests to be able to change the audio settings by themselves, use &mediasettings on the link of the guests, as per default only the director can change the audio settings of the guests.

.png>)

May need to be disabled to use &proaudio on some older browsers.

Related

{% content-ref url="../advanced-settings/audio-parameters/and-proaudio.md" %} and-proaudio.md {% endcontent-ref %}

{% content-ref url="noisegate.md" %} noisegate.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-screenshareaec.md" %} and-screenshareaec.md {% endcontent-ref %}

&accelerometer

Also known as: &sensors, &sensor, &gyro, &gyros

Description

Enables device motion and orientation sensor data transmission, allowing real-time sharing of accelerometer, gyroscope, and other sensor information.

Sender-Side Option

This parameter activates sensor data collection and transmission from devices that support motion sensors.

Usage

  • &accelerometer - Enable at default rate (30 Hz)
  • &accelerometer=60 - Enable at 60 Hz update rate
  • &sensor=10 - Enable at 10 Hz update rate
  • &gyro=30 - Alias usage

Examples

https://vdo.ninja/?push=streamID&accelerometer
https://vdo.ninja/?push=streamID&sensor=60
https://vdo.ninja/?room=roomname&gyro=30

Sensor Data Included

  • Accelerometer: Linear acceleration (x, y, z)
  • Gyroscope: Rotational velocity
  • Orientation: Device orientation in space
  • Magnetometer: Compass heading (if available)
  • Linear Acceleration: Acceleration without gravity
  • Absolute Orientation: Quaternion orientation

Update Rates

  • Default: 30 Hz (30 updates per second)
  • Minimum: 1 Hz
  • Maximum: 60 Hz (device dependent)
  • Recommended: 10-30 Hz for most applications

Device Support

  • Smartphones: Full support (iOS/Android)
  • Tablets: Full support
  • Laptops: Limited (some have accelerometers)
  • Desktop: Usually no sensors

Browser Requirements

  • Requires HTTPS connection
  • User permission required
  • Not all browsers support all sensors

Data Format

Sensor data is transmitted as structured data containing:

  • Timestamp
  • Sensor type
  • X, Y, Z values
  • Additional sensor-specific data

Use Cases

  • Motion-controlled applications
  • VR/AR experiences
  • Game controllers
  • Motion analysis
  • Remote device monitoring
  • Interactive presentations

Performance Notes

  • Higher rates increase bandwidth usage
  • Can impact battery life on mobile
  • May affect device performance
  • Consider network latency

Privacy Considerations

  • Requires explicit user permission
  • Can reveal device movement patterns
  • May be disabled by privacy settings
  • Use responsibly

Related Parameters

description: Skips the camera/audio device or screenshare selection

&autostart

Sender-Side Option! (&push)

Aliases

  • &autojoin
  • &aj
  • &as

Details

Auto starts when the camera/audio device or screenshare is ready. Useful for helping a remote guest skip-past the complex setup of their camera/audio.

Can be used together with &webcam or &screenshare to join the room or start the stream immediately.

Related

{% content-ref url="easyexit.md" %} easyexit.md {% endcontent-ref %}

{% content-ref url="and-webcam.md" %} and-webcam.md {% endcontent-ref %}

{% content-ref url="screenshare.md" %} screenshare.md {% endcontent-ref %}

description: Applies a generic audio compressor to the local microphone

&compressor

Sender-Side Option! (&push)

Aliases

  • &comp

Details

By adding &compressor to a source link, it applies a generic audio compressor to the local microphone.

An audio compressor can help reduce spikes in audio loudness.

{% hint style="info" %} The compressor is off by default. {% endhint %}

{% hint style="warning" %} This will enable the audio processing pipeline. {% endhint %}

There is a toggle in the director's room which adds &comp to the guest's invite link.
.png>)

Update in Version 22

There is now an option to control the compressor remotely (3 states for the compressor; Off/On/Limiter)

(4) (2).png>)

Related

{% content-ref url="and-limiter.md" %} and-limiter.md {% endcontent-ref %}

description: Turn audio noise reduction filter ON or OFF

&denoise

Sender-Side Option! (&push)

Aliases

  • &dn

Options

Example: &compressor=1

Value Description
0 Filter Off
1 Filter On

Details

Noise suppression reduces background audio noise from your surrounding environment.

Noise suppression is ON by default in VDO.Ninja.

You can turn off noise suppression by adding &denoise=0 to a source link (guest). If you are using &proaudio, echo-cancellation gets turned off. You can enable it again with &proaudio&denoise=1.

You can also switch it on or off via the audio settings. If you want the guests to be able to change the audio settings by themselves, use &mediasettings on the link of the guests, as per default only the director can change the audio settings of the guests.

.png>)

Related

{% content-ref url="noisegate.md" %} noisegate.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-screensharedenoise.md" %} and-screensharedenoise.md {% endcontent-ref %}

description: Same as &audiodevice or &videodevice, but applies to both

&device

Sender-Side Option! (&push)

Aliases

  • &d

Options

Example: &device=Brio_4K

ValueDescription
0disable the audio and video devices; no option to change it during setup is provided.
1auto-select the default video and audio devices; no option to change it will be allowed.
(string value)auto-select a video and audio device that has a label containing that same string; whitespaces in names can be replaced with underscores.

Details

If you set &device=0, you disable audio and video inputs, but chat is still available.

Chat-only guests can access a group-room this way.

Related

{% content-ref url="videodevice.md" %} videodevice.md {% endcontent-ref %}

{% content-ref url="audiodevice.md" %} audiodevice.md {% endcontent-ref %}

description: >- Provides access to a generic audio equalizer that can be applied to the local microphone

&equalizer

Sender-Side Option! (&push)

Aliases

  • &eq

Details

Adding &equalizer to a source link, it provides access to a generic audio equalizer that can be applied to the local microphone.

It can be accessed via the Audio Settings page or the Director can remotely adjust it.

.png>)

{% hint style="warning" %} Enables the audio processing pipeline. {% endhint %}

Related

{% content-ref url="and-compressor.md" %} and-compressor.md {% endcontent-ref %}

{% content-ref url="and-limiter.md" %} and-limiter.md {% endcontent-ref %}

description: Allows the user to select a video or audio file as a source for streaming

&fileshare

Sender-Side Option! (&push)

Aliases

  • &fs

Details

Adding &fileshare to a URL allows the user to select a video or audio file as a source for streaming.

The stream can be paused and scrubbed like a normal video/audio file. It will auto-loop when it ends.

Supports audio-only files as well as common video formats. Depends on your browser. If you mute the video, it will mute the video for all the viewers as well. It is extremely simple in functionality and is only available when the URL is used. The resolution used will be limited by the video's native resolution.

{% hint style="warning" %} The video will be transcoded for each connected guest! {% endhint %}

description: Enables a "Raise Hand" button for guests

&hands

Sender-Side Option! (&push)

Aliases

  • &hand

Details

Adds a button for guests to raise their hands.

.png>)

If pressed, and the user is in a room, the room's director will get a notification that the user pressed the button.
.png>)

It will do nothing if the room does not have a director in it.

The director can dismiss the user's action.

There is a toggle in the director's room which adds &hand to the guest's invite link..png>)

Related

{% content-ref url="and-notify.md" %} and-notify.md {% endcontent-ref %}

description: Sets the maximum height of the video allowed in pixels

&height

Sender-Side Option! (&push)

Aliases

  • &h

Options

Example: &height=1080

Value Description
(some positive integer value) height in px

Details

Sets the maximum height of the video allowed in pixels.

Actual height may be less based on bandwidth allowances.

Limiting the height can force the camera to use higher frame rates.

Limiting the height can reduce the CPU load.

https://vdo.ninja/supports will list the support resolutions of your default camera.

https://webrtchacks.github.io/WebRTC-Camera-Resolution/ Is a tool to help you find the resolutions supported by your camera.

You can use &scale=50 also, as a viewer, to scale down a selected width/height to something more exact.

{% hint style="danger" %} If the camera cannot support the height, it will fail. {% endhint %}

You can get 4K by adding &width=3840&height=2160 to the source link if the camera supports it.

Related

{% content-ref url="and-width.md" %} and-width.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/video-parameters/and-aspectratio.md" %} and-aspectratio.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/video-parameters/and-quality.md" %} and-quality.md {% endcontent-ref %}

description: Applies a generic audio limiter to the local microphone

&limiter

Sender-Side Option! (&push)

Details

&limiter applies a generic audio limiter to the local microphone.

A limiter is like an aggressive compressor.

The limiter is off by default.

{% hint style="warning" %} Enables the audio processing pipeline. {% endhint %}

{% hint style="danger" %} It cannot be used along with the &compressor option. {% endhint %}

Related

{% content-ref url="and-compressor.md" %} and-compressor.md {% endcontent-ref %}

description: Limits total of view and push connections

&maxconnections

Sender-Side Option! (&push)

Aliases

  • &mc

Options

Example: &maxconnections=5

Value Description
(any integer value) Will set maximum to given value

Details

Limits total of view and push connections to the given value.

Related

{% content-ref url="../advanced-settings/view-parameters/and-maxpublishers.md" %} and-maxpublishers.md {% endcontent-ref %}

{% content-ref url="and-maxviewers.md" %} and-maxviewers.md {% endcontent-ref %}

description: >- Like &fps, except it will allow for lower frame rates if the specific frame rate requested failed

&maxframerate

Sender-Side Option! (&push)

Aliases

  • &mfr
  • &mfps

Options

Example: &maxframerate=60

Value Description
(positive integer value) Frame rate (frames per second)

Details

Like &fps, except it will allow for lower frame rates if the specific frame rate requested failed.

You can set &maxframerate=60 and the system automatically selects 30 if your camera doesn't support a frame rate of 60.

Related

{% content-ref url="../advanced-settings/video-parameters/and-fps.md" %} and-fps.md {% endcontent-ref %}

description: Limits the number of viewers allowed

&maxviewers

Sender-Side Option! (&push)

Aliases

  • &mv

Options

Example: &maxviewers=8

Value Description
(positive integer value) max allowed viewers

Details

Useful for iOS devices that might explode if more than 3 video viewers connect.

Useful to prevent publicly shared guest links from being crashed due to too many viewer requests.

Related

{% content-ref url="../advanced-settings/view-parameters/and-maxpublishers.md" %} and-maxpublishers.md {% endcontent-ref %}

{% content-ref url="and-maxconnections.md" %} and-maxconnections.md {% endcontent-ref %}

description: Delays the microphone by specified time in ms

&micdelay

Sender-Side Option! (&push)

Aliases

  • &md

Options

Example: &micdelay=100

Value Description
(positive integer value) Delay to add in milliseconds
(no value given) Will show the mic delay as a slider

Details

Delays the microphone by specified time in ms.

Update in Version 22

Added the "mic delay" option as a slider to the director's control; it's available by default, with up to 500-ms of delay ready. If you make use of it, it will "enable" the &micdelay web audio node remotely if not yet on, which might cause a clicking sound. Hoping that this though can help with problematic guests who might be out of sync. This is not the same as &buffer or &sync delay, which are a view-side parameters.

(1) (4).png>)

&micdelay, if used on a basic push link, will show the mic delay as a slider now also. So you can adjust it as needed. I don't show the slider by default unless using the URL parameter, as I don't think its a commonly used feature.
(2) (1).png>)

Related

{% content-ref url="../newly-added-parameters/and-audiolatency.md" %} and-audiolatency.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/view-parameters/sync.md" %} sync.md {% endcontent-ref %}

description: Mini self-preview at the top right corner

&minipreview

Sender-Side Option! (&push)

Aliases

  • &mini

Options

Example: &minipreview=0

ValueDescription
(no value given)shows the mini self-preview at the top right corner
0disables the mini preview in broadcast mode

Details

Details

Shows the mini self-preview at the top right corner. This is the default behavior when &broadcast mode is on.

(1) (2).png>)

You can change the default position of the mini preview with &minipreviewoffset.

Related

{% content-ref url="../advanced-settings/video-parameters/and-largepreview.md" %} and-largepreview.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/video-parameters/and-minipreview-1.md" %} and-minipreview-1.md {% endcontent-ref %}

{% content-ref url="and-preview.md" %} and-preview.md {% endcontent-ref %}

{% content-ref url="and-nopreview.md" %} and-nopreview.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/view-parameters/broadcast.md" %} broadcast.md {% endcontent-ref %}

description: Starts with the microphone muted by default

&mute

Sender-Side Option! (&push, &director)

Aliases

  • &muted
  • &m

Details

Starts with the microphone muted by default. The guest can switch on the microphone.

(2) (1) (1) (3).png>)

Update in v23

&mute works with the director now, so the mic starts muted when you enable your microphone or when using &autostart.

Related

{% content-ref url="and-videomute.md" %} and-videomute.md {% endcontent-ref %}

{% content-ref url="and-mutespeaker.md" %} and-mutespeaker.md {% endcontent-ref %}

description: Auto mutes the speaker

&mutespeaker

General Option! (&push, &room, &view, &scene, &director)

Aliases

  • &ms
  • &speakermute
  • &sm
  • &speakermuted

Options

Example: &mutespeaker=0 or &mutespeaker=false

Value Description
(no value given) the default behavior of this option is to mute inbound audio playback
0 | false will have the speaker button unmuted
1 | true will have the speaker button muted

Details

Sets the speaker to be muted (or unmuted) by default for a push-link, guest, director or view/scene link.

If no value is passed, the default behavior of this option is to mute inbound audio playback. The user can still unmute the audio via the speaker-icon button in their lower control bar.

If looking to mute the audio playback of a view or scene link, &noaudio is an alternative option that will block audio tracks from connecting in the first place. It can't be toggled on and off though, like &mutespeaker can be though.

Unmuting the director's speaker by default

You can also use this parameter to have a director join the room with their speaker output unmuted by default.

Set the &mutespeaker value to false or 0 to have the mute button start unmuted. By default, the director joins with their speaker output muted, so this option can be used to have the director join unmuted instead.

https://vdo.ninja/?director=ROOMNAME&mutespeaker=0

Muting shared websites (meshcast.io / youtube)

The director and guests can share websites with others in a group room. The audio playback of meshcast.io shared links will respect the &mutespeaker parameter used by VDO.Ninja, but other sites that are shared may not respect it.

You can also add &mute to a meshcast.io link itself, when sharing it, which will mute just the meshcast video by default for others. This can be useful to avoid echo cancellation issues that sometimes are created when sharing meshcast.io links in a VDO.Ninja group room.

Related

{% content-ref url="and-mute.md" %} and-mute.md {% endcontent-ref %}

{% content-ref url="and-videomute.md" %} and-videomute.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/view-parameters/noaudio.md" %} noaudio.md {% endcontent-ref %}

description: Disables the local self-preview

&nopreview

Sender-Side Option! (&push)

Aliases

  • &np

Details

If you don't want to see yourself when in a group chat, this will hide your video.

{% hint style="danger" %} iOS users: This flag will break stuff; You must have a preview if using those devices and wanting to publish. {% endhint %}

There is a toggle in the director's room which adds &np to the guest's invite link. (1).png>)

Related

{% content-ref url="and-preview.md" %} and-preview.md {% endcontent-ref %}

{% content-ref url="and-minipreview.md" %} and-minipreview.md {% endcontent-ref %}

description: Disables the local settings button

&nosettings

Sender-Side Option! (&push)

Aliases

  • &ns

Details

&nosettings disables the local settings button.

You won't be able to change video or audio feeds after initially selecting them. This prevents guests accidentally changing their webcam or microphone after entering a room.

Hides the screen-share button as well.

.png>)

description: Hides the speaker button

&nospeakerbutton

Sender-Side Option! (&push)

Aliases

  • &nsb

Details

Hides the button that can mute the speaker.

.png>)

Related

{% content-ref url="../viewers-settings/nomicbutton.md" %} nomicbutton.md {% endcontent-ref %}

{% content-ref url="../viewers-settings/and-novideobutton.md" %} and-novideobutton.md {% endcontent-ref %}

description: Audio alerts for raised hands, chat messages and if somebody joins the room

&notify

Sender-Side Option / Director Option! (&push, &director)

Aliases

  • &beep
  • &tone

Details

Add this to a guest's/director's URL and you get audio alerts for raised-hands, chat messages and if somebody joins the room.

{% hint style="warning" %} If you can't hear a sound, click any button in the room. Then the sounds will be activated. {% endhint %}

Advanced configurations

Enable audio notifications for specified events.

  • Values: Comma-separated list of: join, leave, test
  • Example: ?beep=join,leave enables just the join and leave sounds
  • Example: ?notify=join enables only join sounds
  • Note: Using the parameter without values (e.g., ?beep) will enable all sound types.

Custom Sound Settings

customjoin=<url>

Custom sound for join notifications.

  • Value: URL to audio file
  • Example: ?customjoin=https://example.com/join.mp3
  • Default if not specified: ./media/join.mp3

customleave=<url>

Custom sound for leave notifications.

  • Value: URL to audio file
  • Example: ?customleave=https://example.com/leave.mp3
  • Default if not specified: ./media/leave.mp3

custombeep=<url>

Sets a custom sound for the test tone.

  • Value: URL to audio file
  • Example: ?custombeep=https://example.com/beep.mp3
  • Supported formats: mp3, wav, ogg, aac, m4a, opus, flac, webm

r2d2

Replaces the test tone with a robot sound.

  • Usage: ?r2d2
  • Effect: Sets test tone to ./media/robot.mp3

Volume Control

beepvolume=<number>

Sets volume for all notification sounds.

  • Value: Number between 0-100 for normal volume, >100 for amplified volume
  • Example: ?beepvolume=50 for 50% volume
  • Example: ?beepvolume=500 for 500% volume using Web Audio API amplification
    • volume values are linear, yet the human ear hears loudness logarithmically, so 500 isn't that much louder.
  • Default: 100 (100% volume)

Important Volume Limitations

When using beepvolume values greater than 100:

  • Audio files must be hosted on a server that allows CORS access
  • External audio files (like those from myinstants.com) may fail due to CORS restrictions
  • If CORS fails, the audio will fallback to normal volume (100% max)
  • For best results with amplified volume, host audio files on your own domain
  • Volume boost requires Web Audio API support in the browser

Examples

Basic notification setup:

?beep=join,leave&beepvolume=75

Custom sounds with normal volume:

urlCopy?beep=join,leave&customjoin=custom.mp3&customleave=custom2.mp3&beepvolume=100

Custom test tone:

?custombeep=https://example.com/tone.mp3

R2D2 sounds with custom volume:

?r2d2&beepvolume=80&beep=join,leave

Best Practices

  1. When using custom sounds:
    • Host audio files on your own domain to avoid CORS issues
    • Use short, small audio files for better performance
    • Test with both normal and amplified volume settings
  2. When using amplified volume:
    • Test with your specific audio files first
    • Have a fallback plan if CORS restrictions prevent volume boost
    • Consider users with different audio setups

Sound clip resources and hosting

There are sound effects available at https://www.myinstants.com/, however it's generally not considered polite to directly link to their MP3 audio files. Instead, it is better to download any and host them yourself, perhaps on GitHub or a proper webserver.

As noted, if using &beepvolume, and you set it higher than 100, then direct linking to audio files will fail with some sites, such as with myinstants.com.

Related

{% content-ref url="r2d2.md" %} r2d2.md {% endcontent-ref %}

{% content-ref url="and-hands.md" %} and-hands.md {% endcontent-ref %}

description: Target audio bitrate and max bitrate for outgoing audio streams

&outboundaudiobitrate

Sender-Side Option! (&push)

Aliases

  • &oab

Options

Example: &outboundaudiobitrate=128

Value Description
(integer value) outbound audio bitrate in kbps

Details

Target audio bitrate and max bitrate for outgoing audio streams.

Allows the Director to set their outbound audio bitrate to be shared with guests at something like 160-kbps, while having the guests still be able to share their audio between other guests at the default audio bitrate of around 32-kbps. If the guest sets the audio bitrate (&proaudio=1 or &audiobitrate=200) on the view link will override the publisher's &outboundaudiobitrate parameter.

Related

{% content-ref url="../advanced-settings/audio-parameters/and-proaudio.md" %} and-proaudio.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/view-parameters/audiobitrate.md" %} audiobitrate.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/video-bitrate-parameters/and-outboundvideobitrate.md" %} and-outboundvideobitrate.md {% endcontent-ref %}

description: Forces the guest to have a self-preview

&showpreview

Sender-Side Option! (&push)

Aliases

  • &preview

Details

Forces the guest to have a self-preview.

Related

{% content-ref url="and-minipreview.md" %} and-minipreview.md {% endcontent-ref %}

{% content-ref url="and-nopreview.md" %} and-nopreview.md {% endcontent-ref %}

description: Auto mutes guest's video

&videomute

Sender-Side Option! (&push)

Aliases

  • &vm
  • &videomuted

Details

Auto mutes the guest's video when connecting.

(1) (1) (2) (1) (1).png>)

Related

{% content-ref url="and-mute.md" %} and-mute.md {% endcontent-ref %}

{% content-ref url="and-videomute.md" %} and-videomute.md {% endcontent-ref %}

description: Disables screen-sharing as an option

&webcam

Sender-Side Option! (&push)

Aliases

  • &wc

Details

Automatically selects the Share your Camera option and hides the screen-share button in the control bar.
.png>)

{% hint style="danger" %} Do not use while on a director page to autostart a camera; &autostart&vd=video_device should handle that. {% endhint %}

If you would still like the guest to have access to the screen-sharing button once they have joined the call, you can force it to appear with the &ssb option. The &webcam option by default will hide the screen-share button otherwise.

Starting with v19 of VDO.Ninja, there is also the &webcam2 option; a minor UI variant that requires an additional button press, but more clearly preps the guest to the fact they will be sharing their webcam.

Related

{% content-ref url="screenshare.md" %} screenshare.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-webcam2.md" %} and-webcam2.md {% endcontent-ref %}

description: Only shares a website with viewers

&website

Sender-Side Option! (&push)

Aliases

  • &iframe

Details

Only shares a website with viewers. You can use this to share a YouTube video with the guests.

.png>)

description: Sets the maximum width of the video allowed in pixels

&width

Sender-Side Option! (&push)

Aliases

  • &w

Options

Example: &width=1920

Value Description
(some positive integer value) width in px

Details

Sets the maximum width of the video allowed in pixels.

Actual width may be less based on bandwidth allowances.

Limiting the width can force the camera to use higher frame rates.

Limiting the width can reduce CPU load.

{% hint style="danger" %} If the camera cannot support the width, it will fail. {% endhint %}

You can get 4K by adding &width=3840&height=2160 to the source link if the camera supports it.

Related

{% content-ref url="and-height.md" %} and-height.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/video-parameters/and-aspectratio.md" %} and-aspectratio.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/video-parameters/and-quality.md" %} and-quality.md {% endcontent-ref %}

description: Will ask the user for content to remote change their camera or microphone

&consent

Sender-Side Option! (&push)

Details

Adding to the guest's invite link will either alert the guest or seek permission of the guest to remotely change their camera or mic without further approval.

For privacy reasons, without this flag a director of a room will need to have the guest approve a remote camera or microphone change. With this flag added however, the consent to do so will be obtained on the initial connection, allowing the director to change cameras or mics of the guest without blockers.

(1) (1) (1).png>)

Update on v23

Added "change URL" permissions to the &consent flag. That is, when using &consent on the guest URL, the director can remotely change the guest's URL without additional permission -- it will just change.

Related

{% content-ref url="../general-settings/remote.md" %} remote.md {% endcontent-ref %}

description: Attempts to show the mouse cursor on screen shares

&screensharecursor

Sender-Side Option! (&push)

Aliases

  • &cursor

Details

Adding &screensharecursor to a source link attempts to show the mouse cursor on screen shares.

This flag is introduced in v18.4, but it's largely useless currently due to lack of support from most browsers.

The default cursor state in VDO.Ninja is to not show a cursor, but Chrome/Firefox will still add a cursor overlay in regardless.

If sharing a Chrome tab, Chrome adds the cursor in only when that tab is active.

According to the web spec, we should be able to control the visibility of a cursor, but we can't. Not yet.

You can see this link to tinker with different settings easily, to validate the problem:
https://www.webrtc-experiment.com/getDisplayMedia/

Generally, to have better control of the cursor, maybe instead capture the screen with OBS and bring the video into VDO.Ninja as a virtual camera.
For information on alternative ideas on how to hide or show the cursor, you can see the following article.

{% content-ref url="../common-errors-and-known-issues/cursor-shows-when-screen-sharing.md" %} cursor-shows-when-screen-sharing.md {% endcontent-ref %}

If none of this is working you might try YoloMouse on Steam:
https://store.steampowered.com/app/1283970/YoloMouse/

Related

{% content-ref url="../general-settings/and-nocursor.md" %} and-nocursor.md {% endcontent-ref %}

description: Message ONLY the director

&directorchat

Sender-Side Option! (&push)

Aliases

  • &dc

Details

When this parameter is set, guest messages will only go to the director.

description: Won't ask the user to confirm that they wish to exit or leave the page

&easyexit

Sender-Side Option! (&push)

Aliases

  • &ee

Details

To prevent accidental page refreshes or exits during a stream, VDO.Ninja will ask the user to confirm they wish to leave the page when they try to. Using &easyexit prevents this confirmation pop-up from occurring, which might be useful if you are doing a lot of testing and find the added clicking to be annoying.

It hides this popup:
(2).png>)

Related

{% content-ref url="and-autostart.md" %} and-autostart.md {% endcontent-ref %}

description: The preview video will be fullscreen

&fullscreen

Sender-Side Option! (&push)

Details

If publishing a video outside of a room, and not viewing any other video except your own preview, that preview will be windowed. This command will make that preview larger, sized to fit the window.

Purpose

If you combine this command with &cleanoutput, you can then cleanly window-capture your preview window and use that instead as a local webcam source elsewhere, such as in OBS. This may potentially use less CPU than using a virtual camera, while still having access to the webcam in multiple applications.

If you load the webcam in OBS first, you'll need to use the Virtual Camera and some special settings to have the webcam be available in other applications, like the browser. Window-capturing is an alternative that uses less CPU and does not require special drivers to be installed.

It is recommend to consider using the Electron Capture app as the window-capture source app, as it is frameless, can be pinned on top, uses less CPU than the Chrome browser, and can be screen-captured or window-captured by most applications. It's also designed for VDO.Ninja, so lots of command line options available.

Related

{% content-ref url="../advanced-settings/design-parameters/cleanoutput.md" %} cleanoutput.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/settings-parameters/and-fullscreenbutton.md" %} and-fullscreenbutton.md {% endcontent-ref %}

description: >- When combined with the either &webcam or &screenshare, this option won't auto-load the camera/mic selection page

&intro

Sender-Side Option! (&push,&webcam,&screenshare)

Aliases

  • &ib

Details

When combined with the either &webcam or &screenshare, this option won't auto-load the camera/mic selection page. Instead, it shows the main-menu button for either the webcam option or screen-share option.

For some users, this prepares them better for the upcoming request for camera/microphone permissions; particularly useful if using VDO.Ninja as an IFRAME integration.

&intro&webcam is the same like &wc2.
&intro&screenshare is the same like &ss2.

Related

{% content-ref url="and-webcam.md" %} and-webcam.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-webcam2.md" %} and-webcam2.md {% endcontent-ref %}

{% content-ref url="screenshare.md" %} screenshare.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-screenshare2.md" %} and-screenshare2.md {% endcontent-ref %}

description: Adds a low-cut filter

&lowcut

Sender-Side Option! (&push)

Aliases

  • &lc
  • &higpass

Options

Example: &lowcut=150

Value Description
(integer value) Sets the cut-off frequency in hz (default is 100hz)

Details

Adds a low-cut filter.

{% hint style="warning" %} Enables the audio processing pipeline. {% endhint %}

Related

{% content-ref url="and-compressor.md" %} and-compressor.md {% endcontent-ref %}

{% content-ref url="and-limiter.md" %} and-limiter.md {% endcontent-ref %}

{% content-ref url="and-equalizer.md" %} and-equalizer.md {% endcontent-ref %}

description: Share audio-only; no video publishing allowed

&miconly

Sender-Side Option! (&push)

Details

Mostly just an alias of &videodevice=0&webcam, but it also further hides the option to later select a video device via the settings menu. It also hides the 'mute camera' and screen-share buttons.

This is a useful option for when you want a guest to join a room and only publish audio, with no opportunity to share video.

(2) (1) (1) (1).png>)

Related

{% content-ref url="videodevice.md" %} videodevice.md {% endcontent-ref %}

{% content-ref url="and-webcam.md" %} and-webcam.md {% endcontent-ref %}

description: Hides the ability for a guest to upload a file

&nofileshare

Sender-Side Option! (&push,&room)

Aliases

  • &nodownloads
  • &nofiles

Details

In some cases, the guest will have a button by default to upload files to the group room.

Using &nofileshare, the button needed to select and share a file will be hidden.

This may also prevent a guest from being able to download files that are shared with them.

.png>)

Related

{% content-ref url="and-fileshare.md" %} and-fileshare.md {% endcontent-ref %}

description: >- Disables IFrames from loading, such as remotely shared websites by another guest or director

&nowebsite

Sender-Side Option! (&push)

Aliases

  • &noiframes
  • &noiframe
  • &nif

Details

Disables IFRAMEs from loading, such as remotely shared websites by another guest or director.

Related

{% content-ref url="and-website.md" %} and-website.md {% endcontent-ref %}

description: The order priority of a source video when added to the video mixer

&order

Sender-Side Option! (&push, &room)

Options

Example: &order=3

Value Description
(positive integer value) Higher order, drawn first on screen

Details

Videos in the auto-mixer are normally sorted by default by their connection ID, but assigning a mix-order value to a video will order it based on that mix value instead. If not set manually via the &order parameter, the mix order value will be zero.

The director can change this value dynamically for each guest; they can change the order of a guest via the Mix Order option in the director's room. If wanting to pre-assign the mix-order value though, the &order option can be useful, such as when wanting to ensure the main host of a stream is always first in the video mix layout.

The mixer order takes priority over &orderby, but the mix order has no effect if using a custom layout, such as when using a custom &layout or via the mixer app.

(1) (3).png>)

If two videos have the same order value, the mixer will decide on its own which is drawn first of the two.

Order is Left to Right; Top to Bottom.

The mix order value for a guest/video source is synced with all other guests/scenes/viewers, so changing it will impact how others see the mix order as well.

Related

{% content-ref url="../newly-added-parameters/and-orderby.md" %} and-orderby.md {% endcontent-ref %}

description: Enables pan/tilt/zoom control of the device, if compatible

&ptz

Sender-Side Option! (&push)

Details

Enables pan/tilt/zoom control of the device, if compatible.

This will trigger a new permission popup though.

Can be added to a guest's URL in a room. Then the director can manually change pan, tilt and zoom for the guest's camera.

Can also be added to a simple push link, then you can change pan, tilt and zoom in the video settings.

.png>)

description: The stream ID that you are publishing with will be the defined value

&push

Sender-Side Option! (&room)

Aliases

  • &id

Options

Example: &push=StreamID

ValueDescription
(no value given)creates a randomly generated stream ID
(string)1 to 49-characters long: aLphaNumEric-characters; case sensitive.

Details

&push is the parameter that tells VDO.Ninja to be a publisher.

https://vdo.ninja/?push=streamid
https://vdo.ninja/?view=streamid

If the parameter is not provided, a randomly generated stream ID will be used instead.
https://vdo.ninja/?push

This is a useful parameter if you wish to reuse an invite link or if you refresh the page often.
The value needs to be 1 to 24-characters long: aLphaNumEric-characters; case sensitive.
If left empty, the stream ID will default to a random one.

{% hint style="info" %} If the stream ID is already in active use, an error will be shown and the stream will not publish. {% endhint %}

If using a &room URL and not using &scene or &solo, VDO.Ninja will automatically generate a &push ID.

Related

{% content-ref url="../advanced-settings/setup-parameters/and-permaid.md" %} and-permaid.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/view-parameters/view.md" %} view.md {% endcontent-ref %}

description: Easter egg &notify sound

&r2d2

Sender-Side Option! (&push)

Details

Add this to a guest's/director's URL and you get R2-D2 audio alerts for raised-hands, chat messages.

Same as &notify. If there is no sound when a guest is joining or leaving the room, use &notify&r2d2 to get a basic sound.

{% hint style="warning" %} If you can't hear a sound, click any button in the room. Then the sounds will be activated. {% endhint %}

Related

{% content-ref url="and-notify.md" %} and-notify.md {% endcontent-ref %}

{% content-ref url="and-hands.md" %} and-hands.md {% endcontent-ref %}

description: Disables camera-sharing as an option

&screenshare

Sender-Side Option! (&push)

Aliases

  • &ss

Details

&screenshare will allow the guest to screen share by being directly asked to share a screen or window instead of being taken to the camera/screenshare selection screen.
(1) (1) (2) (1).png>)

Starting with v19 of VDO.Ninja, there is also the &screenshare2 option; a minor UI variant that requires an additional button press, but more clearly preps the guest to the fact they will be sharing their screen.

Using &screenshare with the Electron Capture App

When using the Electron Capture App you have to "Elevate Privileges" to be able to share a window or screen. You can enable Elevated Privileges for the Electron App via the command line with --node true or in the app by right-clicking and selecting "Elevate Privileges" from the context-menu.

One unique feature about the Electron Capture App is that it can auto-select a screen or window when screen-sharing with VDO.Ninja, without user-input.
For example:
&screenshare=1 for the main display
&screenshare=2 for the second display
&screenshare=discord for the Discord application
&screenshare=googlechrome for the Chrome Browser

Related

{% content-ref url="and-webcam.md" %} and-webcam.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-screenshare2.md" %} and-screenshare2.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/screen-share-parameters/and-smallshare.md" %} and-smallshare.md {% endcontent-ref %}

{% embed url="https://github.com/steveseguin/electroncapture" %}

description: Set a target FPS for your screenshare (secondary stream)

&screensharefps

Sender-Side Option! (&push)

Aliases

  • &ssfps

Options

Example: &screensharefps=60

Value Description
(integer value) will target this framerate. Eg: 60

Details

Set a target FPS for your screen share.

Related

{% content-ref url="screenshareid.md" %} screenshareid.md {% endcontent-ref %}

{% content-ref url="screensharequality.md" %} screensharequality.md {% endcontent-ref %}

description: >- Pre-sets the screenshare stream id for a screen share if its a secondary stream

&screenshareid

Sender-Side Option! (&push)

Aliases

  • &ssid

Options

Example: &screenshareid=SomeID

ValueDescription
(no value given)If no value is passed, the system will automatically add the suffix of "_ss" to the existing stream ID that the user might be using.
(string)Pre-sets the screenshare ID. Useful to automate or prepare stuff in advance.

Details

When screen sharing as a guest in a group room, in &sstype=2 screen sharing mode, the screen share will now create a second stream for the screen share, keeping your webcam also.

&screenshareid will preset the ID the screen share will have, making the stream ID for the screen share easier to predict and prep for.

Example (&room=roomname&sstype=2&push=streamid&screenshareid)
(1) (1).png>)

Without this, the screen share ID in &sstype=2 mode is random, which is a decision made to increase security. This complication will be addressed in the future.

There is a toggle in the director's room which adds &ssid to the guest's invite link.
(2).png>)

{% hint style="info" %} &screenshareid doesn't work with &screensharetype=3. When using &screensharetype=3 the screen share gets the appendix :s added to the stream ID of the guest.

As of VDO.Ninja v23,&screensharetype=3 is default, but you can revert back to &screensharetype=2 or use the new &screensharetype=3 method post-fix :s method of identify screen shares. {% endhint %}

Related

{% content-ref url="screenshare.md" %} screenshare.md {% endcontent-ref %}

{% content-ref url="screensharefps.md" %} screensharefps.md {% endcontent-ref %}

{% content-ref url="screensharequality.md" %} screensharequality.md {% endcontent-ref %}

description: >- Disconnects communication with the handshake server as soon as possible and provides verbose feedback

&secure

General Option! (&push, &room, &view, &scene)

Details

The enhanced security parameter will auto-disconnect you from the handshake-server after the first peer connection is established (Publishers only are disconnected; not viewers). In effect, this makes it impossible for the server to request future handshakes from you, and hence no more future peer connections.

The feature also makes the connection activity verbose, letting you know when someone starts watching your stream and when that viewer disconnects.

The security mode also limits the max number of viewers to just one viewer, and if they do disconnect, they cannot reconnect. No one can actually; you will have to re-setup via a page refresh to let someone try connecting again.

This can help prevent someone from destroying a live stream due to accidentally screen sharing the stream ID to the public.

Technical Benefits

  • The handshake server has no way of talking to the publisher after the stream starts. Fully decentralized once initialized.
  • The publisher cannot be spammed by "Watch Stream" requests if the invite link gets shared accidentally.
  • The publisher can clearly see when someone has joined and when someone has disconnected.
  • Increased security and privacy, with just some minor added inconveniences.

Alternatives

  • If you wish to host your own handshake server, there is one available that is adequate for private for personal use here: https://github.com/steveseguin/websocket_server/
  • If interesting in hiding your IP address from a remote guest, you can use &privacy instead, which will use a TURN server to connect with remote guests, acting as a middleman for the peer connection.
  • While it should be tested, you can also perhaps try &icefilter=host which will attempt to filter out connections with remote guests that are behind a firewall. Feedback and test results welcomed.

description: Access device sensor data at given rate

&sensor

Sender-Side Option! (&push)

Aliases

  • &sensors
  • &gyro
  • &gyros
  • &accelerometer

Options

Example: &sensor=50

Value Description
(integer value) Set polling rate to given value, in hz. Default 30hz.

Details

Gyroscopic, accelerometer, magnetometer data can be pushed out.

Enable with &sensor=30 (30hz).
Results show up in the remote stats log or the remote IFRAME API.

Useful for VR live streaming support, where you want to capture a smartphone's movement, as well as video.

Support will vary from device to device; please report problems or reach out for requests.

Update 22/06/02

&sensor now also includes speed and altitude data.

Added a demo/sample on how to overlay speed + acceleration on top of video playback (compatible with a mobile phone sender)

https://vdo.ninja/examples/sensoroverlay?view=STREAMID

{% embed url="https://www.youtube.com/watch?v=SqbufszHKi4" %}

Related

{% content-ref url="../advanced-settings/settings-parameters/and-sensorfilter.md" %} and-sensorfilter.md {% endcontent-ref %}

description: Shows list of hidden guests

&showlist

General Option! (&push, &room, &scene)

Options

Example: &showlist=1

Value Description
0 Force disable the list of hidden guests
1 | (no value given) Force enable the list of hidden guests

Details

Should list user's labels in a list, along with whether they are video-muted or not.

Includes microphone mute states and voice activity meters in the list.

Is visible by default when using &broadcast mode.

(1) (2) (1).png>)

description: Enables transcription and closed captioning

&transcribe

Sender-Side Option! (&push)

Aliases

  • &trans
  • &transcript

Options

Example: &transcribe=de-DE

Value Description
en-US American English
de-DE German
pt-PT Portuguese
(any xx-XX language code) You can check for additional language codes here.

Details

The transcription service uses default browser/system mic as a source and cannot be muted.

Generally needs to be used in conjunction with &closedcaptions.

{% hint style="warning" %}

  • The transcription audio source will be the default microphone of the browser, which often is the same as the system's default input source.
  • It is not necessary the microphone that has been selected in VDO.Ninja. Please double check this if the transcription isn't working.
  • The mute button of VDO.Ninja will not work with this feature; at the moment anyways.
  • Only one transcription service can run at a time.
  • Chrome or other browsers will prevent the user from running multiple transcription services at a time. Since the transcription services of most browsers requires the Internet. {% endhint %}

You will normally need Internet access for this to work and be willing to tolerate the occasional hiccup that the browser's transcription service may cause. Service may stop for seconds at a time as a result.

Certain Android devices may not require internet for the transcription to work.

{% embed url="https://www.youtube.com/embed/3eo85WAXeuk" %}

{% hint style="danger" %} Does not work in Safari! {% endhint %}

Related

{% content-ref url="../advanced-settings/settings-parameters/and-closedcaptions.md" %} and-closedcaptions.md {% endcontent-ref %}

{% content-ref url="../steves-helper-apps/caption.ninja.md" %} caption.ninja.md {% endcontent-ref %}

description: >- Allows assistant directors to have access to the director's room, with a subset of control

&codirector

Director Option! (&director)

Aliases

  • &directorpassword
  • &dirpass
  • &dp

Options

Example: &codirector=DirectorPassword

ValueDescription
(no value given)the site will prompt you for a password on load
(alpha numeric value)password for the directors

Details

The basic idea is there is a URL parameter called &codirector that you need to add to all the director links used.

For example, https://vdo.ninja/?director=MYROOMNAME&codirector=DirectorPWD123

So long as all the directors have &codirector=DirectorPWD123 added to their URLs, they all share a common director's password, and so they all treat each other as valid directors.

If the passwords don't match, the first director into the room will be the real director, and the others will be rejected.

If you don't enter a password via the URL, the site will prompt you for a password on load.

Description

Using this flag, the director can set a director's password (or prompt the user for one). Any other director that joins the room, who also has a matching director's password set, will be granted co-director controls.

A co-director has nearly all the same controls and powers as the main director, except they cannot control the main director, nor kick them out of the room. They also have a few features unavailable to them at present, such as solo-talk, as those currently would conflict with the main director's ability to use those features.

The first director to join the room is the main director, and so their password is the 'correct' password.

A co-director cannot force-disconnect the main director.

If the main director does not have &codirector={somepassword} in their URL, nor enabled co-director mode via the room-settings menu, then remote co-directors will not be able to join.

{% hint style="info" %} The co-director mode is still evolving, and certain things like shared-state between all the directors may still be missing.

Starting with v20 of VDO.Ninja, a co-director invite link will be available via the room settings button, along with the option to customize permissions. {% endhint %}

Optional - Enable via Room Settings

You can also enable the co-director mode by checking the "Add co-directors .." option in the room settings menu. This will provide you a link with the &codirector invite link already generated.

This will only work while the check-box is selected, so be sure to re-enable it if reloading the page without &codirector added to your own link.

(3).png>)

Warnings

Do not confuse the room password with the director's password; if they are the same, you potentially allow a mischievous guest to have access that they should not have.

Co-directors will not be able to join as co-directors unless the main director has enabled the co-director option via the room setting's checkbox or by having a matching &codirector=xxx parameter in their own link.

If the main director leaves and re-joins, or a new director joins, all the co-directors will need to be re-checked. It's possible that a network outage could have a co-director and the main director to switch roles, depending on who re-connected.

If you copy and paste the main director's URL to a new browser/tab, be sure to remove the &push=STREAMID portion of the URL. If you do not, you will get an error about the stream ID being already in use. Each co-director and guest needs their own unique stream ID.

If using the &queue parameter with co-directors, you may need to use &view=STREAMID to allow the co-director to bypass the queue, else they won't be able to be validated since they will be stuck in the queue. There is more info about this in the queue's documentation.

Related

{% content-ref url="../viewers-settings/director.md" %} director.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/director-parameters/and-hidecodirectors.md" %} and-hidecodirectors.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/director-parameters/and-maindirectorpassword.md" %} and-maindirectorpassword.md {% endcontent-ref %}

description: Remote MIDI control

&midiremote

General Option! (&push, &room, &view, &scene)

Aliases

  • &remotemidi

Options

Example: &midiremote=4

ValueDescription
(1 to 4)reference &midi's values

Details

This lets you route all MIDI messages from one computer to another computer, with the purpose of remote triggering the VDO.Ninja hotkeys.

https://vdo.ninja/beta/?midiremote=4&director=ROOMNAMEHERE
https://vdo.ninja/beta/?room=ROOMNAMEHERE&midiout=1&vd=0&ad=0&push&autostart&label=MIDI_CONTROLLER
  • &midiremote={reference &midi's values; 1 to 4}

See &midi for a link to the page with more information on available hotkeys.

{% embed url="https://www.youtube.com/watch?v=rnZ8HM9FL4I" %} How to remote control with MIDI {% endembed %}

Related

{% content-ref url="../midi-settings/midi.md" %} midi.md {% endcontent-ref %}

description: '"The stream ID you are publishing to is already in use" and other such errors'

Already in use or claimed errors

"The stream ID you are publishing to is already in use"

Understanding stream IDs will help potentially avoid these errors in the future, but the basic notion is any media stream being published over VDO.Ninja needs to register itself with a stream ID. This is specified by using the &push URL parameter, such as &push=STREAMID.

The moment you connect to the system or start streaming, your stream ID gets registered to your connection, and so as long as you remain connected and online, you keep that stream ID. If you close the browser, hang up, or lose your Internet connection, then your stream ID unregisters automatically as well.

If a stream ID you are trying to claim is already in use by another stream, and that other connection is still actively online, then you'll get an error about it being already in use. In this case, you will need to wait for that other user to hang up or disconnect before you can attempt to register the stream ID yourself.

There are some subtleties to the above, such as if using passwords or self-hosted instances of VDO.Ninja, then stream IDs are isolated to their own unique realm, allowing you to use the same stream ID as someone else from a different realm. So if a stream ID is already in use, you can just change or add a password, and that will resolve the issue.

Of course, when you want to invite several people to a group room, you can't have different passwords, so you will want each guest to have their own unique stream ID still. By default with VDO.Ninja, if you do not use &push in the URL to specify a stream ID, then VDO.Ninja will auto generate a random stream ID for the guest. The system will also auto add the &push=STREAMID parameter to the guest's URL, so if the guest refreshes their page, they will keep the same stream ID.

The above is where there are sometimes issues, as if you join a room without a &push value specified, and then after connecting connecting you copy/share your URL with someone else, your URL might now contain your stream ID. When you then share it with someone else, they won't be able to connect as you are already using the stream ID that is specified.

In the above case, when distributing invite URLs to guests, either ensure each guest has a unique stream ID assigned to them, or ensure that there is no &push parameter added to the URL, allowing the system to generate a random stream ID for each guest.

Manually creating a stream ID for each guest is recommended if you want each guest to appear in the same solo-view-link every time they re-join, as otherwise they may have a random new stream ID everytime they join. Many show producers will use a spreadsheet to keep track of who has what stream ID, their settings, and the corresponding invite link. Some of these spreadsheets are pretty sophisticated, with the ability to generate obfuscated invite links based on a few parameters.

If manually creating stream IDs, please just note that they need to be alphanumeric, with no special characters, are should be ideally less than roughly 30-characters long. If using a password, the uniqueness of the stream ID doesn't matter so much, but if not using a password, please ensure you create unique values that can't be easily guessed or accidentally duplicated by someone else.

Additional tools and options are available to create and assign stream IDs, such as &permaid, and other methods to store stream IDs via local user storage, but those options are out of the scope of this article.

"The room is already claimed by someone"

This error indicates that there is already someone in a group room that has joined the room in the role of a director. The first director to join a room claims the room as theirs, and it remains theirs until they go offline or close their browser, as the room is assigned to their active connection. Another director will then be able to claim the room then, once the main director disconnects.

Claiming a room doesn't inherently mean much, other than anyone who joins the room will only acknowledge them as the main director. Acknowledging someone as a director will simply mean that director has certain privileges when requesting actions of a guest or scene. A validated director can ask a guest to hang up, for example, while otherwise such a request will be rejected.

Since VDO.Ninja is built on the concept of peer to peer connections, claiming a room is the same concept as claiming a stream ID, and those claims are tied to your active connections. Everything beyond that is really a matter of peers agreeing to a certain set of rules amongst themselves. If someone does claim a room and forgets to close their browser, you'll need to close that browser, change rooms, or change room passwords if you wish to have someone else become the main director.

Appearing then disappearing guest

In this case, it sounds like the remote guest is failing to create a WebRTC peer connection with the director.

The handshake works, so each other knows someone is trying to join, but they are unable to find themselves. The system will time out and try again, when this occurs, causing the guest's box to continually partially appear, and then go away again.

This is sometimes caused by blocked UDP traffic, where the TURN relay servers are unable to help for some reason. Security software, privacy-focused VPNs, corporate firewalls, and certain browser extensions are common causes.

Sometimes other guests in the room will see the problematic guest, and in this case, there could just be a network routing issue. Peer to peer connections across the Internet are not common, with most clients these days talking to servers instead, so residential to residential connections may occasionally fail due to bad Internet routes or caches.

Things that often work:

  • Switch browsers, with Firefox being a common winner when Chrome fails. Perhaps also try Edge or even the Electron Capture app.
  • Use a VPN designed for streaming, such as speedify.com. Free VPNs exist as Chrome extensions, if you need something quick.
  • Switch networks; if using WiFi, switch to Cellular, and vice-versa.
  • If behind a corporate firewall, have the IT administrators allow WebRTC traffic, or use a different.
  • Meshcast.io is a server-based WebRTC system, and it may work in place of VDO.Ninja for simple needs.
  • If nothing above works, join the Discord support community for personalized help at discord.vdo.ninja.

description: When data is lost or delayed during transfer between peers

Packet Loss

Packet loss can cause low quality video, audio distortion, clicking, and is the cause for numerous other video problems.

WiFi is often the main contributor to packet loss, but it's not the only cause. Still, eliminate WiFi as a possible culprit by removing it from your setup and from the guest's setup.

An Ethernet connection is highly recommended over WiFi.

That said, there are things to try still if WiFi is needed:

  • Make sure the guest is plugged in and powered; battery mode with some laptops can cause issues.
  • Try to sit closer to the WiFi router and try to limit the traffic on the network; the more that's going through the air, the more packet loss.
  • If the guest can use the 4G LTE instead of WiFi (tethered via USB), that will often be much better than WiFi.
  • The guest can also Tether their 4G LTE /w their WiFi using bonding apps like Speedify or with hardware from Peplink; these services can give you more control over network settings.
  • If using a smartphone, consider using a USB to Ethernet adapter instead. I have a video demonstrating how to do this here: https://www.youtube.com/watch?v=abCuANblE5w
  • Some users have mentioned that reducing their network's MTU size, or the size of their packets, has helped reduce packet loss over bad WiFi. You'll need to experiment with this, but 800 to 1000 might be in the range you can try in this case.
  • Improving the Wi-Fi network, such as switching network bands (5hz / 2.4ghz), buying a mesh-based multi-node access point setup for larger homes, changing network channels to account for frequency interference, updating to Wifi-6 or newer technologies, and moving the closer to the access point.

If the issue isn't WiFi related

  • Try to have the guest use a different browser. For example, if using Firefox, use Chrome, and vice versa. Some browsers are optimized for privacy over performance, and that may hinder video quality, and even Chrome can sometime be configured in a way that hinders VDO.Ninja from working well.
  • Disable any Anti-virus software or any security software that may disable WebRTC IP leaking.
  • Advanced network firewalls, like pfsense, may block UDP packets or force traffic through a TURN relay server. VDO.Ninja uses mainly UDP packets in the high port range.
  • If your connection with a guest is going thru a TURN relay server, such as perhaps due to a security or privacy setting, resolving that may fix issues. VDO.Ninja offers publicly accessible and free TURN servers as part of its service, but these may introduce packet loss. You can always host your own TURN servers instead, but avoiding them if not needed is usually the best option.
  • Restart your Internet router; sometimes a router or network equipment just needs a good reset or update.
  • If your router is double-natted, such as if you have a router plugged into another router at home, it can cause VDO.Ninja to send video via relay servers instead of the preferred direct peer to peer. Commonly, to address this, either set the second router as an AP access point instead, or configure the first router to be in bridge mode.

Routing issues

Sometimes two peers just can't get a good connection, while with other peers they can. This is often largely dependent on your ISPs, and it can be challenging to fix.

  • Host your OBS Studio on a premium cloud server, like Amazon AWS Workspaces or Google GCP. These providers have good networks optimized for most users to access, and hosting a VPN, TURN server, or the entire OBS Studio can help you control for network routing issues.
  • Forcing the TURN relay servers into use may help at times; adding &relay to the links can enable this mode. It may add some latency though, as the video traffic will take a longer, but different, network routing path that may be more reliable. Hosting your own TURN server on a local premium server, and specifying VDO.Ninja to use it, has been a good solution for some.
  • As mentioned above, you can also use a VPN, perhaps one with the server is hosted on a local Google Cloud server or perhaps use a VPN service that offers local edge network access onto a premium network. If all guests connect via the VPN, you'll have more control over the routing quality.
  • Change your ISP (Internet provider) to another provider; this maybe needed on either your end or the remote guest's end. Some network providers, especially consumer-grade residential providers, can have really bad packet loss issues, especially during the evening hours.
  • Use cellular connections instead, especially if the issue is intermittent and perhaps only during peak Internet usage hours. Cellular connections are optimized for audio and live streaming, and so while they may have limited bandwidth or be expensive, they can also be the last refuge of hope sometimes. This is especially true of 5G connections.
  • If your router or connection supports IPv6, but you don't have it enabled, try enabling it. Sometimes if limiting yourself to IPv4 or IPv6, your ISP may send your traffic through an IPv4<>IPv6 translation server, which could introduce delays, throttling, and packet loss.
  • Some cellular providers limit and throttle UDP packets, which are used by VDO.Ninja. Using a service such as Speedify, in TCP-mode, can bypass this limitation by wrapping the UDP packets as TCP and relaying them thru servers. Check with the cellular provider before purchasing a SIM card to ensure they do not throttle UDP packets as well, if intending to travel.
  • As mentioned before, sometimes the TURN relay severs get used, and this might be the case with cellular connections or corporate firewalls; hosting your own TURN server or finding a way to bypass them can sometimes help improve the quality of connections.

More generic options to try

  • Using &chunked mode on the sender's side can enable an alternative way of sending video data, but this option is only supported by Chrome and other Chromium-based browsers. It also is fairly CPU intensive and may require some tweaking of bitrates and buffers to have it work well for you situation
  • Try using &codec=av1 on the viewer side; this won't solve packet loss issues, but the AV1 codec is more efficient than the default codecs, and so it may offer better video quality despite the packet loss.
  • Try adding &buffer=500 to the viewer link, as this might allow for more time for lost packets to arrive.
  • Reduce the bitrate of your video streams. If your connection can only handle 30-mbps in and 10-mbps out, trying to push it to do more will cause network thrashing and packet loss. In this case, try to ensure that your connection's up and download links are not saturated by more than 80% of their tested max capacity. Leaving some headroom will reduce latency and packet loss, ultimately leading to better quality.
  • Consider using Meshcast or a WHIP/WHEP server-based SFU provider, and use that with VDO.Ninja instead of a direct peer-to-peer connection. I have a guide for setting up Cloudflare to be used in this regard, but any WHIP+WHEP SFU can work. This can provide more advanced buffering and SVC options not available with direct browser to browser options.
  • Use Raspberry.Ninja or OBS Studio's WHIP output as a video source, instead of the browser. Raspberry.Ninja in particular supports double redundant video streams for added error correction, and while it uses more bandwidth, it can tolerate heavy packet loss and force a specified video quality. While packet loss will still exist, you might find the outcome is more to your liking.
  • If screen sharing, you can use &contenthint=detail, which can tell the system to prioritize frame resolution, than frame rate. While this isn't suitable for gaming, it might be a good option for screen shares, where packet loss might otherwise might text unreadable.

Audio issues due to packet loss

  • Turning down the audio bitrate (&audiobitrate=128) will be less prone to clicking issues vs something high, like 256-kbps. The default is 32-kbps.
  • You can add &enhance on the viewer side to try to prioritize the audio over the video. This might help with audio clicking issues.
  • Using &audiocodec=red on the viewer side can increase the amount of error correction data being sent, reducing packet loss. This will double the audio bandwidth, but that shouldn't be an issue for most modern connections.

YouTube Video guide on packet loss + VDO.Ninja

I have a video talking about packet loss, with details on how to setup Speedify as well: https://www.youtube.com/watch?v=je2ljlvLzlYAnd

Connection testing tools and statistics

There is a speedtest that the local user can try out to give them feedback on their packet loss. This is a special speedtest, different than normal tests, as it does not test for available bandwidth, but network quality and packet loss: https://vdo.ninja/speedtest

If you'd like to remotely test a guest's connection, you can also have them perform the VDO.Ninja pre-check test. This is a comprehensive system and network test, which allows you to review the results of the guest remotely: https://vdo.ninja/check

You can also do a peer-to-peer test by just making a VDO.Ninja connection with the guest. If you hold down CTRL (cmd) and click on their video, you'll see the stats. Packet loss is a listed stat, as well as the candidate type. If a guest is connecting to you via RELAY candidate type, that implies there is a firewall or security setting blocking a direct peer to peer connection. Addressing this will likely resolve your issues.

When doing a pre-check or speed test, make sure to test during the hours of the day you intend to go live. Mornings will often have less packet loss than evenings, with around 7pm to 10pm being especially bad.

Asking ChatGPT about it..

So I asked ChatGPT about improving the network quality between two peers, and its response is below.

Understanding the root causes of UDP packet loss across different network paths can be quite complex, particularly because the internet is a mesh of countless routes, and performance can be affected by a multitude of factors that are often beyond the control of end users. Here are some points to consider when trying to diagnose these issues:

  1. Path Specifics: Even if all users have good connections to a common server like Google's, the path packets take to reach your specific service might be vastly different. This can be due to the routing policies of ISPs, peering agreements, or simply the geographic distance the packets need to travel.
  2. Network Congestion: One of the most common causes of packet loss and latency is network congestion. This can occur at any point along the path and can be temporary (like peak usage times) or could indicate a more chronic issue with a particular segment of the network.
  3. Quality of Service (QoS): ISPs may implement QoS policies that prioritize certain types of traffic over others. For instance, UDP traffic may be deprioritized in favor of TCP traffic, which could negatively impact applications that rely on UDP.
  4. NAT and Firewall Configuration: Users behind strict NATs or firewalls might experience connection issues if certain ports are blocked or if the NAT type is restrictive (Symmetric NAT), which can cause problems for UDP traffic in particular.
  5. Hardware Issues: Problems with user hardware (like routers or modems) or even the quality of the local network (like Wi-Fi interference) can cause increased packet loss.
  6. ISP Issues: Issues within an ISP's network, such as faulty routing, misconfigured equipment, or even under-provisioned transit links, can lead to increased latency and packet loss.
  7. Server Performance: On your end, the server's performance and its connection to the internet could also affect the user experience. Overloaded servers or servers with a poor connection to the backbone can be a bottleneck.
  8. Packet Inspection: Some ISPs may perform deep packet inspection which can introduce latency and potentially drop packets if they are deemed to be non-essential or if they match certain patterns.
  9. Transit Providers: Different users may have different transit providers between them and your server, which can result in different latency and packet loss characteristics.

To diagnose these issues, you could:

  • Implement more detailed logging and monitoring on your server to see if there are patterns in the connectivity issues.
  • Ask users to run traceroutes and path analysis tools from their location to your server and back to determine where delays or losses are occurring.
  • Use network diagnostic tools that can simulate UDP traffic and measure performance across different network paths.
  • If feasible, provide alternative connection points or relay servers in different geographical locations to see if routing through these points improves performance.

Ultimately, diagnosing network performance issues often requires cooperation from ISPs and a deep dive into network performance metrics. Tools like MTR (My Traceroute) can be more informative than a simple traceroute as they provide information on packet loss at each hop and over time, which can help in pinpointing where issues are occurring.

👍🍀

description: Some causes and solutions for robotic audio issues

Robotic Audio Distortion

Troubleshooting Robotic Audio Distortion in VDO.Ninja

Overview

When experiencing robotic audio distortion in VDO.Ninja, the issue could stem from several sources - your system settings, OBS Studio, or even your browser. Below, we'll explore the various causes and their solutions.

System Configuration Issues

One of the most common sources of audio distortion relates to your system's audio settings. Users with high sample rates (such as 384-khz) on their microphone or default system device often encounter problems. Similarly, 32-bit audio sampling can create issues. VDO.Ninja performs best with 48-khz sampling rate and either 16- or 24-bit depth. This is particularly relevant for users with FiiO audio DACs.

Some users have found that certain software features can interfere with audio quality. For instance, the MyAsus software's AI Noise-Cancelling Speaker feature, when enabled for the default audio output device, has been known to cause distortion. Simply switching this setting to OFF has resolved the issue for many users.

Gaming peripherals can also be a source of trouble. Users with surround sound headphones, particularly 5.1/7.1 Logitech or Corsair gaming headsets, may experience distorted audio. To resolve this, try setting your headphones and speakers to 2.0 stereo audio and disable any surround sound / DTX effects.

If problems persist, consider switching to a different non-gaming headset.

OBS Studio-Related Problems

When using OBS Studio, you might notice the issue becomes more pronounced when the browser source is minimized or running in the background. Some users have found success by simply running OBS in Administrator mode, suggesting the problem may be related to system priority settings.

If you see "Max audio buffering reached!" in your OBS log files, your computer might be struggling with CPU load. You have several options: reduce the demands on your CPU, upgrade your hardware, or try using the Electron Capture app instead of the OBS Browser source for audio and video capture.

DO NOT use OBS's CPU monitor to judge CPU usage — it's deceptive and never close to accurate. Instead, use the Windows Task Manager, or whatever system resource manager there is. It will offer a more accurate total system CPU usage value, and if its near or at 100%, then that can cause OBS to have delayed or robotic audio.

Try not monitoring the audio of sources in OBS, especially browser sources; for some users, this has fixed the issue. You can monitor the audio of guests via VDO.Ninja instead directly, or by using the Electron Capture app instead.

Audio Routing and Echo Issues

If you're using virtual audio cables or a professional audio mixer, audio buffer issues might manifest as clicking sounds or distortion. Increasing the audio buffer size in your virtual audio cable settings often resolves these problems.

Echo cancellation can create unexpected robotic effects, particularly in specific scenarios. Having multiple VDO.Ninja tabs open on the same computer can create feedback loops that trigger echo cancellation. Similarly, if you have a mobile phone or second computer nearby that's streaming into the same VDO.Ninja group, you might experience feedback loops resulting in echo cancellation issues.

Do not test audio with two devices side by side, or even in the room next door. Smartphones have sensitive microphones and echo-cancellation can cause issues even if the test device is somewhere else in the house.

Network and Connection Problems

High packet loss can significantly impact audio quality. While adding &enhance&red to your view/scene link might help, addressing the underlying packet loss is usually more effective. If you're using a VPN or operating behind a strict firewall that forces the use of relay servers, try to resolve these network constraints first.

Avoid WiFi and bad network connections.

Ensure that OBS is allowed through your system's firewall; sometimes a user might block OBS from accessing the Internet in full, and that can cause network issues.

OBS also has an issue where it hides local IP addresses when making peer connections; this can in some cases force connections that should stay on a local network to be forced over the Internet. This can add network instability and packet loss, which at times may cause bad audio. If you're comfortable lowering the web security of your browser engine within OBS, you can do this by starting OBS with the following command line parameters:

obs64.exe --disable-web-security --allow-running-insecure-content --ignore-certificate-errors --use-fake-ui-for-media-stream

Version-Specific Considerations

Different versions of VDO.Ninja may handle audio processing differently. If you're experiencing persistent issues, you might want to try an older version, such as https://vdo.ninja/v23/. For systems under heavy load, adding &noap to your VDO.Ninja URL will disable web-audio processing, which can help with robotic audio effects caused by audio buffer underruns.

If you notice that the audio issues are specific to certain versions, please report them through the Discord community (https://discord.vdo.ninja). Your feedback helps improve the platform for everyone.

Different versions of OBS Studio also can cause issues. Try different versions of OBS if facing issues, especially new issues, and consider not using new versions of OBS for production purposes until doing tests. I like to skip versions if the current version is working well, only upgrading when needed.

Electron Capture app

If Chrome or OBS is having an issue with audio, consider using the Electron Capture app instead. It's optimized for good performance and avoids browser extensions from interfering with VDO.Ninja.

More resources and support

While you can drop by Discord (https://discord.vdo.ninja) for support, check out this related guide that has common issues for audio clicking and audio distortion. It offers quite a few other possible causes of audio issues.

{% content-ref url="audio-clicking-popping-distortion.md" %} audio-clicking-popping-distortion.md {% endcontent-ref %}

description: Audio Troubleshooting Guide for VDO.Ninja

Audio Clicking / Popping / Distortion

Common Issues and Solutions

OBS Studio related audio issues

There are numerous known causes of audio drop out or audio distortion in OBS. Often it's caused by OBS Studio being throttled by the system, or perhaps a firewall setting is causing network issues. So try the following first, if the issue is OBS specific:

  • 👉 Consider running OBS Studio in Administrator mode, if on Windows 👈
  • Restarting OBS or addressing heavy CPU load may also help prevent buffer underruns, which sometimes appear in the OBS logs as a max buffer reached error.
  • Make sure the computer isn't running near 100% load to ensure it's not just overloaded.
    • Do not rely on the OBS CPU usage value, but instead use Windows Task Manager to judge CPU usage
  • Try a different version of OBS Studio.
  • Perhaps add OBS Studio to the allowed Firewall apps list

Try adding OBS or your Browser to the Firewall allow list

Bluetooth Microphone Clicking/Popping

Bluetooth microphones can cause clicking or popping sounds. Consider using a wired microphone for better reliability.

Sample Rate Mismatch

VDO.Ninja uses 48kHz audio (48000hz). To ensure maximum compatibility:

  • If different sample rates are used, conversion may cause issues in rare situations.

High Sample Rate Devices

Devices like FiiO DAC can sometimes have very high audio sample rates, potentially causing buffer underruns and clicking problems.

Recommended Audio Settings:

  • Set playback audio device and microphone capture device to 48000hz.
  • Use no more than 24-bit audio depth.
  • Disable any Audio Enhancements in your audio drivers
  • Ensure to only use mono or stereo audio with your devices; surround can cause issues.
  • Adjust these settings in Windows audio settings.

.png>)

Disable surround sound or DTX audio

  • You might think you disabled the surround sound on your headphones, but you might only think you did
  • Try with a different pair of headphones; something less fancy, if you are using a Bluetooth or Surround sound gaming headset.

Buffer Size Issues

  • Increase audio buffer packet sizes for any virtual audio cables or pro audio gear.
  • Small audio buffers on mic preamps or virtual audio cables can lead to clicking or distortion.

System Overload

  • Restart OBS or address heavy CPU load to prevent buffer underruns.
  • Ensure the computer isn't running near 100% load.
  • Consider running OBS Studio in admin mode.
  • Consider reducing video resolution and bitrate to free up CPU resources for audio processing.

Surround Sound Headphones

Some surround sound headphones (e.g., Logitech, Corsair) can cause audio problems:

  • Symptoms: robotic noises, distortion
  • Solutions:
    • Disable surround sound / DTX mode
    • Disable Enhanced Audio settings in your Windows audio driver

MacOS-Specific Issues

Ensure your Mac is plugged into a power outlet, not running on battery power.

  • If an older Macbook, 2016-era for example, overheating is very likely.
  • Consider having the guest join with &meshcast&q=2, to reduce CPU load,

Network-Related Issues

Wi-Fi vs. Ethernet

  • Avoid using Wi-Fi for streaming high-quality music.
  • Use wired Ethernet connections on both ends to prevent packet loss and clipping.
    • Sometimes changing Ethernet cables can help, or actually even switching to WiFi oddly
  • Using cellular (tethered / hotspot), might validate if a network issue

Bandwidth Usage

  • Keep bandwidth usage below 80% of total upload capacity.
  • Using 100% of bandwidth can cause packet stalling and audio clicking.
  • https://vdo.ninja/speedtest can help you judge your max bandwidth

Packet Loss Solutions

  1. Enable TCP transfer:
    • For WHIP/WHEP services, configure to use TCP instead of UDP.
    • Use a VPN service like Speedify.com with TCP transfer mode.
    • For VDO.Ninja, add &relay&tcp to the publishing link.
  2. Use a TURN relay server in TCP mode:
    • Add &relay&tcp to the VDO.Ninja publishing link. Example: https://vdo.ninja/?webcam&relay&tcp
  3. Enable RED audio mode:
    • Add to &audiocodec=red the viewer-side links
    • This will switch from OPUS Forward Error Correcting to OPUS Redundancy mode

Meshcast /WHIP / WHEP / Servers

Audio packet loss may occur if broadcasting WebRTC media via an SFU server, where the viewer isn't able to receive the transmitted stream without error or hiccup.

Adding &buffer=2000 to the viewer's URL might help, trying a different server or lowering the audio/video bitrate could be another option.

OPUS with FEC (error control) common avoid these issues, but if FEC isn't on, or if PCM is used, then then clicking may be a bit expected.

Additional Troubleshooting Steps

Audio Processing tweaks

Try adding these URL parameters to viewer and sender links:

  • &noaudioprocessing
    • This disables web-audio nodes, which disabling will break some functionality of VDO.Ninja
  • &samplerate=48000
  • &micsamplerate=48000

Disable Hardware Acceleration

While it's an odd ball option, sometimes disabling Hardware Acceleration in OBS or Chrome can fix strange driver or hardware issues.

Browser / System performance throttling

Rarely, but sometimes audio may glitch of the browser itself is throttling performance. While using the Electron Capture app instead of Chrome can minimize the odds of this happening, below are steps that might also help:

  • Browser may pause non-visible windows, so you may need to disable this behaviour in your browser.

    • To do so, "Disable" the option located at chrome://flags/#enable-throttle-display-none-and-visibility-hidden-cross-origin-iframes.
    • Also "Disable" the flag chrome://flags/#calculate-native-win-occlusion.
    • Restart the browser after saving the changes.

  • Plug the computer into a power-outlet if using a laptop.

    • Laptops when running on battery power may throttle performance aggressively, so keep your device plugged in.
    • Avoiding being in a low-battery or power-saving state

  • Avoid minimizing any windows.

    • Things work best if windows are kept visible and open, but if you need to put them in the background, don't minimize them at least.
    • This isn't normally an issue, but it might be if using digital effects, like a digital zoom or the whiteboard feature

  • Browsers may also sometimes stop tabs/windows after an hour of inactivity.

    • Disable any option in your browser under chrome://settings/performance related to performance throttling or background tabs, such as "Throttle Javascript timers in background".

  • You can go to chrome://discards/ and toggle off "Auto Discardable" on the VDO.NInja or other windows of interest.

  • Try to keep the VDO.Ninja pages active and if possible, even partially visible on screen.

    • If the windows are hidden or minimized, they may stop working if the system is designed to optimize.

  • Another option to avoid throttling, if using Windows, is to do Win + Tab, and have two virtual Desktops on your PC.

    • Put the chat windows into one virtual desktop, and use OBS in the other.
    • Win+Tab can let you switch between desktops/windows.

  • You can also try the Electron Capture desktop app, as that has more controls and will avoid common throttling / visibility issues found while using Chrome.

Further Resources

For issues with audio distortion or robotic voices, you can see this article.

{% content-ref url="robotic-audio-distortion.md" %} robotic-audio-distortion.md {% endcontent-ref %}

description: >- OBS Studio is just black in the browser source; potentially you hear audio, but nothing else.

Nothing shows up in OBS

Common causes for no video showing up in OBS are the following:

  • Check OBS hardware acceleration settings
    • Enable or disable "Browser Source Hardware Acceleration" in OBS advanced settings
  • Run OBS as Administrator (for Windows users)
    • This can resolve permission-related issues affecting video capture
  • Try a different network connection
    • Switch between WiFi and cellular, or use a VPN to bypass potential network restrictions, or disable any VPN in use
  • Your stream ID changed, entered incorrectly, or other setting / parameter is incorrect
  • Try using a different browser to publish with; try Firefox, Edge, Chrome, or even the native app.

If suffering from choppy video,

{% content-ref url="packet-loss.md" %} packet-loss.md {% endcontent-ref %}

VDO.Ninja Troubleshooting Guide

Platform-Specific Issues

Windows

  • Ensure that the "Enable Browser Source Hardware Acceleration" checkbox is checked in the advanced settings.
  • If you get black video when it's checked:
    • Try unchecking the Hardware Acceleration checkbox (may be choppy and use more CPU)
    • Run OBS Studio as an Administrator
    • Update OBS Studio to the newest version (fully uninstall old version first)
    • If using OBS 64-bit, try the 32-bit version instead
    • Enable Compatibility Mode for OBS (right-click OBS icon → properties)
  • Ensure you have started in Administrator mode

Make sure that the custom frame rate is not set

macOS

  • Old versions of OBS, such as OBS v24 to v26.0 do not natively support VDO.Ninja, but version 26.1.2 and newer does.
    • Use the Electron Capture app if you are using a non-compatible version of OBS. > Get it here <

Mobile Devices

  • For Android smartphones, try using Firefox instead of Chrome if having issues
  • For Samsung A-series smartphones (especially Galaxy A12), try different browsers or the native Android app
  • Restart your smartphone if it suddenly stops working properly
    • Commonly when this happens the video output might be just black

Network and Connectivity Issues

General Network Troubleshooting

Firewall and Security Issues

  • If in Iran, China, Russia, or other sanctioned/restricted country, WebRTC may be blocked; try using a VPN or self-host VDO.Ninja instead.
  • If behind a corporate firewall, try switching to cellular network or talking to your IT department
  • If using PFSense or a PiHole:
    • Try bypassing it or using a different network
    • Whitelist the IP address of the remote camera source
    • Allow webRTC-related UDP traffic to prevent frame loss
  • Disable any anti-virus or other security software temporarily for testing
  • Make sure you have not disabled webRTC in your browser settings
  • If using Brave or other privacy focused browser, ensure the VPN isn't turned on
  • Try a different browser in general, or a different computer/network

Connection Types

  • If on cellular, try switching to a different network
  • If issues persist on one network type, try another (WiFi vs. cellular)
  • Try with or without a VPN, such as speedify.com, to see if it helps.
    • Speedify does offer a 1GB free usage tier I believe that's suitable for testing

Performance Optimization

Hardware Issues

Resource Usage

  • If your computer is running at high CPU/GPU load:
    • Lower browser source resolution to 1280x720 or even 640x360
    • Try using H264 codec (add &codec=h264 to the view links)
    • Specify custom frame rate of 30 in browser source options
    • Try adding &meshcast to your push link to use the SFU service

Video Codec Options

  • Try different video codecs by adding parameters:
    • &codec=h264 (often best for performance)
    • &codec=vp9 (may help with specific devices)

OBS-Specific Solutions

Hardware Acceleration

  • If hardware acceleration is unchecked, check it and restart

  • If it's checked but not working, try unchecking it

  • In OBS Settings → Advanced menu, try toggling "Browser source hardware acceleration"
    \

    (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png>)

Alternative Solutions

  • Download Electron Capture app instead of using OBS browser source: http://electroncapture.app
  • Consider using Cloud-hosted version of OBS (Paperspace or AWS with Parsec)

OBS WHIP Issues

  • WHIP protocol may have NAT traversal issues (not fully supported yet)
  • Can't publish WHIP via OBS outside your LAN? Download our patched OBS version. [source]
  • Try alternative connection methods if WHIP fails to connect

Additional Recommendations

  • Restart all devices involved (computer, phone, router) before extended troubleshooting
  • If a device was working before but suddenly isn't, try a simple restart first
  • For persistent issues, consider trying an entirely different device or browser
  • Consider network congestion during peak hours as a possible cause of intermittent issues
  • If you're experiencing issues with PFSense, check its logs for blocked connections
  • Make sure you haven't limited the frame rate in the OBS browser source to something like 30-fps
  • Always update to the latest browser versions as WebRTC support improves with each update
  • Try an older version of VDO.Ninja, such as https://vdo.ninja/v27.4/

Video freezes mid-stream

If the stream or camera freezes after a while, there could be many reasons. Let's explore some causes and solutions below.

Camera / USB issues

If cycling the camera to a different camera, or refreshing the camera via the settings menu, fixes the issue, then this normally implies the issue is with the camera or its USB connection.

As a stop-gap solution, the director has the remote control ability to toggle the camera of a guest to unfreeze it. This can be done without the guest's permission even if the &consent flag is added to the guest's URL ahead of time. In a pinch, this can at least give the director some comfort to go live, fixing any stuck camera within a few seconds themselves, versus asking the guest to refresh their page.

If not using a group room, the publisher of a stream can also refresh their own camera via the settings menu, and clicking the refresh icon next to the camera.

\

To fix the problem though, a bit of troubleshooting may be needed. More often than not, if using a USB 3.x camera, the cause is a USB-related issue.

  • Try a different USB 3.0 cable; ideally a short cable that conforms to the USB 3.1 specification or newer.
  • Do not plug any USB camera into a USB hub, dock, or use it alongside other high-bandwidth USB devices.
  • Try a different USB port; try them all if needed; a blue USB 3.0 port is normally required.
  • Reduce the frame rate and/or resolution of the camera. Lowering the bandwidth over the USB connection may help. 1280x720 @ 30fps is recommend trying, if possible.
  • Update the drivers on the computer, especially those for the USB controller and camera. Update the operating system as well, if needed, re-installing old drivers if possible.
  • If using an AMD motherboard, update the BIOS of your motherboard, and perhaps set your PCIe lane speed to Gen3, instead of Gen4.
  • If using a laptop in particular, ensure the USB port is not set to go to sleep; this would be a Windows setting. Also, enabling Performance Mode and being plugged into the wall, may help as well. See the below images:

(1) (1).png>).png>)

Internet /connection issues


If the issue is not fixed by toggling your camera, make sure your internet connection is stable and you're device is not overloaded. Bad connections, network firewalls, or VPNs can cause the video to lose connection and then reconnect, causing the picture to appear to freeze for several seconds or longer.

VDO.Ninja requires a solid Internet connection with no interfering services to work its best. On some networks, especially during prime-time evening hours of the day, connections can drop out for seconds at the time constantly.

Mobile devices may also have the video freeze for a few moments at a time if switching between cellular networks and WiFi networks, but in these cases things will auto-reconnect within a few seconds normally.

Services like https://speedify.com can offer a VPN with bonding, designed for streaming, and it can help avoid network issues on mobile networks, where IP addresses or wireless connections constantly are changing.

iPhone specific issues

Regarding mobile, iOS users can only send video to 3 viewers at a time if using the H264 hardware encoder. Newer versions of VDO.Ninja will try to keep track of how many H264 streams are being used, and revert to VP8-software-based encoding when the hardware encoders are maxed out, however VP8 encoding can cause iPhones to get very warm. If forcing H264 with an iPhone or iPad, and you max them out, you might cause videos to freeze or go black though.

View links and scenes can sometimes can use an iPhone H264's encoder, even if the video isn't visible in OBS. If having issues, try to avoid forcing the H264 encoder or using it sparingly for only the active sources. If using &broadcast mode, only the director and scenes could possibly contribute to using an H264 encoder; other guests won't have access to the guest's video stream, so they won't count towards this H264 encoder total.

H264 specific issues

Some Windows computers that can offer H264 hardware encoding with AMD or NVIDIA GPUs run into the same limitations that an iPhone device may have. That is, if more than 2 or 3 video streams are being published that use H264 encoding, the hardware encoder on those devices may fail.

If someone if using OBS to publish H264 video via RTMP using NVIDIA's NVenc, while also publishing H264 video to VDO.Ninja, conflicts may arise, and video streams may fail. This shouldn't happen really, but in theory, it's something to be aware of.

description: Permission denied when trying to access the camera or microphone

Enable Camera / Microphone permissions

Once camera / microphone permission have been denied, often accidentally, the browser won't let VDO.Ninja ask for it again. You'll need to manually change the permission to fix it, or use a different browser. How to change the permission depends on the browser and operation system.

I've provided links to some guides. If these guides are helpful for you, I'll offer a guide in VDO.Ninja to help future users when I detect permissions have been denied.

How to change a site's camera & microphone permissions

https://support.google.com/chrome/answer/2693767?hl=en&co=GENIE.Platform%3DAndroid&oco=0

Android - Chrome Browser

  1. On your Android device, open the Chrome app
  2. To the right of the address bar, tap More -> Settings
  3. Tap Site Settings
  4. Tap Microphone or Camera
  5. Tap to turn the microphone or camera on or off; If you see the site you want to use under Blocked, tap the site -> Access your microphone -> Allow

If you’ve turned off microphone access on your device, you can control your app permissions on Android to use your mic.

If you're using a Chrome device at work or school, your network administrator can set camera and microphone settings for you. In that case, you can't change them here. Learn about using a managed Chrome device.

Chrome Desktop

  1. Open Chrome
  2. At the top right, click More -> Settings
  3. Click Privacy and security -> Site settings -> Camera or Microphone
  4. Select the option you want as your default setting
    - Review your blocked and allowed sites
    - To remove an existing exception or permission: To the right of the site, click Delete
    - To allow a site that you already blocked: Under "Not allowed," select the site's name and change the camera or microphone permission to "Allow."

If you still have issues, try a different browser; perhaps Firefox.

(1) (3).png>)

Firefox Desktop

https://support.mozilla.org/en-US/kb/how-manage-your-camera-and-microphone-permissions

Firefox Mobile

In Firefox Mobile, you can try going to Settings -> Site permissions -> exceptions (at bottom) -> VDO.Ninja, and then manually set the permissions for the camera and microphone to enabled.

If Firefox Mobile still gives you issues afterwards, try in incognito mode, try a different browser, or fully restart the device.

Vivaldi / Brave / Opera

You can try following the same steps needed for Chrome above, however if that fails, ensure VDO.Ninja is not being loaded via an IFrame.

In the case of invite.cam for example, which loads VDO.Ninja via an IFrame, you may need to give microphone and camera permissions to both the invite.cam and VDO.Ninja domains.

You can visit invite.cam and vdo.ninja, and for each domain, ensure the microphone and camera permissions are set to allow.

iOS

On an iPhone, it's a bit more complicated:
https://gagonfamilymedicine.com/how-to-give-an-app-permission-to-access-your-microphone-on-an-iphone-or-ipad/

If the issue persists, fully close Safari and try again. Sometimes updating your version of iOS and restarting can help solve issues with camera permissions as well.

IFrame permissions not provided

If embedding VDO.Ninja into a site as an IFrame, you'll not be allowed access to camera or microphones unless that IFRAME-element has allowed said permissions.

See the documentation for more details

{% content-ref url="../guides/iframe-api-documentation.md" %} iframe-api-documentation.md {% endcontent-ref %}

Try safe mode

Adding &safemode or &videodevice=0&audiodevice=0 to the https://vdo.ninja/ link can either try the camera in safe mode or disable the camera/microphone completely.

In either mode, you might be able to bypass the initial camera selection page, or start the system with the default camera settings.

If you are able to start the session in this mode, you can go to the VDO.Ninja gear icon (settings), click on User settings, and then clear the local storage. You can then retry, refreshing the page, and try to connect again.

description: >- For those on macOS, if the camera works in Safari, but not Chrome, try the following options

Camera works in Safari; not Chrome

Check if its VDO.Ninja specific or browser-wide

Often the camera will not just fail to load in VDO.Ninja, but fail to load with any web app in Chrome or browser.

You can confirm its not VDO.Ninja specific by going to the following page and seeing if the camera works with this simple camera app: https://webrtc.github.io/samples/src/content/devices/input-output/

If it fails only within VDO.Ninja, make sure you've enabled the Camera and Microphone permissions for VDO.Ninja.

Make sure VDO.Ninja has access to the camera and microphone

Close other apps or restart the computer

Sometimes another app is using the camera, and closing all other apps or restarting the operating system can fix it up. You cannot use your camera in OBS and in Chrome at the same time, for example.

Force close the camera app

You can try running the following from your Terminal in MacOS:

sudo killall appleh13camerad
sudo killall VDCAssistant 
sudo killall AppleCameraAssistant

You can also close the camera app in MacOS via 

Apple Logo > Force Quit > Select All Apps > (find 'Camera process') -> Force Quit.

Turn off hardware acceleration

In Chrome, you can turn off "Use hardware acceleration when available" in the chrome://settings/system page. You'll want to restart the browser after

Make sure Chrome has access to your microphone and camera

Go to your Security & Privacy page in your MacOS settings, select the privacy tab, and make sure Google Chrome has access to your camera and microphone.

Reinstall Chrome

Do a full and complete uninstall of Chrome and then re-install. Perhaps try using the Chrome Beta version. Also make sure not to have any browser extensions install, as they can conflict.

Try a different camera

Maybe your camera is not working or compatible, for whatever reason. Try a different camera and see if it works.

Update or reinstall your macOS

As a last resort, reinstalling the system fresh might be an option.

description: Accessing the wide-angle or zoom lens on your camera

Can't select a camera lens on mobile

Some camera lenses are not easily accessible in native mobile applications, and many are not available at all in the browser.

The native app versions of VDO.Ninja may sometimes offer additional lens options not found in the browser, but adding all options is still a work-in-progress.

On Android, you can try Firefox Mobile as well as Chrome or other browsers to see if your camera lens appears there. Some manufacturers offer better support for their cameras than others, making lens selection more accessible to browsers and app developers.

Sometimes you can zoom in and the cameras will switch automatically, but this is rare.

Digital zoom

There is the option to digitally zoom with VDO.Ninja, &effects=7, will allow you to adjust the digital zoom via the browser. This isn't an ideal solution, but it may work in some cases where optical zoom isn't available.

Smartphones that support more than one rear camera

Below is a non-exhaustive short list of smartphones that appear to support more than one rear camera in the browser:

  • Samsung Galaxy S23 v13.0 supports 2 front, 2 rear

  • Samsung Galaxy S24 v14.0 supports 2 front, 2 rear

  • Samsung Galaxy S24 Ultra v14.0 supports 2 front, 2 rear

  • Samsung Galaxy S22 Ultra v12.0 supports 2 front, 2 rear

  • Samsung Galaxy A52 v11.0 supports 2 front, 2 rear

  • Huawei P30 v9.0 (/w MS Edge) supports 1 front, 4 rear

  • iPhone 15 Pro v17.0 and iPhone 15 Pro Max supports:

    • back triple camera
    • back dual wide camera
    • back ultra wide camera
    • back dual camera
    • back camera
    • back telephoto camera
    • front camera

  • iPhone 15 v17.4 supports:

    • back dual wide camera
    • back ultra wide camera
    • back camera
    • front camera

  • iPhone 14 v16 supports:

    • back camera
    • back ultra wide camera
    • desk view camera
    • back dual wide camera
    • front camera

  • iPhone 14 Pro v16 supports

    • back camera
    • back telephoto camera
    • back ultra wide camera
    • desk view camera
    • front camera\

  • iPhone 13 v16 supports

    • back camera
    • back ultra wide camera
    • desk view camera
    • front camera

This list was based on results obtained using BrowserStack.com, so cloud-hosted devices. There may be errors with the results obtained, however you can check yourself on BrowserStack usually for free if a camera is supported or if the results have changed.

The iPhone 15 Pro offers extensive camera options

WHIP mode

VDO.Ninja supports the WHIP streaming protocol, so if there is a native camera app that has proper WHIP-output support, and has the camera features you are looking for, using that can be used with VDO.Ninja.

Currently WHIP support in VDO.Ninja is a bit experimental, but the publishing URL for a WHIP-enabled device to stream to is:

https://whip.vdo.ninja/STREAMIDHERE

To view a WHIP stream then on VDO.Ninja, have open the following link in your browser:

https://vdo.ninja/alpha/?whip=STREAMIDHERE

Lens adapter

There are camera lens adapters available for smartphones for fairly cheap; anywhere from $3 on aliexpress to $20 on Amazon. While not the best solution, it may be a solution available in a pinch that works across all mobile applications and services.

USB external cameras

With the newest development builds of the Android native app of VDO.Ninja, many external (USB/UVC) cameras are supported.

With iPhones/iPads, USB-based models (iPhone 15 Pro) seem to support some USB video devices as well, via the USB 3.0 port.

Developments around USB/External camera support is ever evolving.

description: My camera isn't appearing in Chrome on macOS anymore. why?

Camera on macOS doesn't show?

If your camera isn't appearing in Chrome on macOS, there are several possible reasons and solutions you can try:

1. Check Camera Permissions

Ensure that Chrome has permission to access the camera:

  • Open System Preferences > Security & Privacy > Privacy.
  • Select Camera from the left-hand menu.
  • Ensure that Google Chrome is checked.

2. Update Chrome

Make sure you're using the latest version of Chrome:

  • Open Chrome and go to Settings > About Chrome.
  • Chrome will automatically check for updates and install them if available.

3. Check Site Permissions

Verify that the website has permission to use your camera:

  • Open the website where you are trying to use the camera.
  • Click the lock icon in the address bar.
  • Ensure that Camera, and also the microphone if needed, is set to Allow.

4. Restart Chrome

Sometimes, a simple restart of Chrome can resolve the issue:

  • Close Chrome completely.
  • Open Chrome again and check if the camera works.
  • Or just restart the computer to ensure Chrome has completely been restarted

5. Check for Conflicting Applications

Ensure no other application is using the camera:

  • Close any other applications that might be using the camera (e.g., Zoom, Skype, Discord).
  • A camera can only be used by one application at a time, so closing other applications may help

6. Reset Chrome Settings

Resetting Chrome settings can help resolve the issue if it's due to a misconfiguration:

  • Open Settings > Advanced > Reset settings.
  • Click Restore settings to their original defaults and confirm.

7. Test Camera in Another App

Verify that your camera works with other applications:

  • Open an application like Photo Booth or FaceTime and check if the camera works.

8. Reinstall Chrome

If the above steps don't work, try reinstalling Chrome:

  • Uninstall Chrome from your Mac.
  • Download the latest version from Google Chrome's website and reinstall it.

9. Check macOS Updates

Ensure your macOS is up to date:

  • Open System Preferences > Software Update.
  • Install any available updates.

10. Hardware Issues

If the camera still doesn't appear, there might be a hardware issue:

  • Try connecting an external webcam if you have one.
  • If the external camera works, it may indicate an issue with the built-in camera.
  • Try plugging the camera into another USB port or such
  • Make sure any HDMI adapter has an input that's compatible with the browser, so 8-bit, 30 or 60-fps, and not requiring special drivers to use

11. Browser Extensions

Disable any browser extensions that might be interfering with the camera:

  • Go to chrome://extensions/ and disable extensions one by one to identify if any of them are causing the issue.

12. Try another browser instead

Firefox or Safari or another Chromium-based browser might work, if Chrome does not.

13. Use a virtual camera as an adapter

If your camera works with OBS, perhaps use that to load the camera and then use the OBS Virtual Camera as the camera source.

  • Some cameras are only compatible with OBS, and may not work with the browser

14. Some virtual camera drivers on macOS are limited to 1080p30

Many virtual camera drivers on macOS are limited to 1080p30, and in fact, may only work at that specific resolution. If using a virtual camera or a pass-thru camera source, make sure it's outputting 8-bit 1080p 30fps video, to ensure maximum compatibility.

  • Vertical or portrait modes are often not supported by virtual camera drivers on macOS
  • Chrome and most browsers do not support higher than 60-fps, nor h264-based video devices

15. Try on a Windows PC or an iOS 17 device that has USB 3.0

While a last resort, changing host hardware may work. Windows is popular with live streaming applications due to greater software and hardware compatibly, and if compelled to keep in the Apple ecosystem, you may find your device works with newer iPhones / iPads, which have a USB 3.0 port.

description: Using Smartphone as Virtual Camera with VDO.Ninja across multiple applications

Use a Virtual Camera more than Once

Problem

When using your smartphone as a camera via VDO.Ninja, you may want to use the camera feed in multiple applications simultaneously. By default, most video inputs can only be accessed by one application at a time.

Solutions

1. OBS Studio Virtual Camera with Multiple VDO.Ninja Streams

OBS Studio has a built-in virtual camera feature with an important limitation:

  • The standard OBS Studio installation only provides ONE virtual camera output
  • However, smartphones on a LAN can often handle sending 2-3 VDO.Ninja streams simultaneously:
    • You can create multiple VDO.Ninja push links from your phone (e.g., one link for OBS, another for StreamLabs)
    • Each application receives its own direct stream from your phone
    • This works well on strong networks and with newer smartphones, though it increases battery usage

This approach allows you to bring separate phone camera streams into different applications (like OBS Studio and StreamLabs) without relying on a single virtual camera.

Note: While OBS Studio itself only offers one virtual camera by default, other applications like StreamLabs OBS offer their own virtual cameras. This means you could potentially use both the OBS virtual camera and StreamLabs virtual camera simultaneously for two different outputs.

2. Using Electron Capture App

The Electron Capture app provides a flexible window-capture solution:

  • Install Electron Capture from https://electroncapture.app
  • Load VDO.Ninja into Electron Capture
  • Multiple applications can capture the Electron Capture window simultaneously

This approach allows you to have multiple applications access your phone's camera feed via window capture, rather than as a virtual camera.

3. Single Browser Method

If all your applications support browser access, this method is simple:

  • Open your applications that need camera access in the same browser (Chrome, Firefox, etc.)
  • Connect your smartphone to VDO.Ninja in one browser tab
  • Open Discord, Google Meet, Microsoft Teams, etc. in other tabs of the same browser
  • Each application can access the smartphone camera stream simultaneously

This works because browsers manage camera permissions across all tabs and windows of the same browser instance.

4. NDI Method (Advanced)

For professional setups requiring multiple distinct outputs:

  • Connect your smartphone to VDO.Ninja
  • Capture in OBS with the NDI plugin installed
  • Output NDI streams from OBS
  • Use NDI Virtual Input to create virtual cameras from these streams
  • Different applications can use these separate virtual camera feeds

Future Developments

Multiple virtual cameras may be added to the Electron Capture app in the future, but this feature is not planned for the near term.

description: >- Last updated November 17th 2021; keep in mind, this article may become dated quickly.

iOS (iPhone/iPad)

VDO.Ninja has been tested with iOS v12 thru v17, but iOS v10 and under is strictly not supported. Older iPad and iPhone devices as a result are not compatible and likely never will be; an iPhone 5 for example will never be supported.

Please upgrade your iOS to at least v16 to avoid some critical bugs, although even newer is generally better.

1080p mode

H264 is the default video encoder on iOS, yet H264 only supports up to 720p30 on iOS 14 or older. On iOS 15 devices, H264 (the default codec used), supports 1080p30. A frame rate of 60-fps is still not supported though. Newer iOS devices may even support 1080p60 with certain cameras.

Both new and old iOS devices support 1080p30 when using the VP8 codec, which uses software-encoding rather than hardware. You may need to manually specific &width and &height to access 1080p mode on iOS 14 and older, but you can use also &quality=0 on iOS 15 and newer.

VP9 is supported on iOS 14, but you have to enable it as an experimental flag in the iOS Safari advanced settings. It supports 1080p, software-based encoding, and acts a lot like VP8. It generally is finicky, with low-frame rates being common, so use at your own risk.

The AV1 video codec is now also supported with modern iOS versions and works quite well with newer iOS devices. You may need to enable this however in the experimental advanced settings though in your Safari settings.

External microphones and audio device support on iOS

Some external microphones are supported by Safari on iOS, however iOS devices are very finicky as to which microphones are supported. Just because your device is listed, doesn't mean it will work or stay selected.

This is a long-known issue with iPhones, as per their bug tracker: it's not an issue with VDO.Ninja. https://bugs.webkit.org/show_bug.cgi?id=211192

I've made a video going over possible solutions here: https://www.youtube.com/watch?v=BBus_S8iJUE, although many of the points covered in the video can be found below also.

Users with an iPhone 15 Pro or iPad, which have with USB 3.x support, have reported success usually with external USB-based microphones, where as devices with Lightning or USB 2.0 ports have had poor success. Given these user reports, I'd recommend getting an iPhone 15 Pro (rather than an iPhone 15 or iPhone 14), or perhaps a newer iPad, if wanting to stay in the Apple ecosystem.

That all said, I did find that some certified Lightning-based TRRS microphone adapters, which register as headsets, sometime seem to work better than other devices. Using a XLR to 3.5mm adapter, I've been able to connect professional microphones to an older iPhone 11 for example.

One Lightning-based TRRS adapter that I have tested for myself that seems to usually work is this one: https://www.amazon.ca/gp/product/B07Q49SVYR

Many of those cheap Amazon wireless Lightning-based lavalier microphones do not seem to work though, and while they may work with specific applications, they are not well supported by Safari. In testing I can't get them to work, however it's perhaps possible they will in future iOS updates.

AirPods do seem to also often work, if needing something wireless though. AirPods can however create clicking or distortion if used as a microphone; please ensure that they are fully-charged if you intend to use them in a live production. If they are on low-power, they will create audible problems.

If willing to use Android, some users have noted that Firefox for Android often works with USB microphones. Firefox mobile on Android supports USB microphones reliably, if that is a potential solution. Since Apple does not allow for third-party browser engines, Chrome and Firefox for iOS are essentially just a re-skinned version of Safari, so they will not work any better unfortunately.

Low quality audio from iOS

Audio quality from an iOS generally is pretty low quality. Disabling audio enhancements can sometimes help improve the clarity. It is recommended that the user be wearing headphones though to avoid any feedback issues.

iOS does not work with the volume visualizer meter; it causes clicking noises when used, so it has been disabled.

Random issues

  • If full-screening a video on iOS devices, sometimes that can cause the outbound video to freeze.
  • Video out from an iOS device may initially be choppy; this usually smooths out over the course of seconds to a minute. If not, try to lower the resolution.
  • If your camera does not load or fails to load, fully close Safari / Chrome, and then try again. There seems to be an issue where old tabs or idle apps can block VDO.Ninja from accessing the camera.
  • Video shared by an iPhone/iPad to other guests in a group room may be choppy or of low-quality. This is intentional, as otherwise the iPhone would overheat or become too slow to use. Adding &forceios to the URL of a specific guest can force a different, smoother, behavior for them, but use it sparingly.

Limited features; no focus/exposure control

iOS does not yet support for many features that VDO.Ninja would like to make use of. It lacks zoom, focus, screen-sharing, exposure, and many other advanced options. These are features Apple needs to enable and allow the browser to access, which currently it does not.

Native app option

{% embed url="https://apps.apple.com/us/app/vdo-ninja/id1607609685" %}

There is a basic native iOS app provided by VDO.Ninja at this time, but it is extremely basic. It lacks useful screen-capture support, group-room support, and password support. It does work with the Torch light function though, you can zoom with it also, and it's useful to have when Safari refuses to work.

Supporting a native app for iOS takes a lot of resources and time, so it's being developed in tandem with the Android native app using a mobile development framework.

description: Mobile app version of VDO.Ninja and other Android related topics

Android

VDO.Ninja generally works quite well with Android; even older Android devices tend to work reasonable well. The browser-based version of VDO.Ninja is recommend for most users, although there is an native mobile app version for Android that solves some limitations of the web-version.

Native Android app

The native mobile app for Android is fairly simple, as it can be only used for one-way publishing. It does support screen-sharing though, so it has its value. It will also work while in the background, and sometimes works on certain devices when the browser-version won't.

Please note, the native app requires a modern version of Android, while the web-based version of VDO.Ninja has been tested with Android 5.1 using Chrome.

The Google Play Store hosted version is here:
https://play.google.com/store/apps/details?id=flutter.vdo.ninja
(It will auto-update when I push new releases.)

As well, the Android APK file for direct-downloading is hosted here:
https://drive.google.com/file/d/1M0kv5nWLtcfl2JOnsAGiG1zUmkeIVLyZ/view?usp=sharing
(Manually installing will requires manual updating, as well. APK last updated May 12, 2022)

Source-code for building the Android app is here:
https://github.com/steveseguin/vdon_flutter/

External camera support

UVC-based video devices are not supported currently with most Android devices via browser, but a few perhaps, like the Yolobox, may support it.

There is an experimental version of the VDO.Ninja Android app that has USB-video input support, which you can download and sideload from here: https://drive.google.com/file/d/1L8meslXPEzivocH3wz48abNtJ926hQUr/view?usp=drive_link

It may not work with Android 14 however, and USB audio isn't supported I believe.

If that doesn't work, screen-sharing is an option to make it work, where you can load up an app that does support UVC/USB cameras, and simply screen share that output to VDO.Ninja using the native Android app.

Newer iOS/iPad devices with USB-3 support may have USB media support, and the Raspberry Ninja project also supports HDMI/USB input, if you have a mobile Linux system, like an Orange Pi 5 Plus. The Orange Pi 5+ has a built-in HDMI input port.

USB audio device support

USB-based audio devices have limited support with VDO.Ninja on Android. Some Android devices will support USB audio using Chrome, although many will not.

Firefox mobile seems to support USB audio devices fairly often, so give Firefox a go if looking for support there. So definitely try Firefox out if using Android and looking to use USB microphones.

If nothing works, using a 3.5mm to USB adapter will sometimes work, if your audio device has 3.5mm mic out as an option. You may also need a TRRS (not TRS) adapter. Below are a couple that I use successfully on my Google Pixel smartphone:
https://www.amazon.ca/gp/product/B08NVRV6G9
https://www.amazon.ca/Headphone-Splitter-KOOPAO-Compatible-Microphone/dp/B08RML676M

Often a USB audio device that is treated as a headset/communication device, rather than just a microphone or game device, will work.

Samsung phones

For most users, using Chrome on Android is the recommended way of connecting. There are some exceptions, such as for Samsung users. Using the Samsung Galaxy browser is recommended instead of Chrome for Samsung devices if issues with Chrome exist. On the Galaxy S21 for example, it seems that you can get 60-fps when using the Galaxy browser, but only 30-fps when using Chrome. Chrome might have advantages over the Samsung browser though, such as maybe zoom-functionality, so perhaps try both and see which works better for you.

Battery life

If battery life or heat is an issue on Samsung or other Android devices, limiting the frame rate to 30-fps and possibly the resolution to 720p can allow the H264 hardware encoder to work (&codec=h264). The default target frame rate of 60-fps may prevent H264 from working on some phones, causing heat issues due to software-encoding being used.

Firefox

Firefox on Android seems to fix a couple Chrome-specific issues. Chrome will mute the microphone after a minute if the screen is turned off, but Firefox doesn't seem to do that. With Samsung devices, Chrome combined with H264 hardware encoding may have color issues with the OBS Browser source, but that issue isn't present when using Firefox as the mobile browser. So, for Samsung devices, you might find Firefox, with &fps=30 and &codec=h264 as parameters (push and view side respectively), may help keep things cool.

Internal Cameras

Not all cameras may appear as options when using a mobile device; this comes down to the manufacturer of the phone really. If you cannot select your fish-eye camera, try instead buying a fisheye lens adapter from Amazon for a couple dollars; it will offer better performance probably anyways. The Android APK version of VDO.Ninja will reveal a few extra cameras (wide angle, for example), versus the browser, but it may still not support all.

Screen sharing

Screen sharing on mobile devices is not support via the Browser, although Android devices can screen sharing using the native Android app (linked previously). The screen sharing function may not include audio, or at least it might be unstable, and this will hopefully be addressed over time with additional development of the mobile app.

For iPhone screen sharing, you can refer to this guide. It conceptually might also work for Android users, if the native app provided by VDO.Ninja does not work.

Performance issues

Android devices are not powerhouses; disabling video sharing for mobile users in group rooms if there are problems. More than around 7 guests in a room will probably require the Android users add &roombitrate=0 to their URL invite links, to disable their video sharing to other group members.

Camera selection page freezes

If using Android 11 and the camera selection page in VDO.Ninja freezes, push the browser to the background and then open it to the foreground again. This will unfreeze the window. This is a bug in Android 11; not VDO.Ninja.

Corrupted video; green or grey pixels

Pixel devices have problems in Portrait mode, where the video may glitch to be all green or such at times. Using &codec=vp9 on the viewer side or &scale=20 can offer some solutions, maybe though. Try starting the device in landscape mode, then move to portrait, also to see if that helps.

External audio

USB audio devices should work with Android devices, but it will depend on numerous factors. In most cases, the 3.5mm headset port on some Android phones will be the most reliable way to attach an external headset or microphone.

3.5mm TRRS inputs often work, and some USB devices that work as headset devices work with Chrome.

Firefox tends to work with more USB audio devices than Chrome, but you might find MS Edge mobile works also.

Bluetooth devices are hit and miss at the moment

On-screen overlays blocking access

On-screen overlay apps may cause some Android devices to get errors when trying to select their camera via the browser. Disable any apps on your device that may be causing an overlay on the screen or has the power to do so. Try the native Android app if this fails still.

Supported Android versions

VDO.Ninja has been tested to work on a Nexus 9 running Android 5.1 and Chrome. Performance wasn't great, but usable as a remote webcam.

macOS

{% hint style="info" %} As of January 2021, OBS for macOS now supports VDO.Ninja natively. Update to OBS v26.1.2 for macOS to obtain access. {% endhint %}

Please note that only H264 hardware decoding is supported, so you may wish to specify &codec=h264 in your OBS view links to reduce CPU load.

For those using older versions of OBS or StreamLabs, I recommend instead using the Electron Capture app to assist: https://github.com/steveseguin/electroncapture. Follow the link for instructions and files.

Capturing audio

{% hint style="info" %} Please note: This section is obsolete now, unless you are still using the Electron Capture app on macOS. For other users, update to OBS v26.1.2 to obtain audio capture support directly in OBS itself. (Be sure to select "Control audio via OBS" when setting up your browser source in OBS to allow for this) {% endhint %}

To capture audio on macOS using the Electron Capture app, you'll need a virtual audio cable; something to loopback the audio-output back into the system as an input source. Some software options include:

Software Price URL
Blackhole Free https://existential.audio/blackhole/
VB Cable Donationware https://vb-audio.com/Cable/
Loopback Paid https://rogueamoeba.com/loopback/
Audio Hijack Paid https://rogueamoeba.com/audiohijack
iShowU Paid https://obsproject.com/forum/resources/os-x-capture-audio-with-ishowu-audio-capture.505/
Soundflower Free https://rogueamoeba.com/freebies/soundflower/
GroundControl Free https://www.gingeraudio.com/

With the above software, you can also share and stream your macOS desktop audio: Guide Here

If your mac is unable to handle OBS and VDO.Ninja, another solution use the cloud to host OBS remotely.

Here is an example of a pay-by-the-hour cloud server you can rent for a few dollars: https://console.cloud.google.com/marketplace/details/nvidia/nvidia-gaming-windows-server-2019 It works great, but takes some time to setup for novices. You can also use Paperspace or AWS Workstations as a remote Windows options; Paperspace is easier to get going with. When picking a VM to use, you'll want a machine with a dozen or more vCPU cores, and/or a system with an Nvidia GPU. A GPU works quite well to accelerate RTMP video encoding and VDO.Ninja video decoding.

Safari on macOS

While Safari may work with VDO.Ninja, it is generally advised to not use Safari with macOS. The microphone may become muted if the tab is minimized, echo-cancellation doesn't quite work as well as with Chromium-based browsers, video/audio issues are more common, and many of the advanced features offered by VDO.Ninja are not supported on non-Chromium-based Browsers. Consider using the Electron Capture app if adverse to installing or using Chrome, as it is based no Chromium but community created specifically for VDO.Ninja.

Opera GX

As of this writing, with Opera GX v75, playback of h264 video seems to fail. This implies that iOS devices will not playback optimally, if at all, on Opera GX. Using &codec=vp8 can sometimes solve this issue.

Firefox

Firefox is not fully supported, although we try to maintain basic support for remote guest usage. It is recommend that you use:

  • Chrome on PC
  • Chrome on Android (maybe Opera if issues arise with Chrome)
  • Chrome on macOS
  • Safari on iOS

Firefox can sometimes work when Chrome does not. With some video camera devices, Chrome may fail to load a camera device, while Firefox will work.

OBS uses Chromium (CEF v75 currently), so there should be fewest issues if you stick to using Chrome or another Chromium-based browser. Chromium v75 is quite dated, so OBS will not have support for things like video buffers (ie: &buffer=300), while if using Chrome for playback, you will. Firefox is much the same; it has support for some features, but many features that are offered in Chrome are not yet available in Firefox.

Firefox does not support desktop audio sharing when using screensharing. Chrome does support desktop and tab audio sharing.

Firefox may lack support for some features like remote zoom and detailed debug stats.

Firefox supports up to around 2.5-mbps for 720p video and up to around 6-mbps for 1080p. It offers little control over video bitrates.

Firefox does not treat Stereo audio in the same way that Chrome does. Results using &stereo and Firefox may vary.

description: Disables the video button; guests can't mute video

&novideobutton

Sender-Side Option! (&push)

Aliases

  • &nvb

Details

Disables the video button. Guests can't mute their video input.

(1).png>)

Related

{% content-ref url="nomicbutton.md" %} nomicbutton.md {% endcontent-ref %}

{% content-ref url="../source-settings/and-nospeakerbutton.md" %} and-nospeakerbutton.md {% endcontent-ref %}

description: Lets the director perform alongside guests, showing up in scene-view links

&showdirector

Director Option / Viewer-Side Option! (&director, &scene)

Aliases

  • &sd

Options

Example: &showdirector=3

ValueDescription
1 | (no value given)should allow everything from the director into the scene, except webpage shares and widget shares
2allows the director's video from the director in scenes, but not audio
3should allow the director's screen share to appear scene links, but not their main camera stream
4allows everything, including iframe/webpage shares

Details

This URL value can be added to the director's URL (&director=roomname&showdirector) or to the scene link (&scene&showdirector) when you wish the director to appear in those links. You can also enable this flag a couple other ways.

  • As a director, you will now appear as a performer kind of like other performers.
  • The ability to add/remove the director's camera/audio from scenes becomes available, including a new highlight guest option, the ability to record, re-order, and more.
  • By default, a director normally won't appear in any scene link or group link, and has limited functions available.

(1) (1) (1).png>) (1) (1) (1) (1).png>)

  • When a director enables their camera, while in &showdirector mode, they gain access to following set of options for the director's camera feed specifically:

(1) (1) (1).png>)

Related

{% content-ref url="director.md" %} director.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/view-parameters/scene.md" %} scene.md {% endcontent-ref %}

description: Enters a room as the director, instead of a guest and have full control

&director

Director Option!

Aliases

  • &dir

Options

Example: &director=RoomName

ValueDescription
(no value given)opens the director page
(room name)room name to enter as the director

Details

Directors have powers over some aspects of those in a group room and its scenes.

{% hint style="warning" %} First director to join a room claims the room. There can be ONLY ONE! (1) {% endhint %}

In the newer versions there is an option to have multiple directors aka &codirector.

Related

{% content-ref url="../director-settings/codirector.md" %} codirector.md {% endcontent-ref %}

{% content-ref url="../director-settings/cleandirector.md" %} cleandirector.md {% endcontent-ref %}

{% content-ref url="and-showdirector.md" %} and-showdirector.md {% endcontent-ref %}

description: Disables the mic button; guests can't mute audio

&nomicbutton

Sender-Side Option! (&push)

Aliases

  • &nmb

Details

Disables the mic button. Guests can't mute their audio input.

.png>)

Related

{% content-ref url="and-novideobutton.md" %} and-novideobutton.md {% endcontent-ref %}

{% content-ref url="../source-settings/and-nospeakerbutton.md" %} and-nospeakerbutton.md {% endcontent-ref %}

IFRAME API

add

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description
target (required) '*' | (streamID) yes

Example


iframe.contentWindow.postMessage({ 
    "target": "*",
    "add": true
});

advancedMode

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Example


iframe.contentWindow.postMessage({ 
    "advancedMode": true
});

description: Set a video bitrate for a video; scene or view link; kbps. Lockable.

audiobitrate

Type

number

Co-actions

Action Type Required
"lock" boolean No Locks bitrate (prevents the automixer from overriding)

Example

iframe.contentWindow.postMessage({ "audiobitrate": 3000, "lock": true });

description: Stop the auto mixer if you want to control the layout and bitrate yourself

automixer

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 
    "automixer": true
});

description: Set a video bitrate for a video; scene or view link; kbps. Lockable.

bitrate

Type

number

Co-actions

Action Type Required
"lock" boolean No Locks bitrate (prevents the automixer from overriding)

Example

iframe.contentWindow.postMessage({ "bitrate": 3000, "lock": true });

description: Mutes/unmutes camera

camera

Sender Option! (&push)

Value Description
true Turns mic on
false Turns mic off
"toggle" Toggles on/off

CODE EXAMPLE

iframe.contentWindow.postMessage({ "camera": true });

changeAudioDevice

Type

number

Example

iframe.contentWindow.postMessage({ "changeAudioDevice": 1 });

changeAudioOutputDevice

Type

number

Example

iframe.contentWindow.postMessage({ "changeAudioODevice": 1 });

changeVideoDevice

Type

number

Example

iframe.contentWindow.postMessage({ "changeVideoDevice": 1 });

description: Disconnect and hangup all inbound streams.

close

General Option! (&push, &view, &scene)

Aliases

hangup

Options

Value Description
true
false

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 
    "close": true,
});

Director Options

General Options

description: Mutes / unmutes the speaker

mute

General Option! (&push, &room, &view, &scene, &director)

Related URL Param

{% content-ref url="../../../source-settings/and-mutespeaker.md" %} and-mutespeaker.md {% endcontent-ref %}

Options

Value Description
true Mute speaker
false Un-mute speaker
"toggle" Toggle speaker mute

Example

iframe.contentWindow.postMessage({
    "mute": true
});

description: Insert a custom style sheet

getDetailedState

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 
    "style": "{ border: dashed 4px tomato }"
});

getDeviceList

Type

true

Example

iframe.contentWindow.postMessage({ "getDeviceList": true });

getEffectsData

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 
    "getEffectsData": true,
});

getLoudness

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 
    "getLoudness": true,
});

getRemoteStats

General Option! (&push, &view, &scene)

Options

Value Description
(any)

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 

});

description: >- Webrtc send message to every connected peer; like send and request; a hammer vs a knife.

getStats

Sender Option! (&push)

Options

Value Description
(any) Reloads iframe

Example


iframe.contentWindow.postMessage({ 
    "getStats": null,
});

description: >- Get a list of stream Ids, with a label if it is present. label = false if not there

getStreamIDs

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 
    "getStreamIDs": true,
});

description: >- Get a list of stream Ids, with a label if it is present. label = false if not there

getStreamInfo

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 
    "getStreamInfo": true,
});

keyframe

Value Description
true Send keyframe

CODE EXAMPLE

iframe.contentWindow.postMessage({ "keyframe": true });

panning

Value Description
(0-180) set stereo panning (0-180)

CODE EXAMPLE

iframe.contentWindow.postMessage({ "panning": 100 });

previewMode

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description
layout no

Example


iframe.contentWindow.postMessage({ 
    "previewMode": true
});

description: >- Webrtc send message to every connected peer; like send and request; a hammer vs a knife.

reload

Sender Option! (&push)

Options

Value Description
(any) Reloads iframe

Example


iframe.contentWindow.postMessage({ 
    "reload": null,
});

remove

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description
target (required) '*' | (streamID) yes

Example


iframe.contentWindow.postMessage({ 
    "target": "*",
    "remove": true
});

requestStatsContinuous

General Option! (&push, &view, &scene)

Options

Value Description
(any)

Modifiers

Action Value Required Description

Example


iframe.contentWindow.postMessage({ 
    "requestStatsContinuous": true
});

requestStream

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Example


iframe.contentWindow.postMessage({ 
    "requestStream": true
});

scale

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description
UUID no

Example


iframe.contentWindow.postMessage({ 
    "scene": true
});

scene

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description
layout yes

Example


iframe.contentWindow.postMessage({ 
    "scene": true
});

description: Tells the connected peers if they are live or not via a tally light change.

sceneState

Type

boolean

Example

iframe.contentWindow.postMessage({ "sceneState": true });

sendChat

General Option! (&push, &view, &scene)

Value Description
(string) Chat message

CODE EXAMPLE

iframe.contentWindow.postMessage({ "sendChat": "Hello" });

description: >- Send generic data via p2p. Send whatever you want I guess; there is a max chunk size of course.

sendData

General Option! (&push, &view, &scene)

Value Description
(any) Small amount of data to send P2P

CODE EXAMPLE

iframe.contentWindow.postMessage({ "sendData": { foo: "bar" });

description: Mutes / unmutes mic

mic

Sender Option! (&push)

Related URL Param

{% content-ref url="../../../source-settings/and-mute.md" %} and-mute.md {% endcontent-ref %}

Options

Value Description
true Turns mic on
false Turns mic off
"toggle" Toggles on/off

Example

iframe.contentWindow.postMessage({
    "mic": true
});

description: Webrtc send to viewers

sendMessage

Type

string

Example

iframe.contentWindow.postMessage({ "sendMessage": "HELLO" });

description: >- Webrtc send message to every connected peer; like send and request; a hammer vs a knife.

sendPeers

Sender Option! (&push)

Options

Value Description
(string)

Example

description: Webrtc send to publishers

sendRawMIDI

Sender Option! (&push)

Options

Value Description
(midi)

Modifiers

Action Value Required Description
UUID (string) no
streamID (string) no

Example

iframe.contentWindow.postMessage({ 
    "sendRawMIDI": "11110001",
    "streamID": "someid"
});

settings

General Option! (&push, &view, &scene)

Options

Value Description
true
false

Modifiers

Action Value Required Description
target (required) '*' | (streamID) yes

Example


iframe.contentWindow.postMessage({ 
    "target": "*",
    "add": true
});

description: Insert a custom style sheet

style

General Option! (&push, &view, &scene)

Options

Example


iframe.contentWindow.postMessage({ 
    "style": "{ border: dashed 4px tomato }"
});

description: >- This sets the fundamental audio bitrate target, but does not necessarily "lock"

targetAudioBitrate

Type

Number (0+)

CODE EXAMPLE

iframe.contentWindow.postMessage({ "targetAudioBitrate": 1000 });

description: this sets the fundamental bitrate target, but does not necessarily "lock"

targetBitrate

Value type Description
(positive integer) Set target bitrate to 30

CODE EXAMPLE

iframe.contentWindow.postMessage({ "panning": 100 });

description: Sets the speaker (output) volume of a video element

volume

Related URL Param

{% content-ref url="../../../advanced-settings/upcoming-parameters/and-volume.md" %} and-volume.md {% endcontent-ref %}

Options

Value Description
(0-100) audio playback volume as percent
(0-1.0) audio playback volume as decimal

Modifiers

value Required Description
"target" (streamID) no Targets a guest by streamID
"target" "*" no Targets every guest (default)

Example

iframe.contentWindow.postMessage({
    "volume": 0.5,
    "target": "*"
});

description: Typically only supported with H264 video and often hit and miss

Hardware-accelerated video encoding

Hardware-accelerated video encoding is a tricky topic; it can sometimes work, but when it does, it doesn't always work as hoped.

It generally only works with H264 video, but it may work with other codecs in rare cases.

On a Windows PC, a Chromium-based browser offers your best chance of it working. Every month it seems the support for hardware encoding improves, which is great. The viewer just needs to request H264 video from your computer for it to have a chance of working. &codec=h264

If it works, in the video stats window (CTRL + Click), you'll see the video codec type to be listed as External Encoder, if the hardware acceleration is working. CPU load may not decrease always, and there isn't an easy way to tell which encoder is being used, but if it says the codec is h264, then it's likely still using just software.\

(1) (1).png>)

Despite software using a lot of CPU, it offers better compatibility, fewer glitches, and technically can still handle dozens of video streams at a time if your CPU is fast enough. Hardware however can be finicky, where glitching is common and a hardware encoder typically can only support three video encoding sessions at a time.

What's really strange about hardware encoding on a PC is that it may actually use MORE CPU than the software-based openH264 alternative. If your goal is to save CPU power, a hardware encoder may just introduce more problems and offer no benefit at all; at least if encoding with a PC.

You can specify whether to use software or hardware H264 by changing the H264 profile ID; this can be specified, for example, using &h264profile=42e01f. 42e01f should trigger the OpenH264 software encoder, if available.

AMD systems, and some Intel systems, the default H264 hardware encoder will limit bitrates. Using VP8 or a software-based H264 encoder could allow for higher bitrates. The software VP8 encoder does seem to use more CPU than the H264 encoders, but it often is more stable, especially for screen shares.

On a MacOS system, Chrome may drop frame rates suddenly when using the H264 encoder.

On older versions of iOS, the H264 encoders can sometimes only support 720p30, while the VP8 software encoder on iOS can support 1080p. This recently changed with the iOS ~15, so newer iPhones can now support 1080p30 with H264. Your iPhone may still get very hot, so I am unsure if its actually hardware-accelerated; newer iPhones will do better than older.

In the past, iOS devices were limited by how many videos could be encoded using H264, often just three total, so keep that in mind. This might have changed with newer iPhones however; untested.

Android

Many Android phones may not support H264 encoding in Chrome; this seems to vary based on the browser version, device chipset, and other factors. Trying to force H264 with such incompatible devices might result in no video, as the browser isn't always smart enough to know it isn't working. Chrome on Android doesn't seem to have a software-based H264 encoder.

One user has reported that while using Chrome, Brave, and Firefox with their Samsung S23+ has poor performance with video encoding, likely due to using software encoding, Microsoft's Edge browser on Android did make use of the hardware encoding. Performance in this case was near comparable to an iPhone 14 Pro's encoding performance. Users with other devices that also use a Snapdragon GPU may wish to try MS Edge if having lackluster video encoding performance.

With non-Snapdragon GPUs, such as found in entry-level and some mid-range smartphones, the hardware H264 encoder may not be available regardless of browser used. Using software-based encoders may trigger overheating or CPU throttling, especially at higher resolutions, so if you are unable to trigger hardware-encoding on a slower Android device, you may need to be content with lower resolutions and bitrates.

On the Google Pixel the H264/VP8 encoder will glitch like crazy when used in Portrait mode, however it's glitch free when using the VP9 codec via software encoding.

NVIDIA

If a director, choosing to publish video to your group with H264 might reduce some CPU load, but if using an NVIDIA graphics card, you may end up forfeiting your ability to use NVENC encoding for RTMP or MKV file recording, since NVIDIA only offers typically three encoders. You can unlock this limit, but the benefits of using NVENC with VDO.Ninja often provides no benefits it seems over a software H264 option.

If using a CDN-service like meshcast.io, where a server redistributes the video to a large audience, H264 is highly compatible with most viewers, but this is only true for the OpenH264 profile ID 42e01f of H264. Hardware-encoded version of H264 may not be compatible with all browsers, such as with Safari viewers, so its not advised.

OperaGX tends to have issues with H264 encoding.

On the bright side, H264 is supported well on macOS, and it seems to use less CPU to decode than VP8. H264 on OBS 27.1 and older (for PC) offers lower packet-loss-induced "rainbow puke" than the VP8 codec, but this isn't a factor anymore with OBS 27.2 and newer. On PC, VP8 and H264 seem to use about the same CPU to decode in OBS. I'd advise you to do your own testing though.

Minimum resolutions

For many devices that are offering hardware accelerated encoding, a minimum or specific resolution is needed, else the device may switch back to software based encoding.

Sometimes this minimum resolution is 640x360, but other times it might be 1920x1080.

Embedded and Linux hardware-encoding support

If you're comfortable with Linux, basic publishing into VDO.Ninja is available using GStreamer and Python. The project is located here: https://github.com/steveseguin/raspberry_ninja/

Hardware encoding with multiple viewer per encoded stream is supported with this option, although features are limited. It is not for the faint of heart; generally this approach is still reserved for hobbyists, enthusiasts, and developers. A Raspberry Pi can publish 1080p30 to VDO.Ninja, and supports HDMI connected cameras; at least when using this project's code.

Code and quick start deployment images are available for the Raspberry Pi and NVIDIA Jetson embedded development boards, along with hardware-encoding support for those platforms.

Other Linux systems are support with the provided code, but it is up to you to ensure the hardware driver and configuration is setup correctly in those cases.

The project will hopefully keep expanding, to include more devices and operating systems.

H265 / HEVC / AV1

While AV1 hardware encoders are not common at the moment, they should be supported as they are adopted by browsers and hardware manufactures. &codec=av1

H265/HEVC however isn't commonly supported by browsers, although Thorium / Safari browsers may support it, it's not an officially supported option. You can give it a try however by using &codec=h265.

Update, as of December 2024: If running Chrome on PC, you try enabling H265 support by using the following command line to start your Chrome instance:

chrome.exe --enable-features=PlatformHEVCEncoderSupport,WebRtcAllowH265Receive,WebRtcAllowH265Send --force-fieldtrials=WebRTC-Video-H26xPacketBuffer/Enabled

You can see if your Chrome browser has H265 support enabled by going to https://vdo.ninja/whip and checking out the drop-down list of available codecs.

OBS WHIP and WHEP

With OBS v30 supporting WHIP output, it's now possible to stream video directly from OBS to VDO.Ninja via WebRTC with hardware accelerated encoding.

There are limitations with OBS's WHIP implementation in version 30 however, which may get addressed in the future, but without a server supporting OBS's WHIP output currently, this option is primarily limited for single point to point video distribution on controlled networks.

You can however use OBS's WHIP output with an SFU server however, such as Cloudflare's WHIP/WHEP server, and VDO.Ninja can ingest the WHEP output from that. This setup would work a bit like how Meshcast works with VDO.Ninja currently, except with the source being specified as WHEP-based, rather than from Meshcast.

description: >- Maintaining a smooth 1080p60 can be tricky, but there are variety of options to achieve the desired results

How to screen share in 1080p

Bandwidth requirements

To maintain a high quality 1080p60 stream, especially if screen sharing game content, you'll want at least 12-mbps to 20-mbps of upload bandwidth.

You'll also need a pristine Internet connection to maintain a low-latency and smooth result; you can test your connect at https://vdo.ninja/speedtest. High packet loss will limit the possibility of maintaining both low-latency and high quality video; in such a case, you'll need to prioritize one over the other.

How to create reusable screen-share links

Push Link (Sender)

https://vdo.ninja/?push=SOMESTREAMID&screenshare&quality=0

Alias: https://vdo.ninja/?push=SOMESTREAMID&ss&q=0

Copy one of the two links above and change SOMESTREAMID into a different name. The name picked just needs to be a unique alphanumeric value is not already in active use.

You can also add &fps=60 to the link, to attempt to force 60-fps, but the default with &quality=0 is already 60-fps.

View Link (Viewer)

https://vdo.ninja/?view=SOMESTREAMID&videobitrate=10000&scale=100

Alias: https://vdo.ninja/?v=SOMESTREAMID&vb=10000&scale=100

Copy one of the two links above and change SOMESTREAMID in the same name as you did for the Push Link. You can change &videobitrate=10000 to another value if you want to change the bitrate.

Explanation

Parameter Explanation
Push Link
&push=SOMESTREAMID Sets a unique stream ID
&screenshare Selects screen sharing instead of webcam
&quality=0 Sets the resolution to 1920x1080p
View Link
&view=SOMESTREAMID Selects the stream ID
&videobitrate=10000 Sets the video bitrate to 10,000-kbps, you can change the value if you want
&scale=100 Tells the system to not scale down the screen share

{% hint style="info" %} If you have problems maintaining good video quality, you can add &codec=av1 to the viewer's side to see if it makes the screen share any better. AV1 is a newer codec with better compression efficiency. H264, VP8, and VP9 are other options to try. {% endhint %}

Framerate

Screen sharing at 60-fps is the default, but sometimes this does not always work.

You can try forcing 60-fps by adding &fps=60 to the source (sender-side link). If you get an error, you can try using &maxframerate=60 instead.

Try disabling variable refresh rates, such as those offered by Freesync or G-Sync.

{% hint style="warning" %} You may not achieve 60 FPS depending on your hardware, the browser or the type of screen share you use or the viewer uses.

Sharing a chrome window or tab is the best way to get 60 FPS consistently. If you share your screen or any other window you might only get 30 FPS.

Screen sharing a "Window" with Chrome (chromium) tends max out at ~42 FPS, while screen sharing via "Entire Screen" tends to make out close to 59 FPS. {% endhint %}

Frame rate or resolution

You can use the &contenthint parameter in some browsers to suggestion whether to prioritize frame rate or resolution. Sometimes getting both high isn't possible.

and-contenthint.md
and-screensharecontenthint.md

These parameters take detail or motion as a value, based on whether you value resolution or frame rate.

Versus.cam

For an e-sports optimized version of VDO.Ninja, with many of the settings pre-configured for 1080p60 streaming, check out Versus.cam.

It's free and uses VDO.Ninja, while adding a nifty management dashboard for monitoring inbound game streams. The management page makes it easy for you to remotely change resolution and bitrate without modifying the URL while live.

{% content-ref url="../steves-helper-apps/versus.cam.md" %} versus.cam.md {% endcontent-ref %}

Still not getting 60-fps?

Using Entire Screen or Chrome Tab capture, instead of Window capture, can increase the frame rate when screen sharing via the Chrome browser:

For some reason, when screen sharing a Window with Chrome, the frame rate is limited to around 42-fps.

Some users also might find that if they are using FIrefox, they are limited to 30-fps or low-bitrates (around 5-kbps). Please try using Chrome or Edge, or a Chromium-based browser, to see if that improves things.

If you're needing exactly 60-fps, or are still having issues, continue on for more options:

Using OBS Studio to capture

With the browser and a virtual camera

For the best screen-share results, you can use OBS Studio to capture the gameplay, and bring that into VDO.Ninja via the OBS Virtual Camera. This is an annoying added step, but OBS does a better job at capturing gameplay than the browser does.

Frame rates should be close to 60-fps in this mode, but may vary still vary a bit.

Using WHIP from within OBS

An alternative to using the Virtual Camera and browser though is to use a feature in OBS to publish directly to VDO.Ninja.

This is an newer feature it may require a special version of OBS at the moment to work, but WHIP support is now included in OBS v30, but it may be another version or two before OBS supports WHIP properly.

If having issues with using OBS WHIP with VDO.Ninja over the Internet, I do have a custom version of OBS that has proper WHIP support available for Win64 here. [fork] This version should let you publish WHIP via VDO.Ninja across the Internet, regardless of Firewall. This OBS binary was last built November 2024, but hopefully future releases of OBS make this custom version redundant. :)\

Check out a demo YouTube video of how to accomplish publishing WHIP into VDO.Ninja:
Publishing from OBS directly to VDO.Ninja

This mode should give OBS Studio control over frame rate and bitrate, so with a good connection it should be possible to lock in a solid 60-fps.

{% embed url="https://www.youtube.com/watch?v=ynSOE2d4Z9Y" %} Using WHIP to publish to VDO.Ninja directly from OBS {% endembed %}

Using &chunked mode

A fairly experimental, yet very exciting option to streaming over VDO.Ninja is the use of &chunked mode.

Chunked mode sends the video and audio over the data-channels, as if streaming via RTMP, rather than via the browser's default method of transmitting video. This provides VDO.Ninja more low-level control over the video, frame rate, and buffering.

This mode is more resistant to packet loss and will not vary the frame rate / resolution during the stream. It does however mean that if you are connection hiccups or is having problems, it will not be able to react and dynamically reduce quality to continuing streaming.

Chunked mode also uses more CPU than the normal mode and so may not respond well to computers that are maxing out their CPU.

To ensure reliability as a result, a buffer is needed; upwards of 1-second buffer delay may be needed to ensure reliable performance.

To screen share using chunked mode, the following is a sample sender-side link:

https://vdo.ninja/alpha/?chunked=2000&screenshare&push=STREAMIDHERE

A unique part of chunked mode is that the sender sets the bitrate via &chunked=N, where N is the kilobits per second of the video.

Viewing the stream is the same as normal:

https://vdo.ninja/alpha/?view=STREAMIDHERE&buffer=500

&buffer can be used to specify the default buffer delay, which accepts a value in milliseconds. The default may change depending on version of VDO.Ninja, but it's roughly between 500ms and 1s in most cases. Going below 200ms is not advised unless using it over a LAN.

Please provide request/feedback if you use &chunked mode, as it's experimental and still being improved upon.

Meshcast and servers

You can explore using &meshcast and &relay as options as well. While it is a server-based method of sending video, it can sometimes allow for 1080p video where network conditions are poor.

Meshcast in particular can help stream 1080p video to multiple viewers at once, if the sender does not have a computer and network capable of doing so on their own.

Meshcast may not always be able to achieve 20-mbps speeds, sometimes only 2 to 3-mbps is possible, so it may not always be the best option for those streaming e-sports.

{% content-ref url="../advanced-settings/screen-share-parameters/" %} screen-share-parameters {% endcontent-ref %}

How to stream 4K video using VDO.Ninja

{% hint style="warning" %} Sending a 4K video feed with VDO.Ninja is very CPU intensive. Be prepared to use all of 8 real cpu cores (not threads). {% endhint %}

How VDO.Ninja handles video quality

VDO.Ninja has 3 predefined &quality levels:

  • &quality=0 tries to do 1080p (1920x1080 @ 60fps).
  • &quality=1 is the default. It tries to select 720p (1280x720 @ 30fps ) for both screen capture and webcam.
  • &quality=2 tries to do 360p (640x360 @ 30 fps).
  • also there's &quality=-1 , which will use the device's default resolution, but this could be anything, low or high, so it's a niche option.

By “trying”, I mean that if the resolution is not available, VDO.Ninja defaults to another resolution that the camera supports instead. This way, no errors are thrown and a compatible stream is sent, even if it’s not exactly what you might have desired.

VDO.Ninja is however capable of doing higher resolutions and custom resolutions however; you just need to manually specify the resolution you want. When you manually specify a resolution, if it doesn’t work, an error is thrown.

While I could make a selectable option for 4K in the user interface, another problem with 4K is that it requires a LOT of CPU power to encode. Most users will always select the highest resolution allowed, not understanding that it might actually be a bad idea. Maxing out your CPU can actually result in worse quality with lower frame rates than selecting a lower, safer, resolution.

Pushing 4K resolution

That all said, you can give “4K” a go by adding &width=3840&height=2160 to the invite link.

For example then, https://vdo.ninja/?push=inviteGuest123&width=3840&height=2160

If the guest does not support 4K, this will give an error to the guest, stating that the video device is over-constrained.

The default frame rate is 60-fps, although if their device does not support that, it will use a lower support frame rate. If you manually specify a frame rate, and the camera or display does not support it, it will also give an error.

Smartphones

If streaming from a smartphone, not all phones can do 4K; my old LG V30 I believe could do 4K30 via VDO.Ninja, but my Pixel 4a seems stuck at 1080p30. As well, an iPhone 11 might only be able to 1080p30, an iPhone 12 might be able to do 1080p60, while an iPhone 15 might be able to do 4K30. It might depend on the iOS version, where older iOS versions are pretty limited, so things will change overtime.

A common question I also get is that a certain phone can record 4K60 in the native phone app, so why not also in VDO.Ninja? Well, just because you can record to disk at 4K does not mean the manufacture has added support for 4K streaming via the browser. It requires additional development, nor is it always possible if the hardware encoder used does not support the advanced requirements of WebRTC.

Samsung devices can sometimes use the built in Samsung Internet browser instead of Chrome to get access to higher resolutions and frame rates; 1080p60 for example with new flagship devices. Sometimes changing cameras or video codecs can allow for higher resolutions as well.

The native mobile app version of VDO.Ninja may at some point support additional cameras that the browser does not, but at present there are not enough development resources available for this. It's desired however.

What about the bitrate?

Next, while you might have selected 4K, with the exception of static video screen shares, you cannot transfer 4K video with the default video bitrates set. For action, you will need closer to 40-mbps video bitrates set on the viewer’s end. For talking head videos, you will want over 10-mbps and possibly even more. Without a high enough bitrate set, the video will not stream at 4K and more than likely not maintain 60-fps.

To set a target bitrate add &videobitrate=20000 for 20-mbps for example. This goes on the viewer link.

Scaling

You may need to add &scale=100 to the view link to have the video stream at 4K, if the playback window is smaller than 4K. VDO.Ninja by default resizes incoming videos to fit the playback area, and &scale=100 overrides that, requesting 100% of the available resolution; so unscaled if possible.

Codec

A bit like bitrate and scaling, changing the video codec can sometimes help with achieving 4K video. &codec=av1 can help if the bandwidth is limited, as it is more efficient than other codecs. &codec=vp8 is universal, while &codec=h264 can often trigger the hardware encoder to be used. Using a hardware encoder can help reduce CPU load, allowing for 4K if the system would otherwise be CPU-bottlenecked.

Normally you shouldn't need to change codecs, but sometimes it does make a difference.

Performance issues

As a result, to successfully stream 4K video, you generally need a computer system with 8 real CPU cores or more, running at 3.6GHz or higher. A modern AMD 3900X-series CPU or Intel 9900K CPU are ideal for this task, but a quad-core laptop will not be. You might be able to get away with lesser bitrates and lesser CPU requirements if just screen-sharing text, but it still is not for the faint of heart.

Lastly, macOS users may find that 4K is simply not possible or very difficult. If you do manage to get it working, it might only operate at 5-fps or so. I don’t quite know why this is, but if you intend on sharing 4K video, you might be better off using a Windows PC. It seems to perform better.

We've successfully streamed 4K50 over 5G cellular Internet at 65-mbps using a MacBook Air M1 and VDO.Ninja.

description: >- A common question on how to achieve the highest quality capture into OBS for a remote interview.

How to get highest video quality (for an interview)

The highest quality possible is a bit tricky, as that will depend on certain factors that may be hard to determine without testing and tweaking in advanced.

Depending on what you're trying to do exactly, how many people are being interviewed, and your technical level of savviness, different options may appeal to you.

Group Room method

The VDO.Ninja group room has a director role, with everyone else being a guest.

The director can record locally in browser, to their own disk, or they can record remotely, to the guest's computer. The highest quality recording possible will be to record to the guest's own computer directly, bypassing the Internet. This however currently requires the guest send the recording to you afterwards, which introduces a risk of failure, nor is it always feasible.

While recording the stream as the director themselves is an option, via VDO.Ninja's director control center, better performance and more reliable results can be obtained by using OBS Studio to record the stream.

When using OBS to record, you may wish to use the provided solo-links for each guest, putting each into its own OBS Studio instance, and recording each guest independently. OBS Studio can be opened multiple times, and hardware accelerated encoding is often available up to 3 streams or more. You can also consider checking out https://obsproject.com/forum/resources/source-record.1285, which is a plugin for OBS that lets you record multiple sources at a time with one OBS instance.

If using OBS to record, configure OBS to record at a high bitrate, let's say 20,000-kbps, at perhaps 1920x1080 resolution. For each OBS browser source, which contains the solo-links, will we ensure they are 1920x1080 resolution also, and we will append &videobitrate=12000&audiobitrate=160 to each view link.

You can speak to the guest via the director's control center, which will provide echo cancellation for the director's mic, and this provides the easiest setup and operation. If you want even more control over settings and optimizations though, but don't want a director role, you may way to try the next method.

Manual push/view links method

In this mode, there is no group room, and all guest stream IDs need to be manually specified. You can typically get excellent 1080p recording quality though with the following parameters:

Guest link: https://vdo.ninja/?push=GUEST_ID&quality=0&proaudio&view=HOST_ID&vb=200&ab=16

Host link: https://vdo.ninja/?push=HOST_ID&view=GUEST_ID&vb=50&ab=16

OBS link*: https://vdo.ninja/?view=GUEST_ID&vb=12000&ab=128&scale=100

&#xNAN;* Note the OBS Browser source should be set to a width of 1920 and a height of 1080.

The idea here is both you and the guest can talk to each other in the browser, at relatively very low quality, while in OBS you are capturing a very high quality version of just the guest. I'd imagine you can record the host locally in OBS, without needing VDO.Ninja in most cases.

I am also assuming the guest is wearing headphones; if not, you may need to remove &proaudio from their invite link. Removing it will lower the audio quality, but with it added you will not have echo cancellation enabled.

You can improve the quality a small bit further with some added complexity, by having the host use OBS as the video/audio monitor when speaking to the guest, rather than pulling any audio/video in via a browser window. You can also consider using the Electron Capture app, instead of an OBS browser source, which will let you share one guest video stream with several apps via window-capture.

For the highest quality, you'll want to record the guest at their native resolution, so if each guest is 1080p resolution, you can capture 4 guests in OBS if OBS is recording at 4K resolution, or you can record each guest as their own independent video. Common options here could be to have multiple OBS instances being open, or by using the source-record plugin for OBS: https://obsproject.com/forum/resources/source-record.1285.

Added sharpening

If doing screen shares, or overlays, adding a bit of sharpening as an OBS video effects filter can also help the recording look better. Sharpening will make lines and fine details, like hair, pop out a bit more. This is especially helpful for text, which is usually a bit soft in video otherwise.

AV1 video codec

The relatively new AV1 video codec offers better colors, better compression, and often better frame rates than other codecs. If your guest supports it, with a computer that won't overheat because of it, it might be worth trying.

Add &codec=av1 to the solo- or view-link of the guest you are recording, to get the system to prefer using it instead.

Packet loss and connection quality

The biggest impact and limitation is normally the connection itself; please sure that both sides have excellent high-quality connections. Bad connections will ruin a stream.

Sometimes using &relay or &meshcast can help with certain bad connections, in rare cases at least. Meshcast can be used on the sender's side, while &relay can be used on either/both side. Normally just avoiding WiFi can resolve many such packet loss issues though.

If the guest is on a mobile device, consider using a USB (lightning) to Ethernet adapter for that phone, to connect it to the Internet router directly, rather than using WiFi. If that isn't an option, bonded cellular connections may be an option for some users as well.

packet-loss.md

{% embed url="https://www.youtube.com/watch?v=je2ljlvLzlY" %}

If packet loss is a still serious issue, then there is a feature in VDO.Ninja to let you record the video directly on the guest's computer, remotely, bypassing the Internet during the recording itself. It's experimental though, so it might only be useful as a backup, but when it works, it's fantastic! The &record option, added to the guest's link, will let them control the recording, if there is no director present to start/stop the recording.

Smartphone / computer overheating

If your phone is getting warm, putting a metal heatsink on the backside of the phone directly can help keep it from thermal throttling. You can also try changing codecs, to see if perhaps there is a better option.

As for laptops, ensure they are plugged in and are not overheating.

Update your smartphone or change browsers

Some smartphones will have limited functionality if using an older version of the operating system. This is especially true of iOS devices, where iOS 16 has several core improvements over iOS 16, for example.

Certain browsers, such as Firefox, should also be avoided in most cases. Chromium-based browsers will offer better control over video bitrates, with more options and features to use.

As per audio

Avoid Bluetooth or mobile devices for audio sources.

Also refer to &audiobitrate or &proaudio for options to improve audio bitrate.

Options to record streams

There are several ways to record, with more ways coming. I'll list some of the ways here, although they may not be exactly what you had in mind. Regardless of which method you prefer, having a backup recording going is always advisable.

Local / Remote Recording in VDO.Ninja

The VDO.Ninja room director has the option to record streams locally and remotely.

You can also add &record to guest invite URL to introduce a recording button, for that publisher to start/stop their own local recording. Local recordings of this type are often of high quality.

You can also right-click and record any video within VDO.Ninja.

Depending on the type of video, and whether its local or remote, recording the video with this method may use up extra resources from the publisher's computer, including CPU and bandwidth.

Another issue is the format saved is WebM, which sometimes will need post-processing to make it compatible with many popular video editors. If the browser crashes, that also may cause the video recording to become lost, so it might not be the most reliable option.

That said, this is an easy option and available for free within VDO.Ninja.

Given thesmall chance the browser will fail with recording, you can use features like &splitrecording to automatically segment the video as its being recorded, saving perhaps 5-minute portions of the video at a time. You will need to concatenate the video chunks together however afterwards, but helps reduce the likelihood of the entire recording being lost due to a system crash.

Using OBS to record; or multiple OBS

You can open multiple OBS Studios. Each OBS can record a full-window video if needed. This is useful if doing an interview with someone, and you intend to post process edit it.

OBS has advanced hardware accelerated encoding options, and so this is good option if wanting to have a few high-resolution recordings taking place, as you can offload the encoding to the GPU if available.

If adding &channel=8 to your view/scene link in OBS, and enabling 7.1-channel audio in OBS, you can have a specific guest be recorded to a specific audio channel in your OBS recording. This is a bit finicky, given how 7.1-channel audio is hard to downmix into a proper stereo output, but for recording a podcast it might be a great option still to help in post-production ease. As of VDO.Ninja v26, the director has options to control these channels dynamically, under a guest's scene-settings menu.

Multiple channels available for recording; one per guest, for example.

OBS Source Record plugin

For OBS, there is a source-record plugin that allows you to record each Guest in OBS as its own dedicated video source. By pulling in a single high quality ISO (solo) feed per guest into OBS, and mixing videos using OBS, you can get high quality footage for post-production efforts. https://obsproject.com/forum/resources/source-record.1285/

This is nice because you can have one OBS Studio open, and that's it. The downside is, you won't be able to use the VDO.Ninja auto-mixer if using solo-links instead.

Electron Capture et al

Electron Capture (https://github.com/steveseguin/electroncapture) or Vingester.app are similar concepts to source-recording, but instead you can capture in an application that isn't OBS. From there you window capture or NDI capture those streams locally into OBS, or/and other applications at the same time. These options do add complexity, but I sometimes will use these approaches, especially if I want to interact with the stream or pin it on top of other apps.

If interested in Vingester, as it has NDI output options, consider downloading it from here:
https://github.com/steveseguin/vingester , as the official repo for it is no longer maintained, and has an audio bug in it. Vingester does use quite a bit of CPU.

Chunked mode

If using the &chunked mode of VDO.Ninja, a video stream is encoded once, and that is sent to all viewers and even the local/remote recordings. This is experimental and still pretty high CPU, due to the high quality of the stream being shared, but it might be lower CPU than trying to do two high quality encodings.

There is no server-side support for chunked mode at the moment, but I will continue to improve it and work on it as requests come in.

Recording via WHIP/WHEP service

You can use a WHIP/WHEP services to relay video via a server. In this case, the server itself can make a copy of the stream; the same stream everyone else in the room will see. There's also SVC scalability support, so if your server supports that, you can push high-bitrates. (https://vdo.ninja/alpha/whip for some common tooling)

You could in theory record to Twitch or paid WebRTC service via their WHIP ingest, but if you deploy your own SFU server, such as MediaMTX, you can configure it to record via WHIP as well. There's even a dedicated option for configuring MediaMTX with VDO.NInja: &mediamtx (v26 of VDO.Ninja)

Recording to Google Drive / Dropbox

I have been working when I can on a way to auto-sync the local/remote recordings to Google Drive, Dropbox and other cloud providers. The code is there, but it still is a bit buggy and the user interface is lacking. This will record a local copy to disk, but automatically stream that local recording to the cloud as well; before or during the stream.

If there is of great interest to users, please let me know on Discord in the Feature Request channel how you'd like it to work, which provider, etc. I'm trying to figure out where best to invest my time on that feature, and with so little time, unless there's active interest, I let some tasks idle.

*update: Google Drive recording has a dedicated button in the Director's control room, which will let the director have remote guests upload their video to their Google Drive account automatically.

Headless recording

This is a bit like having a headless version of OBS in the cloud, where it's configured to take a VDO.Ninja browser link and publish it using FFmpeg to RTMP. Works with DigitalOcean or even an Orange pi.

https://github.com/steveseguin/browser-to-rtmp-docker

You can very easily configure the FFmpeg script to save to MP4/MKV format though, so if you were wanting to record the guest in the cloud, this is an option. It still will put a load on the guest, as they are encoding a high quality stream that won't be used live really, but if you want to do isolated guest recordings, and don't have the local CPU for it, this might help.

Raspberry.Ninja

Raspberry.Ninja is my project for Linux systems (and Windows WSL also), which lets you both publish and record Raspberry Ninja streams, without a browser at all.

While it's mainly used for publishing video to VDO.Ninja using the hardware encoder in small embedded computers, like the Raspberry Pi, it can also record video streams to disk, as perfect copies. No transcoding is done.

If you are enterprising, you can have Raspberry.Ninja record the incoming guest streams to disk without transcoding, and then transcode them, before window-sharing them or publishing them to NDI. NDI output support is available with Raspberry.Ninja, however it does require transcoding currently.

Recording an entire window/scene to disk as a mixed output

If you want to record more than a single guest, but rather an entire scene, using URL parameters you can achieve this. We are essentially doing a screen share of the output window, and recording that.

Record entire scene to disk: https://vdo.ninja/?scene=0&layout&remote&clean&chroma=000&ssar=landscape&nosettings&prefercurrenttab&selfbrowsersurface=include&displaysurface=browser&np&nopush&publish&record&screenshareaspectratio=1.7777777777777777&locked=1.7777777777777777&room=ROOMNAME
Publish entire scene to a WHIP endpoint:
https://vdo.ninja/?scene=0&layout&remote&clean&chroma=000&ssar=landscape&nosettings&prefercurrenttab&selfbrowsersurface=include&displaysurface=browser&np&nopush&publish&whippush&screenshareaspectratio=1.7777777777777777&locked=1.7777777777777777&room=surprisethinP

Contact me for more discussion / updates

If you want to follow up with me on some of these options, please contact me on Discord at https://discord.vdo.ninja.

As well, things change quickly with VDO.Ninja; this post may already be out of date by the time you read it. Feel free to ask for updates.

description: >- WebRTC/P2P connections may not work always in OBS Studio, perhaps due to firewalls.

Enabling WebRTC Sources in OBS

This guide will help you troubleshoot and resolve issues with WebRTC/P2P-based browser sources in OBS (Open Broadcaster Software). We'll cover several methods that can ensure these sources work properly, assuming the sources work fine in a normal browser already, and just fail within OBS.

Often the issues with VDO.Ninja or Social Stream Ninja not appearing in OBS are not firewall related, but rather glitches in the matrix, so we'll cover a few common solutions there also.

Method 1: Adding OBS to Windows Firewall

  1. Open the Windows Control Panel.
  2. Navigate to "System and Security" > "Windows Defender Firewall".
  3. Click on "Allow an app or feature through Windows Defender Firewall" on the left side.
  4. Click the "Change settings" button.
  5. Click "Allow another app..."
  6. Browse to the OBS installation directory (usually C:\Program Files\obs-studio\bin\64bit) and select obs64.exe.
  7. Click "Add" and ensure both "Private" and "Public" checkboxes are ticked for OBS.
  8. Click "OK" to save the changes.

Method 2: Running OBS as Administrator

  1. Right-click on the OBS shortcut or executable.
  2. Select "Run as administrator".
  3. If prompted, click "Yes" to allow the app to make changes.

To always run OBS as administrator:

  1. Right-click on the OBS shortcut or executable.
  2. Select "Properties".
  3. Go to the "Compatibility" tab.
  4. Check the box next to "Run this program as an administrator".
  5. Click "Apply" and then "OK".

Method 3: Use Electron Capture app instead

  1. You can use the Electron Capture app instead of the OBS Browser source
  2. Window capture the Electron Capture output into OBS instead.
  3. You can window-capture the audio via OBS or with a virtual audio cable.

Method 4: Disable hardware acceleration and check settings

  1. Try to disable hardware acceleration for browser sources in the OBS settings

You may need to scroll down in the browser source settings to find the follow.

  1. Make sure "Shutdown source when not visible" is NOT checked in the browser source settings.
  2. Make sure "Refresh browser when scene becomes active" is NOT checked in the browser source settings.
  3. Clear the browser cache in the OBS Browser source using the "Refresh cache of current page" button.

Method 5: Allowing OBS Through Third-Party Firewall Software

If you're using third-party firewall software:

  1. Open your firewall software's settings.
  2. Look for an option to allow applications through the firewall.
  3. Add OBS (obs64.exe) to the list of allowed applications.
  4. Ensure OBS has permissions for both incoming and outgoing connections.

Method 6: Disabling Web Security to enable local IP sharing

OBS browser sources seems to hide local IPs by default, which may cause Internet usage via forced TURN-server usage, rather than direct peer-to-peer. Not ideal!

If you start OBS with the following command-line arguments, peer to peer connectivity issues may be resolved. To quickly test if this is a potential issue, add &turn=0 to the VDO.Ninja view URL added to OBS, and see if you can establish a connection.

While it's not going to impact most users, it may be a problem for some. If it is a problem, you can just ignore it, use the ElectronCapture.app instead, or if you don't mind lowering the security browser inside OBS, you can use the following command-line to start OBS:

obs64.exe --disable-web-security --allow-running-insecure-content --ignore-certificate-errors --use-fake-ui-for-media-stream

To further help diagnose the above issue, and to compare results across different browsers, please see: https://vdo.ninja/stun

Troubleshooting Tips

  • Clear browser cache: As already mentioned, in OBS, right-click on the browser source, select "Properties", then click "Refresh cache of current page".
  • Test in different browsers: If a WebRTC source works in Chrome but not in OBS, try using a different browser like Firefox or Edge to isolate the issue.
  • Check network settings: Ensure your network allows WebRTC connections and that no VPN or proxy is interfering.
  • Disable hardware acceleration: As already mentioned, in OBS settings, go to "Advanced" and uncheck "Enable browser source hardware acceleration".
  • Update OBS Studio: Certain versions of OBS may have issues with browser sources. Fully uninstall OBS Studio and then update with a recent stable version.
  • Check your links: Sometimes you have an old link in OBS, one that might contain an invalid password, stream ID, or session value. Delete the old browser source, make a new one, and use a freshly obtained link to ensure you haven't made a simple oversight.

If you're still experiencing issues after trying these methods, consider reaching out to the OBS community forums or support channels for further assistance.

description: How to control the video bitrate inside of a room

Video bitrate in rooms

This guide will show you how to control and set up the bitrate in rooms as a director and as a guest.

Default settings

Every guest is viewing video streams in a room with a combined bitrate of 500-kbps. If there is only one video stream, the guest will view the video on 500-kbps. Two video streams: 250-kbps per video.

Director

As a director of a room you can control the total room bitrate dynamically.

Open the room settings via this button as a director

The default is (as explained before) 500-kbps. You can increase it op to 4000-kbps.

You can control the total room bitrate also with a URL parameter: &totalroombitrate=6000

Default is 6000-kbps now with &totalroombitrate=6000

The default setting for the room is now 6000-kbps. You can decrease it dynamically though if the guests have any problems.

Guest

If you add &roombitrate=2000 to the guest's link all the other guests can view the video of the guest with a bitrate of 2000-kbps. So three other guests watching the video stream of the guest -> 6000-kbps outgoing bitrate. &roombitrate limits any guest viewer in the group chat room from pulling the video stream at more than the specified bitrate value.

You can also use &totalroombitrate on the guest's URL if you want to have different settings for each guest. So adding &totalroombitrate=4000 to a guest's URL, the guest can view all video streams in the room with a combined bitrate of 4000-kbps.

If you use &controlroombitrate on the guest's URL, the guest can change the total room bitrate dynamically via a slider. If you add &controlroombitrate&totalroombitrate=4000 to the guest's URL the guest can change the bitrate between 0 and 4000-kbps. It doesn't affect what other guest's are viewing.

.png>) (1) (1) (1) (2) (1).png>)

Examples

https://vdo.ninja/?director=TestRoomName&push=directorStreamID&broadcast&totalroombitrate=5000
When adding &broadcast&totalroombitrate=5000 to the director's URL the guests can only see the video of the director with a bitrate of 5000-kbps. So they get pretty good video quality. If you have three guests in the room the outgoing bitrate fot the director is 15000-kbps, so it's pretty high.

If you want a guest to appear in scenes (for example in OBS) but you don't want other guests to see their video stream you can add &roombitrate=0 to the guest's URL. &roombitrate only affects the bitrate in the room, not in scenes.

Adding &maxbandwidth=80 to the guest's URL will allow to them to put 80 % of their available bandwidth into the video stream. This is useful for high quality gaming streams for example.

Scenes

For scenes in OBS or other softwares (&scene or &solo) use &videobitrate to specify the bitrate per video stream or &totalscenebitrate to get a combined bitrate for all videos in the scene.

3 guests in a scene -> &videobitrate=3000
The bitrate of each guest will be 3000-kbps.

3 guests in a scene -> &totalscenebitrate=3000
The bitrate of each guest will be 1000-kbps.

Meshcast

If you are using &meshcast on the director's or guest's URL remember that you control the bitrate via &meshcastbitrate on the sender's side.

More Parameters

There are more parameters to control the bitrate. You can find them here:

{% content-ref url="video-bitrate-for-push-view-links.md" %} video-bitrate-for-push-view-links.md {% endcontent-ref %}

{% content-ref url="../advanced-settings/video-bitrate-parameters/" %} video-bitrate-parameters {% endcontent-ref %}

description: How to control video bitrates for basic push/view links

Video bitrate for push/view links

The default settings

The default video bitrate for simple push/view links is 2500-kbps.

https://vdo.ninja/?push=streamid
https://vdo.ninja/?view=streamid

By default, both outgoing and incoming video bitrates are set at 2500-kbps. This default setting and parameters are different if using Rooms and explained in detail here.

There are five parameters we will take a look at:

  1. &outboundvideobitrate (&ovb) -> push side
  2. &maxvideobitrate (&mvb) -> push side
  3. &limittotalbitrate (&ltb) -> push side
  4. &videobitrate (&vb) -> view side
  5. &totalscenebitrate (&tsb) -> view side

On the source side (&push)

The push link sets the target and maximum outgoing video bitrate

&outboundvideobitrate (&ovb)
Sets the target and maximum outgoing video bitrate on the source side.

https://vdo.ninja/?push=streamid&ovb=4000
https://vdo.ninja/?view=streamid

The push link sets the outgoing and incoming video bitrate to 4000-kbps. The view link doesn't need an additional parameter as its bitrate is set at 4000-kbps because the push link is using &ovb.

The push link sets the video bitrate per stream out

&maxvideobitrate (&mvb)
&mvb is similar to &ovb but it sets the target and maximum bitrate per stream out.

https://vdo.ninja/?push=streamid&mvb=1000
https://vdo.ninja/?view=streamid

Every view link has a video bitrate of 1000-kbps.

The push link limits the video bitrate to a maximum defined value

&limittotalbitrate (&ltb)
Limits the total outbound video bitrate to a defined value.

https://vdo.ninja/?push=streamid&ltb=5000
https://vdo.ninja/?view=streamid

The incoming video bitrate will still default to around 2500-kbps but permits the viewer to increase it on their end with &ltb telling the push link to not get higher than 5000-kbps total outgoing bitrate.

On the viewer side (&view)

The view link sets the video bitrate per stream in

&videobitrate (&vb)
The view link is setting the target and maximum video bitrate per incoming stream.

https://vdo.ninja/?push=streamid
https://vdo.ninja/?view=streamid&vb=2000

The view link is setting the bitrate per incoming stream (in this case 2000-kbps). So if you have a view link with three incoming video feeds: &view=stream1,stream2,stream3 - every source is pushing 2000-kbps as &vb=2000 and the view link has a combined bitrate of 6000-kbps.

The view link sets the total video bitrate for all incoming streams combined

&totalscenebitrate (&tsb)
This is similar to &vb but it sets the target and maximum bitrate for all incoming streams combined.

https://vdo.ninja/?push=streamid
https://vdo.ninja/?view=streamid&tsb=3000

So if you have a view link with three incoming video feeds: &view=stream1,stream2,stream3 - every source is pushing 1000-kbps as &tsb=3000.

Mixing the parameters

As doing some testing there were these results:

All the three push parameters are always limiting the maximum. So if you set one of the three parameters to a value, the outgoing video bitrate will never be higher than you set it.

&tsb also always limits the bitrate on the viewer side, whereas &vb is overwritten by &ovb and &mvb.

  • &ovb is overwriting &vb
  • &mvb is overwriting &vb
  • &tsb is stronger than &ovb

Related

{% content-ref url="../advanced-settings/video-bitrate-parameters/" %} video-bitrate-parameters {% endcontent-ref %}

{% content-ref url="video-bitrate-in-rooms.md" %} video-bitrate-in-rooms.md {% endcontent-ref %}

description: You can host a VDO.Ninja media stream on a website, via the IFRAME API

How to use VDO.Ninja on a website

Basic embedding

Embedding VDO.NInja into a website should be pretty simple; we're just using the IFRAME element and setting the source to the VDO.Ninja URL we wish to load

<!DOCTYPE html>
<html>
<head>
    <title>VDO.Ninja Embedded Iframe</title>
</head>
<body>
    <iframe 
        src="https://vdo.ninja/?view=JkYwyxy" 
        allow="camera; microphone; autoplay" 
        width="640" 
        height="360">
    </iframe>
</body>
</html>

You may want to add or remove certain permissions, such as geolocation. Please note that while enabling auto-play is an IFRAME option, unless the parent window has already had a user-gesture interaction, the video inside VDO.Ninja will not autoplay; at least not with audio. Auto-playing of audio is controlled by the browser to limit annoying ads from auto-playing also; overriding this isn't really feasible.

Adding some security for public deployments

If wanting to use this page for public use, I'd probably want to secure things a bit more. Such as using the &audience parameter, which makes it so the viewer can't just publish to your stream ID when you stop streaming yourself.

The audience parameter is available with VDO.Ninja v25.2 and newer.

  1. An example push link is this: https://vdo.ninja/alpha/?audience=12345abcPublishingToken&push=JkYwyxy
  2. The view link you'd be provided woudl be something then like this: https://vdo.ninja/alpha/?audience=HrDrNy3jiA50QzlU&view=JkYwyxy

Example of the provided audience key to use

Advanced IFRAME API options

There's a sandbox that lets you play with the IFRAME API here: https://vdo.ninja/iframe , but it might be more complex than you need.

More about the IFRAME API here.

Transparency

Setting the allowtransparency attribute on the IFrame to true will allow for the contents to be transparent. You can then make VDO.Ninja transparent by adding &transparent to the URL, which sets the page's background to rgba(0,0,0,0).

https://vdo.ninja/iframe can demonstrate this by opening https://vdo.ninja/?transparent with it.

Accessing media frames directly for use in a video element

This is a more complex request, but it's possible.

https://versus.cam makes use of the &sendframes parameter to send raw video frames to the parent IFRAME, for use in a video element. This requires the VDO.Ninja deployment and the parent frame to share the same site origins, however depending on how you want the domains to appear, this could require some fancy request header manipulation, etc.

Another easier option is to use the IFRAME API to make a request using getVideoFrame, such as: {getVideoFrame:true, streamID:"abc123xyc"}. This will return a video frame, a PNG image of the current video stream with stream ID abc123xyc, which allows for a crude video stream. If perhaps a guest's browser doesn't support the &sendframes option, this could be a fallback.

Anyways, these are advanced and complex options of loading a video element with a VDO.Ninja source. Normally just using the IFRAME as the playback window, and interacting with it via the IFRAME API is suggested.

If you really want another way to access VDO.Ninja streams, you may need to consider using a server to convert from VDO.Ninja into an HLS stream, however that both carries cost and incrasese the latency of the stream dramatically.

How to capture without browser sources

Vingester.app

Vingester.app can let you do VDO.Ninja to NDI. It uses a browser window and can be used to export a copy of the window to FFmpeg, NDI, or make the source available for window-capture. It is a bit heavy on CPU usage, but on a dedicated computer, it works quite well for hosting a few NDI streams.

https://github.com/steveseguin/vingester

Electron Capture

Electron Capture is the officially supported tool for doing window capture of VDO.Ninja. It's very light weight and has quite a few command line options to batch start several windows at a time, along with support for hotkeys and other nifty VDO.Ninja specific tasks.

https://github.com/steveseguin/electroncapture

If using Electron Capture on Windows, you can currently do Win+Tab to switch between virtual desktops --- and sometimes this lets you can put all the VDO.Ninja windows in one desktop, and have a second desktop for vMix etc. It works with some windows setups, and in others, might just show black videos when trying to capture.

Virtual Cameras and Virtual Audio devices

While this approach will still use a browser source, you can ingest VDO.Ninja into a browser source for an app like OBS Studio, or even something paid like ManyCam, and then export the captured video stream via their Virtual Camera features into another app that supports webcam / video input devices.

Audio can be exported directly via VDO.Ninja into a virtual audio device, either their the &audiooutput feature, or from even the right-click context menu, where you can specify which audio output device an audio stream should be played into it. If a virtual audio cable is selected as the output destination, you can then bring that virtual audio cable into any audio application as a raw audio stream, as if it was a microphone or line-in source.

WHEP / WHIP

There's also WHEP/WHIP output from VDO.Ninja, which is relatively a new technology/feature, and so not quite a replacement for browser sources. That said, OBS Studio is starting to support this ingestion approach, along with GStreamer, many WebRTC CDN servers and services, and perhaps over the coming years something like vMix will adopt this new technology as well. Please provide feedback and requests if using WHIP/WHEP, so i can continue to improve it.

https://vdo.ninja/whip

Raspberry.Ninja

There's also Raspberry.Ninja (https://github.com/steveseguin/raspberry_ninja), which supports saving raw VDO.Ninja media streams to disk. While there is a bug that's blocking things from working soothingly, can technically use it to pull raw video sources from VDO.Ninja and push to not just disk, but even NDI, system sockets/pipes, RTSP servers, and much more.

While Raspberry.Ninja need more time to cook when it comes to video ingestion, it is more capable than using WHEP/WHIP alone, and supports the data-channel transport protocol, allow for dynamic settings to be applied and meta information to be transmitted, such as tally-light indicators.

Third parties

There are some third parties that have integrated with VDO.Ninja already, which are able to pull from VDO.Ninja and make the streams available as RTSP sources or such, but I do not have access to their code sources and so cannot promote their paid services here, but you can perhaps search around to find them online.

description: >- System requirements for streaming using with OBS Studio, including a VDO.Ninja source

System requirements for streaming

Introduction

This guide outlines a general sense of system requirements and options for streaming using VDO.Ninja in combination with OBS Studio, targeting multiple platforms such as Kick, Twitch, and YouTube.

System requirements will vary from user to user, and use case to use case, so there is no official minimum system requirement. Even a Raspberry Pi may be sufficient for some users, while others may need to rethink their strategy completely if their idea is outside the bounds of current physics.

System Requirements for the average streamer

CPU

  • Minimum suggested: Intel Core i5-8400 or AMD Ryzen 5 2600
  • Recommended: Intel Core i7-12700K or AMD Ryzen 7 5800X
  • High-end for flexibility: Intel Core i9-14900K or AMD Ryzen 9 7950X

Note: More powerful CPUs will handle multiple streams and VDO.Ninja cameras better. Each additional VDO.Ninja published stream will require more CPU power due to WebRTC's CPU-intensive nature. If using a GPU to accelerate the video encoding, a quad-core computer may also be minimally sufficient.

Cooling

  • Your computer should have an active cooling solution, especially the CPU
  • If using a laptop or mini PC, it should have at least an internal fan to keep the system cool

GPU

  • Minimum: NVIDIA GTX 1660 or AMD RX 570
  • Recommended: NVIDIA RTX 3060 or AMD RX 6600 XT
  • High-end: NVIDIA RTX 4090 or AMD RX 7900 XTX

Note:

  • Newer NVIDIA GPUs (RTX 30 and 40 series) offer better NVENC acceleration.
  • RTX 40 series and some high-end 30 series cards support AV1 encoding.
  • AMD GPUs from RX 6000 series onwards offer improved encoding capabilities.

RAM

  • Minimum: 8GB
  • Recommended: 16GB
  • High-end: 32GB or more

Storage

  • SSD recommended for faster load times and smoother performance

Internet Connection

  • Upload speed: At least 5 Mbps per 720p stream at 30 fps
  • Recommended: 10+ Mbps for single 1080p stream at 60 fps
  • Multi-broadcast or group video: 30+ Mbps
  • Wired Ethernet recommended for all computers

VDO.Ninja connections made over LAN do not use Internet normally. Also, VDO.Ninja will adapt to the Internet bandwidth available, however quality will suffer if being choked. It's best to not exceed 80% of the available upload and download bandwidth to avoid buffer bloat and other such issues.

A basic streaming setup with VDO.Ninja as a remote camera

VDO.Ninja to OBS Studio

  1. Use VDO.Ninja to capture your phone's camera feed.
  2. Add the VDO.Ninja source to OBS Studio as a browser source.

OBS Studio to Streaming Platforms

  1. Set up your scene in OBS Studio, incorporating the VDO.Ninja feed and any other sources.
  2. Configure output settings based on your hardware capabilities and target platforms.

Hardware Encoding Options

  • NVIDIA NVENC: Available on GTX 10 series and newer
  • AMD AMF: Available on RX 400 series and newer
  • Intel Quick Sync: Available on most Intel CPUs with integrated graphics

Multi-Platform Streaming Options

Local Solutions

  1. OBS Studio with Multiple Outputs:
    • Use the "Multiple RTMP Outputs" plugin for OBS Studio.
    • Configure separate outputs for each platform (Kick, Twitch, YouTube).
  2. Restream.io OBS Plugin:
    • Install the Restream.io plugin for OBS Studio.
    • Configure your Restream account with your target platforms.

Cloud-Hosted Solutions

  1. Restream.io:
    • Stream to Restream's servers, which then distribute to multiple platforms.
    • Reduces local hardware requirements but may introduce slight delay.
  2. Castr.io:
    • Another cloud-based multi-streaming service.
    • Offers low-latency options and analytics.

Quality Considerations

  • Start with 720p at 30 fps for a balance of quality and performance.
  • Increase to 1080p at 60 fps if your hardware and internet connection can handle it.
  • Consider lowering the quality if streaming to multiple platforms simultaneously from a local setup.

Optimizing Performance

  1. Use hardware encoding (NVENC, AMF, or QuickSync) when available.
  2. Close unnecessary background applications.
  3. Monitor CPU and GPU usage during streams to identify bottlenecks.
  4. Consider a dedicated streaming PC for high-quality, multi-platform setups.

Conclusion

The exact requirements will depend on your specific use case, desired quality, and number of platforms. Start with the recommended specifications and adjust based on your experience and needs. Always test your setup thoroughly before going live.

description: Choosing the Right Microphone for Your Live Stream

Picking the right microphone

Audio quality is crucial for a successful live stream. A good microphone can make the difference between a professional-sounding broadcast and an amateur one. This guide will help you choose the right microphone for your live streaming needs.

Understanding Microphone Types

There are several types of microphones suitable for live streaming:

  1. USB Microphones: Plug-and-play, good for beginners
  2. XLR Microphones: Professional-grade, requires an audio interface
  3. Lavalier Microphones: Small and discreet, good for on-the-go streaming
  4. Shotgun Microphones: Highly directional, good for noisy environments
  5. Dynamic Microphones: Robust and good at rejecting background noise
  6. Condenser Microphones: Sensitive and detailed, great for quiet environments

Factors to Consider

1. Pickup Pattern

  • Cardioid: Picks up sound from the front, ideal for single-person streams
  • Bidirectional: Picks up sound from front and back, good for interviews
  • Omnidirectional: Picks up sound from all directions, suitable for group discussions
  • Stereo: Captures a wide sound field, good for musical performances

2. Connection Type

  • USB: Easy to use, no additional hardware required
  • XLR: Professional standard, requires an audio interface

3. Sensitivity and Noise Rejection

  • Consider how much background noise is in your streaming environment
  • Dynamic mics are less sensitive and better at rejecting background noise
  • Condenser mics are more sensitive and pick up more detail

4. Budget

  • Microphone prices range from under $50 to over $1000
  • Consider your needs and how much you're willing to invest

5. Portability

  • If you stream from different locations, consider a portable option

Example Microphones for Different Scenarios

For Beginners

  1. Samson Q2U USB/XLR Dynamic Microphone
    • Pros: Dual USB/XLR outputs, good for beginners but also allows room for growth
    • Cons: May require closer speaking distance for optimal sound

For Intermediate Users

  1. Rode NT-USB Mini
    • Pros: Compact condenser mic with built-in pop filter, high-quality sound
    • Cons: USB only, may pick up more room noise than dynamic mics
  2. Elgato Wave:3
    • Pros: Designed for streaming, proprietary Clipguard technology prevents distortion
    • Cons: USB only, higher price point

For Advanced Beginners / Enthusiasts

  1. Shure MV7
    • Pros: Hybrid USB/XLR connections, based on the professional SM7B
    • Cons: More expensive, may be overkill for casual streamers
  2. Audio-Technica AT2020USB+
    • Pros: Studio-quality condenser mic, headphone output with volume control
    • Cons: More sensitive to room noise, requires good acoustic environment

For Streamers on the Go

  1. Rode Wireless GO
    • Pros: Compact wireless system, good for mobile streaming
    • Cons: Limited range, may pick up clothing rustle
  2. Shure MV88+ Video Kit
    • Pros: Works with smartphones, includes mini tripod
    • Cons: More expensive than basic options

Setting Up Your Microphone

  1. Positioning: Place the microphone 6-8 inches from your mouth, slightly off-axis to reduce plosives
  2. Use a Pop Filter: This reduces plosive sounds ("p" and "b" sounds)
  3. Consider Acoustic Treatment: Reduce room echoes with foam panels or blankets
  4. Test and Adjust: Always do a test recording to check levels and sound quality

Software Considerations

  • Many streaming software (OBS, Streamlabs) allow for audio filtering
  • Consider using noise suppression, a noise gate, or compression to enhance your audio

Conclusion

Choosing the right microphone depends on your specific needs, budget, and streaming environment. Start with understanding your requirements and then explore options within your budget. Remember, even a mid-range microphone with proper setup can produce excellent results for your live stream.

Always test your audio setup before going live, and don't be afraid to make adjustments based on feedback from your audience. With the right microphone and setup, you'll be well on your way to providing a professional and enjoyable listening experience for your viewers.

description: Two-way low-latency audio-only transmissions

How to get lowest audio latency possible

If you are a musician looking to jam out with a friend, you should be able to achieve under 40ms of latency using VDO.Ninja if both you and them have a good Internet connections. This implies being directly connected via wired Ethernet with low packet loss, rather than via Wi-Fi or cellular.

The following link is an example of settings optimized for low-latency audio-only two-way communications. I find most of the latency with a setup like this is outside the scope of VDO.Ninja; so the sound card settings, the capture device, how far away I am from the mic / speakers, etc.

https://vdo.ninja/?push=MystreamID123&view=TheirStreamID123&aec=0&agc=0&denoise=0&ab=16&enhance&ptime=10&maxptime=10&novideo&noap

Looking at the link, let's explore:

&aec=0 disables the echo cancellation; this implies we will need to use headphones

&agc=0 will disable auto-gain, which is preferable if streaming music

&denoise=0 will disable the noise filter, which is ideal with music applications.

&ab=16 gives us a constant audio bitrate of 16-kbps. Consistency will ensure more reliable latencies, and 16-kbps is so light-weight it shouldn't be boggled down on bad connections. You can increase this value depending on the audio fidelity that you want, but higher could introduce more latency.

&enhance, &ptime=10, and &maxptime=10 are advanced settings, that tell the system to prioritize audio packets and limit their size to 10ms. This is the lowest we can set them using a browser, but it might be possible to go lower if using something like the Raspberry_Ninja hardware project that VDO.Ninja has available for advanced users.

&novideo disables video, which can make a big impact on latency, as not streaming video will free up a lot of bandwidth, but also not force the audio to stay in sync with the video. You can send the video in a second tab/session if needed, and that way, it won't try to stay in sync.

&noap just disables any of the advanced web-audio processing, such as compression, gain, level-meters, and panning. This will free up some milliseconds of latency in some cases,

Without much effort, you should be able to achieve 40-milliseconds of latency, or less, with this setup. Achieving between 20- to 30-ms is feasible in cases, but expectations of under 20-ms will require significantly more investment.

description: >- Syncing your USB microphone in OBS with the incoming VDO.Ninja stream is pretty straight forward.

Syncing USB audio with VDO.Ninja -> OBS Virtual Camera

Connecting OBS to a Virtual Audio Cable with Delay

Here's how to sync your audio in OBS Studio with an incoming VDO.Ninja video source, along with how to route the audio through a virtual audio cable into other applications.

Combined with the OBS Virtual Camera output, you can use VDO.Ninja (eg: via iPhone), OBS Studio, and a USB microphone as a wireless camera in other applications.

Step 1: Install a Virtual Audio Cable

We need a virtual audio to route the audio from OBS to our external application

There are a few free options for macOS:

For Windows:

BlackHole (recommended): Open-source virtual audio driver

Step 2: Configure OBS Monitor Output

  1. Open OBS
  2. Go to OBS Preferences (or Settings) → Audio
  3. Under "Advanced," find the "Monitoring Device" dropdown
  4. Select your virtual audio cable (e.g., "BlackHole 2ch")
  5. Click "Apply" and "OK"

Step 3: Enable Monitoring for Your Audio Source

  1. In OBS, locate your audio source in the "Audio Mixer" panel
  2. Right-click the audio source → Advanced Audio Properties
  3. Find your audio source in the list. (eg: a USB microphone.)
  4. Set "Audio Monitoring" to "Monitor Only" or "Monitor and Output"
  5. Click "Close"

Step 4: Add Audio Delay (200ms)

  1. In OBS, locate your audio source in the "Audio Mixer" panel
  2. Right-click the audio source → Advanced Audio Properties
  3. Find your audio source in the list
  4. Look for the "Sync Offset" column
  5. Enter "200 ms" in the field for your audio source
  6. Click "Close"

Step 5: Verify the Setup

Your audio should now be:

  1. Captured in OBS
  2. Routed through the virtual audio cable
  3. Delayed by approximately 200ms, but you may need to adjust this to ensure perfect sync.
  4. Available as an input source in other applications

You can select the virtual audio cable (VAB, BlackHole, or Soundflower) as an input in any other application to receive the delayed OBS audio. Works to sync your audio with an incoming VDO.Ninja video stream.

{% content-ref url="../getting-started/mobile-phone-camera-into-webcam.md" %} mobile-phone-camera-into-webcam.md {% endcontent-ref %}

{% content-ref url="use-vdo.ninja-as-a-webcam-for-google-hangouts-zoom-and-more.md" %} use-vdo.ninja-as-a-webcam-for-google-hangouts-zoom-and-more.md {% endcontent-ref %}

description: How to screen-share your iPhone or iPad to VDO.Ninja

How to screen share your iPhone/iPad

If on iOS, there isn't an option available to screen share from within the browser (Safari), but there are some alternatives.

One recently added way to screen share is with the VDO.Ninja native mobile app. It now supports screen sharing, however system audio capture may be missing.

{% content-ref url="../steves-helper-apps/native-mobile-app-versions.md" %} native-mobile-app-versions.md {% endcontent-ref %}

\

When using the native app to screen share, be sure to select the VDO.Ninja Screen Recorder option once prompted by Apple. Then click Start Broadcast.

If you do not see the option, try scrolling down. If you don't see it still, update your iOS system version to the newest available version. Old versions may not support screen sharing, such as v15.x.

If you still cannot find it, check that the app has the correct permissions in your iOS settings, seek support, or try one of the other options below.

You can leave all other settings as default when using the VDO.Ninja native app. Once you start your broadcast, you will be provided a link at the top of the app that you can put into your browser or OBS browser source.

Other options

Another option to screen share is to use Apple Airplay to wirelessly cast your screen to a computer, and then window capture that output.

Better than Airplay though, if you can connect your iPhone to a mac via USB, as QuickTime supports USB-connected access to an iPhone's camera. This does not require any downloads and offers a high-quality stream. Using a virtual audio device, you can even capture IOS audio with this method.

In this guide we will show you how to screen-share to VDO.Ninja using QuickTime over USB with a MacBook and an iPhone. On Windows, you may wish to use Airplay instead, leveraging one of the free Airplay clients designed for PC.

{% hint style="info" %} Android users can use the native VDO.Ninja Android app to screen share directly to VDO.Ninja. {% endhint %}

  1. Connect your iPhone to your mac via a USB cable. You may need a USB to USB-C adapter if you do not have a lightning to USB-C adapter already.

(1) (1).png>)

2. Open the QuickTime Player on your Mac.

(1) (1).png>)

3. From the QuickTime Player menu, select File -> New Movie Recording.

(1) (1).png>)

4. The QuickTime Player may show your laptop's webcam initially, but you can select from the hover-over menu the option to select your iPhone's video and audio as a video source instead.

For this to work, your iPhone needs to be connected and turned on. It will not work if locked and sleeping.

(1).png>)

5a. OPTIONAL: If you want to capture audio from your iPhone, you will need to install a virtual audio driver.

There are several choices, although the popular ones are Loopback ($$), Blackhole (Free), and VB Cable (Free). Install one of your choice; in this walk-thru we are using Blackhole.

(1) (1).png>)

5b. OPTIONAL: If using Loopback, you will have the ability to customize the audio routing, but with Blackhole we will just output all the system's audio to the virtual audio cable. In the macOS audio settings, we just need to select the Blackhole audio device as the audio output destination.

(1) (1).png>)

5.c. OPTIONAL: Assuming QuickTime Player is capturing audio from the iPhone, we simply just need to unmute the QuickTime Player. You won't hear audio playback, as it is being streamed to the Blackhole virtual audio device instead, but you should be able to see the audio meter bouncing around if there is audio.

.png>)

6. We can now start streaming to VDO.Ninja; we just need to visit the site and click Share Screen. Using Chrome or another Chromium-based browser is required, such as the Electron Capture app. Safari will not work as it lacks the ability to select a window.

. (1) (1).png>) (1).png>)

7. To start screen sharing, we will want to select "Window" as the capture source, and then select the QuickTime, which should be showing our iPhone.

If we want to capture audio, we can also select the Blackhole virtual audio device from the Audio Sources menu in VDO.Ninja, but we can also do this after we start streaming. We can also select our local macBook microphone if we wanted.

(1) (1) (1).png>)

8. Once we start streaming, there is a settings menu that we can use to select audio sources. If we select the Blackhole virtual audio device (or Loopback / VB Cable), we will be sharing our audio that we are capturing from the iPhone. We can hold down the CMD (⌘) key while selecting audio sources to select and mix more than one audio source.

.png>)

9. Finally, we can add the VDO.Ninja view link to our remote OBS Studio or share it with friends.

The view link is normally found at the top of the VDO.Ninja page, but it can be formed based on the stream ID found in the site's URL as well. You can customize it the link and add it to OBS, making sure to enable "Control audio via OBS" and ensuring the resolution matches what you want.

(1).png>)

10. If you want to increase the frame rate and quality of the VDO.Ninja stream, adding &videobitrate=6000 to the URL will increase the quality by more than double. If you're looking to stream a game, you may want to increase this value even higher, although the default bitrate is more than enough for text and basic screen sharing.

Please see the rest of the documentation for more details on customizing VDO.Ninja.

description: How to capture the (free) system Text to Speech audio in Windows with OBS

Windows TTS Audio Capture Methods for OBS

While free text-to-speech options are nice, they come with a few annoying limitations and challenges, which we will discuss below. Solutions will be provided.

Background

OBS Studio's browser source does not have the ability to capture system-level text-to-speech (TTS) audio. It is capable of capturing premium TTS options, such as those powered by Google Cloud, Speechify, or Elevenlabs, but it cannot do so using the free built-in-to-browser ones. This is a limitation all browsers face when dealing with free TTS.

Furthermore, not all browsers even support text-to-speech. Opera, Firefox, and others may lack them.

OBS Studio has a limited set of system-level TTS options, with Chrome offer some Google-powered options, and Edge support Microsoft-supported ones, along support for Windows-installable TTS service pack add-ons.

You can get a list of support text-to-speech languages that your browser supports at https://vdo.ninja/tts

How to capture the free TTS and get it into OBS Studio

Method 1: Default Audio Route

1. Set Virtual Cable as Windows default output
   - Sound Settings > Output > Virtual Cable
2. OBS:
   - Add Audio Input Capture
   - Source: Virtual Cable
   - Monitor: Monitor Only

Method 2: Windows 10 App Route

1. Sound Settings > App volume and device preferences
2. Find browser in list
3. Output: Virtual Cable
4. OBS setup same as Method 1

Method 3: Windows 11 App Route

1. Settings > System > Sound > Volume Mixer
2. Locate browser
3. Output: Virtual Cable
4. OBS setup same as Method 1

Method 4: Audio Router

1. Install Audio Router
2. Route browser to Virtual Cable
3. OBS setup same as Method 1

Method 5: Voicemeeter

1. Install Voicemeeter
2. Set as Windows default output
3. Route:
   - Hardware out > speakers
   - Virtual out > OBS
4. OBS captures Voicemeeter output

Testing

1. Play TTS
2. Check OBS meter
3. Verify system audio
4. Adjust levels if needed

Alternatives

If these options do now work for you, there are paid options available, using Google Cloud, Elevenlabs, and Speechify. You can also try to self-deploy your own self-hosted open-source project that offers TTS for free, but that is out of scope for this article.

Where is TTS used?

TTS is offered in Social Stream Ninja in several places, to read out messages from audiences. It is also offered by CAPTION.Ninja, which offers closed-captioning, transcription, and translation. Both offerings have premium and free TTS options.

description: Some cheatsheets to help you get started

Cheat Sheets

VDO.Ninja Basic Concepts Cheatsheet

Learn the basic concepts of VDO.Ninja: Rooms, Control Center and Scenes

(1).png>)

VDO.Ninja Parameters Cheatsheet

Learn how to use parameters to customize VDO.Ninja's behavior\

(1).png>)

VDO.Ninja Automation Cheatsheet

Learn how to automate starting up VDO.Ninja, automatically join rooms and scenes with camera and audio devices already selected\

(2).png>)

VDO.Ninja Mac Audio Routing w Loopback Cheatsheet (example 1)

Learn how to route guest and application audio on the Mac using Loopback
\

.png>)

Author:
Chris Marquardt

description: >- A detailed guide on how to deploy MediaMTX, a ready-to-use media server, that offers Meshcast-like functionality

Deploy your own Meshcast-like service

Okay, here is a detailed guide on how to deploy MediaMTX, a ready-to-use SRT / WebRTC / RTSP / RTMP / LL-HLS media server, to use with VDO.Ninja's Meshcast-like functionality. This guide is written for beginners and advanced users alike, aiming to make the setup process as straightforward as possible.

Using MediaMTX with VDO.Ninja for Scalable Broadcasting

This guide will walk you through deploying MediaMTX (formerly rtsp-simple-server) as a self-hosted media server to enhance your VDO.Ninja experience, particularly for large audiences. By using MediaMTX, you can create a setup similar to VDO.Ninja's Meshcast feature, offloading the encoding and distribution of your streams to a dedicated server. This significantly reduces the load on your computer and network, enabling you to host more viewers and maintain a high-quality stream.

Why Use MediaMTX with VDO.Ninja?

VDO.Ninja, by default, uses peer-to-peer connections for video and audio transmission. While this works great for small groups, it can become a bottleneck when dealing with a larger audience. Each viewer adds to the upload bandwidth and encoding burden on the sender's machine.

Meshcast is a feature in VDO.Ninja designed to solve this scalability issue. It acts as an intermediary server (SFU or Selective Forwarding Unit) that receives a single stream from the broadcaster and then redistributes it to multiple viewers. This greatly reduces the load on the broadcaster.

MediaMTX allows you to replicate the functionality of Meshcast using your own server. By integrating MediaMTX with VDO.Ninja, you achieve:

  • Scalability: Handle a large number of viewers without overloading your computer or network.
  • Reduced Load: The broadcaster only needs to encode and upload the stream once to the MediaMTX server.
  • Improved Performance: Viewers receive a smoother, more stable stream as the server handles distribution.
  • Cost Savings: While Meshcast is a free service offered by VDO.Ninja, using your own MediaMTX server can be more cost-effective, especially if you already have a server or prefer using a VPS.
  • Control: You have full control over your media server, including its configuration and security.
  • Flexibility: MediaMTX supports various protocols beyond WebRTC (WHIP/WHEP), including SRT, RTSP, RTMP, and HLS, opening up possibilities for broader integration.

Prerequisites

Before we begin, make sure you have the following:

  • A server or computer: You'll need a machine to host the MediaMTX server. This can be:
    • Local machine (Windows, macOS, or Linux): Suitable for testing or small audiences, but you'll need to configure your router for port forwarding, which is not covered in this tutorial.
    • Virtual Private Server (VPS): Ideal for larger audiences and production environments. Recommended for best performance and reliability.
  • Domain name (Optional but Highly Recommended): While not strictly necessary, a domain name (e.g., yourdomain.com) simplifies configuration and makes your setup more user-friendly. It's also highly recommended for using free SSL certificates (for HTTPS). Using an IP address directly is not optimal, although you can still have VDO.Ninja generate SSL keys for you if you opt to use an IP address only.
  • Basic command-line knowledge: You'll need to be comfortable using the command line or terminal for your operating system.
  • VDO.Ninja: You should be familiar with the basic usage of VDO.Ninja.

Deployment Guide: MediaMTX

This guide will cover the deployment of MediaMTX on:

  • Linux Server (using a VPS like Vultr)
  • Windows
  • macOS

1. Deploying on a Linux Server (VPS)

Choosing a VPS Provider

Several VPS providers offer affordable and reliable services. Some popular options include:

  • Vultr: https://www.vultr.com/ - Offers a wide range of plans and locations, starting at around $2.50/month (IPv6 only) or $3.50/month (IPv4). Their High-Frequency Compute options are recommended for better performance.
  • DigitalOcean: https://www.digitalocean.com/ - Another popular choice with user-friendly interface and good performance.
  • Linode: https://www.linode.com/ - Known for its excellent customer support and robust infrastructure.
  • AWS Lightsail: https://aws.amazon.com/lightsail/ - Amazon's offering, integrating well with other AWS services.

For this guide, we'll use Vultr as an example, but the steps are similar for other providers.

Setting up your Vultr VPS

  1. Sign up for a Vultr account: Visit https://www.vultr.com/ and create an account.
  2. Deploy a new server:
    • Choose Cloud Compute.
    • Select Optimized Cloud Compute for CPU & Storage Technology. High Frequency is the recommended option here.
    • Choose a server location that's geographically close to your target audience for optimal latency.
    • For Server Image, choose a Linux distribution. Ubuntu 22.04 LTS is a good option for its stability and long-term support. Debian 11 or 12 are also popular choices for use with Mediamtx.
    • Select a Server Size based on your expected audience size. For a small to medium-sized audience, the $6/month plan should be sufficient to start.
    • Enable IPv4 if needed, or leave it disabled for IPv6 only.
    • Give your server a Hostname (e.g., mediamtx-server).
    • Click Deploy Now.
  3. Wait for the server to be provisioned: This usually takes a few minutes.
  4. Connect to your server: Once the server is running, Vultr will display its IP address. You'll need to connect to it using SSH:
    • Linux/macOS: Open your terminal and run: ssh root@your_server_ip (replace your_server_ip with the actual IP address).
    • Windows: You can use an SSH client like PuTTY (https://www.putty.org/).

Installing MediaMTX

Once you're connected to your server via SSH, follow these steps:

  1. Update the package list:

    Bash

    sudo apt update

  2. Install MediaMTX:

    Bash

    wget https://github.com/bluenviron/mediamtx/releases/latest/download/mediamtx_linux_amd64.tar.gz
tar -xf mediamtx_linux_amd64.tar.gz
sudo mv mediamtx /usr/local/bin/
sudo mv mediamtx.yml /usr/local/etc/

    If you're on a different architecture, like ARM, check the Mediamtx releases for the correct package.

  3. Run MediaMTX:

    Bash

    mediamtx

    To configure Mediamtx to auto-start on boot, you can setup a service.

    Bash

    sudo curl -s https://raw.githubusercontent.com/bluenviron/mediamtx/main/mediamtx.service --output /etc/systemd/system/mediamtx.service
sudo systemctl daemon-reload
sudo systemctl start mediamtx
sudo systemctl enable mediamtx

Setting up a Domain Name (Optional but Recommended)

If you'd like to avoid using IP addresses directly and enable HTTPS, you'll want to use a domain name.

  1. Purchase a domain name: You can buy affordable domain names from registrars like:
    • Namecheap: https://www.namecheap.com/ - Often has great deals on domains, especially for the first year. You can get domains for as low as $1/year.
    • Porkbun: https://porkbun.com/ - Also offers competitive pricing and user-friendly interface.
  2. Configure DNS records:
    • After purchasing your domain, go to your domain registrar's DNS settings.
    • Create an A record that points your domain (or a subdomain like media.yourdomain.com) to your Vultr server's IP address. If you're using IPv6, create an AAAA record instead.
    • DNS changes can take some time to propagate (up to 48 hours, but usually much faster). You can use tools like https://www.whatsmydns.net/ to check the propagation status.

Enabling HTTPS (Optional but Recommended)

HTTPS is crucial for security and WebRTC compatibility in many browsers. If you only have an IP address available and no domain name, you can set up Mediamtx to generate and serve the SSL keys for you. This is outlined in the Mediamtx documentation.

If you have a domain name, here's how to set up free SSL certificates using Let's Encrypt with Cloudflare:

Using Cloudflare for Free SSL

  1. Create a Cloudflare account: Go to https://www.cloudflare.com/ and sign up for a free account.
  2. Add your domain to Cloudflare: Follow the instructions to add your website to Cloudflare. This usually involves changing your domain's nameservers to Cloudflare's nameservers. You will need to update your domain name's DNS records at your domain registrar, replacing them with the ones provided to you by Cloudflare.
  3. Enable SSL/TLS:
    • In your Cloudflare dashboard, go to the SSL/TLS tab.
    • Choose the Full (strict) encryption mode. This ensures secure communication between your server and Cloudflare, as well as between Cloudflare and your visitors. If this fails, you can try other SSL options available.
  4. Configure your Nginx configuration file to redirect HTTP traffic to HTTPS. Or, you can enable the "Always Use HTTPS" option under SSL/TLS -> Edge Certificates.
  5. Enable proxyProtocol under the http element of your Mediamtx.yml file.

Cloudflare will now automatically issue and renew SSL certificates for your domain.

If you are unable to use Cloudflare, you can also try using CertBot.

  1. Install Certbot and Nginx plugin:

    Bash

    sudo apt install certbot python3-certbot-nginx

  2. Obtain and install a certificate:

    Bash

    sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

    Replace yourdomain.com and www.yourdomain.com with your actual domain name. Follow the prompts to configure HTTPS.

  3. Automatic renewal: Certbot automatically sets up a cron job or systemd timer to renew your certificates before they expire.

Opening Firewall Ports

Your VPS likely has a firewall enabled. You need to open the following ports for MediaMTX to work correctly:

  • 8889 (WHEP/WHIP): Used for WebRTC streaming.
  • 8554 (RTSP): Used for RTSP connections.
  • 1935 (RTMP): Used for RTMP connections.
  • 8888 (HLS): Used for HTTP Live Streaming.
  • 80 (HTTP) Used for Let's Encrypt renewals if not using Cloudflare or for general HTTP access.
  • 443 (HTTPS) Used for secure HTTPS access.

Here's how to open these ports using ufw (Uncomplicated Firewall), a common firewall management tool:

Bash

sudo ufw allow 8889/tcp
sudo ufw allow 8554/tcp
sudo ufw allow 1935/tcp
sudo ufw allow 8888/tcp
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw enable

If using iptables instead, you can use these commands:

Bash

sudo iptables -I INPUT -p tcp --dport 8889 -j ACCEPT
sudo iptables -I INPUT -p tcp --dport 8554 -j ACCEPT
sudo iptables -I INPUT -p tcp --dport 1935 -j ACCEPT
sudo iptables -I INPUT -p tcp --dport 8888 -j ACCEPT
sudo iptables -I INPUT -p tcp --dport 80 -j ACCEPT
sudo iptables -I INPUT -p tcp --dport 443 -j ACCEPT
sudo netfilter-persistent save

If your VPS provider has a built-in firewall, you might need to open these ports in their control panel as well.

2. Deploying on Windows

Installing MediaMTX on Windows

  1. Download MediaMTX: Go to the MediaMTX releases page on GitHub (https://github.com/bluenviron/mediamtx/releases) and download the latest release for Windows (e.g., mediamtx_vX.Y.Z_windows_amd64.zip).

  2. Extract the archive: Extract the downloaded ZIP file to a folder of your choice (e.g., C:\mediamtx).

  3. Run MediaMTX: Open a Command Prompt or PowerShell window, navigate to the extracted folder, and run:

    Bash

    .\mediamtx.exe

Opening Firewall Ports (Windows)

You'll need to allow MediaMTX through the Windows Firewall:

  1. Open Windows Defender Firewall: Search for "Windows Defender Firewall" in the Start menu and open it.
  2. Click on "Advanced settings" on the left sidebar.
  3. Inbound Rules:
    • Click on "Inbound Rules" in the left pane.
    • Click on "New Rule..." in the right pane.
    • Select "Port" and click "Next".
    • Select "TCP" and enter the following ports in "Specific local ports": 8889, 8554, 1935, 8888, 80, 443 (you can add them as a comma-separated list). Click "Next".
    • Choose "Allow the connection" and click "Next".
    • Select the network profiles (Domain, Private, Public) for which you want to apply this rule. For home use, "Private" is usually sufficient. Click "Next".
    • Give the rule a name (e.g., "MediaMTX Ports") and click "Finish".
  4. Outbound Rules: You might also need to create outbound rules if you have a strict firewall configuration. Repeat the steps above, but select "Outbound Rules" instead of "Inbound Rules" in step 3.

Allowing connections through your router's firewall

You may need to manually forward ports 8889, 8554, 1935, 8888, 80, 443 to the IP address of your local PC. You will need to refer to your router's documentation on how to do this, as this process will vary based on make and model.

3. Deploying on macOS

Installing MediaMTX on macOS

  1. Download MediaMTX: Go to the MediaMTX releases page on GitHub (https://github.com/bluenviron/mediamtx/releases) and download the latest release for macOS (e.g., mediamtx_vX.Y.Z_darwin_amd64.tar.gz).

  2. Extract the archive: Open a Terminal window and use the tar command to extract the archive:

    Bash

    tar -xf mediamtx_vX.Y.Z_darwin_amd64.tar.gz

    (Replace mediamtx_vX.Y.Z_darwin_amd64.tar.gz with the actual filename).

  3. Move MediaMTX (Optional): You can move the mediamtx executable to a more convenient location, like /usr/local/bin/:

    Bash

    sudo mv mediamtx /usr/local/bin/

  4. Run MediaMTX: Open a Terminal window and run:

    Bash

    mediamtx

Opening Firewall Ports (macOS)

macOS has a built-in firewall called pf. Here's how to open ports:

  1. Edit the pf configuration file:

    Bash

    sudo nano /etc/pf.conf

  2. Add the following lines to the end of the file:

    pass in proto tcp from any to any port 8889
pass in proto tcp from any to any port 8554
pass in proto tcp from any to any port 1935
pass in proto tcp from any to any port 8888
pass in proto tcp from any to any port 80
pass in proto tcp from any to any port 44

  3. Save the file and exit the editor (Ctrl+X, then Y, then Enter).

  4. Load the new pf rules:

    Bash

    sudo pfctl -f /etc/pf.conf

  5. Enable pf:

    Bash

    sudo pfctl -e

Allowing connections through your router's firewall

You may need to manually forward ports 8889, 8554, 1935, 8888, 80, 443 to the IP address of your local PC. You will need to refer to your router's documentation on how to do this, as this process will vary based on make and model.

Integrating MediaMTX with VDO.Ninja

Now that your MediaMTX server is up and running, it's time to integrate it with VDO.Ninja.

Understanding the Logic

VDO.Ninja uses the &mediamtx parameter to connect to your MediaMTX server. Here's how it works:

  1. &mediamtx Parameter: When a guest joins a VDO.Ninja room with the &mediamtx parameter in their URL, VDO.Ninja interprets it as the address of your MediaMTX server.
  2. WHIP Output: VDO.Ninja automatically constructs the WHIP (WebRTC-HTTP ingestion Protocol) endpoint based on the &mediamtx value and the stream ID. The guest's browser will publish their stream to this WHIP endpoint on your MediaMTX server.
  3. WHEP URL Sharing: The guest's browser shares the WHEP (WebRTC-HTTP Egress Protocol) URL of their stream (also hosted on your MediaMTX server) with other participants in the VDO.Ninja room via the data channel.
  4. WHEP Playback: Viewers in the VDO.Ninja room receive the WHEP URL and use it to play the stream from the MediaMTX server instead of directly from the guest via a peer-to-peer connection.\

Using the &mediamtx Parameter in VDO.Ninja: A Simple Guide

The &mediamtx parameter is your key to connecting VDO.Ninja with your MediaMTX server, allowing you to create a scalable and efficient streaming setup. Here's how you use it and what you need to know:

What it Does

The &mediamtx parameter tells VDO.Ninja where your MediaMTX server is located. When a guest joins your VDO.Ninja room with this parameter, their browser will send their video and audio stream directly to your MediaMTX server instead of relying solely on peer-to-peer connections. Your MediaMTX server then handles distributing the stream to viewers.

How to Use It

You add the &mediamtx parameter to the end of the VDO.Ninja guest invite link, followed by the address of your MediaMTX server.

Formatting Options

Here's the breakdown of how to format the &mediamtx value:

  1. Basic Domain Name:
    • Format: &mediamtx=yourdomain.com
    • What it does: If you provide just a domain name (without http:// or https:// and without a port number), VDO.Ninja makes the following assumptions:
      • It assumes you want to use HTTPS (secure connection).
      • It assumes your MediaMTX server is running on the standard HTTPS port for WHIP/WHEP, which is 8889.
      • It assumes the top level domain is .com if you do not specify it. &mediamtx=mymediatxserver will be treated as &mediamtx=mymediatxserver.com.
    • Example: &mediamtx=mymediaserver.com will connect to https://mymediaserver.com:8889/.
    • Recommendation: This is the simplest and recommended way if you've set up your domain with HTTPS and are using the default WHIP/WHEP port (8889).
  2. Domain Name with Different Top-Level Domain:
    • Format: &mediamtx=yourdomain.xyz (or any other valid TLD)
    • What it does: Similar to the basic format, but allows you to specify a different top-level domain.
      • Assumes HTTPS.
      • Assumes the standard WHIP/WHEP port 8889.
    • Example: &mediamtx=stream.live will connect to https://stream.live:8889/.
  3. Specifying a Port:
    • Format: &mediamtx=yourdomain.com:port
    • What it does: If your MediaMTX server is running on a port other than 8889 for WHIP/WHEP, you need to specify it.
      • Assumes HTTPS if not specified.
    • Example: &mediamtx=yourdomain.com:8890 will connect to https://yourdomain.com:8890/.
  4. Specifying HTTP or HTTPS:
    • Format: &mediamtx=http://yourdomain.com or &mediamtx=https://yourdomain.com
    • What it does: You can explicitly specify whether to use HTTP or HTTPS.
    • Example: &mediamtx=http://yourdomain.com:8889 will connect to http://yourdomain.com:8889/.
    • Recommendation: Always prefer HTTPS for security.
  5. Using an IP Address:
    • Format: &mediamtx=123.45.67.89 or &mediamtx=123.45.67.89:port
    • What it does: You can use your server's IP address instead of a domain name.
      • Assumes HTTPS and port 8889 if not specified.
    • Example: &mediamtx=192.168.1.100:8890 will connect to https://192.168.1.100:8890/.
    • Note: Using IP addresses directly is generally not recommended for production because you cannot get a typically trusted SSL certificate without a domain name. If you do use an IP address, consider specifying the port, and configuring HTTPS via Mediamtx's automatic SSL generation.
  6. Using localhost (for local testing):
    • Format: &mediamtx=localhost or &mediamtx=localhost:port
    • What it does: If you're testing MediaMTX locally on your own computer, you can use localhost.
      • Assumes HTTP and port 8889 if not specified.
    • Example: &mediamtx=localhost:8890 will connect to http://localhost:8890/.

Important Notes

  • HTTPS is Highly Recommended: Always strive to use HTTPS for secure communication. WebRTC often requires HTTPS in many browsers.
  • Default Port: If you don't specify a port, VDO.Ninja assumes the default WHIP/WHEP port for MediaMTX, which is 8889.
  • Stream ID: VDO.Ninja automatically generates a unique stream ID for each guest. You don't need to specify this in the &mediamtx parameter.
  • Room Name: VDO.Ninja uses the room name as part of the path for WHIP/WHEP on the MediaMTX server.

Summary Table

Format Assumed Protocol Assumed Port Notes
yourdomain.com HTTPS 8889 Assumes .com TLD. Simplest and recommended if using HTTPS and default port.
yourdomain.xyz HTTPS 8889 Allows for specifying a different TLD.
yourdomain.com:port HTTPS Specified Use if your MediaMTX WHIP/WHEP server is on a non-default port.
http://yourdomain.com HTTP 8889 Explicitly uses HTTP. Not recommended for production.
https://yourdomain.com HTTPS 8889 Explicitly uses HTTPS. Recommended.
123.45.67.89 HTTPS 8889 Uses IP address. Assumes HTTPS and default port. Less ideal for production due to SSL limitations.
123.45.67.89:port HTTPS Specified Uses IP address with a specific port. Consider specifying HTTPS if needed, and configuring SSL via Mediamtx's automatic SSL generation.
localhost HTTP 8889 For local testing only. Assumes HTTP and default port.
localhost:port HTTP Specified For local testing with a specific port.

By following these guidelines, you can correctly format the &mediamtx parameter and ensure that your VDO.Ninja guests connect seamlessly to your MediaMTX server. Remember that using a domain name with HTTPS is the most secure and user-friendly approach for most scenarios.

Usage Example

Here's a step-by-step example of how to use MediaMTX with VDO.Ninja:

  1. Guest URL: A guest joining a VDO.Ninja room would use a URL like this:

    https://vdo.ninja/?room=YourRoomName&mediamtx=yourdomain.com

    or

    https://vdo.ninja/?room=YourRoomName&mediamtx=your_server_ip:8889

    Replace YourRoomName with your actual room name, yourdomain.com with your domain name, or your_server_ip with your server's IP address. If you haven't set up a domain, just use the IP.

  2. Director's View: The director (or other viewers) can view the stream as usual in the VDO.Ninja room. They don't need to add any special parameters to their URL. VDO.Ninja will automatically handle the playback from the MediaMTX server.

  3. Direct WHEP Playback (Optional): If you want to play the stream directly from the MediaMTX server (outside of VDO.Ninja), you can use the WHEP URL. It will look like this:

    https://yourdomain.com:8889/YourRoomName/YourStreamID/whep

    or

    https://your_server_ip:8889/YourRoomName/YourStreamID/whep

    You can obtain YourStreamID from the VDO.Ninja interface or the URL of the guest's browser window.

    You may need to provide this URL manually if you want to play the stream in a separate player that supports WHEP.

Configuration Tips

  • Audio: If you want to ensure stereo audio, even when using MediaMTX, you might need to use the &stereo parameter in the guest's URL. The code you provided suggests that setting session.stereo=3 might force stereo, but you'll need to confirm this behavior.
  • Stream ID: The streamID in the WHIP/WHEP URLs is automatically generated by VDO.Ninja. It's usually a random string. You can find the stream ID in the guest's VDO.Ninja URL or in the VDO.Ninja interface.
  • Security:
    • HTTPS: Always use HTTPS (SSL) for your MediaMTX server to protect the stream and user data.
    • Authentication: Consider configuring authentication for your MediaMTX server if you need to restrict access to your streams. Refer to the MediaMTX documentation for details on how to set up authentication.
  • Performance:
    • Server Resources: Monitor your server's CPU, memory, and bandwidth usage to ensure it can handle the load. Upgrade your server if necessary.
    • Network Latency: Choose a server location that's geographically close to your audience to minimize latency.
    • Bitrate: Adjust the bitrate of your stream in VDO.Ninja based on your available bandwidth and the desired quality.
  • Troubleshooting:
    • Firewall: Double-check that your firewall (both on the server and your local machine if testing locally) is configured to allow the necessary ports.
    • Domain Propagation: If you're using a domain name, make sure the DNS records have fully propagated.
    • MediaMTX Logs: Check the MediaMTX logs for any errors or warnings.
    • Browser Console: Use your browser's developer console (usually by pressing F12) to look for any errors related to WebRTC or network requests.

Conclusion

Deploying MediaMTX and integrating it with VDO.Ninja provides a powerful and scalable solution for broadcasting to larger audiences. By offloading the stream distribution to a dedicated server, you can significantly improve the performance and stability of your VDO.Ninja streams.

This guide has covered the essential steps for setting up MediaMTX on Linux, Windows, and macOS, including VPS deployment, domain name configuration, HTTPS setup, and firewall configuration. It has also explained how to use the &mediamtx parameter in VDO.Ninja to connect to your MediaMTX server and leverage its capabilities.

Remember to tailor the configuration to your specific needs and environment. Monitor your server's performance and adjust settings as necessary to ensure a smooth and high-quality streaming experience for your viewers. With a little bit of setup, you can take your VDO.Ninja broadcasts to the next level with the power of MediaMTX!

description: >- There are numerous free URL management tools to make using VDO.Ninja even more flexible

How to edit an invite after sending it

You can use services like https://short.io to create aliases of your invite links, leveraging those service platforms to also keep track of invites you have sent out, how many times they have been opened, and also change the VDO.Ninja settings contained in the invite after sending it.

VDO.Ninja lets you move guests between room and change the URL of a guest after they have connected, but it doesn't offer services itself that let you change the URL before the user has connected.

(1) (1) (1).png>)

{% hint style="info" %} I have no relation to Short.io; it's just what service I happen to use. There are plenty of other options out there. {% endhint %}

description: Publishing from OBS Studio to VDO.Ninja using WHIP

From OBS to VDO.Ninja using WHIP

OBS Studio v30 now has WHIP output support, which means that you can stream directly to VDO.Ninja without a browser or other software.

While there are a few serious limitations with OBS's current WHIP implementation, when used with VDO.Ninja it still offers a great way to stream from one computer to another, on the same LAN, while minimizing CPU overhead and latency.

Prerequisites

Steps

  1. Prepare VDO.Ninja
    • Make up a unique stream token (e.g., STREAMTOKEN123)
    • Create your VDO.Ninja link: https://vdo.ninja/?whip=STREAMTOKEN123
    • Open this link in a web browser on the receiving end
  2. Configure OBS Studio
    • Open OBS Studio
    • Go to Settings > Stream
    • Select "WHIP" as the service
    • For the server, enter: https://whip.vdo.ninja
    • For the Stream Key, enter your unique stream token (STREAMTOKEN123)
  3. Choose Encoding Settings
    • In OBS, go to Settings > Output
    • Select your preferred encoder:
      • Software (x264) for H.264
      • NVIDIA NVENC for H.264 (if you have an NVIDIA GPU)
      • AMD AMF for H.264 (if you have an AMD GPU)
      • AV1 (if supported by your hardware and OBS version)
    • Set your desired bitrate (e.g., 2500-6000 Kbps for 1080p)
  4. Go Live
    • In OBS, click "Start Streaming"
    • The stream should appear automatically in the opened VDO.Ninja window

{% hint style="info" %} The stream token you give to OBS is the stream ID you specified in VDO.Ninja. {% endhint %}

Example setup for OBS to VDO

Encoder options that can offer smooth playback

Some H264 settings that have reported offered good results are the following:

  • Rate Control: CRF
  • CRF: 23
  • Keyframe Interval: 1s
  • Preset: Veryfast
  • Profile: High
  • Tune: Fastdecode (required for WebRTC playback)
  • x264 Options: bframes=0 (required for WebRTC playback)

In some cases, adding &buffer=2500 to the VDO.Ninja view link can further help reduce any lost of skipped frames, but at the cost of increased latency.

Additional Notes

  • Codec Choice:
    • H.264 is widely supported and offers good quality/compression balance
    • AV1 provides better compression but requires more processing power and may not be supported on all devices
  • Network Considerations:
    • OBS Studio's WHIP implementation doesn't support STUN (NAT traversal)
    • The receiving computer must be on the same LAN or accessible via a public IP without firewall restrictions
    • You can use the patched version of OBS to work around this issue for now, until the official OBS is updated with full support.
  • Troubleshooting:
    • If the stream doesn't appear, check your firewall settings
    • Ensure both OBS and VDO.Ninja are using the same stream token
    • Verify that your internet connection is stable and has sufficient upload bandwidth
  • Quality vs. Performance:
    • Lower resolutions and bitrates will reduce latency and improve stability
    • Higher resolutions and bitrates will increase quality but may introduce more delay

Remember to test your setup before any important broadcasts to ensure everything works smoothly.

Streaming WHIP over the Internet or to more than one viewer

I offer https://Meshcast.io, for free, which supports WHIP input and can broadcast to dozens of viewers online.

There's also MediaMTX, which is a self-hosted broadcasting server option that VDO.Ninja supports. Deeper integration with MediaMTX is being added to VDO.Ninja all the time.

In the future, OBS should be able to support 1 to 1 over the Internet, despite firewalls, with VDO.Ninja, in a peer to peer fashion. Until they officially support it, you can try my patched version of OBS that has added this support: https://backup.vdo.ninja/OBS_VDO_Ninja.zip [source]

Alternative browser-free option

If looking for alternatives to publishing into VDO.Ninja, consider checking out Raspberry.Ninja also, which supports a broad range of encoders, including AV1-AOM, Intel QuickSync, Raspberry Pis, Nvidia Jetson, and many other hardware and software options. Playback is smooth, with support for multiple viewers. Runs on most systems, including Linux and Windows for Linux Subsystem (WSL).

{% embed url="https://www.youtube.com/watch?v=ynSOE2d4Z9Y" %} Demoing OBS to VDO.Ninja via WHIP {% endembed %}

Related WHIP videos:

{% embed url="https://www.youtube.com/watch?v=_RHBsAJmfGs" %}

description: Some keyboard hotkeys

Basic hotkeys

HotkeysDescription
CTRL + MMute your mic (audio output)
CTRL + BMute your video output
SHIFT + ALT + CToggle the control bar that's normally at the bottom of the screen
CTRL + ALT + FOpen the file-sharing window
CTRL + ALT + CCycle the camera to the next camera available
CTRL + ALT + SOpen the screen-sharing window
CTRL + ALT + DEnable Draw-on-Screen
CTRL + ALT + PWill toggle the picture in picture
ALT + AWill toggle the speaker-output audio mute on/off (only usable when the browser tab is in focus)

{% hint style="info" %} On MacOS use CMD instead of CTRL {% endhint %}

When using the above keyboard short-cuts, the tab/window must be actively in focus.

When using the Electron Capture App in elevated privilege mode, the keyboard shortcuts are global.

Related

{% content-ref url="../../advanced-settings/settings-parameters/and-disablehotkeys.md" %} and-disablehotkeys.md {% endcontent-ref %}

description: Controlling VDO.Ninja with Touch Portal using API commands

How to control VDO.Ninja with Touch Portal

How to

1. Create a new room as a director, with a custom API key, so that it looks like this: https://vdo.ninja/?api=APIKEY&director=TouchPortalExample
Replacing the APIKEY with a string of your choosing.

2. Then, in Touch Portal, add a new button with the HTTP GET action. In the HTTP GET Action GET URL field, input your desired action. This particular GET action will send Guest 1 to Scene 1 with a push of the button:
https://api.vdo.ninja/APIKEY/addScene/1/1

Thanks to djlefave on Discord for this guide.

Switching the layout of a scene in OBS

https://api.vdo.ninja/APIKEY/layout/[{"x":0,"y":0,"w":50,"h":100,"c":true,"slot":0},{"x":50,"y":0,"w":50,"h":100,"c":false,"slot":1}]

(2).png>)

You can also use Touch Portal to switch the layout of &scene=0 without using the Mixer App.

https://docs.google.com/spreadsheets/d/1cHBTfni-Os3SAITsXrrNJ3qVCMVjunuW3xugvw1dykw/edit#gid=151839312

You can download this google sheet and use it to create your own layouts.

Examples and resources

For more API examples, check out these resources:
https://github.com/steveseguin/Companion-Ninja
https://companion.vdo.ninja/?api=k8eYrfvJUC

Related

{% content-ref url="../../general-settings/api.md" %} api.md {% endcontent-ref %}

How to control bitrate/quality

Video Bitrate

The bitrate controls are accessible via a URL parameter that can be added to the VIEW link.

Something like https://vdo.ninja/?view=yyyyy&bitrate=10000 will let the viewer request set a 10-mbps bitrate; up to around 20000-kbps is reasonable, but higher is possible in situations. The value is in kilobits per second and the default bitrate is 2500-kbps.

The viewer sets the bitrate generally, although you can set maximum allowed bitrates as the publisher of a stream. See the advanced settings in the wiki for more help here; there are many options available.

When in a group room, the guests will generally get a very low-quality preview of the stream. This can be changed with the &totalroombitrate parameter or via the room's director settings menu. The higher the room bitrate however, the more CPU and Network load will be placed on those in the room.

When dealing with a group scene link, you can use &bitrate as normal, or &totalbitrate. There are many other ways to control bitrates, in both rooms and push links, with these being the standard options.

Resolution

Camera resolution by default is captured at 1280x720. You can increase this by changing the quality setting when selecting your camera, or by adding &quality=0 to the URL. The &quality parameter acts as a preset, where &quality=0 is preset for 1920x1080 @ 60-fps, &quality=1 is 720p60, and &quality=2 is a gentle 360p30.

You can manually set the video resolution via the URL, using &width=1920&height=1080, and this might be helpful when dealing with non-standard aspect-ratios.

{% hint style="info" %} If using the OBS Virtual Camera as a source, be sure to activate it in OBS before trying to access it with VDO.Ninja with non-standard resolutions set. {% endhint %}

The resolution can also be set on the viewer-side via the &scale=100 parameter. This scales down the resolution, as a percentage, based on the original camera capture resolution.

By default, VDO.Ninja will try to optimize and scale down the incoming resolution to fit the viewer's window size, but sometimes you might want to disable this. Adding &scale=100 to the view link can achieve that, as it forces 100% scale, or no scaling in other words.

VDO.Ninja may still scale the video down however, although only if the connection between the two peers is having network issues, if the sender's encoder is having issues, or if the set bitrate is too low to sustain the higher resolution.

Audio

You can improve audio quality in the same way, by increasing the &audiobitrate, but you can get better results by just disabling noise and echo cancellation instead.

&proaudio is flag that presets many audio options, which can be added to both the sender's and viewer's link to enable stereo audio with no audio processing and a very high audio bitrate set. You may need to be using headphones, especially if in a group room, if using &proaudio or if disabling the echo cancellation features.

More Details

{% content-ref url="video-bitrate-for-push-view-links.md" %} video-bitrate-for-push-view-links.md {% endcontent-ref %}

{% content-ref url="video-bitrate-in-rooms.md" %} video-bitrate-in-rooms.md {% endcontent-ref %}

{% content-ref url="audio-filters.md" %} audio-filters.md {% endcontent-ref %}

How to control PowerPoint remotely with VDO.Ninja

Overview

Support for remote PowerPoint slide control. (previous/next slide):

  • Documented things quite a bit here: https://github.com/steveseguin/powerpoint_remote
  • I've only tested with Windows + PowerPoint so far, but it can be tweaked to work with more than PPT without much trouble
  • Uses AutoHotKey + VDO.Ninja + MIDI to achieve the result; quite a few different ways implement it, with samples provided
  • Built-in basic controller added, via &powerpoint (aliases: &slides, &ppt, &pptcontrols)
  • IFrame sample app provided with larger buttons and sample code to add more custom buttons/actions if needed. (start/stop/etc): https://vdo.ninja/examples/powerpoint
  • HTTP / WSS remote control also added; https://api.vdo.ninja/YOURAPIKEY/nextSlide and prevSlide
  • Local Streamdeck support also working, via MIDI

YouTube Tutorial

{% embed url="https://youtu.be/ORH8betTt8Y" %} Remote control PowerPoint with VDO.Ninja {% endembed %}

Images

&powerpoint as a URL parameter

Remote PowerPoint Web control via VDO.Ninja (IFrame API)

description: Newer iOS devices can support 1080p60 output in some cases

How to get iPhones to output 1080p Videos

iPhones 12 and newer, running higher than iOS 16.0, and with the rear camera selected, can access 1080p60 video output in VDO.Ninja. This was tested last with Safari on an iPhone 12 Pro, running iOS 16.2 on VDO.Ninja v23. (May 5th 2023)

The actual frame rate of the video that the viewer receives may be lower than the 60 or 30-fps capture rate. It may end up ranging from 20-fps to 45-fps. As a result, limiting the capture frame rate of the device to 30-fps, such as with &maxframerate=30, may help offer more stable frame rates, even if limited to 30-fps. So, 1080p30 may be preferable to 1080p60 in some cases.

Keep in mind, high motion and highly detailed scenes may also require higher bitrates; the default VDO.Ninja encoding bitrate is just barely suitable for stationary talking heads at 1080p60, but increasing the video bitrate to 4000-kbps, up to as high as 20000-kbps, may help.

1080p60 seems to work with H264 video encoding (default) and even VP9 video encoding, if enabled. On a side note, H265 (HEVC) may work Safari to Safari, but it is untested at present and may only work in highly controlled situations. The state of AV1 support though is quickly changing, and may be supported by iPhones in the near future. Both these newer codec options may be quite useful for when 4K streaming becomes more common.

As for older devices, iPhone 11 and older, they may only be able to achieve 1080p30 or 720p60 capture, assuming they are running iOS 16 and up. The front and rear cameras may achieve different frame rates or resolutions, depending on the device. You may need to experiment to find what works best for you specific iOS device, though such as if using an iPhone SE or iPad.

If selecting 1080p60, but getting 720p60, that may be the result of the device defaulting to 720p60 rather than 1080p30. Using &maxframerate=30&quality=0, you might be able to to achieve 1080p30 instead.

For example, front facing cameras on an iPhone 6S might be able to achieve 720p60, but the rear camera may achieve 1080p30 max. Trying to force 1080p60 on the iPhone 6S may result in a lower resolution being actually selected, or an error message may appear.

Older versions of VDO.Ninja (v22 and older), and some specific iOS device models, may need some custom URL tweaking to get the maximum available resolution / frame rate.

For devices running older iOS versions, see below:

You can force 1080p on many iPhones, but you then need to use &codec=vp8 also then on older iOS versions.

for example:

https://vdo.ninja/?push=streamid&width=1920&height=1080

and:

https://vdo.ninja/?view=streamid&codec=vp8&videobitrate=6000

Older iOS versions do not support h264 at resolutions higher than 720p30.

If you use VP8 though, you will be using the software-based encoder, which will make the iPhone pretty warm/hot. It also only works only on newer iOS versions (iOS 14, for example).

In newer versions of iOS , it's possible to do 1080p60 with H264 encoding, but only under specific circumstances.

description: >- Guest invites can be configured to ensure guests join with the same stream ID every time they join, allowing for reusable view- and solo-links.

How to get permanent links

If you connect with the &push=xxxx URL parameter set, you essentially are telling the system what you want the 'view=' ID to be. In this case, it would be xxxx. This value is referred to as the "stream ID".

As long as the stream ID is not already in use, you can use it to identify the stream you or a guest is publishing with. In so doing, you can ensure you always connect with the same stream ID, making subsequent view- and solo- links reusable.

Refreshing vs Rejoining

If a guest joins a room without the &push value set in advanced, their URL will update to include a randomly generated &push value once they start streaming. So, if a guest refreshes their page once they start streaming, they will rejoin with the same stream ID, as the stream ID will be embedded in the URL at that point.

However, if a guest re-joins the room using the original invite link, which didn't have a &push value included in it, they will be assigned a new &push value once they rejoin.

It's important to note as well that you should not copy and share your VDO.Ninja URL after you've already started streaming, as your URL will contain your unique stream ID at that point. Share the original invite link instead, or modify the URL so it includes a different and unique stream ID to avoid conflicts.

How to set a custom stream ID

A &push ID can be up to around 40-characters in length, using alphanumeric characters, and it can be pretty much anything you want to make up. You don't need to register anything; it just needs to be unique, and preferably, random enough so that it is secure from others also picking the same value.

While you can use a name as a stream ID, it's not very secure to do so. Instead, you can label your streams with &label to make it easier to identify. &showlabels will then show those labels via a video overlay if you want as well.

Auto-remember the last user stream ID

You can also use &permaid on a guest invite link, which will save the randomly generated stream ID to the guest's local browser storage. Every time they rejoin, their stream ID kept in local storage will be reused. With this approach, you do not need to set a stream ID ahead of time, and as long as the guest doesn't clear their cache, change computers, or use a different browser, the stream ID won't change.

Using several scenes, one per guest

Another option is to not use stream IDs at all to specify a video to load into OBS, etc. Instead, you can use custom scenes. Scene 1, S2, S3, etc. When a guest joins a room, you can simply assign the guest to a specific scene, and that scene link in OBS would be unchanging. Guests would not automatically be assigned to a scene, so you'd need to manually do that, but you don't need to update any URL in OBS with this approach.

Using the Mixer app and slots

Like the above, you can also use the VDO.Ninja Mixer App (https://vdo.ninja/mixer) to have custom layouts, with "slots", and you can assign guests as they join to certain slots. You can have the system auto-assign guests to the first available slot also, or manually do so.

Also in this auto-assign mode, you can assign a guest a slot via their URL, and if that slot is available when they join, you can have them join it automatically rather than the first available slot.

View specific slots without custom layouts

For those wanting to avoid creating custom layouts or having to use the mixer app, &viewslot can be used on a scene link to show only the guest who is assigned that specific slot. You can use &slotsmode on the director's URL to show the slot options, or you can just use the mixer app.

Other options

There are perhaps other ways of doing this as all as well, but for most users, specifying a custom stream ID for each guest is recommended. The use of a spreadsheet to keep track of invites for guests is a great way to manage this, and with the use of URL forwarding services, like short.io, you can also change a guest's VDO.Ninja invite link retroactively, via the shortening service.

How to mirror a video while Full-Screen - For iPads and Teleprompters

To get a video to mirror while full-screened, you have a few options.

One is to just full screen the browser itself; F11 on most desktops. The video itself may not be fullscreen, but the browser will be and should be pretty close to perfect. Adding &hideheader can hide any menu bars, if there are any.

Another option that is undergoing experimental testing as of Sept 23rd 2020 is to use the &effects option, with &effects=2 applying a mirrored effect to the video before publishing the video.

Push Link
https://vdo.ninja/?push=SOMESTREAMID&effects=2

View Link
https://vdo.ninja/?view=SOMESTREAMID

So by adding &effects=2, the video will be mirrored in a way that can be full screened. There are some limitations with this approach still, but I'm curious to get your feedback.

description: Restarting Winsock on Windows

How to restart your winsock

When troubleshooting network issues on Windows, one common step is to reset Winsock (Windows Sockets API).

This can fix problems caused by corrupted network configuration, malware, or software conflicts. It can also be caused by ISPs that enforce content filtering or DPI (Deep Packet Inspection) that interacts badly with VPN/proxy drivers.

⚠️ Before You Begin

  • You need Administrator privileges.
  • Resetting Winsock will remove all custom Layered Service Providers (LSPs).
    If you use VPN software, firewalls, or proxy clients, you may need to reinstall or reconfigure them afterward.
  • Always consider restarting your computer after making changes.

Step 1: Open Command Prompt as Administrator

  1. Press Win + S, type cmd.
  2. Right-click Command Prompt and select Run as administrator.

Step 2: Reset Winsock

Run the following command:

netsh winsock reset

You should see output similar to:

Successfully reset the Winsock Catalog.
You must restart the computer in order to complete the reset.

Step 3: Restart Your Computer

To apply the reset, restart your computer:

shutdown /r /t 0

Step 4: (Optional) Reset TCP/IP Stack

If you continue having issues, also reset the TCP/IP stack:

netsh int ip reset

Step 5: Verify

After reboot:

  • Test connectivity with ping google.com.
  • Use ipconfig /all to confirm network adapter settings.
  • Confirm that applications relying on network sockets (e.g., browsers, chat tools) are working properly.

Quick Reference

Action Command
Reset Winsock netsh winsock reset
Reset TCP/IP stack netsh int ip reset
Restart immediately shutdown /r /t 0
Verify adapter configuration ipconfig /all
Test network connection ping google.com

When to Use

  • After malware removal
  • If network apps fail to connect
  • If DNS or socket errors persist
  • When VPN/proxy software breaks connectivity

✅ That’s it! Winsock should now be reset and your network connection refreshed.

description: >- There's a few ways currently to limit or control access to a VDO.Ninja link or room. More ways will be added in the future.

How to selectively allow access

  • One way to limit who can view your stream is with the &prompt option. Essentially, it will ask the publisher of a stream if they wish to allow a certain viewer to connect.

    Details here:

{% content-ref url="../advanced-settings/settings-parameters/and-prompt.md" %} and-prompt.md {% endcontent-ref %}

  • Another option is to use the transfer room function, as a director. So, invited guests join a public lobby room, and then you can transfer them from that public room to a private secret room with the director's transfer button. Since only the director knows which room the guest is transferred to, the guest can't invite others to the secret room, nor can they rejoin once they disconnect or get kicked.
    A further benefit of the transfer room method is that the director can pre-screen guests by observing their webcam and audio stream, rather than relying on just a label name.
  • Another option is to use &maxconnections, limiting the number of connections to something low, like 1, can be sometimes useful in ensuring there is only one viewer for a simple push stream.
  • Obviously VDO.Ninja also has &password support, and that can be useful to have back to back guests in a room, where you simply need to change the password to switch to another guest with matching password. Room names can be all the same, since it's the password AND the room name that create a room's uniqueness.
  • Another option is to use Cloudflare's Zero Trust service, which can be used with a self-hosted version of VDO.Ninja. When a user tries to join with an invite link in this setup, Cloudflare's service will prompt them to sign in first, blocking access to the site. Only users signing in with an approved location, IP address, domain, or email can continue.
  • There are additional link-shortner services with password and user-access controls, which can be used to mask an invite-link for VDO.Ninja, and limit who can acess the real link that way. These services can be dynamically updated, allowing you to change the VDO.Ninja invite link after sending out the shortened alias link, and even changing the user-access allowances.
  • There are also services designed for queue or user lobby management, which can be used to on-the-fly redirect a selected user to a VDO.Ninja link. https://app.invite.cam is such a service being developed by the developers of VDO.Ninja for such a purpose, although it is still in a young state of development.

More options for user control will be added to VDO.Ninja in the future. Feedback can be provided via the Discord server (https://discord.vdo.ninja) in the #feature-request channel.\

How to send the audio/video output of one OBS to another OBS using VDO.Ninja

In this walk-through we demonstrate how to use VDO.Ninja to stream a low-latency video/audio stream from one OBS Studio to another remote OBS Studio.

{% embed url="https://youtu.be/Ze1q6Qof2r0" %}

Requirements

Basic Workflow Diagram

Please find below a diagram explaining the basic premise of what we are intending to do in this guide. We will go through it all, one step at a time.

Step 0.

This guide assumes you have OBS installed, along with the other required software, though we shall briefly cover these initial installation steps now.

  1. Install OBS Studio (or StreamLabs, etc)
    https://github.com/obsproject/obs-studio/releases/
  2. Install the VB-Cable Virtual Audio device.
    https://vb-audio.com/Cable/

If you are on Mac, you can consider Loopback as a premium alternative option, if having problems.

Step 1

We now need to create a virtual webcam so we can connect OBS to VDO.Ninja. If we followed the initial software setup of Step 0 correctly, this should be all smooth sailing.

Just press START VIRTUAL CAM in OBS v26 or newer.

Step 2

We will now configure OBS to output audio from the Browser Source to the Virtual Audio Cable. In the OBS settings, under Advanced, we select the Monitoring Device to be our Virtual Audio device. (CABLE Input).

We also want to disable Windows audio ducking.

Step 3

In our last configuration step, we want to go into the Advanced Audio Properties in OBS. When there, we want to set up the Audio Monitoring setting to have any audio we want pushed to the Virtual Audio Cable to be set to MONITOR AND OUTPUT.

Step 4

We’re ready to now create our VDO.Ninja stream.

There are many ways to do this, but the EASIEST way is to go to VDO.Ninja, click Add your Camera to OBS, and select from the options OBS Virtualcam. This option will set you up with the default settings, such as with audio echo-cancellation on, although you can use URL parameters when visiting VDO.Ninja to customize the settings more.

{% hint style="info" %} A popular advanced URL option at this point might be with the stereo flag, so visit https://vdo.ninja/?stereo instead of just https://vdo.ninja. You can also set your own custom stream ID values, so https://vdo.ninja/?push=myCustomStreamId123, and then give your remote OBS user the link https://vdo.ninja/?view=myCustomStreamId123 {% endhint %}

Step 5

You can select the Virtual Audio Cable from the audio choices, or instead, you can select your local microphone or multiple audio input sources.

VDO.Ninja will auto-mix if more than one option is selected. Hold CTRL (or command) to select more than one option.

Step 6

Press the green button when ready.

You’ll see a preview of your video stream and a link. This link is what we want to send to our remote OBS studio as an input source.

We can modify this link if we wish to have higher bitrates, for example, https://vdo.ninja/?view=streamID&videobitrate=20000 to set a target video bitrate of 20-mbps.

Step 7

We send this VDO.Ninja view URL to our remote OBS Studio computer and now we use it to ingest the feed into the OBS there.

To do this, we create a scene and then a Browser Source in OBS. Give it a name and we will fill out the details in the next step.

\

Step 8

In the properties for the Browser Source, we need to fill out a few fields and then hit OK.

  • The URL needs to be set to the address we created earlier, i.e.: https://vdo.ninja/?view=q3QCScW
  • Width needs to match the input video resolution, so likely 1280
  • The height also needs to match, so likely 720
  • Control audio via OBS should be checked, for audio capture to function

SECRET TIP: Some links on VDO.Ninja can be dragged and dropped directly into OBS, avoiding the tedious parts of this step.

Step 9

Once you hit OK, the video should appear and auto-play within seconds. There should be no audio feedback if you selected the Control audio via OBS option.

Now we just need to stretch the video to fill the full scene. It should snap into place when full.

All done! And that should be it! Problems?

You can also ask for help on Discord; usually help can be provided within minutes, if not usually within half a day.

WHIP Output

Newer versions of OBS may also support WHIP output, which VDO.Ninja also supports. While the Virtual Camera might be the better option for many, details on WHIP are here.

How to set up a simple chat room

Link

With this link you can set up a simple room to chat with friends:
https://vdo.ninja/?room=SOMEROOMNAME&audiodevice=0&videodevice=0&chatbutton&cleanoutput&label

Alias:
https://vdo.ninja/?r=SOMEROOMNAME&ad=0&vd=0&cb&clean&l

Copy one of the two links above and change SOMEROOMNAME into a different name.

Explanation

Parameter Explanation
&room=SOMEROOMNAME Creates a room with a specified room name
&audiodevice=0 Join with no audio input
&videodevice=0 Join with no camera
&chatbutton Shows the chat button
&cleanoutput Keeps the room as clean as possible from UI elements
&label Asks for a name when joining the room

(2).png>)

description: Window sharing into Zoom with the Electron Capture app

How to stream into Zoom without OBS

This guide will let you stream video from VDO.Ninja into Zoom as a window share (screen share).

Window sharing into Zoom allows for higher quality video into Zoom, but it may also result in lower frame rates. In this guide, we will assume you are using a VDO.Ninja group room with the desire to share a group scene with Zoom. Sharing a group scene is not required though.

We will be using some software to make window sharing into Zoom more effective and clean. It is technically optionally.

Alternative approach for sharing video into Zoom

There is another guide for publishing from VDO.Ninja into Zoom using OBS Studio, which will have the video appear as a webcam in Zoom. As a webcam source, the video will be smooth, but the resolution will be relatively low.

Check out that guide below:

{% content-ref url="use-vdo.ninja-as-a-webcam-for-google-hangouts-zoom-and-more.md" %} use-vdo.ninja-as-a-webcam-for-google-hangouts-zoom-and-more.md {% endcontent-ref %}

Let's get started

Step 1.

Go to https://vdo.ninja/

Step 2.

Click the Add Group Chat to OBS button.

If we were looking to just share our camera, and not a group scene, we could instead just use "Add your Camera to OBS". This guide will assume you are using a group scene though.

Step 3.

Enter a room name.

Also, check "The director will be performing as well..", so that we can add our local camera and microphone to Zoom as well, if desired.

Then click the Enter the Room’s control Center. We should then enter the “director’s control center”.

Step 4.

In the director's control center, click the COPY LINK button for the GUEST INVITE box.

We want to send this link to our guests. The can use this link to JOIN the room with their camera.

If we want to join the room ourselves, we can also join as a guest, or we can do so as the director. Since our camera might be in use by Zoom currently, we can add ourselves a bit later on instead

Step 5.

As guests join the room, they will see each other and be able to talk to each other.

The director of the room will also see each guest in the control center as they join.

Step 6.

If we copy the CAPTURE A SCENE LINK in the director's room, and we open it in a new Chrome tab, we should be able to see all the guests in the room on that page.

We can technically screen share this browser tab into Zoom, especially if we joined Zoom via Chrome also. We will continue this guide assuming you want to share into Zoom via the Electron Capture app however, which offers some performance advantages.

Since we will be using the Electron Capture app instead, we can close the scene link page in our browser after we validated that it works. We will however still use the link we copied in an upcoming step.

Step 7.

Next, we download the Electron Capture app – https://github.com/steveseguin/electroncapture/releases (free)

The Electron Capture will let us share our video into Zoom without any borders and allow us to capture the audio. It also is optimized in resolution for maximum quality transfer from VDO.Ninja to Zoom.

Step 8.

While it might be possible to capture audio another way, in this guide we will also use a Virtual Audio Cable application to bring the audio into Zoom.

Download and install VB Cable for Windows or macOS - https://vb-audio.com/cable (Donationware).

{% hint style="info" %} Tip: When installing VB Cable, on PC, you will want to extract the files, and run the installer in administrator mode. {% endhint %}

Step 9.

Open the Electron Capture app.

We now can put our GROUP SCENE link in Electron Capture's top input field.

The AUDIO OUTPUT DESTINATION needs to point to the Virtual Audio Cable.

Once ready, press GO to load our VDO.Ninja video.

Step 10.

All the audio should be sent to VB Cable, so you won't hear anything if setup correctly.

While you can resize the Electron Capture app, it's best to run it at 1280x720, which is the default resolution. You can change resolutions by right-clicking the app, along enabling other options, such as pinning the app on top of all others.

The top ~ 5% of the app is draggable, so you click on its top and move it around. The app is frameless, so when window-sharing it into Zoom, the output is clean and exactly 720p resolution.

Step 11.

To share the video with Zoom, we screen share within Zoom, selecting the the Electron Capture app as the window we want to share.

Step 12.

To share our Audio with Zoom, we change our MICROPHONE source in Zoom to be the VB Audio Cable.

Step 13.

Lastly, in Zoom, we ensure the ORIGINAL AUDIO SOURCE option (no echo cancellation), so we can capture the best audio quality possible.

Step 14.

We can close the director's room if want to at this point, however keeping it open gives you control over the room, allowing you to kick and mute guests as needed.

If we want to include our own microphone and video to the stream, we can also do so via the Director's control center, clicking "enable director's microphone or video" button. We can select our microphone/video that way.

If we do close the director's control center though, we can still add our audio and video to the stream by joining the room as a guest, using the guest invite link we looked at previously.

Need help?

If stuck, join our Discord support server at https://discord.vdo.ninja.

More information

More on the ROOM here:

Getting started: The Room (VDO Ninja Podcast ep02)

More on Advanced settings here:

Getting started: Power Parameters (VDO Ninja Podcast ep06)

description: >- Sending video with a transparent background, or with an alpha-channel (RGBA), is possible, but rather limited at the moment

How to stream transparent video

If you wanted to stream yourself with a transparent background, or use a WebM file as a transparent effects overlay, it's possible with VDO.Ninja, however a bit limited still.

There's not many ways to bring transparent sources into the browser, nor are there many ways current to stream transparent video.

Lets list some of the methods that do work however:

Webp-mode supports transparency

&webp mode send webp images, which supports transparencies, instead of streaming video, which current does not support transparencies. It does however require quite a bit of CPU and network bandwidth, so its recommend to use low frame rates and low resolutions to avoid problems.

Sending a video file via webp-mode

With this option, you can select a video file locally that contains a transparent background. WebM file formats support transparent backgrounds and can be opened by the browser.

&webp mode supports transparency as noted, so we need to include that on the sender link. We also need to include &alpha, to tell the system that we want to include alpha channels (transparency), if possible.

https://vdo.ninja/alpha/?webp&push=rPJ5bEb&fileshare&alpha

On the viewer side, we can add &codec=webp to tell the system we want to pull the video stream as a webp series of images, rather than normal video. Images will transparencies will automatically include them in the display.

https://vdo.ninja/alpha/?view=rPJ5bEb&codec=webp

Transparent webcam background via webp-mode

As with the above example, you can also send a webcam feed of a person, with their background removed.

Like above, we need to include &alpha and &webp, but we also need need to include &effects=5.

The goal here is to remove the background using the VDO.Ninja background removal tool, and then use a transparent image as the background, instead of a normal virtual background image. In the link below, we include a transparent pixel in the URL, so no external file is needed.

https://vdo.ninja/alpha/?webp&push=rPJ5bEb&effects=5&alpha&webcam&imagelist=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII%3D

And like before, to view this stream with transparencies, we need to include &codec=webp on the view link.

https://vdo.ninja/alpha/?view=rPJ5bEb&codec=webp

This option is highly CPU intensive though; I'd recommend at least a fast 8-core system for this option, as you are doing both AI and heavy image processing workloads.

Green screening

As with the above option, you can use the digital background effect (&effects=4, in this case) to replace your background in VDO.Ninja with a green solid color.

If using an application like OBS or vMix, during playback of the stream you can use a Chroma filter to remove the green background.

This option is pretty standard, and since it streams actual video instead of motion images, you can reduce CPU load, network bandwidth usage, maintain high frame rates, and achieve higher resolutions. There might be some green fringing on the final result, but there are ways to reduce that effect.

(1) (1) (1) (1) (1) (1) (1) (1) (1).png>)

Another benefit of green screening is you can use an actual physical green screen as well. And this would work without needing AI effects and it would work on anything; not just a person.

When green screening, since color is so important, try using &codec=av1 as well on the playback view link, as the AV1 codec tends to preserve colors better than &codec=h264 or &codec=vp8, which are normally the defaults. With better colors, it should be easier to chroma-key out the green.

Chunked mode - partially working

VDO.Ninja has a mode called Chunked, which can be activated on Chromium browsers by adding &chunked to the push URL.

When also used with &alpha, i.e.:

https://vdo.ninja/alpha/?chunked&alpha

it will tell the browser to only select video codecs that can encode alpha channels. Normal WebRTC video streaming doesn't support alpha channels, but the chunked mode does. However, if no codec is available in your browser with alpha-channel support, then the chunked mode will fail or default back to a codec that doesn't support alpha channels.

At present, no codecs in Chrome seem to support alpha channels, but when that changes the feature will be automatically available for us.

Not many transparent sources

At present, virtual cameras and screen shares are likely to not include alpha channels, so while you might try to screen share the Electron Capture app, which has a transparent background, you'll still have the captured video having a black background.

I'm hoping this isn't the case in the future with Chrome and other Chromium browsers, but I'm not entirely sure.

Raspberry.Ninja and OBS WHIP output - future possiblities

I've not really sure about this, but you can force video into Raspberry.Ninja, with transparent backgrounds, and VDO.Ninja will play them back. In my previous testing, Chrome refused to play back transparent video streams from Raspberry.Ninja with transparencies, dropping them for black backgrounds instead, but this might change in the future.

If this does change, you might then be able to use OBS as well for streaming transparent video to VDO.Ninja. Or perhaps you'll be able to go from Raspberry.Ninja into OBS via WHEP at some point, but these are all not yet available and are likely years away from being materialized.

description: How to embed VDO.Ninja into your own website with the IFRAME API

How to embed VDO.Ninja into a site with iFrames

VDO.Ninja offers here a simple and free solution to quickly enable real-time video streaming in their websites. VDON wishes to make live video streaming development accessible to any developer, even novices, yet still remain flexible and powerful.

While VDO.Ninja does offer source-code to customize the application and UI at a low level, this isn't for beginners and it is rather hard to maintain. As well, due to the complexity of video streaming in the web, typical approaches for offering API access isn't quite feasible either.

The solution decided on isn't an SDK framework, but rather the use of embeddable IFrames and a corresponding bi-directional IFrame API. An IFrame allows us to embed a webpage inside a webpage, including VDO.Ninja into your own website.

Modern web browsers allow the parent website to communicate with the child webpage, giving a high-level of control to a developer, while also abstracting the complex code and hosting requirements. Functionality, we can make an VDON video stream act much like an HTML video element tag, where you can issue commands like play, pause, or change video sources with ease.

Creating an VDON iframe can be done in HTML or programmatically with JavaScript like so:

const iframe = document.createElement("iframe");
iframe.allow = "document-domain;encrypted-media;sync-xhr;usb;web-share;cross-origin-isolated;midi *;geolocation;camera *;microphone *;fullscreen;picture-in-picture;display-capture;accelerometer;autoplay;gyroscope;screen-wake-lock;";
iframe.src = "https://vdo.ninja/?push=vhX5PYg&cleanoutput&transparent";

You can also make an VDO.Ninja without Javascript, using just HTML, like:

<iframe allow="document-domain;encrypted-media;sync-xhr;usb;web-share;cross-origin-isolated;midi *;geolocation;camera *;microphone *;fullscreen;picture-in-picture;display-capture;accelerometer;autoplay;gyroscope;screen-wake-lock;" src="https://vdo.ninja/?push=vhX5PYg&cleanoutput&transparent"></iframe>

Adding that IFrame to the DOM will reveal a simple page for accessing for a user to select and share their webcam. For a developer wishing to access a remote guest's stream, this makes the ingestion of that stream into production software like OBS Studios very easy. The level of customization and control opens up opportunities, such as a pay-to-join audience option for a streaming interactive broadcast experience.

An example of how this API is used by VDO.Ninja is with its Internet Speedtest, which has two VDO.Ninja IFrames on a single page. One IFrame feeds video to the other IFrame, and the speed at which it does this is a measure of the system's performance. Detailed stats of the connection are made available to the parent window, which displays the results. https://vdo.ninja/speedtest

More community-contributed IFrame examples can be found here:
https://github.com/steveseguin/vdoninja/tree/master/examples

A sandbox of options is available at this page, too: https://vdo.ninja/iframe You can enter an VDO.Ninja URL in the input box to start using it. For developers, viewing the source of that page will reveal examples of how all the available functions work, along with a way to test and play with each of them. You can also see here for the source-code on GitHub:
https://github.com/steveseguin/vdoninja/blob/master/iframe.html

I also have an example of how you can transfer virtually any data (JSON, text, small images) via the IFrame API with just a few lines of code here:
https://gist.github.com/steveseguin/15bba03d1993c88d0bd849f7749ea625 It's a pretty awesome example of how you can securely communicate peer to peer online with virtually zero effort and with no cost.

There's dozens of other examples of how the IFrame API can be used to communicate via p2p, easily with any website, such as controlling PowerPoint remotely, but here's an example of how to use it to control OBS Studio remotely. https://github.com/steveseguin/sample-p2p-tunnel

Please note that since VDO.Ninja requires SSL to be strictly enabled site wide, any website you embed a VDO.Ninja IFrame into also will require SSL enabled site wide. Using a service like Cloudflare can provide SSL-enabled caching for websites to make this fairly easy to do.

Please also note that there we are allowing numerous permissions when setting up our IFRAME. You may need to adjust these for your use case; allow="camera *;microphone *;" for example.

Something else to note about this IFrame API is that it can not only be controlled via URL parameters given to the IFrame src URL, but also using postMessage and addEventListener methods of the browser. The later is used to dynamically control VDO.Ninja, while the former is used to initiate the instance to a desired state.

Some of the more interesting ones primarily for IFrame users might include:

  • &webcam
  • &screenshare
  • &videodevice=1 or 0
  • &audiodevice=1 or 0
  • &autostart
  • &chroma
  • &transparent
  • As for API, allow for dynamic messaging, below are examples of the options available:
  • Mute Speaker
  • Mute Mic
  • Disconnect
  • Change Video Bitrate
  • Reload the page
  • Change the volume
  • Request detailed connection stats
  • Access the loudness level of the audio
  • Send/Recieve a chat message to other connected guests
  • Get notified when there is a video connection

As for the actually details for methods and options available to dynamically control child VDON IFrame, they are primarily kept up to via the iframe.html file that is mentioned previously. see: iframe.html. Below is a snippet from that file:

let button = document.createElement("button");
button.innerHTML = "Mute Speaker";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "mute": true
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Un-Mute Speaker";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "mute": false
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Toggle Speaker";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "mute": "toggle"
    }, '*');
}
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Mute Mic";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "mic": false
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Un-Mute Mic";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "mic": true
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Toggle Mic";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "mic": "toggle"
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Disconnect";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "close": true
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Low Bitrate";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "bitrate": 30
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "High Bitrate";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "bitrate": 5000
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Default Bitrate";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "bitrate": -1
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Reload";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "reload": true
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "50% Volume";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "volume": 0.5
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "100% Volume";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "volume": 1.0
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Request Stats";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "getStats": true
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Request Loudness Levels";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "getLoudness": true
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Stop Sending Loudness Levels";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "getLoudness": false
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "Say Hello";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "sendChat": "Hello!"
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "previewWebcam()";
button.onclick = () => {
    iframe.contentWindow.postMessage({
        "function": "previewWebcam"
    }, '*');
};
iframeContainer.appendChild(button);

button = document.createElement("button");
button.innerHTML = "CLOSE IFRAME";
button.onclick = () => {
    iframeContainer.parentNode.removeChild(iframeContainer);
};
iframeContainer.appendChild(button);

// As for listening events, where the parent listens for responses or events from the VDON child frame:

// //////////  LISTEN FOR EVENTS

const eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
const eventer = window[eventMethod];
const messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function (e) {
    if (e.source !== iframe.contentWindow) {
        return
    } // reject messages send from other iframes

    if ("stats" in e.data) {
        const outputWindow = document.createElement("div");

        let out = `<br />total_inbound_connections:${
            e.data.stats.total_inbound_connections
        }`;
        out += `<br />total_outbound_connections:${
            e.data.stats.total_outbound_connections
        }`;

        for (const streamID in e.data.stats.inbound_stats) {
            out += `<br /><br /><b>streamID:</b> ${streamID}<br />`;
            out += printValues(e.data.stats.inbound_stats[streamID]);
        }

        outputWindow.innerHTML = out;
        iframeContainer.appendChild(outputWindow);
    }

    if ("gotChat" in e.data) {
        const outputWindow = document.createElement("div");
        outputWindow.innerHTML = e.data.gotChat.msg;
        outputWindow.style.border = "1px dotted black";
        iframeContainer.appendChild(outputWindow);
    }

    if ("action" in e.data) {
        const outputWindow = document.createElement("div");
        outputWindow.innerHTML = `child-page-action: ${
            e.data.action
        }<br />`;
        outputWindow.style.border = "1px dotted black";
        iframeContainer.appendChild(outputWindow);
    }

    if ("loudness" in e.data) {
        console.log(e.data);
        if (document.getElementById("loudness")) {
            outputWindow = document.getElementById("loudness");
        } else {
            const outputWindow = document.createElement("div");
            outputWindow.style.border = "1px dotted black";
            iframeContainer.appendChild(outputWindow);
            outputWindow.id = "loudness";
        }
        outputWindow.innerHTML = "child-page-action: loudness<br />";
        for (const key in e.data.loudness) {
            outputWindow.innerHTML += `${key} Loudness: ${
                e.data.loudness[key]
            }\n`;
        }
        outputWindow.style.border = "1px black";

    }
});

This VDO.Ninja API is developed and expanded based on user feedback and requests. It is by no means complete, but it is getting better every week.

Transparency

Setting the allowtransparency attribute on the IFrame to true will allow for the contents to be transparent. You can then make VDO.Ninja transparent by adding &transparent to the URL, which sets the page's background to rgba(0,0,0,0).

https://vdo.ninja/iframe can demonstrate this by opening https://vdo.ninja/?transparent with it.

Advanced IFrame functionality

There's some users who wish to have an SDK instead of an IFrame API. While an SDK may happen eventually, currently the IFram API is surprisingly capable.

If you wish to use your own video mixer logic for example, you can disable the existing auto-mixer logic that currently exists using the &manual flag. You can then access the srcObject of each of the video elements in VDO.Ninja and pull those streams into the parent frame to manipulate or to connect to the parent DOM.

If you aren't self-hosting the code, you may run into cross origin permission issues or limitations on cross-origin permissions with certain features. You can get around these issues usually by hosting VDO.Ninja as a subdomains though, in certain cases at least, along with the correct web hosting settings set.

https://javascript.info/cross-window-communication#windows-on-subdomains-document-domain

See the video below for an advanced demo of the IFRAME API and how videos hosted within VDO.Ninja can be accessed and manipulated by the parent window. Video works well in this fashion; pulling audio from the IFRAME is a bit trickier however.

[update: document.domain or such is a bit depreciated now, and while it is possible to use a sub-domain still, you'll need to specify certain headers and permissions with your webserver to allow for it. https://versus.cam for example uses vdo.ninja as a subdomain to access frames across the IFRAME API]

{% embed url="https://www.youtube.com/watch?v=SqbufszHKi4&feature=youtu.be" %}

Basic full window IFRAME control

Below is a simple code example of a website that can use VDO.Ninja as normal, full-window, while having a wrapper around it that controls it using the IFrame API.

It also will query the IFRAME every second for detailed state of the current setup, such as who is connected and visible.

This approach can allow you to do very advanced and dynamic configurations for VDO.Ninja, which might not be possible with the normal HTTPS/WSS API or URL parameters. Code injection is also supported, so there's no limit really to what you can do. If you would like to use VDO.Ninja with a custom API or inside an application as a webview, this is also a simple example of the concept.

<style>body,iframe{width:100%;height:100%;margin:0;padding:0;border:0;background-color:#0000;}</style><body></body><script>

var IFRAMEWINDOW = document.createElement("iframe"); // create VDO.Ninja in an IFRAME
IFRAMEWINDOW.src = "https://vdo.ninja/alpha/?scene&transparent&room=sssss123";

IFRAMEWINDOW.onload = function(){ // start polling shortly after we connect
    setInterval(function(){
            IFRAMEWINDOW.contentWindow.postMessage({"getDetailedState":true}, "*");  // get details every second
        },1000);
}
document.body.appendChild(IFRAMEWINDOW); // add the vdo.ninja element to the page, so its active/visible

window.addEventListener("message", (e) => {
  if (e.source != IFRAMEWINDOW.contentWindow){return} // only listen for vdo.ninja events
  console.log(e.data);// print the messages inbound to the console log
});
</script>

WebViews

The IFrame API is is also a WebView API, using the same concept of listening for events and post-messaging into the VDO.Ninja window.

WebViews are available within iOS and Android native apps, Electron.js apps, and other applications, like Unity or Unreal.

This is a great way to configure, edit, listen to, and control VDO.Ninja, without a web or MIDI API.

Raw video and audio transport

It's possible to transmit uncompressed video frames and audio data from VDO.Ninja to the parent window using the post-mesasging API. This allows video playback to happen outside the IFrame itself, using your own custom mixing logic. See https://versus.cam for a code example; the website is on Steve's GitHub for reference. Please note, this may require a custom deployment of VDO.Ninja's website code (SameOriginPolicy), and likely will also require a recent Chromium-based browser to use.

Securing your stream ID

Using the &audience option, you can have a consistent stream ID on your website that only you can publish to. Great for using VDO.Ninja as a small scale broadcast player on a personal website.

{% content-ref url="../advanced-settings/setup-parameters/and-audience.md" %} and-audience.md {% endcontent-ref %}

All to happy to support the IFRAME API

Please feel free to follow me in the VDO.Ninja Discord channel (discord.vdo.ninja) where I post news about updates and listen to requests. The upcoming version of VDO.Ninja is also often hosted at https://vdo.ninja/beta, where you can explore new features and help crush any unexpected bugs.

I am keen to continue to support the IFrame API, so please reach out if you have questions or requests.

-steve

description: Transmitting Drawing Data Between Clients with VDO.Ninja IFRAMES

Create custom drawing app

VDO.Ninja IFRAME API: Transmitting Drawing Data Between Clients

This guide explains how to use the VDO.Ninja IFRAME API to send drawing data (or any custom data) between clients using peer-to-peer (P2P) data channels.

Understanding the Data Channel

VDO.Ninja allows you to send arbitrary data between connected clients using its P2P data channels. This feature enables applications like:

  • Custom drawing/annotation tools
  • Chat systems
  • Control signals
  • Sensor data exchange
  • Any other custom data payloads

The creators of VDO.Ninja use VDO.Ninja's data-channel functionality in many of their other applications and services, including Social Stream Ninja that processes hundreds of messages per minute per peer connection.

Basic Setup

First, set up your VDO.Ninja iframe as described in the basic documentation:

// Create the iframe element
var iframe = document.createElement("iframe");

// Set necessary permissions
iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";

// Set the source URL (your VDO.Ninja room)
iframe.src = "https://vdo.ninja/?room=your-room-name&cleanoutput";

// Add the iframe to your page
document.getElementById("container").appendChild(iframe);

Setting Up Event Listeners

To receive data from other clients, set up an event listener for messages from the iframe:

// Set up event listener (cross-browser compatible)
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

// Connected peers storage
var connectedPeers = {};

// Add the event listener
eventer(messageEvent, function(e) {
    // Make sure the message is from our VDO.Ninja iframe
    if (e.source != iframe.contentWindow) return;
    
    // Process connection events to track connected peers
    if ("action" in e.data) {
        if (e.data.action === "guest-connected" && e.data.streamID) {
            // Store connected peer information
            connectedPeers[e.data.streamID] = e.data.value?.label || "Guest";
            console.log("Guest connected:", e.data.streamID, "Label:", connectedPeers[e.data.streamID]);
        } 
        else if (e.data.action === "push-connection" && e.data.value === false && e.data.streamID) {
            // Remove disconnected peers
            console.log("Guest disconnected:", e.data.streamID);
            delete connectedPeers[e.data.streamID];
        }
    }
    
    // Handle received data
    if ("dataReceived" in e.data) {
        // Process any custom data received from peers
        console.log("Data received:", e.data.dataReceived);
        
        // If our custom data format is detected
        if ("overlayNinja" in e.data.dataReceived) {
            processReceivedData(e.data.dataReceived.overlayNinja, e.data.UUID);
        }
    }
}, false);

function processReceivedData(data, senderUUID) {
    // Process the data based on your application's needs
    console.log("Processing data from UUID:", senderUUID, "Data:", data);
    
    // Example: Handle drawing data
    if (data.drawingData) {
        updateDrawingCanvas(data.drawingData);
    }
}

Sending Data to Peers

Sending to All Connected Peers

Use this approach to broadcast data to all connected peers:

function sendDataToAllPeers(data) {
    // Create the data structure
    var payload = {
        drawingData: data  // Your custom drawing data
    };
    
    // Send to all peers
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: payload },
        type: "pcs"  // Use peer connection for reliability
    }, "*");
}

Sending to a Specific Peer by UUID

Use this approach to send data to a specific peer identified by UUID:

function sendDataToPeer(data, targetUUID) {
    // Create the data structure
    var payload = {
        drawingData: data  // Your custom drawing data
    };
    
    // Send to specific UUID
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: payload },
        type: "pcs",
        UUID: targetUUID
    }, "*");
}

Sending to Peers with Specific Labels

Use this approach to send data to all peers with a specific label:

function sendDataByLabel(data, targetLabel) {
    // Create the data structure
    var payload = {
        drawingData: data  // Your custom drawing data
    };
    
    // Iterate through connected peers to find those with matching label
    var keys = Object.keys(connectedPeers);
    for (var i = 0; i < keys.length; i++) {
        try {
            var UUID = keys[i];
            var label = connectedPeers[UUID];
            if (label === targetLabel) {
                // Send to this specific peer
                iframe.contentWindow.postMessage({
                    sendData: { overlayNinja: payload },
                    type: "pcs",
                    UUID: UUID
                }, "*");
            }
        } catch (e) {
            console.error("Error sending to peer:", e);
        }
    }
}

Sending to a Peer by StreamID

Use this approach when you know the streamID but not the UUID:

function sendDataByStreamID(data, streamID) {
    // Create the data structure
    var payload = {
        drawingData: data  // Your custom drawing data
    };
    
    // Send to specific streamID
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: payload },
        type: "pcs",
        streamID: streamID
    }, "*");
}

Drawing-Specific Implementation

For transmitting drawing data specifically, you'll need to:

  1. Create a drawing canvas on your page
  2. Capture drawing events
  3. Format the data appropriately
  4. Send the data to peers
  5. Process and render received drawing data

Here's a simplified example:

// 1. Set up a drawing canvas
const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
document.getElementById('drawing-container').appendChild(canvas);
const ctx = canvas.getContext('2d');

// Drawing state
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let currentPath = [];

// 2. Capture drawing events
canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
    
    // Start a new path
    currentPath = [];
    // Normalize coordinates (0-1 range)
    const point = {
        x: lastX / canvas.width,
        y: lastY / canvas.height
    };
    currentPath.push(point);
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    
    // Draw locally
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    
    // Store normalized point
    const point = {
        x: e.offsetX / canvas.width,
        y: e.offsetY / canvas.height
    };
    currentPath.push(point);
    
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mouseup', () => {
    if (isDrawing) {
        isDrawing = false;
        
        // 3 & 4. Format and send the path data
        if (currentPath.length > 1) {
            // Send the complete path
            sendDrawingData(currentPath);
        }
        
        // Reset current path
        currentPath = [];
    }
});

// Send drawing data to all peers
function sendDrawingData(pathPoints) {
    // Format the data as a path
    const drawingData = {
        t: 'path',  // type: path
        p: pathPoints
    };
    
    // Send to all peers
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: { drawingData: drawingData } },
        type: "pcs"
    }, "*");
}

// 5. Process received drawing data
function processReceivedData(data, senderUUID) {
    if (data.drawingData && data.drawingData.t === 'path') {
        const pathPoints = data.drawingData.p;
        
        // Render the received path
        if (pathPoints && pathPoints.length > 1) {
            ctx.beginPath();
            
            // Convert normalized coordinates back to canvas coordinates
            const startX = pathPoints[0].x * canvas.width;
            const startY = pathPoints[0].y * canvas.height;
            ctx.moveTo(startX, startY);
            
            for (let i = 1; i < pathPoints.length; i++) {
                const x = pathPoints[i].x * canvas.width;
                const y = pathPoints[i].y * canvas.height;
                ctx.lineTo(x, y);
            }
            
            ctx.stroke();
        }
    }
}

Advanced Drawing Commands

You can implement special drawing commands like clear, undo, etc.:

// Clear the drawing canvas
function clearDrawing() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Send clear command to all peers
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: { drawingData: "clear" } },
        type: "pcs"
    }, "*");
}

// Undo last drawing action
function undoLastDrawing() {
    // Local undo logic...
    
    // Send undo command to all peers
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: { drawingData: "undo" } },
        type: "pcs"
    }, "*");
}

Using VDO.Ninja's Built-in Drawing System

VDO.Ninja has a built-in drawing system you can leverage if you prefer not to implement your own:

// Send drawing data using VDO.Ninja's built-in format
function sendVDONinjaDrawing(drawingData) {
    iframe.contentWindow.postMessage({
        draw: drawingData,  // Can be an object with drawing data or commands like "clear", "undo"
        type: "pcs",
        UUID: targetUUID  // Optional: specific target
    }, "*");
}

// Clear VDO.Ninja's drawing
function clearVDONinjaDrawing() {
    iframe.contentWindow.postMessage({
        draw: "clear",
        type: "pcs"
    }, "*");
}

// Undo last drawing action in VDO.Ninja
function undoVDONinjaDrawing() {
    iframe.contentWindow.postMessage({
        draw: "undo",
        type: "pcs"
    }, "*");
}

Complete Example: Drawing Application

Here's a more complete example of a drawing application using the data channel:

// Create interface elements
const container = document.createElement('div');
container.id = 'app-container';
document.body.appendChild(container);

// Create VDO.Ninja iframe
const iframe = document.createElement('iframe');
iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";
iframe.src = "https://vdo.ninja/?room=drawing-demo&cleanoutput";
iframe.style.width = "640px";
iframe.style.height = "360px";
container.appendChild(iframe);

// Create drawing canvas
const canvasContainer = document.createElement('div');
canvasContainer.style.position = 'relative';
container.appendChild(canvasContainer);

const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 360;
canvas.style.border = '1px solid black';
canvasContainer.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.lineCap = 'round';

// Create controls
const controlsDiv = document.createElement('div');
controlsDiv.style.margin = '10px 0';
container.appendChild(controlsDiv);

const clearBtn = document.createElement('button');
clearBtn.textContent = 'Clear';
clearBtn.onclick = clearDrawing;
controlsDiv.appendChild(clearBtn);

const undoBtn = document.createElement('button');
undoBtn.textContent = 'Undo';
undoBtn.onclick = undoLastDrawing;
controlsDiv.appendChild(undoBtn);

// Track connected peers
const connectedPeers = {};
const drawingHistory = [];
let currentPath = [];
let isDrawing = false;

// Set up event handlers for the canvas
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', endDrawing);
canvas.addEventListener('mouseout', endDrawing);

function startDrawing(e) {
    isDrawing = true;
    const x = e.offsetX / canvas.width;
    const y = e.offsetY / canvas.height;
    currentPath = [{ x, y }];
    
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
}

function draw(e) {
    if (!isDrawing) return;
    
    const x = e.offsetX / canvas.width;
    const y = e.offsetY / canvas.height;
    currentPath.push({ x, y });
    
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
}

function endDrawing() {
    if (!isDrawing) return;
    isDrawing = false;
    
    if (currentPath.length > 1) {
        // Save path to history
        drawingHistory.push(currentPath);
        
        // Send path to peers
        sendDrawingData(currentPath);
    }
    
    currentPath = [];
}

function clearDrawing() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawingHistory.length = 0;
    
    // Send clear command
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: { drawingData: "clear" } },
        type: "pcs"
    }, "*");
}

function undoLastDrawing() {
    if (drawingHistory.length === 0) return;
    
    // Remove the last path
    drawingHistory.pop();
    
    // Redraw everything
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawingHistory.forEach(path => {
        if (path.length > 1) {
            ctx.beginPath();
            ctx.moveTo(path[0].x * canvas.width, path[0].y * canvas.height);
            
            for (let i = 1; i < path.length; i++) {
                ctx.lineTo(path[i].x * canvas.width, path[i].y * canvas.height);
            }
            
            ctx.stroke();
        }
    });
    
    // Send undo command
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: { drawingData: "undo" } },
        type: "pcs"
    }, "*");
}

function sendDrawingData(pathPoints) {
    const drawingData = {
        t: 'path',
        p: pathPoints,
        c: 'red',  // Color
        w: 3       // Width
    };
    
    iframe.contentWindow.postMessage({
        sendData: { overlayNinja: { drawingData: drawingData } },
        type: "pcs"
    }, "*");
}

// Set up the event listener
const eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
const eventer = window[eventMethod];
const messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function(e) {
    // Make sure the message is from our VDO.Ninja iframe
    if (e.source != iframe.contentWindow) return;
    
    // Process connection events
    if ("action" in e.data) {
        if (e.data.action === "guest-connected" && e.data.streamID) {
            connectedPeers[e.data.streamID] = e.data.value?.label || "Guest";
            console.log("Guest connected:", e.data.streamID, "Label:", connectedPeers[e.data.streamID]);
            
            // Send current drawing state to new peer
            if (drawingHistory.length > 0) {
                iframe.contentWindow.postMessage({
                    sendData: { overlayNinja: { drawingHistory: drawingHistory } },
                    type: "pcs",
                    UUID: e.data.streamID
                }, "*");
            }
        } 
        else if (e.data.action === "push-connection" && e.data.value === false && e.data.streamID) {
            console.log("Guest disconnected:", e.data.streamID);
            delete connectedPeers[e.data.streamID];
        }
    }
    
    // Handle received data
    if ("dataReceived" in e.data) {
        if ("overlayNinja" in e.data.dataReceived) {
            const data = e.data.dataReceived.overlayNinja;
            
            // Process drawing data
            if (data.drawingData) {
                if (data.drawingData === "clear") {
                    // Clear command
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    drawingHistory.length = 0;
                }
                else if (data.drawingData === "undo") {
                    // Undo command
                    if (drawingHistory.length > 0) {
                        drawingHistory.pop();
                        
                        // Redraw everything
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        drawingHistory.forEach(path => {
                            if (path.length > 1) {
                                ctx.beginPath();
                                ctx.moveTo(path[0].x * canvas.width, path[0].y * canvas.height);
                                
                                for (let i = 1; i < path.length; i++) {
                                    ctx.lineTo(path[i].x * canvas.width, path[i].y * canvas.height);
                                }
                                
                                ctx.stroke();
                            }
                        });
                    }
                }
                else if (data.drawingData.t === 'path') {
                    // New path
                    const pathPoints = data.drawingData.p;
                    
                    // Add to history
                    drawingHistory.push(pathPoints);
                    
                    // Draw it
                    if (pathPoints && pathPoints.length > 1) {
                        ctx.beginPath();
                        ctx.moveTo(pathPoints[0].x * canvas.width, pathPoints[0].y * canvas.height);
                        
                        for (let i = 1; i < pathPoints.length; i++) {
                            ctx.lineTo(pathPoints[i].x * canvas.width, pathPoints[i].y * canvas.height);
                        }
                        
                        ctx.stroke();
                    }
                }
            }
            
            // Handle initial state sync
            if (data.drawingHistory) {
                // Clear current state
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Apply all paths from history
                data.drawingHistory.forEach(path => {
                    if (path.length > 1) {
                        ctx.beginPath();
                        ctx.moveTo(path[0].x * canvas.width, path[0].y * canvas.height);
                        
                        for (let i = 1; i < path.length; i++) {
                            ctx.lineTo(path[i].x * canvas.width, path[i].y * canvas.height);
                        }
                        
                        ctx.stroke();
                    }
                });
                
                // Update local history
                drawingHistory.length = 0;
                drawingHistory.push(...data.drawingHistory);
            }
        }
    }
}, false);

Best Practices

  1. Data Structure: Use a clear, consistent data structure for your payloads
  2. Normalization: Normalize canvas coordinates (0-1 range) to ensure consistent display across different screen sizes
  3. Throttling: Consider throttling frequent events like mouse movements to reduce data transmission
  4. Error Handling: Always include try/catch blocks when sending or processing data
  5. State Synchronization: When new peers join, send them the current state
  6. UUID vs StreamID: Use UUID for reliable targeting; StreamIDs change when connections restart
  7. Connection Status: Monitor connection and disconnection events to maintain a list of active peers

Common Types of Data to Send

  • Drawing Paths: Arrays of points representing drawing strokes
  • Commands: Clear, undo, change color, change brush size
  • Annotations: Text or shapes to overlay on videos
  • Control Signals: Camera directions, audio levels, recording commands
  • Chat Messages: Text messages between users
  • Sensor Data: Device orientation, location, acceleration

Troubleshooting

  • Data Not Arriving: Check that you're using the correct UUID or streamID
  • Timing Issues: Ensure your iframe is fully loaded before sending messages
  • Cross-Origin Issues: Make sure your security settings allow communication
  • Format Errors: Verify your data structure matches what receivers expect
  • Performance Problems: Large data payloads can cause lag; consider optimizing

By following this guide, you should be able to implement custom drawing tools or any other data-sharing features using VDO.Ninja's P2P data channels.

Detecting User Joins / Disconnects

Understanding the VDO.Ninja IFRAME API: Detecting User Joins and Disconnects

The VDO.Ninja IFRAME API allows websites to embed and interact with VDO.Ninja streams. One of the most useful features is the ability to detect when users join or disconnect from your stream through event messaging. This guide will explain how to implement this functionality in your own projects.

How the IFRAME API Works

VDO.Ninja's IFRAME API uses the browser's postMessage API to communicate between your parent website and the embedded VDO.Ninja iframe. This allows you to:

  1. Send commands to control the VDO.Ninja instance
  2. Receive events and data from the VDO.Ninja instance

Setting Up the Basic Structure

First, you need to create an iframe that loads VDO.Ninja:

// Create the iframe element
var iframe = document.createElement("iframe");

// Set necessary permissions
iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";

// Set the source URL (your VDO.Ninja room)
iframe.src = "https://vdo.ninja/?room=your-room-name&cleanoutput";

// Add the iframe to your page
document.getElementById("container").appendChild(iframe);

Setting Up the Event Listener

To detect joins and disconnects, you need to set up an event listener for messages from the iframe:

// Set up event listener (cross-browser compatible)
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

// Add the event listener
eventer(messageEvent, function (e) {
    // Make sure the message is from our VDO.Ninja iframe
    if (e.source != iframe.contentWindow) return;
    
    // Log the data for debugging
    console.log(e.data);
    
    // Process specific events
    if ("action" in e.data) {
        // Handle different actions
        handleAction(e.data);
    }
}, false);

Detecting User Joins and Disconnects

The key events to watch for are:

Guest Connections

function handleAction(data) {
    if (data.action === "guest-connected") {
        // A new guest has connected
        console.log("Guest connected:", data.streamID);
        
        // You can access additional info if available
        if (data.value && data.value.label) {
            console.log("Guest label:", data.value.label);
        }
    }
    else if (data.action === "view-connection") {
        // Someone viewing the stream has connected
        console.log("Viewer connected:", data.streamID);
        
        // The value property will be true for connections
        if (data.value) {
            console.log("New viewer connected");
        } else {
            console.log("Viewer disconnected");
        }
    }
    else if (data.action === "director-connected") {
        // The director has connected
        console.log("Director connected");
    }
    else if (data.action === "scene-connected") {
        // A scene has connected
        console.log("Scene connected:", data.value); // Scene ID
    }
    else if (data.action === "slot-updated") {
        // A stream has been assigned to a slot
        console.log("Stream", data.streamID, "assigned to slot", data.value);
    }
}

Disconnections

function handleAction(data) {
    // Handling disconnections
    if (data.action === "view-connection" && data.value === false) {
        // A viewer has disconnected
        console.log("Viewer disconnected:", data.streamID);
    }
    else if (data.action === "director-share" && data.value === false) {
        // A director has stopped sharing
        console.log("Director stopped sharing:", data.streamID);
    }
    else if (data.action === "push-connection" && data.value === false) {
        // A guest has disconnected
        console.log("Guest disconnected:", data.streamID);
    }
}

Complete Working Example

Here's a complete example that demonstrates detecting joins and disconnects:

// Create the container for the iframe
var container = document.createElement("div");
container.id = "vdo-container";
document.body.appendChild(container);

// Create the iframe element
var iframe = document.createElement("iframe");
iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";
iframe.src = "https://vdo.ninja/?room=your-room-name&cleanoutput";
iframe.style.width = "100%";
iframe.style.height = "100%";
container.appendChild(iframe);

// Create a status display element
var statusDiv = document.createElement("div");
statusDiv.id = "connection-status";
document.body.appendChild(statusDiv);

// Set up event listener
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

// Keep track of connected users
var connectedUsers = {};

// Add the event listener
eventer(messageEvent, function (e) {
    // Make sure the message is from our VDO.Ninja iframe
    if (e.source != iframe.contentWindow) return;
    
    // Log all messages for debugging
    console.log(e.data);
    
    // Process specific actions
    if ("action" in e.data) {
        handleAction(e.data);
    }
}, false);

function handleAction(data) {
    // Handle connections
    if (data.action === "guest-connected" && data.streamID) {
        connectedUsers[data.streamID] = data.value?.label || "Guest";
        updateStatusDisplay("Guest connected: " + (data.value?.label || data.streamID));
    }
    else if (data.action === "view-connection") {
        if (data.value && data.streamID) {
            connectedUsers[data.streamID] = "Viewer";
            updateStatusDisplay("Viewer connected: " + data.streamID);
        } else if (data.streamID) {
            delete connectedUsers[data.streamID];
            updateStatusDisplay("Viewer disconnected: " + data.streamID);
        }
    }
    else if (data.action === "director-connected") {
        updateStatusDisplay("Director connected");
    }
    else if (data.action === "push-connection" && data.value === false && data.streamID) {
        delete connectedUsers[data.streamID];
        updateStatusDisplay("User disconnected: " + data.streamID);
    }
}

function updateStatusDisplay(message) {
    var timestamp = new Date().toLocaleTimeString();
    statusDiv.innerHTML += `<p>${timestamp}: ${message}</p>`;
    
    // Update connected users count
    var count = Object.keys(connectedUsers).length;
    document.getElementById("user-count").textContent = count;
}

// Add a user count display
var countDiv = document.createElement("div");
countDiv.innerHTML = "Connected users: <span id='user-count'>0</span>";
document.body.insertBefore(countDiv, statusDiv);

Waiting Room Example

You can implement a waiting room like the one in the waitingroom.html file from your code samples:

// Setup event listener
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
var waiting = null;

eventer(messageEvent, function (e) {
    if (e.source != iframe.contentWindow) return;
    
    if ("action" in e.data) {
        if (e.data.action == "joining-room") {
            // Show initial joining message
            outputWindow.innerHTML = "JOINING ROOM";
            
            // After 1 second, show waiting message if director hasn't joined
            waiting = setTimeout(function() {
                outputWindow.innerHTML = "Waiting for the director to join";
                outputWindow.classList.remove("hidden");
            }, 1000);
        } 
        else if (e.data.action == "director-connected") {
            // Director has joined, clear waiting message
            clearTimeout(waiting);
            outputWindow.innerHTML = "";
            outputWindow.classList.add("hidden");
        }
    }
});

Getting Additional Information About Connections

For more detailed information about connections, you can use the getStreamIDs or getDetailedState commands:

// Request info about all connected streams
iframe.contentWindow.postMessage({ "getStreamIDs": true }, "*");

// Request detailed state information
iframe.contentWindow.postMessage({ "getDetailedState": true }, "*");

Best Practices

  1. Always check the source: Make sure messages are coming from your VDO.Ninja iframe.
  2. Handle disconnections gracefully: Sometimes connections drop unexpectedly.
  3. Consider implementing reconnection logic: If important users disconnect, you might want to notify them or attempt to reconnect.
  4. Debug with console.log: Log all events during development to understand the full message flow.
  5. Test with multiple users: The behavior can be different depending on who connects first.

By implementing these techniques, you can build sophisticated applications that respond to users joining and leaving your VDO.Ninja sessions, creating more interactive and responsive experiences.

description: Generic P2P Data Transmission Guide

Generic P2P Data Transmission Guide

This guide focuses specifically on how to send and receive generic data between clients using VDO.Ninja's peer-to-peer (P2P) data channels over the IFRAME API.

Understanding the P2P Data Channels

VDO.Ninja provides a powerful API that allows websites to send arbitrary data between connected clients through its peer-to-peer infrastructure. This enables you to:

  • Create custom communication channels between clients
  • Implement application-specific data exchange
  • Build interactive multi-user experiences
  • Exchange any type of serializable data

Why VDO.Ninja's P2P Data Channels Are Powerful

VDO.Ninja's data channels offer several compelling advantages that make them ideal for modern web applications:

  • Production-Proven Reliability: Used in production applications like Social Stream Ninja, which processes hundreds of messages per minute per peer connection
  • Automatic LAN Optimization: Detects when connections are on the same local network and routes data directly, reducing latency
  • Firewall Traversal: Enables communication between devices behind different firewalls without port forwarding
  • Cost-Effective: No server costs or bandwidth charges for data transmission, as everything happens peer-to-peer
  • Low Latency: Direct connections between peers minimize delay, ideal for real-time applications
  • Scalability: Each peer connects directly to others, allowing for programmed distribution of loads
  • AI Integration Ready: Perfect for distributing AI processing tasks or sharing AI-generated content between users, or accessing private AI services that are behind firewalls.
  • Remote Control Applications: Enables secure remote control of devices through firewalls without complex networking setups
  • Works Across Platforms: Functions on mobile, desktop, and various browsers without additional plugins

The creators of VDO.Ninja use these data channels in numerous applications beyond video, demonstrating their versatility and reliability in real-world scenarios.

Basic Setup

First, set up your VDO.Ninja iframe:

// Create the iframe element
var iframe = document.createElement("iframe");

// Set necessary permissions
iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";

// Set the source URL (your VDO.Ninja room)
iframe.src = "https://vdo.ninja/?room=your-room-name&cleanish&dataonly";

// Add the iframe to your page
document.getElementById("container").appendChild(iframe);

{% hint style="info" %} &dataonly is offered as a simple way to configure VDO.Ninja for data-only applications with no camera/microphone controls. &cleanish lets you hide GUI and menus, while still having access to stats and right-click content menus; helpful for debugging and development. {% endhint %}

Setting Up Event Listeners

To receive data from other clients, set up an event listener:

// Set up event listener (cross-browser compatible)
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

// Connected peers storage
var connectedPeers = {};

// Add the event listener
eventer(messageEvent, function(e) {
    // Make sure the message is from our VDO.Ninja iframe
    if (e.source != iframe.contentWindow) return;
    
    // Process connection events to track connected peers
    if ("action" in e.data) {
        handleConnectionEvents(e.data);
    }
    
    // Handle received data
    if ("dataReceived" in e.data) {
        handleDataReceived(e.data.dataReceived, e.data.UUID);
    }
}, false);

function handleConnectionEvents(data) {
    if (data.action === "guest-connected" && data.streamID) {
        // Store connected peer information
        connectedPeers[data.streamID] = data.value?.label || "Guest";
        console.log("Guest connected:", data.streamID, "Label:", connectedPeers[data.streamID]);
    } 
    else if (data.action === "push-connection" && data.value === false && data.streamID) {
        // Remove disconnected peers
        console.log("Guest disconnected:", data.streamID);
        delete connectedPeers[data.streamID];
    }
}

function handleDataReceived(data, senderUUID) {
    console.log("Data received from:", senderUUID, "Data:", data);
    
    // Example: Check for your custom data namespace
    if (data.overlayNinja) {
        processCustomData(data.overlayNinja, senderUUID);
    }
}

function processCustomData(data, senderUUID) {
    // Process based on your application's needs
    console.log("Processing custom data:", data);
    
    // Example: Handle different data types
    if (data.message) {
        displayMessage(data.message);
    } else if (data.command) {
        executeCommand(data.command);
    }
}

Sending Data

Send Data Structure

When sending data via the VDO.Ninja IFRAME API, you use this general format:

iframe.contentWindow.postMessage({
    sendData: yourDataPayload,
    type: "pcs",  // Connection type (see below)
    UUID: targetUUID  // Optional: specific target
}, "*");

The components are:

  • sendData: Your data payload (object)
  • type: Connection type (string)
    • "pcs": Use peer connections (most reliable)
    • "rpcs": Use request-based connections
  • UUID or streamID: Optional target identifier

Sending to All Connected Peers

function sendDataToAllPeers(data) {
    // Create the data structure with your custom namespace
    var payload = {
        overlayNinja: data  // Your custom data under a namespace
    };
    
    // Send to all peers
    iframe.contentWindow.postMessage({
        sendData: payload,
        type: "pcs"  // Use peer connection for reliability
    }, "*");
}

// Example usage
sendDataToAllPeers({
    message: "Hello everyone!",
    timestamp: Date.now()
});

Sending to a Specific Peer by UUID

function sendDataToPeer(data, targetUUID) {
    // Create the data structure
    var payload = {
        overlayNinja: data  // Your custom data
    };
    
    // Send to specific UUID
    iframe.contentWindow.postMessage({
        sendData: payload,
        type: "pcs",
        UUID: targetUUID
    }, "*");
}

// Example usage
sendDataToPeer({
    message: "Hello specific peer!",
    timestamp: Date.now()
}, "peer-uuid-123");

Sending to Peers with Specific Labels

function sendDataByLabel(data, targetLabel) {
    // Create the data structure
    var payload = {
        overlayNinja: data  // Your custom data
    };
    
    // Iterate through connected peers to find those with matching label
    var keys = Object.keys(connectedPeers);
    for (var i = 0; i < keys.length; i++) {
        try {
            var UUID = keys[i];
            var label = connectedPeers[UUID];
            if (label === targetLabel) {
                // Send to this specific peer
                iframe.contentWindow.postMessage({
                    sendData: payload,
                    type: "pcs",
                    UUID: UUID
                }, "*");
            }
        } catch (e) {
            console.error("Error sending to peer:", e);
        }
    }
}

// Example usage
sendDataByLabel({
    message: "Hello all viewers!",
    timestamp: Date.now()
}, "viewer");

Sending to a Peer by StreamID

function sendDataByStreamID(data, streamID) {
    // Create the data structure
    var payload = {
        overlayNinja: data  // Your custom data
    };
    
    // Send to specific streamID
    iframe.contentWindow.postMessage({
        sendData: payload,
        type: "pcs",
        streamID: streamID
    }, "*");
}

// Example usage
sendDataByStreamID({
    message: "Hello by stream ID!",
    timestamp: Date.now()
}, "stream-123");

Tracking Connected Peers

To reliably communicate with peers, keep track of connections and disconnections:

// Store connected peers
var connectedPeers = {};

function handleConnectionEvents(data) {
    // Guest connections
    if (data.action === "guest-connected" && data.streamID) {
        connectedPeers[data.streamID] = data.value?.label || "Guest";
        console.log("Guest connected:", data.streamID, "Label:", connectedPeers[data.streamID]);
    }
    // View connections
    else if (data.action === "view-connection") {
        if (data.value && data.streamID) {
            connectedPeers[data.streamID] = "Viewer";
            console.log("Viewer connected:", data.streamID);
        } else if (data.streamID) {
            console.log("Viewer disconnected:", data.streamID);
            delete connectedPeers[data.streamID];
        }
    }
    // Director connections
    else if (data.action === "director-connected") {
        console.log("Director connected");
    }
    // Handle disconnections
    else if (data.action === "push-connection" && data.value === false && data.streamID) {
        console.log("User disconnected:", data.streamID);
        delete connectedPeers[data.streamID];
    }
}

Getting All Connected StreamIDs

You can request a list of all connected streams:

function getConnectedPeers() {
    iframe.contentWindow.postMessage({ getStreamIDs: true }, "*");
}

// In your event listener, handle the response:
if ("streamIDs" in e.data) {
    console.log("Connected streams:");
    for (var key in e.data.streamIDs) {
        console.log("StreamID:", key, "Label:", e.data.streamIDs[key]);
    }
}

Detailed State Information

For more comprehensive information about the current state:

function getDetailedState() {
    iframe.contentWindow.postMessage({ getDetailedState: true }, "*");
}

// Handle the response in your event listener

Data Structure Best Practices

  1. Use a Namespace: Put your data under a custom namespace to avoid conflicts

    {
  sendData: {
    yourAppName: {
      // Your data here
    }
  }
}

  2. Include Type Information: Include type identifiers to differentiate messages

    {
  sendData: {
    yourAppName: {
      type: "command",
      data: { /* command data */ }
    }
  }
}

  3. Include Timestamp: Add timestamps to help with ordering

    {
  sendData: {
    yourAppName: {
      type: "update",
      data: { /* update data */ },
      timestamp: Date.now()
    }
  }
}

Complete Example: Simple Chat System

Here's a complete example implementing a simple chat system using the P2P data channels:

// Create the interface
const container = document.createElement('div');
container.style.width = '100%';
container.style.maxWidth = '800px';
container.style.margin = '0 auto';
document.body.appendChild(container);

// Create VDO.Ninja iframe
const iframe = document.createElement('iframe');
iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";
iframe.src = "https://vdo.ninja/?room=chat-demo&cleanoutput";
iframe.style.width = "100%";
iframe.style.height = "360px";
container.appendChild(iframe);

// Create chat interface
const chatContainer = document.createElement('div');
chatContainer.style.marginTop = '20px';
container.appendChild(chatContainer);

const chatMessages = document.createElement('div');
chatMessages.style.height = '300px';
chatMessages.style.border = '1px solid #ccc';
chatMessages.style.padding = '10px';
chatMessages.style.overflowY = 'scroll';
chatContainer.appendChild(chatMessages);

const inputContainer = document.createElement('div');
inputContainer.style.marginTop = '10px';
inputContainer.style.display = 'flex';
chatContainer.appendChild(inputContainer);

const messageInput = document.createElement('input');
messageInput.type = 'text';
messageInput.placeholder = 'Type your message...';
messageInput.style.flexGrow = '1';
messageInput.style.padding = '8px';
inputContainer.appendChild(messageInput);

const sendButton = document.createElement('button');
sendButton.textContent = 'Send';
sendButton.style.marginLeft = '10px';
sendButton.style.padding = '8px 16px';
inputContainer.appendChild(sendButton);

// Store connected peers
const connectedPeers = {};

// Add event listeners
sendButton.addEventListener('click', sendChatMessage);
messageInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendChatMessage();
    }
});

function sendChatMessage() {
    const message = messageInput.value.trim();
    if (message) {
        // Create message object
        const chatData = {
            type: 'chat',
            text: message,
            sender: 'Me',
            timestamp: Date.now()
        };
        
        // Add to local chat
        addMessageToChat(chatData.sender, chatData.text);
        
        // Send to all peers
        sendDataToAllPeers(chatData);
        
        // Clear input
        messageInput.value = '';
    }
}

function addMessageToChat(sender, text) {
    const messageElement = document.createElement('div');
    messageElement.style.marginBottom = '8px';
    
    const senderSpan = document.createElement('strong');
    senderSpan.textContent = sender + ': ';
    messageElement.appendChild(senderSpan);
    
    const textNode = document.createTextNode(text);
    messageElement.appendChild(textNode);
    
    chatMessages.appendChild(messageElement);
    
    // Scroll to bottom
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function sendDataToAllPeers(data) {
    // Create the data structure
    const payload = {
        chatApp: data  // Using a custom namespace
    };
    
    // Send to all peers
    iframe.contentWindow.postMessage({
        sendData: payload,
        type: "pcs"
    }, "*");
}

// Set up event listener for messages from iframe
const eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
const eventer = window[eventMethod];
const messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function(e) {
    // Make sure the message is from our VDO.Ninja iframe
    if (e.source != iframe.contentWindow) return;
    
    // Process connection events
    if ("action" in e.data) {
        handleConnectionEvents(e.data);
    }
    
    // Handle received data
    if ("dataReceived" in e.data) {
        handleDataReceived(e.data.dataReceived, e.data.UUID);
    }
}, false);

function handleConnectionEvents(data) {
    if (data.action === "guest-connected" && data.streamID) {
        // Store connected peer information
        connectedPeers[data.streamID] = data.value?.label || "Guest";
        console.log("Guest connected:", data.streamID, "Label:", connectedPeers[data.streamID]);
        
        // Announce new connection in chat
        addMessageToChat("System", `${connectedPeers[data.streamID]} joined the chat`);
    } 
    else if (data.action === "push-connection" && data.value === false && data.streamID) {
        // Announce disconnection
        if (connectedPeers[data.streamID]) {
            addMessageToChat("System", `${connectedPeers[data.streamID]} left the chat`);
        }
        
        // Remove from tracking
        console.log("Guest disconnected:", data.streamID);
        delete connectedPeers[data.streamID];
    }
}

function handleDataReceived(data, senderUUID) {
    // Check for chat messages
    if (data.chatApp && data.chatApp.type === 'chat') {
        const chatData = data.chatApp;
        
        // Get sender name from our peer tracking if available
        const senderName = connectedPeers[senderUUID] || chatData.sender || "Unknown";
        
        // Add to chat
        addMessageToChat(senderName, chatData.text);
    }
}

Best Practices

  1. Track Connections: Always maintain a list of connected peers
  2. Use Namespaces: Organize your data under custom namespaces
  3. Add Type Information: Include message types for easier processing
  4. Include Timestamps: Help with ordering and synchronization
  5. Error Handling: Use try/catch blocks when sending messages
  6. Data Size: Keep payloads reasonably small to avoid performance issues
  7. UUID vs StreamID: Prefer UUID for targeting as it's more stable

Troubleshooting

  • No Data Received: Verify the UUID or streamID is correct
  • Connection Issues: Check if peers are properly connected before sending
  • Timing Problems: Ensure the iframe is fully loaded before sending messages
  • Data Format: Make sure your data is properly serializable
  • Security Settings: Check that your iframe permissions are set correctly

By following this guide, you can implement robust P2P data exchange between VDO.Ninja clients for any custom application.

description: 'Understanding the VDO.Ninja IFRAME API: Detecting User Joins and Disconnects'

IFRAME API Basics

The VDO.Ninja IFRAME API allows websites to embed and interact with VDO.Ninja streams. One of the most useful features is the ability to detect when users join or disconnect from your stream through event messaging. This guide will explain how to implement this functionality in your own projects.

How the IFRAME API Works

VDO.Ninja's IFRAME API uses the browser's postMessage API to communicate between your parent website and the embedded VDO.Ninja iframe. This allows you to:

  1. Send commands to control the VDO.Ninja instance
  2. Receive events and data from the VDO.Ninja instance

Setting Up the Basic Structure

irst, you need to create an iframe that loads VDO.Ninja:

// Create the iframe element
var iframe = document.createElement("iframe");

// Set necessary permissions
iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";

// Set the source URL (your VDO.Ninja room)
iframe.src = "https://vdo.ninja/?room=your-room-name&cleanoutput";

// Add the iframe to your page
document.getElementById("container").appendChild(iframe);

Setting Up the Event Listener

To detect joins and disconnects, you need to set up an event listener for messages from the iframe:

// Set up event listener (cross-browser compatible)
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

// Add the event listener
eventer(messageEvent, function (e) {
    // Make sure the message is from our VDO.Ninja iframe
    if (e.source != iframe.contentWindow) return;
    
    // Log the data for debugging
    console.log(e.data);
    
    // Process specific events
    if ("action" in e.data) {
        // Handle different actions
        handleAction(e.data);
    }
}, false);

Detecting User Joins and Disconnects

The key events to watch for are:

Guest Connections

function handleAction(data) {
    if (data.action === "guest-connected") {
        // A new guest has connected
        console.log("Guest connected:", data.streamID);
        
        // You can access additional info if available
        if (data.value && data.value.label) {
            console.log("Guest label:", data.value.label);
        }
    }
    else if (data.action === "view-connection") {
        // Someone viewing the stream has connected
        console.log("Viewer connected:", data.streamID);
        
        // The value property will be true for connections
        if (data.value) {
            console.log("New viewer connected");
        } else {
            console.log("Viewer disconnected");
        }
    }
    else if (data.action === "director-connected") {
        // The director has connected
        console.log("Director connected");
    }
    else if (data.action === "scene-connected") {
        // A scene has connected
        console.log("Scene connected:", data.value); // Scene ID
    }
    else if (data.action === "slot-updated") {
        // A stream has been assigned to a slot
        console.log("Stream", data.streamID, "assigned to slot", data.value);
    }
}

Disconnections

function handleAction(data) {
    // Handling disconnections
    if (data.action === "view-connection" && data.value === false) {
        // A viewer has disconnected
        console.log("Viewer disconnected:", data.streamID);
    }
    else if (data.action === "director-share" && data.value === false) {
        // A director has stopped sharing
        console.log("Director stopped sharing:", data.streamID);
    }
    else if (data.action === "push-connection" && data.value === false) {
        // A guest has disconnected
        console.log("Guest disconnected:", data.streamID);
    }
}

Complete Working Example

Here's a complete example that demonstrates detecting joins and disconnects:

// Create the container for the iframe
var container = document.createElement("div");
container.id = "vdo-container";
document.body.appendChild(container);

// Create the iframe element
var iframe = document.createElement("iframe");
iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";
iframe.src = "https://vdo.ninja/?room=your-room-name&cleanoutput";
iframe.style.width = "100%";
iframe.style.height = "100%";
container.appendChild(iframe);

// Create a status display element
var statusDiv = document.createElement("div");
statusDiv.id = "connection-status";
document.body.appendChild(statusDiv);

// Set up event listener
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

// Keep track of connected users
var connectedUsers = {};

// Add the event listener
eventer(messageEvent, function (e) {
    // Make sure the message is from our VDO.Ninja iframe
    if (e.source != iframe.contentWindow) return;
    
    // Log all messages for debugging
    console.log(e.data);
    
    // Process specific actions
    if ("action" in e.data) {
        handleAction(e.data);
    }
}, false);

function handleAction(data) {
    // Handle connections
    if (data.action === "guest-connected" && data.streamID) {
        connectedUsers[data.streamID] = data.value?.label || "Guest";
        updateStatusDisplay("Guest connected: " + (data.value?.label || data.streamID));
    }
    else if (data.action === "view-connection") {
        if (data.value && data.streamID) {
            connectedUsers[data.streamID] = "Viewer";
            updateStatusDisplay("Viewer connected: " + data.streamID);
        } else if (data.streamID) {
            delete connectedUsers[data.streamID];
            updateStatusDisplay("Viewer disconnected: " + data.streamID);
        }
    }
    else if (data.action === "director-connected") {
        updateStatusDisplay("Director connected");
    }
    else if (data.action === "push-connection" && data.value === false && data.streamID) {
        delete connectedUsers[data.streamID];
        updateStatusDisplay("User disconnected: " + data.streamID);
    }
}

function updateStatusDisplay(message) {
    var timestamp = new Date().toLocaleTimeString();
    statusDiv.innerHTML += `<p>${timestamp}: ${message}</p>`;
    
    // Update connected users count
    var count = Object.keys(connectedUsers).length;
    document.getElementById("user-count").textContent = count;
}

// Add a user count display
var countDiv = document.createElement("div");
countDiv.innerHTML = "Connected users: <span id='user-count'>0</span>";
document.body.insertBefore(countDiv, statusDiv);

Waiting Room Example

You can implement a waiting room like the one in the waitingroom.html file from your code samples:

// Setup event listener
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
var waiting = null;

eventer(messageEvent, function (e) {
    if (e.source != iframe.contentWindow) return;
    
    if ("action" in e.data) {
        if (e.data.action == "joining-room") {
            // Show initial joining message
            outputWindow.innerHTML = "JOINING ROOM";
            
            // After 1 second, show waiting message if director hasn't joined
            waiting = setTimeout(function() {
                outputWindow.innerHTML = "Waiting for the director to join";
                outputWindow.classList.remove("hidden");
            }, 1000);
        } 
        else if (e.data.action == "director-connected") {
            // Director has joined, clear waiting message
            clearTimeout(waiting);
            outputWindow.innerHTML = "";
            outputWindow.classList.add("hidden");
        }
    }
});

Getting Additional Information About Connections

For more detailed information about connections, you can use the getStreamIDs or getDetailedState commands:

// Request info about all connected streams
iframe.contentWindow.postMessage({ "getStreamIDs": true }, "*");

// Request detailed state information
iframe.contentWindow.postMessage({ "getDetailedState": true }, "*");

Best Practices

  1. Always check the source: Make sure messages are coming from your VDO.Ninja iframe.
  2. Handle disconnections gracefully: Sometimes connections drop unexpectedly.
  3. Consider implementing reconnection logic: If important users disconnect, you might want to notify them or attempt to reconnect.
  4. Debug with console.log: Log all events during development to understand the full message flow.
  5. Test with multiple users: The behavior can be different depending on who connects first.

By implementing these techniques, you can build sophisticated applications that respond to users joining and leaving your VDO.Ninja sessions, creating more interactive and responsive experiences.

VDO.Ninja IFRAME API - Complete Inbound Control Reference

This document provides a comprehensive list of all inbound remote control calls available through the VDO.Ninja IFRAME API. These commands allow you to control a VDO.Ninja instance embedded in an iframe from your parent webpage.

Table of Contents

Basic Usage

To send commands to the VDO.Ninja iframe:

iframe.contentWindow.postMessage({
    command: value,
    // optional parameters
}, "*");

Audio Controls

mic - Microphone Control

Controls the local microphone mute state.

// Unmute microphone
iframe.contentWindow.postMessage({ mic: true }, "*");

// Mute microphone
iframe.contentWindow.postMessage({ mic: false }, "*");

// Toggle microphone
iframe.contentWindow.postMessage({ mic: "toggle" }, "*");

mute / speaker - Speaker Control

Controls the speaker mute state (incoming audio).

// Mute speakers
iframe.contentWindow.postMessage({ mute: true }, "*");
// OR
iframe.contentWindow.postMessage({ speaker: false }, "*");

// Unmute speakers
iframe.contentWindow.postMessage({ mute: false }, "*");
// OR
iframe.contentWindow.postMessage({ speaker: true }, "*");

// Toggle speaker
iframe.contentWindow.postMessage({ mute: "toggle" }, "*");

volume - Volume Control

Sets the volume level for incoming audio (0.0 to 1.0).

// Set volume to 50%
iframe.contentWindow.postMessage({ volume: 0.5 }, "*");

// Set volume for specific stream
iframe.contentWindow.postMessage({ 
    volume: 0.8, 
    target: "streamID123" // or use "*" for all streams
}, "*");

panning - Audio Panning

Adjusts stereo panning for incoming audio.

// Pan left (-90 to 90, where -90 is full left, 90 is full right)
iframe.contentWindow.postMessage({ 
    panning: -45,
    UUID: "connection-uuid" // optional, applies to all if omitted
}, "*");

targetAudioBitrate - Audio Bitrate Target

Sets the target audio bitrate (in kbps).

iframe.contentWindow.postMessage({ 
    targetAudioBitrate: 128,
    target: "streamID123" // optional
}, "*");

audiobitrate - Audio Bitrate Control

Changes the audio bitrate with optional lock.

iframe.contentWindow.postMessage({ 
    audiobitrate: 64,
    lock: true, // optional, defaults to true
    target: "streamID123" // optional
}, "*");

PPT - Push-to-Talk

Controls push-to-talk functionality.

// Activate PPT (unmute)
iframe.contentWindow.postMessage({ PPT: true }, "*");

// Deactivate PPT (mute)
iframe.contentWindow.postMessage({ PPT: false }, "*");

// Toggle PPT
iframe.contentWindow.postMessage({ PPT: "toggle" }, "*");

Video Controls

camera - Camera Control

Controls the local camera on/off state.

// Turn on camera
iframe.contentWindow.postMessage({ camera: true }, "*");

// Turn off camera
iframe.contentWindow.postMessage({ camera: false }, "*");

// Toggle camera
iframe.contentWindow.postMessage({ camera: "toggle" }, "*");

pauseinvisible - Pause Invisible Videos

Controls whether videos hidden in the mixer are paused.

// Enable pause invisible
iframe.contentWindow.postMessage({ pauseinvisible: true }, "*");

// Disable pause invisible
iframe.contentWindow.postMessage({ pauseinvisible: false }, "*");

// Toggle
iframe.contentWindow.postMessage({ pauseinvisible: "toggle" }, "*");

keyframe - Request Keyframe

Forces a keyframe to be sent to all scene connections.

iframe.contentWindow.postMessage({ keyframe: true }, "*");

Stream Management

requestStream - Request Specific Stream

Loads a specific stream by ID.

iframe.contentWindow.postMessage({ 
    requestStream: "streamID123" 
}, "*");

close / hangup - Disconnect Streams

Disconnects and hangs up connections.

// Normal hangup
iframe.contentWindow.postMessage({ close: true }, "*");

// Emergency stop (immediate)
iframe.contentWindow.postMessage({ close: "estop" }, "*");

// Hangup and reload
iframe.contentWindow.postMessage({ close: "reload" }, "*");

Recording Controls

record - Local Recording Control

Controls local video recording.

// Start recording
iframe.contentWindow.postMessage({ record: true }, "*");

// Stop recording
iframe.contentWindow.postMessage({ record: false }, "*");

// Record specific video element
iframe.contentWindow.postMessage({ 
    record: "videoElementId" 
}, "*");

Group Management

groups - Set Groups

Sets the groups for the local stream.

// Set groups as array
iframe.contentWindow.postMessage({ 
    groups: ["group1", "group2"] 
}, "*");

// Set groups as comma-separated string
iframe.contentWindow.postMessage({ 
    groups: "group1,group2" 
}, "*");

// Clear groups
iframe.contentWindow.postMessage({ groups: [] }, "*");

groupView - Set View Groups

Sets which groups are visible.

// View specific groups
iframe.contentWindow.postMessage({ 
    groupView: ["group1", "group3"] 
}, "*");

// View all groups
iframe.contentWindow.postMessage({ groupView: [] }, "*");

Bitrate & Quality Controls

bitrate - Video Bitrate Control

Sets video bitrate for streams (in kbps).

// Set bitrate for all streams
iframe.contentWindow.postMessage({ 
    bitrate: 2500,
    lock: true // optional, defaults to true
}, "*");

// Set bitrate for specific stream
iframe.contentWindow.postMessage({ 
    bitrate: 1000,
    target: "streamID123" // or UUID: "uuid-here"
}, "*");

targetBitrate - Target Video Bitrate

Sets the fundamental bitrate target.

iframe.contentWindow.postMessage({ 
    targetBitrate: 3000,
    target: "streamID123" // optional
}, "*");

manualBitrate - Manual Bandwidth Control

Sets manual bandwidth limits.

iframe.contentWindow.postMessage({ 
    manualBitrate: 5000,
    target: "streamID123" // optional
}, "*");

scale - Resolution Scaling

Controls resolution scaling.

// Set specific scale percentage
iframe.contentWindow.postMessage({ scale: 50 }, "*");

// Disable manual scaling (enable dynamic)
iframe.contentWindow.postMessage({ scale: false }, "*");

// Apply to specific stream
iframe.contentWindow.postMessage({ 
    scale: 75,
    UUID: "connection-uuid"
}, "*");

targetWidth / targetHeight - Resolution Request

Request specific resolution from remote connection.

iframe.contentWindow.postMessage({ 
    targetWidth: 1280,
    targetHeight: 720,
    UUID: "connection-uuid" // required
}, "*");

Device Management

changeVideoDevice - Change Camera

Changes the active video input device.

iframe.contentWindow.postMessage({ 
    changeVideoDevice: "deviceId-here" 
}, "*");

changeAudioDevice - Change Microphone

Changes the active audio input device.

iframe.contentWindow.postMessage({ 
    changeAudioDevice: "deviceId-here" 
}, "*");

changeAudioOutputDevice - Change Speaker

Changes the audio output device.

iframe.contentWindow.postMessage({ 
    changeAudioOutputDevice: "deviceId-here" 
}, "*");

getDeviceList - List Available Devices

Requests a list of available media devices.

iframe.contentWindow.postMessage({ 
    getDeviceList: true,
    cib: "callback-id" // optional callback ID
}, "*");

// Response will be sent back via postMessage:
// { deviceList: [...], cib: "callback-id" }

Layout & Display Controls

layout - Set Layout

Sets the display layout.

// Set single layout
iframe.contentWindow.postMessage({ layout: "grid" }, "*");

// Set multiple layouts (array)
iframe.contentWindow.postMessage({ 
    layout: ["grid", "presenter"] 
}, "*");

// With scene control (director only)
iframe.contentWindow.postMessage({ 
    layout: "grid",
    scene: 1,
    UUID: "target-uuid" // optional
}, "*");

previewMode - Switch Preview Mode

Switches between preview modes.

iframe.contentWindow.postMessage({ 
    previewMode: 1 // mode number
}, "*");

slotmode - Slot Mode Control

Controls slot mode behavior.

iframe.contentWindow.postMessage({ 
    slotmode: 1 // slot mode number, or false to disable
}, "*");

advancedMode - Toggle Advanced UI

Shows/hides advanced UI elements.

// Show advanced elements
iframe.contentWindow.postMessage({ advancedMode: true }, "*");

// Hide advanced elements
iframe.contentWindow.postMessage({ advancedMode: false }, "*");

toggleSettings - Toggle Settings Panel

Controls the settings panel visibility.

// Toggle settings
iframe.contentWindow.postMessage({ toggleSettings: "toggle" }, "*");

// Show settings
iframe.contentWindow.postMessage({ toggleSettings: true }, "*");

target - DOM Manipulation

Manipulates video elements in the DOM.

// Add video to grid
iframe.contentWindow.postMessage({ 
    target: "streamID123",
    add: true
}, "*");

// Remove video from grid
iframe.contentWindow.postMessage({ 
    target: "streamID123",
    remove: true
}, "*");

// Replace all videos with target
iframe.contentWindow.postMessage({ 
    target: "streamID123",
    replace: true
}, "*");

// Apply settings to video element
iframe.contentWindow.postMessage({ 
    target: "streamID123",
    settings: {
        style: "transform: scale(1.5);",
        muted: true
    }
}, "*");

Data & Messaging

sendData - Send Generic Data

Sends data through peer connections.

iframe.contentWindow.postMessage({ 
    sendData: { custom: "data" },
    UUID: "target-uuid", // optional
    streamID: "streamID123", // optional
    type: "custom-type" // optional
}, "*");

sendChat - Send Chat Message

Sends a chat message to all peers.

iframe.contentWindow.postMessage({ 
    sendChat: "Hello everyone!" 
}, "*");

sendMessage - WebRTC Message to Viewers

Sends a message to viewer connections.

iframe.contentWindow.postMessage({ 
    sendMessage: { custom: "viewer-data" } 
}, "*");

sendRequest - WebRTC Request to Publishers

Sends a request to publisher connections.

iframe.contentWindow.postMessage({ 
    sendRequest: { action: "some-action" } 
}, "*");

sendPeers - Message All Peers

Sends a message to all connected peers.

iframe.contentWindow.postMessage({ 
    sendPeers: { broadcast: "data" } 
}, "*");

sendRawMIDI - Send MIDI Data

Sends raw MIDI messages.

iframe.contentWindow.postMessage({ 
    sendRawMIDI: {
        data: [144, 60, 127], // MIDI data array
        channel: 1,
        timestamp: Date.now()
    },
    UUID: "target-uuid" // optional
}, "*");

Statistics & Monitoring

getStats - Get Quick Stats

Requests current statistics.

// Get all stats
iframe.contentWindow.postMessage({ 
    getStats: true,
    cib: "callback-id"
}, "*");

// Get stats for specific stream
iframe.contentWindow.postMessage({ 
    getStats: true,
    streamID: "streamID123",
    cib: "callback-id"
}, "*");

getFreshStats - Get Detailed Stats

Requests detailed statistics (takes ~1 second).

iframe.contentWindow.postMessage({ 
    getFreshStats: true,
    cib: "callback-id"
}, "*");

getRemoteStats - Request Remote Stats

Requests statistics from remote peers.

iframe.contentWindow.postMessage({ 
    getRemoteStats: true 
}, "*");

requestStatsContinuous - Continuous Stats

Enables/disables continuous statistics updates.

// Enable continuous stats
iframe.contentWindow.postMessage({ 
    requestStatsContinuous: true 
}, "*");

// Disable continuous stats
iframe.contentWindow.postMessage({ 
    requestStatsContinuous: false 
}, "*");

getLoudness - Audio Loudness Monitoring

Enables/disables loudness monitoring.

// Enable loudness monitoring
iframe.contentWindow.postMessage({ 
    getLoudness: true,
    cib: "callback-id"
}, "*");

// Disable loudness monitoring
iframe.contentWindow.postMessage({ 
    getLoudness: false 
}, "*");

getStreamIDs - List Stream IDs

Gets a list of all connected stream IDs.

iframe.contentWindow.postMessage({ 
    getStreamIDs: true,
    cib: "callback-id"
}, "*");

getStreamInfo - Detailed Stream Information

Gets detailed information about all streams.

iframe.contentWindow.postMessage({ 
    getStreamInfo: true,
    cib: "callback-id"
}, "*");

getDetailedState - Complete State Information

Gets comprehensive state information.

iframe.contentWindow.postMessage({ 
    getDetailedState: true,
    cib: "callback-id"
}, "*");

getGuestList - Get Guest List

Gets a list of all connected guests.

iframe.contentWindow.postMessage({ 
    getGuestList: true,
    cib: "callback-id"
}, "*");

Utility Functions

reload - Reload Page

Forces a page reload.

iframe.contentWindow.postMessage({ reload: true }, "*");

style - Inject Custom CSS

Injects custom CSS into the iframe.

iframe.contentWindow.postMessage({ 
    style: `
        .videoContainer { border: 2px solid red; }
        #mutebutton { background: blue; }
    `
}, "*");

function - Execute Built-in Functions

Executes predefined functions.

// Preview webcam
iframe.contentWindow.postMessage({ 
    function: "previewWebcam" 
}, "*");

// Publish screen
iframe.contentWindow.postMessage({ 
    function: "publishScreen" 
}, "*");

// Change HTML content
iframe.contentWindow.postMessage({ 
    function: "changeHTML",
    target: "elementId",
    value: "<p>New content</p>"
}, "*");

// Route WebSocket message
iframe.contentWindow.postMessage({ 
    function: "routeMessage",
    value: { /* message data */ }
}, "*");

// Execute arbitrary code (use with caution)
iframe.contentWindow.postMessage({ 
    function: "eval",
    value: "console.log('Hello from eval');"
}, "*");

saveVideoFrameToDisk - Save Screenshot

Saves a video frame to disk.

// Save local video
iframe.contentWindow.postMessage({ 
    saveVideoFrameToDisk: true,
    filename: "screenshot.png" // optional
}, "*");

// Save specific stream
iframe.contentWindow.postMessage({ 
    saveVideoFrameToDisk: true,
    streamID: "streamID123",
    filename: "stream-capture.jpg"
}, "*");

// Save all streams
iframe.contentWindow.postMessage({ 
    saveVideoFrameToDisk: true,
    UUID: "*"
}, "*");

getVideoFrame - Get Video Frame Data

Gets video frame data as base64.

iframe.contentWindow.postMessage({ 
    getVideoFrame: true,
    streamID: "streamID123", // or UUID
    cib: "callback-id"
}, "*");

copyVideoFrameToClipboard - Copy Screenshot

Copies a video frame to clipboard.

iframe.contentWindow.postMessage({ 
    copyVideoFrameToClipboard: true,
    streamID: "streamID123" // or UUID
}, "*");

getSnapshotBySlot / getSnapshotByStreamID - Get Slot/Stream Snapshot

Gets a snapshot from a specific slot or stream using MediaStreamTrackProcessor.

// By slot number
iframe.contentWindow.postMessage({ 
    getSnapshotBySlot: 0, // slot index
    cib: "callback-id"
}, "*");

// By stream ID
iframe.contentWindow.postMessage({ 
    getSnapshotByStreamID: "streamID123",
    cib: "callback-id"
}, "*");

// Response includes base64 image data:
// {
//     type: 'frame',
//     frame: 'data:image/png;base64,...',
//     UUID: 'connection-uuid',
//     streamID: 'streamID123',
//     slot: 0,
//     format: 'png',
//     cib: 'callback-id'
// }

Advanced Controls

sceneState - OBS Scene State

Sets the scene state for OBS integration.

// Scene is live
iframe.contentWindow.postMessage({ 
    sceneState: true 
}, "*");

// Scene is not live
iframe.contentWindow.postMessage({ 
    sceneState: false 
}, "*");

layouts - OBS Layout Sync

Syncs layouts with OBS.

iframe.contentWindow.postMessage({ 
    layouts: ["layout1", "layout2"],
    obsSceneTriggers: true // optional
}, "*");

obsCommand - OBS Commands

Sends commands to OBS.

iframe.contentWindow.postMessage({ 
    obsCommand: "some-command",
    remote: "remote-id", // optional
    UUID: "target-uuid", // optional
    streamID: "streamID123" // optional
}, "*");

setBufferDelay - Audio/Video Buffer Delay

Sets the buffer delay in milliseconds.

// Set default buffer delay
iframe.contentWindow.postMessage({ 
    setBufferDelay: 200 
}, "*");

// Set for specific stream
iframe.contentWindow.postMessage({ 
    setBufferDelay: 300,
    streamID: "streamID123" // or UUID or label
}, "*");

// Set for all streams
iframe.contentWindow.postMessage({ 
    setBufferDelay: 250,
    UUID: "*"
}, "*");

automixer - Automixer Control

Controls the automatic mixer behavior.

// Enable automixer
iframe.contentWindow.postMessage({ 
    automixer: true 
}, "*");

// Disable automixer (manual control)
iframe.contentWindow.postMessage({ 
    automixer: false 
}, "*");

enableYouTube - YouTube Chat Integration

Enables YouTube chat integration.

// Enable with API key
iframe.contentWindow.postMessage({ 
    enableYouTube: "your-youtube-api-key" 
}, "*");

// Enable with existing key
iframe.contentWindow.postMessage({ 
    enableYouTube: true 
}, "*");

nextSlide / prevSlide - Slide Navigation

Controls slide navigation.

// Next slide
iframe.contentWindow.postMessage({ nextSlide: true }, "*");

// Previous slide
iframe.contentWindow.postMessage({ prevSlide: true }, "*");

getFaces / faceTrack - Face Detection

Controls face detection/tracking.

// Enable face tracking
iframe.contentWindow.postMessage({ 
    getFaces: true,
    faceTrack: true
}, "*");

// Disable face tracking
iframe.contentWindow.postMessage({ 
    getFaces: true,
    faceTrack: false
}, "*");

getEffectsData - Effects Data

Gets data from visual effects (face tracking, etc.).

// Get specific effect data
iframe.contentWindow.postMessage({ 
    getEffectsData: "effect-name" 
}, "*");

// Disable effects data
iframe.contentWindow.postMessage({ 
    getEffectsData: false 
}, "*");

action - Companion API Actions

Executes Companion API actions.

iframe.contentWindow.postMessage({ 
    action: "action-name",
    value: "action-value",
    target: "optional-target"
}, "*");

Response Handling

Many commands support a callback ID (cib) for tracking responses:

// Send request with callback ID
iframe.contentWindow.postMessage({ 
    getStats: true,
    cib: "unique-callback-123"
}, "*");

// Listen for response
window.addEventListener("message", function(e) {
    if (e.data.cib === "unique-callback-123") {
        console.log("Stats received:", e.data.stats);
    }
});

Notes

  • All commands are sent via postMessage to the iframe's contentWindow
  • The second parameter "*" can be replaced with a specific origin for security
  • Some commands require director privileges to function
  • Commands that affect remote streams often accept UUID, streamID, or target parameters
  • The lock parameter on bitrate controls prevents automatic adjustments
  • Many "get" commands return data via postMessage back to the parent window

description: Enhanced IFRAME API Documentation - HTTP/WSS API Integration

IFRAME API for Directors

Overview

The VDO.Ninja IFRAME API provides access to all HTTP/WSS API commands through the action parameter. This means you can use any command from the HTTP/WSS API directly through the iframe's postMessage interface.

Using HTTP/WSS API Commands via IFRAME

All commands available in the HTTP/WSS API can be accessed through the IFRAME API using this format:

iframe.contentWindow.postMessage({
    action: "commandName",
    value: "value",
    value2: "optional",
    target: "optional", // for director commands
    cib: "callback-id" // optional callback identifier
}, "*");

Director Permissions

Important: To use director commands for remote control, you must have director permissions:

  1. Use &director=roomname instead of &room=roomname in your iframe URL
  2. Or combine with &codirector=password to enable multiple directors
  3. Without proper permissions, director commands will fail silently

Example iframe URL with director permissions:

https://vdo.ninja/?director=myroom&cleanoutput&api=myapikey

Complete Command Reference

Self Commands (No Target Required)

These commands affect the local VDO.Ninja instance:

// Microphone control
iframe.contentWindow.postMessage({ action: "mic", value: "toggle" }, "*");

// Camera control  
iframe.contentWindow.postMessage({ action: "camera", value: false }, "*");

// Speaker control
iframe.contentWindow.postMessage({ action: "speaker", value: true }, "*");

// Volume control (0-200)
iframe.contentWindow.postMessage({ action: "volume", value: 85 }, "*");

// Recording
iframe.contentWindow.postMessage({ action: "record", value: true }, "*");

// Bitrate control
iframe.contentWindow.postMessage({ action: "bitrate", value: 2500 }, "*");

// Layout control
iframe.contentWindow.postMessage({ action: "layout", value: 2 }, "*");

// Custom layout object
iframe.contentWindow.postMessage({ 
    action: "layout", 
    value: [
        {x: 0, y: 0, w: 50, h: 100, slot: 0},
        {x: 50, y: 0, w: 50, h: 100, slot: 1}
    ]
}, "*");

// Group management
iframe.contentWindow.postMessage({ action: "joinGroup", value: "1" }, "*");
iframe.contentWindow.postMessage({ action: "leaveGroup", value: "2" }, "*");

// Get information
iframe.contentWindow.postMessage({ action: "getDetails", cib: "details-123" }, "*");
iframe.contentWindow.postMessage({ action: "getGuestList", cib: "guests-456" }, "*");

// Camera PTZ controls
iframe.contentWindow.postMessage({ action: "zoom", value: 0.1 }, "*"); // Relative
iframe.contentWindow.postMessage({ action: "zoom", value: 1.5, value2: "abs" }, "*"); // Absolute
iframe.contentWindow.postMessage({ action: "pan", value: -0.5 }, "*");
iframe.contentWindow.postMessage({ action: "tilt", value: 0.1 }, "*");
iframe.contentWindow.postMessage({ action: "focus", value: 0.8, value2: "abs" }, "*");

// Other controls
iframe.contentWindow.postMessage({ action: "reload" }, "*");
iframe.contentWindow.postMessage({ action: "hangup" }, "*");
iframe.contentWindow.postMessage({ action: "togglehand" }, "*");
iframe.contentWindow.postMessage({ action: "togglescreenshare" }, "*");
iframe.contentWindow.postMessage({ action: "forceKeyframe" }, "*");
iframe.contentWindow.postMessage({ action: "sendChat", value: "Hello everyone!" }, "*");

Director Commands (Target Required)

These commands require director permissions and target specific guests:

// Target can be:
// - Slot number: "1", "2", "3", etc.
// - Stream ID: "abc123xyz"
// - "*" for all guests (where applicable)

// Guest microphone control
iframe.contentWindow.postMessage({ 
    action: "mic", 
    target: "1", 
    value: "toggle" 
}, "*");

// Guest camera control
iframe.contentWindow.postMessage({ 
    action: "camera", 
    target: "streamID123", 
    value: false 
}, "*");

// Add guest to scene
iframe.contentWindow.postMessage({ 
    action: "addScene", 
    target: "2", 
    value: 1  // Scene number
}, "*");

// Transfer guest to another room
iframe.contentWindow.postMessage({ 
    action: "forward", 
    target: "1", 
    value: "newroom" 
}, "*");

// Solo chat with guest
iframe.contentWindow.postMessage({ 
    action: "soloChat", 
    target: "3" 
}, "*");

// Two-way solo chat
iframe.contentWindow.postMessage({ 
    action: "soloChatBidirectional", 
    target: "2" 
}, "*");

// Send private message to guest
iframe.contentWindow.postMessage({ 
    action: "sendChat", 
    target: "1", 
    value: "Private message" 
}, "*");

// Overlay message on guest's screen
iframe.contentWindow.postMessage({ 
    action: "sendDirectorChat", 
    target: "2", 
    value: "You're live in 10 seconds!" 
}, "*");

// Guest volume control
iframe.contentWindow.postMessage({ 
    action: "volume", 
    target: "1", 
    value: 120  // 0-200
}, "*");

// Disconnect specific guest
iframe.contentWindow.postMessage({ 
    action: "hangup", 
    target: "3" 
}, "*");

// Guest camera PTZ control
iframe.contentWindow.postMessage({ 
    action: "zoom", 
    target: "1", 
    value: 0.1 
}, "*");

// Timer controls for guest
iframe.contentWindow.postMessage({ 
    action: "startRoomTimer", 
    target: "1", 
    value: 600  // 10 minutes in seconds
}, "*");

// Change guest position in mixer
iframe.contentWindow.postMessage({ 
    action: "mixorder", 
    target: "2", 
    value: -1  // Move up
}, "*");

Using targetGuest Function (Legacy)

The targetGuest function provides another way to control guests:

iframe.contentWindow.postMessage({
    function: "targetGuest",
    target: "1",      // Guest slot or stream ID
    action: "mic",    // Action to perform
    value: "toggle"   // Value (optional)
}, "*");

Using Commands Function

Access any command from the Commands object:

iframe.contentWindow.postMessage({
    function: "commands",
    action: "zoom",
    value: 0.5,
    value2: "abs"
}, "*");

Advanced DOM Manipulation

Target specific video elements by stream ID:

// Add video to grid
iframe.contentWindow.postMessage({
    target: "streamID123",
    add: true
}, "*");

// Remove video from grid
iframe.contentWindow.postMessage({
    target: "streamID123",
    remove: true
}, "*");

// Replace all videos with target
iframe.contentWindow.postMessage({
    target: "streamID123",
    replace: true
}, "*");

// Apply settings to video element
iframe.contentWindow.postMessage({
    target: "streamID123",
    settings: {
        style: "transform: scale(1.5);",
        muted: true,
        volume: 0.5
    }
}, "*");

Special Functions

// Preview local webcam
iframe.contentWindow.postMessage({
    function: "previewWebcam"
}, "*");

// Publish screen share
iframe.contentWindow.postMessage({
    function: "publishScreen"
}, "*");

// Change HTML content
iframe.contentWindow.postMessage({
    function: "changeHTML",
    target: "elementId",
    value: "<p>New content</p>"
}, "*");

// Route WebSocket message
iframe.contentWindow.postMessage({
    function: "routeMessage",
    value: { /* message data */ }
}, "*");

// Execute code (use with extreme caution)
iframe.contentWindow.postMessage({
    function: "eval",
    value: "console.log('Hello from eval');"
}, "*");

Handling Responses

Listen for responses with callback IDs:

window.addEventListener("message", function(e) {
    if (e.source !== iframe.contentWindow) return;
    
    if (e.data.cib === "my-callback-123") {
        console.log("Received response:", e.data);
        
        // Handle different response types
        if (e.data.guestList) {
            console.log("Guest list:", e.data.guestList);
        } else if (e.data.detailedState) {
            console.log("State info:", e.data.detailedState);
        } else if (e.data.callback) {
            console.log("Command result:", e.data.callback.result);
        }
    }
});

Complete Example: Director Control Panel

<!DOCTYPE html>
<html>
<head>
    <title>VDO.Ninja Director Control Panel</title>
</head>
<body>
    <h1>Director Control Panel</h1>
    
    <div id="container"></div>
    
    <div id="controls">
        <h2>Guest Controls</h2>
        <select id="guest-select">
            <option value="1">Guest 1</option>
            <option value="2">Guest 2</option>
            <option value="3">Guest 3</option>
        </select>
        
        <button onclick="controlGuest('mic', 'toggle')">Toggle Mic</button>
        <button onclick="controlGuest('camera', 'toggle')">Toggle Camera</button>
        <button onclick="controlGuest('addScene', 1)">Add to Scene 1</button>
        <button onclick="controlGuest('forward', 'lobby')">Send to Lobby</button>
        <button onclick="controlGuest('zoom', 0.1)">Zoom In</button>
        <button onclick="controlGuest('zoom', -0.1)">Zoom Out</button>
    </div>
    
    <div id="log"></div>

    <script>
    // Create iframe with director permissions
    const iframe = document.createElement("iframe");
    iframe.allow = "camera;microphone;fullscreen;display-capture;autoplay;";
    iframe.src = "https://vdo.ninja/?director=myroom&cleanoutput&api=mykey";
    iframe.style.width = "800px";
    iframe.style.height = "600px";
    document.getElementById("container").appendChild(iframe);
    
    // Control function
    function controlGuest(action, value) {
        const target = document.getElementById("guest-select").value;
        
        const message = {
            action: action,
            target: target
        };
        
        if (value !== undefined) {
            message.value = value;
        }
        
        // Generate callback ID
        const callbackId = `cb-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
        message.cib = callbackId;
        
        iframe.contentWindow.postMessage(message, "*");
        log(`Sent: ${JSON.stringify(message)}`);
    }
    
    // Listen for responses
    window.addEventListener("message", function(e) {
        if (e.source !== iframe.contentWindow) return;
        
        log(`Received: ${JSON.stringify(e.data)}`);
        
        // Handle specific events
        if (e.data.action === "guest-connected") {
            log(`Guest connected: ${e.data.streamID}`);
        } else if (e.data.guestList) {
            updateGuestList(e.data.guestList);
        }
    });
    
    // Logging
    function log(message) {
        const logDiv = document.getElementById("log");
        const entry = document.createElement("div");
        entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
        logDiv.appendChild(entry);
        logDiv.scrollTop = logDiv.scrollHeight;
    }
    
    // Update guest list
    function updateGuestList(guests) {
        const select = document.getElementById("guest-select");
        select.innerHTML = "";
        
        guests.forEach((guest, index) => {
            const option = document.createElement("option");
            option.value = guest.id || (index + 1);
            option.textContent = guest.label || `Guest ${index + 1}`;
            select.appendChild(option);
        });
    }
    
    // Get initial guest list
    setTimeout(() => {
        iframe.contentWindow.postMessage({
            action: "getGuestList",
            cib: "initial-guests"
        }, "*");
    }, 2000);
    </script>
</body>
</html>

Important Notes

  1. Director Permissions: Always use &director=roomname or &codirector=password for director commands
  2. Target Format: Use slot numbers (1, 2, 3) or stream IDs for targeting
  3. Callback IDs: Use unique cib values to track responses
  4. Error Handling: Commands may fail silently without proper permissions
  5. Timing: Wait for iframe to load before sending commands

Troubleshooting

  • Commands not working: Check director permissions in iframe URL
  • No response: Verify callback ID handling and message source
  • Guest not found: Confirm target value matches slot or stream ID
  • Permission errors: Ensure using &director= not &room=

This integration allows you to build powerful control interfaces using the full capabilities of the VDO.Ninja API through simple iframe messaging.

description: Improve quality of video if using iOS or Android native app versions

How to improve quality of the native app

The native app version of VDO.Ninja isn't as feature rich as the web-app version, so control over exactly resolutions, frame rates, and more are a bit limited. Still, there are ways to encourage the quality to be as high as it can go.

Increase the bitrate

Setting the bitrate on the viewer side, such as by adding one of the following to the view-link.

&videobitrate=12000, or maybe &videobitrate=12000&codec=h264 or &videobitrate=12000&codec=av1

Different phones will have different CPU/encoding capabilities, so different codecs can result in varying qualities sometimes.

Enable 1080p mode

In the app itself, you can enable the prefer 1080p mode also. This doesn't force 1080p mode, but it "suggests" to the phone that is what you want captured. In time, more advanced controls may be added in this respect.

Improve the network connection

You can also try to connect your smartphone via Ethernet, rather than via WiFi, and ensure your network connection is top-notch. You can do this with a USB to Ethernet adapter, and then connecting the phone to your router.

You'll want the viewer also to be on a wired connection if possible, so preferably also ethernet.

If on cellular, considering using a bonded cellular connection, such as those provided by Speedify or other provider.

Smartphone overheating

If your phone is getting warm, putting a metal heatsink on the backside of the phone directly can help keep it from thermal throttling. You can also try changing codecs, to see if perhaps there is a better option

Update your smartphone

Some smartphones will have limited functionality if using an older version of the operating system. This is especially true of iOS devices, where iOS 16 has several core improvements over iOS 16, for example.

Final notes

Those options will give you the best chance of obtaining the highest quality from the native app.

Otherwise, if you want more control over settings and quality, you'll need to use the web app, available at https://vdo.ninja.

How to install RaspNinja on Jetson

Download image for your device from:
https://developer.nvidia.com/embedded/downloads

.png>)

Write the image to a high-quality micro SD card, as low-quality SD cards will be slow and have a very short lifespan.

.png>)

Boot the Jetson with the SD card install. You will need a display and keyboard, ideally also a mouse, to complete the initial setup.

Connect the Jetson to the internet; Ethernet is ideal, but WiFi will work if your Jetson has a WiFi adapter.

Open the Terminal app or SSH into the Jetson to continue the installation.

.png>)

Download Raspberry Ninja and run the installer. This will update your Jetson installation to Ubuntu 20 and install the required components. It may take some time and may require some prodding if it fails.

git clone https://github.com/steveseguin/raspberry_ninja
cd raspberry_ninja
cd nvidia_jetson
chmod +x advanced_installer.sh
./advanced_installer.sh

(1).png>)

MIDI, API and WebHID support

MIDI hotkeys

There are numerous more hotkeys that can be used via MIDI; these are global hotkeys, used even if the window is not visible, but they require some additional setup. You can remotely control via MIDI also, using the &midiout and &midiin routing functionality.

MIDI hotkeys are compatible with an Elgato Streamdeck by means of a free Streamdeck MIDI plugin.

{% content-ref url="../midi-settings/midi.md" %} midi.md {% endcontent-ref %}

Bitfocus Companion

There is also Bitfocus Companion control compatibility, available here: https://github.com/bitfocus/companion-module-vdo-ninja

HTTP / Websocket API

The Bitfocus Companion plugin makes use of a HTTP and Websocket API, that allows for lots of remote control functionality.

There is a website that demos some of the commands available here: https://companion.vdo.ninja/ Details on the API itself is here: https://github.com/steveseguin/Companion-Ninja

You can use this to create your own hotkeys for pretty any device, application, or website.

{% content-ref url="../general-settings/api.md" %} api.md {% endcontent-ref %}

IFRAME API

The HTTP and websocket make use of a server to route API calls. If you'd like to create your own API server or don't need remote hotkey support, you can used the provide IFRAME API and send commands instead to VDO.Ninja via an IFRAME wrapper.

The IFRAME API is the most powerful option, but it requires some basic coding on your own part to have it provide hotkey functionality for your specific requirement.

{% content-ref url="iframe-api-documentation.md" %} iframe-api-documentation.md {% endcontent-ref %}

Below is an example of how to remotely control OBS anywhere online using the VDO.Ninja IFrame API; the code is just an example of how to use the IFrame API with OBS in this case, and it not intended to be used in production as is. The core concept lets you relay data messages from one website page to another, peer to peer, with just a few lines of code!

{% embed url="https://github.com/steveseguin/sample-p2p-tunnel" %}

WebHID

There is also WebHID support, but it's not fully implemented at this time. User requests are welcomed though and there's a demo here: https://vdo.ninja/webhid
It should be improved upon in the future, assuming the feature does not get depreciated by the browser first.

Feature requests and feedback

It's easy enough to add new hotkeys or features; please make a request as needed. The hotkey and API commands are organically development, based on user needs and feedback. Most simple requests can be accommodated within minutes.

description: Encoder options that can offer smooth playback

Recommended OBS WHIP settings

OBS Studio v30 now has WHIP output, which can stream into VDO.Ninja. While there are a few limitations of using OBS Studio with VDO.Ninja directly, some H264 settings that have reported offered good results are the following:

  • Rate Control: CRF
  • CRF: 23
  • Keyframe Interval: 1s
  • Preset: Veryfast
  • Profile: High
  • Tune: Fastdecode (required for WebRTC playback)
  • x264 Options: bframes=0 (required for WebRTC playback)

In some cases when using VDO.Ninja to view the WHIP video, adding &buffer=2500 to the VDO.Ninja view link can further help reduce any lost of skipped frames, but at the cost of increased latency.

While these above settings may not offer the lowest latency or CPU usage, please try them out before seeking support about issues you may be having. It's very easy to break things with bad settings.

{% hint style="warning" %} OBS Studio does not yet have fully compatible WHIP support with VDO.Ninja, as it lacks the ability to perform NAT traversal. You can resolve this issue with my patched version of OBS in the mean time-- download links can be found below:

[Windows] [macOS] [source] {% endhint %}

How to view WHIP streams using VDO.Ninja

There's a guide here for those looking to go live from OBS to VDO.Ninja via WHIP

{% embed url="https://docs.vdo.ninja/guides/from-obs-to-vdo.ninja-using-whip" %}

If looking for alternatives to publishing into VDO.Ninja, consider checking out Raspberry.Ninja also, which supports a broad range of encoders, including AV1-AOM, Intel QuickSync, Raspberry Pis, Nvidia Jetson, and many other hardware and software options. Playback is smooth, with support for multiple viewers. Runs on most systems, including Linux and Windows for Linux Subsystem (WSL).

description: How to share audio and video from OBS Studio into VDO.Ninja

Publish from OBS into VDO.Ninja

In this walk-through we demonstrate how to use VDO.Ninja with the OBS Virtual camera and Virtual Audio Cable.

This combination is powerful and opens the world to numerous new live show formats. You could also push back audio and/or video from OBS into VDO.Ninja to share with a group there, or into a large Zoom call, all with super low latency.

Combining this OBS to VDO.Ninja approach with &broadcast mode or a server-assisted approach, you can enable larger room sizes, with around 10 to 30 people in a room being feasible.

Requirements

Step 0

This guide assumes you have OBS installed, along with the other required software, though we shall briefly cover these initial installation steps now.


We also will assume you are using Windows. You will need to adapt accordingly for macOS, which likely is going to be more complicated.

On the computer that will be using Zoom or Google Hangouts to broadcast, please do the following:

  1. Uninstall and remove all old versions of OBS, including StreamLabs OBS if that is installed.
  2. Install OBS Studio v26 or newer. https://github.com/obsproject/obs-studio/releases/
  3. Lastly, install the VB-Cable Virtual Audio device. https://www.vb-audio.com/Cable/

Step 1

Start the OBS Virtual camera; located under the Start Recording button.

Step 2

We will now configure OBS to output audio from the Browser Source to the Virtual Audio Cable. In the OBS settings, under Advanced, we select the Monitoring Device to be our Virtual Audio device (CABLE Input).

We also want to disable Windows audio ducking.

Step 3

In our last configuration step, we want to go into the Advanced Audio Properties in OBS. When there, we want to set the audio sources we want to output have its Audio Monitoring setting be set to Monitor and Output.

If you intend to feed audio from OBS back into an VDO.Ninja group call, you can use this step to also mix-minus the audio; selecting just the audio sources you want the remote guests to hear, excluding their own audio to prevent echo.
\

Step 4

We’re READY to go! Using this setup we can publish from OBS into VDO.Ninja with near zero latency; going forward it's just like selecting a second Webcam and microphone.

If you are already in VDO.Ninja, you can switch between your webcam and the virtual camera and normal camera in the settings. If you're a director of a room in VDO.Ninja, you can even share you audio and video from OBS into a room and not have it show up in any scene; just have it been seen by guests.

It is important to remember that you need to select the VB-Audio Virtual Cable in the call as well, if you also want to share the audio from it that is.

If publishing to VDO.Ninja, remember that you can select multiple audio sources in VDO.Ninja by holding down CTRL (or command) when selecting them. You could include the VB Audio Cable and your local microphone together, for example.\

.png>)


All done! You can switch between the webcam and the OBS live video as needed.

If you need to listen to your VB-Audio cable at the same time still, you can refer to this help guide for a couple options: https://docs.vdo.ninja/guides/audio#guide-routing-windows-applications-audio-to-vdo.ninja

Having issues with frame rates or aspect ratios?

{% hint style="info" %} If you aren't getting 60-fps from the OBS Virtual Camera into &framerate=60 to the sender's URL. The OBS Virtual Camera doesn't always report what framerates it can handle correctly to the browser, but if you manually specify it, it should work. {% endhint %}

{% hint style="info" %} It's sometimes important to activate the OBS Virtual Camera in OBS before selecting it with VDO.Ninja. If you start the Virtual Camera *after* it has been selected, settings may not correctly work, such as the correct aspect ratio {% endhint %}

{% hint style="info" %} If looking to do custom aspect-ratios with the OBS Virtual Camera into VDO.Ninja, you can specify the exact width and height via the URL in VDO.Ninja; &width=720&height=1280, for example.

It's important that the resolution be exactly the same as what is specified in OBS video settings; deviations will cause issues.

It is also important that you activate the OBS Virtual Camera in OBS before select it in VDO.Ninja. If you do it after, the aspect ratio may not work correctly. {% endhint %}

Share webcam directly from OBS

If you wish not to use a third-party browser, but publish video directly from OBS itself, you can load OBS up in a special mode that allows for it.

Please see this article for more on that: https://docs.vdo.ninja/guides/share-webcam-from-inside-obs

How to publish to Facebook Live

There's a video guide on how to publish from VDO.Ninja to Facebook Live here: https://www.youtube.com/watch?v=Zk345qg0U6U

Some options that you can use to achieve this include:

RTMP is an option, typically done via OBS Studio. You can get a stream key for publishing from the Facebook Live production dashboard:
https://www.facebook.com/live/producer/

You'd use the OBS Browser source to bring VDO.Ninja into OBS Studio.

You can also publish via OBS into Facebook via the Virtual camera, as Facebook supports webcam publishing. This will require the use of a virtual audio cable though, and since OBS does not yet include its own virtual audio cable, you'll have to download one.
For example: https://vb-audio.com/Cable/

You can also screen share VDO.Ninja into Facebook, bypassing the need for OBS altogether. Facebook doesn't support audio cable via screen share sadly, so you'll need to use a virtual audio cable still for audio routing.

You can use the Electron Capture app instead of Chrome as a screen sharing source, which provides exact resolution and always-on-top options. It also makes it easier to select the virtual audio cable output as the output destination.

With Chrome, you can select the virtual audio cable as the output source by adding &od=cable to the scene/view link, or by visiting https://vdo.ninja/electron and selecting it from the drop down menu.

description: How to Set Up Proper Lighting for Live Streaming

Set Up Proper Lighting

Proper lighting is crucial for creating a professional-looking live stream. Good lighting can enhance your video quality, making you appear clearer and more engaging to your audience. This guide will walk you through the process of setting up effective lighting for your live stream.

Understanding the Basics

Before we dive into the setup, it's important to understand the three-point lighting system, which is the foundation of good lighting in video production:

  1. Key Light: The primary and brightest light source
  2. Fill Light: Softens shadows created by the key light
  3. Back Light: Separates you from the background, adding depth

Equipment You'll Need

  • 2-3 light sources (LED panels, ring lights, or softboxes)
  • Light stands (if not using desk lamps)
  • Diffusers (if your lights don't have built-in softening)
  • Optional: Dimmers or brightness adjusters

Step-by-Step Setup

1. Position Your Key Light

  • Place your brightest light at a 45-degree angle to your face, slightly above eye level.
  • This light should be on the same side as your "good side" if you have a preference.
  • Ensure it's not too close to avoid harsh shadows or washing out your features.

2. Add Your Fill Light

  • Position a softer light on the opposite side of your face from the key light.
  • This light should be about half the intensity of your key light.
  • Its purpose is to soften shadows and provide more even illumination.

3. Set Up the Back Light

  • Place this light behind you, pointing at your shoulders and hair.
  • It should be out of frame and slightly higher than your head.
  • This light separates you from the background, adding depth to the image.

4. Adjust and Balance

  • Turn on all your lights and make adjustments.
  • Ensure the key light isn't too bright or causing harsh shadows.
  • Adjust the fill light to reduce shadows without flattening the image.
  • Fine-tune the back light so it creates a subtle glow without being distracting.

Additional Tips

  1. Use Natural Light: If possible, face a window for your key light and use artificial lights to supplement.
  2. Avoid Overhead Lighting: This can create unflattering shadows. Turn off ceiling lights if necessary.
  3. Consider Your Background: Ensure your lighting doesn't create distracting shadows on the wall behind you.
  4. Use Diffusion: Soft, diffused light is generally more flattering than harsh, direct light.
  5. Match Color Temperatures: If using multiple lights, ensure they have the same color temperature for consistency.
  6. Experiment with RGB Lights: These can add creative color effects to your background or accent lighting.
  7. Invest in Adjustable Lights: Lights with dimming capabilities and adjustable color temperature offer more flexibility.

Troubleshooting Common Issues

  • Glare on Glasses: Adjust the angle of your key light slightly to reduce reflections.
  • Harsh Shadows: Move your key light further away or use diffusion to soften the light.
  • Washed Out Appearance: Reduce the intensity of your lights or move them further away.
  • Uneven Lighting: Ensure your fill light is properly positioned to balance the key light.

Conclusion

Remember, good lighting takes practice and experimentation. Don't be afraid to make adjustments and find what works best for your specific setup and environment. With these guidelines, you'll be well on your way to creating a professional-looking live stream that engages your audience and enhances your content.

description: >- Share your webcam, virtual-camera, and audio source from using VDO.Ninja inside OBS

How to share webcam from inside OBS

{% hint style="warning" %} This guide works for OBS Studio v27.1.3, but some users have had issues with v27.2. {% endhint %}

By default, you can't select your webcam in an OBS dock or browser source. This can be changed by adding a command-line parameter to the OBS launch shortcut.

Within Windows, we can right-click the OBS launch icon or app icon, right click the "OBS Studio" option, and then click Properties. This will provide us the launch properties window.

(1) (1) (1) (1) (1).png>)

We want to add --enable-media-stream to the Target field; we want to add this after the quotations, and not inside them. See below for an example.

.png>)

From there, we are good to go. We can add a dock to OBS or a browser source, and we should be able to now activate our webcam source, such as the built-in OBS virtual webcam.

If we use the following VDO.Ninja URL as a dock source, we can have VDO.Ninja auto-start every time, create a new link that you can share with others. This link is setup to auto-select the OBS virtual camera and the first VB virtual audio cable, if one is available.

https://vdo.ninja/?webcam&vd=obs&ad=virtual&autostart&cover

(1).png>)

.png>)

description: Best Practices for Stream Scheduling and Promotion

Stream Scheduling and Promotion

Consistent scheduling and effective promotion are crucial for growing your audience and maintaining a successful streaming channel. This guide will cover key strategies to optimize your stream schedule and promote your content effectively.

Stream Scheduling

1. Consistency is Key

  • Set a regular schedule and stick to it
  • Stream at the same times each week to build viewer habits

2. Find Your Optimal Time Slot

  • Use your platform's analytics to identify when your audience is most active
  • Consider your target audience's time zone and typical schedule

3. Balance Frequency and Quality

  • Stream often enough to maintain audience engagement
  • Don't overcommit – prioritize quality over quantity

4. Plan for Variety

  • Mix up your content to keep things interesting
  • Consider themed days (e.g., "Multiplayer Mondays", "Tutorial Tuesdays")

5. Account for Special Events

  • Plan around major events in your niche (e.g., game releases, tournaments)
  • Occasionally schedule special, longer streams for big occasions

Stream Promotion

1. Leverage Social Media

  • Maintain active profiles on relevant platforms (Twitter, Instagram, TikTok)
  • Post regular updates, teasers, and highlights
  • Use appropriate hashtags to increase visibility

2. Optimize Your Stream Titles and Descriptions

  • Use clear, catchy titles that describe your content
  • Include relevant keywords in your descriptions for discoverability

3. Create a Content Calendar

  • Plan your streams and promotional content in advance
  • Ensure a consistent flow of content across all platforms

4. Collaborate with Other Streamers

  • Participate in raids and host other channels
  • Organize collaborative streams to cross-pollinate audiences

5. Engage with Your Community

  • Respond to comments and messages promptly
  • Create a Discord server for your community

6. Use Email Marketing

  • Build an email list for your most dedicated fans
  • Send regular newsletters with stream schedules and updates

7. Create Highlight Reels and Clips

  • Share your best moments on platforms like YouTube and TikTok
  • Use these to attract new viewers to your live streams

Platform-Specific Strategies

Twitch

  • Use the Schedule feature to display upcoming streams
  • Leverage Channel Points for viewer engagement
  • Participate in Twitch Teams relevant to your content

YouTube

  • Create and update playlists for your streams
  • Use Community posts to engage with your audience between streams
  • Optimize your video titles and thumbnails for search

Facebook Gaming

  • Use the Streamer Dashboard to schedule upcoming streams
  • Engage with viewers in Facebook Groups related to your content
  • Utilize Facebook Events to promote big streaming events

Advanced Promotion Techniques

1. Create a Website or Blog

  • Centralize your content and streaming information
  • Improve your SEO for better discoverability

2. Develop a Brand

  • Create consistent visuals across all platforms
  • Develop a unique streaming persona or style

3. Offer Exclusive Content

  • Provide Subscriber-only streams or content
  • Create Patreon tiers with special perks

4. Attend Gaming Events and Conventions

  • Network with other content creators and industry professionals
  • Promote your channel in person to potential new viewers

5. Run Contests and Giveaways

  • Encourage viewers to share your content for entries
  • Ensure you comply with platform rules and local laws

Measuring and Improving

1. Track Your Metrics

  • Monitor viewer counts, engagement rates, and follower growth
  • Use this data to refine your scheduling and promotion strategies

2. Seek Feedback

  • Regularly ask your community for input on your schedule and content
  • Conduct polls to gauge interest in potential new stream ideas

3. Stay Adaptable

  • Be willing to adjust your schedule based on performance and feedback
  • Keep an eye on platform changes and new features to leverage

Conclusion

Effective scheduling and promotion are ongoing processes that require consistent effort and adaptation. By maintaining a regular schedule, actively promoting your streams, and continuously engaging with your community, you can build a strong, loyal audience for your streaming channel. Remember to stay authentic and true to your content – your genuine passion will be your best promotional tool.

How to use the green screen just locally

Since OBS is using a very old browser inside, the green screen effect inside VDO.Ninja wouldn't really run well within OBS itself, and even if it did, accessing the camera from a browser-source is a hassle to setup.

What you could do though is use the Electron Capture app, and then just window capture the local preview output. You can hide the interface UI and access any camera/microphone changes via the Electron Capture's right-click context menu of options instead.

Electron download link: https://github.com/steveseguin/electroncapture/releases

Getting this working is not complex; pretty easy once you do it once actually. Sample URL to enter into VDO.Ninja:

https://vdo.ninja/?cleanoutput&webcam&effects=4

.png>)

Cheers.

How to use VDO.Ninja as a webcam for Google Hangouts, Zoom, and more

In this walk-through we demonstrate how to use VDO.Ninja and the OBS Virtual Camera to bring remote cameras, smartphones, and other media sources into third-party video software as a virtual webcam.

We will also be including audio in this guide, however that may not be needed in all situations. You can skip the audio-related portions if not needed for your application.

{% hint style="info" %} Some third-party applications support Browser Sources as an input, negating the need for a virtual camera, as VDO.Ninja can be used directly in such scenarios. {% endhint %}


Requirements for this guide

Basic Workflow Diagram

Please find below a diagram explaining the basic premise of what we are intending to do in this guide. We will go through it all, one step at a time.

(1).png>)

Step 0. - Installing dependencies

This guide assumes you have OBS installed, along with the other required software, though we shall briefly cover these initial installation steps now.

We also will assume you are using Windows. You will need to adapt accordingly for macOS, which likely is going to be more complicated.

On the computer that will be using Zoom or Google Hangouts to broadcast, please do the following:

  1. Install OBS Studio https://github.com/obsproject/obs-studio/releases/
  2. Install the VB-Cable Virtual Audio device.
    https://www.vb-audio.com/Cable/

Step 1.

Generate an VDO.Ninja invite. You will get an Invite link and a Browser Source link.

The Guest Invite Link is what you send to a person who you wish to join your live stream in OBS. We will also be calling this a PUSH link, as it contains &push in the URL.

The OBS Browser Source link is what we will be putting into OBS to capture our guest’s video stream with. We will also be calling this a VIEW link, as it contains &view in the URL.

(1) (1).png>)

Step 2.

For ease of setup, the "Generate Invite Link" button found at VDO.Ninja can provide you with both a PUSH (Guest Invite) link and an VIEW (OBS Source) link.

We will want to send the PUSH link to our guest, or if using a mobile phone, use the QR code to open the link. We can select our camera, microphone, and then click START.

(1) (1).png>)

Step 3.

Once we have our PUSH link setup to stream our camera, we can move on to pulling that video stream into OBS using the VIEW link.

To setup our OBS Studio, create a Scene and then add a Browser Source in OBS Studio. Give it a name and we will fill out the details in the next step.

Step 4.

In the properties for the Browser Source, we need to fill out a few fields and then hit OK.

  • The URL we add to OBS needs to be set to the VIEW address we created earlier,
    Just as example: https://vdo.ninja/?view=q3QCScW
    You will of course need to use your own link, with its own unique view ID, which was given to you at the end of Step #1. The view ID should exactly make the push ID; case-sensitive.
  • Width can be set to 1280
  • The height be set to 720
  • "Control audio via OBS" should be checked. This is quite important, else the audio will not work correctly or you will get a terrible echo / feedback.

(1).png>)

{% hint style="info" %} SECRET TIP: Some links in VDO.Ninja can be dragged and dropped directly into OBS from the Chrome browser, avoiding the tedious parts of step 2 and 3. You will still need to select “Control audio via OBS” however, if you wish audio to function. {% endhint %}

Step 5.

The video should appear and auto-play. There should be no audio feedback if you selected the Control audio via OBS option.

Now we just need to stretch the video to fill the full scene. It should snap into place when full.

Step 6.

Start the OBS Virtual camera ; located under the Start Recording button

Step 7. (optional)

We will now configure OBS to output audio from the Browser Source to the Virtual Audio Cable. In the OBS settings, under Advanced, we select the Monitoring Device to be our Virtual Audio device. (CABLE Input).

We also want to disable Windows audio ducking.

Step 8. (optional)

In our last configuration step, we want to go into the Advanced Audio Properties in OBS. When there, we want to set the audio sources we want to output have its Audio Monitoring setting be set to Monitor and Output.

If you intend to feed audio from OBS back into an VDO.Ninja group call, you can use this step to also mix-minus the audio; selecting just the audio sources you want the remote guests to hear, excluding their own audio to prevent echo.

Step 9.

We’re READY to go! Using this setup in VDO.Ninja or Zoom or Google Hangouts is just like selecting a second Webcam and microphone.

If you are already in the Zoom / Google Hangout call, you can switch between your webcam and the virtual camera and normal camera in the settings.

It is important to remember that you need to select the VB-Audio Virtual Cable in the call as well, if you also want to share the audio from it that is.

If publishing to VDO.Ninja, remember that you can select multiple audio sources in VDO.Ninja by holding down CTRL (or command) when selecting them. You could include the VB Audio Cable and your local microphone together, for example.

All done!

And that should be it! You can switch between the webcam and the OBS live video as needed.

If you need to increase the video quality from the defaults, all that is possible in the next section, linked below:

{% content-ref url="how-do-i-control-bitrate-quality.md" %} how-do-i-control-bitrate-quality.md {% endcontent-ref %}

description: Streaming PlayStation or Xbox Output to VDO.Ninja

PlayStation or Xbox to VDO.Ninja

This guide covers different methods for sharing your console gameplay through VDO.Ninja. VDO.Ninja allows you to easily share high-quality, low-latency video streams with others online.

Method 1: Browser-Compatible Capture Card

Some HDMI capture cards work directly with browsers, allowing you to bypass OBS entirely:

  1. Connect your PlayStation or Xbox to a browser-compatible capture card
  2. Plug the capture card into your computer
  3. In VDO.Ninja:
    • Select "Add your Camera"
    • Choose the capture card as your video source

This method offers a streamlined setup with low latency and high quality.

Method 2: PS Remote Play with Screen Sharing

For a hardware-free solution:

PlayStation:

  1. Install PS Remote Play on your computer
  2. Connect your PlayStation to PS Remote Play
  3. In VDO.Ninja:
    • Select "Share Your Screen"
    • Choose to share the PS Remote Play window
    • Optionally select system audio to share game sound

Xbox:

  1. Install the Xbox app on your Windows 10 or 11 PC
  2. Connect your Xbox to the Xbox app using Remote Play
  3. In VDO.Ninja:
    • Select "Share Your Screen"
    • Choose to share the Xbox app window
    • Optionally select system audio to share game sound

This approach is simple but may have slightly higher latency.

Method 4: Xbox-Specific Streaming (Windows 10/11 Only)

Xbox offers a built-in streaming feature for Windows 10 and 11 users:

  1. Press the Windows key + G to open the Xbox Game Bar
  2. Click on "Capture" and select "Start Recording"
  3. In VDO.Ninja:
    • Select "Share Your Screen"
    • Choose to share the game window or entire screen
    • Ensure system audio is selected to share game sound

This method provides good quality and relatively low latency for Xbox users.

Remember to adjust your console's privacy and streaming settings to enable remote play and streaming features.

Method 5: Capture Card with OBS Virtual Camera

For capture cards not directly compatible with browsers:

  1. Connect your PlayStation to the capture card
  2. In OBS Studio:
    • Add a "Video Capture Device" source for your capture card
    • Start the OBS Virtual Camera
  3. In VDO.Ninja:
    • Select "Add your Camera"
    • Choose the OBS Virtual Camera as your video source

This method allows for more advanced stream customization but adds an extra step.

Additional Considerations

  • HDMI Splitters: If you want to play on a TV while streaming, use an HDMI splitter to send the signal to both your capture device and TV.
    • Some HDMI capture devices have an HDMI pass-through option, which can be used in place of an HDMI splitter.
  • Audio Routing: Consider using a virtual audio cable to route game audio to VDO.Ninja if not captured by your chosen method
  • Latency: Browser-compatible capture cards generally offer the lowest latency when used directly with VDO.Ninja.
    • Some HDMI to USB capture devices are only compatible with OBS Studio and not the browser; a browser-compatible device is suggested.
  • Quality Settings: Experiment with VDO.Ninja's bitrate and resolution settings for optimal performance.

By leveraging VDO.Ninja's browser-based capabilities, you can often achieve a simpler setup with compatible capture cards, while still having the flexibility to use OBS when needed for more complex streaming scenarios.\

HDMI Splitter / pass-thru considerations

When considering HDMI splitters with pass-through for 4K content, it's important to understand their compatibility with various resolutions and frame rates:

4K Resolution and Frame Rate Compatibility

HDMI splitters with pass-through for 4K content typically support the following:

  • 4K resolution (3840 x 2160 pixels)
  • Frame rates up to 60fps for 4K content

However, compatibility can vary depending on the specific splitter model and HDMI version.

Key Considerations

HDMI Version

  • HDMI 2.0 supports 4K at 60fps
  • HDMI 1.4 supports 4K at 30fps

Ensure your splitter uses the appropriate HDMI version for your desired resolution and frame rate.

Bandwidth

4K content requires significant bandwidth, especially at higher frame rates. Look for splitters that support:

  • 18 Gbps bandwidth for 4K60 HDR
  • 10.2 Gbps bandwidth for 4K30

HDR Support

If you want to pass through HDR content, make sure the splitter explicitly supports it.

HDCP Compatibility

For copy-protected content, ensure the splitter is compatible with HDCP 2.2 or later.

Trade-offs

When using a splitter with pass-through, be aware of potential trade-offs:

  • Some splitters may introduce slight latency
  • Lower-quality splitters might degrade signal quality

Recommendations

  1. Choose a splitter that matches or exceeds your highest required resolution and frame rate.
  2. Opt for HDMI 2.0 or higher for the best 4K compatibility.
  3. Ensure the splitter supports the necessary bandwidth for your content.
  4. Verify HDR and HDCP compatibility if needed.

By carefully considering these factors, you can select an HDMI splitter with pass-through that maintains the quality of your 4K content while allowing you to share it across multiple displays or capture devices.

description: hotkey features via API and MIDI

API & MIDI Parameters

ParameterExplanation
&apiRemote control API (HTTP-GET / WSS-based)
&pieSupport for piesocket.com
&midiGlobal hotkey support via MIDI input and more
&midiinAllows for receiving of remote MIDI
&midioutBroadcast MIDI commands to a remote computer's virtual MIDI device
&midiremoteRemote MIDI control
&midichannelAllows for specifying which midi channel (1 to 16) to listen on
&midideviceAllows to specify which midi device (1 and up) selected
&midioffsetAllows you to set a series of buttons on a MIDI controller to be mute controls for those guests
&mididelayLets you precisely delay the MIDI play-out
&datamodeCombines a bunch of flags together; no video, no audio, GUI, etc.
&postapiLets you specify a custom POST URL to send events within VDO.Ninja to

description: Lets you precisely delay the MIDI play-out

&mididelay

General Option! (&push, &room, &view, &scene)

Options

Example: &mididelay=1000

Value Description
(numeric value) delay in ms

Details

&mididelay=1000 lets you precisely delay the MIDI play-out from VDO.Ninja to your MIDI device when using &midiin, irrespective of network latency.

Use case: If you have a remote drum machine, you can have it play out the beat exactly 4-bars ahead, allowing for music jamming types with even high ping delays between locations.

Related

{% content-ref url="../../midi-settings/midi.md" %} midi.md {% endcontent-ref %}

{% content-ref url="../../midi-settings/midiin.md" %} midiin.md {% endcontent-ref %}

description: Lets you specify a custom POST URL to send events within VDO.Ninja to

&postapi

General Option! (&push, &room, &view, &scene)

Aliases

  • &posturl

Options

Example: &postapi=https%3A%2F%2Fwebhook.site%2Fb190f5bf-e4f8-454a-bd51-78b5807df9c1

ValueDescription
(custom POST URL)Data JSON encoded, post URL requires HTTPS+CORS, and the passed URL parameter value needs to be encodedURLComponent

Details

&postapi lets you specify a custom POST URL to send events within VDO.Ninja to.

Data JSON encoded, post URL requires HTTPS+CORS, and the passed URL parameter value needs to be encodedURLComponent.
ie: &postapi=https%3A%2F%2Fwebhook.site%2Fb190f5bf-e4f8-454a-bd51-78b5807df9c1

If you don't want to listen for events with the websocket server API I host, you can use this with your own API https server instead and get key events pushed to you that way.

API reference - alt version

VDO.Ninja Remote Control API Documentation

Overview

VDO.Ninja's Remote Control API allows programmatic control of VDO.Ninja sessions via HTTP or WebSocket connections. This powerful API enables integration with stream decks, custom applications, and automation tools for controlling cameras, microphones, layouts, and other features.

Basic Setup

To enable the API on any VDO.Ninja instance, add the &api parameter with a unique API key:

https://vdo.ninja/?api=YOUR_UNIQUE_API_KEY&webcam

This key must be kept private and will be used to authenticate API requests. The same key must be used when making API calls to control this specific VDO.Ninja instance.

Connection Methods

The API supports three connection methods:

  1. WebSocket API (recommended for real-time control)
  2. HTTP GET API (good for simple controllers and hotkeys)
  3. Server-Sent Events (SSE) for one-way event monitoring

WebSocket API

Connect to wss://api.vdo.ninja:443 and authenticate with your API key:

const socket = new WebSocket("wss://api.vdo.ninja:443");

socket.onopen = function() {
    // Join with your API key
    socket.send(JSON.stringify({"join": "YOUR_UNIQUE_API_KEY"}));
    
    // After joining, you can send commands
    socket.send(JSON.stringify({
        "action": "mic", 
        "value": false // mute microphone
    }));
};

// Listen for responses and events
socket.onmessage = function(event) {
    const data = JSON.parse(event.data);
    console.log("Received:", data);
};

HTTP GET API

Structure: https://api.vdo.ninja/{apiKey}/{action}/{target}/{value}

Examples:

https://api.vdo.ninja/YOUR_UNIQUE_API_KEY/mic/false       // Mute microphone
https://api.vdo.ninja/YOUR_UNIQUE_API_KEY/camera/toggle   // Toggle camera

Server-Sent Events (SSE)

For monitoring events without sending commands:

const eventSource = new EventSource(`https://api.vdo.ninja/sse/YOUR_UNIQUE_API_KEY`);
eventSource.onmessage = function(event) {
    console.log(JSON.parse(event.data));
};

API Commands Reference

Self-Targeted Commands

These commands affect the local VDO.Ninja instance that has the API key enabled.

Action Value Options Description
mic true, false, toggle Control microphone state
camera true, false, toggle Control camera state
speaker true, false, toggle Control speaker state
volume 0 to 200 Set playback volume (percentage)
bitrate Integer (kbps), -1 for auto Set video bitrate
record true, false Control local recording
hangup N/A Disconnect current session
reload N/A Reload the page
sendChat Text string Send a chat message
togglehand N/A Toggle raised hand status
togglescreenshare N/A Toggle screen sharing
forceKeyframe N/A Force video keyframes ("rainbow puke fix")
getDetails N/A Get detailed state information
getGuestList N/A Get list of connected guests with IDs

Layout Control Commands

Action Value Description
layout 0 or false Switch to auto-mixer layout
layout Integer (1, 2, etc.) Switch to specific predefined layout
layout Layout object/array Apply custom layout configuration

Camera Control (PTZ) Commands

Action Value Description
zoom -1.0 to 1.0 Adjust zoom level (relative)
zoom 0.0 to 1.0 with value2="abs" Set absolute zoom level
focus -1.0 to 1.0 Adjust focus (relative)
pan -1.0 to 1.0 Adjust camera pan (negative=left)
tilt -1.0 to 1.0 Adjust camera tilt (negative=down)
exposure 0.0 to 1.0 Adjust camera exposure

Group Communication Commands

Action Value Description
group 1 to 8 Toggle participation in specified group
joinGroup 1 to 8 Join a specific group
leaveGroup 1 to 8 Leave a specific group
viewGroup 1 to 8 Toggle view of specified group
joinViewGroup 1 to 8 View a specific group
leaveViewGroup 1 to 8 Stop viewing a specific group

Timer Commands

Action Value Description
startRoomTimer Integer (seconds) Start countdown timer for room
pauseRoomTimer N/A Pause the room timer
stopRoomTimer N/A Stop and reset the room timer

Presentation Control

Action Value Description
nextSlide N/A Advance to next slide (for PowerPoint integration)
prevSlide N/A Go to previous slide
soloVideo true, false, toggle Highlight video for all guests

Director-Only Guest Commands

These commands target specific guests when you are the director.

Action Target Value Description
forward Guest ID/slot Room name Transfer guest to another room
addScene Guest ID/slot Scene ID (1-8) Toggle guest in/out of scene
muteScene Guest ID/slot Scene ID Toggle guest's audio in scene
mic Guest ID/slot true, false, toggle Control guest's microphone
hangup Guest ID/slot N/A Disconnect a specific guest
soloChat Guest ID/slot N/A Private chat with guest
soloChatBidirectional Guest ID/slot N/A Two-way private chat
speaker Guest ID/slot N/A Toggle guest's speaker
display Guest ID/slot N/A Toggle guest's display
forceKeyframe Guest ID/slot N/A Fix video artifacts for guest
soloVideo Guest ID/slot N/A Highlight specific guest's video
volume Guest ID/slot 0 to 100 Set guest's microphone volume
mixorder Guest ID/slot -1 or 1 Change guest's position in mixer

Target Parameter Explanation

When using director commands, you can specify targets in two ways:

  1. Slot number: Simple integers like 1, 2, 3 (corresponds to position in room)
  2. Stream ID: The unique ID for a specific guest (more reliable as slots can change)

Examples:

// Target guest in slot 1
{"action": "mic", "target": 1, "value": false}

// Target guest with specific stream ID
{"action": "mic", "target": "abc123xyz", "value": false}

Callbacks and Responses

API commands receive callbacks with the current state after execution:

// WebSocket example response when toggling mic
{
  "callback": {
    "action": "mic",
    "value": "toggle",
    "result": false  // Indicates mic is now muted
  }
}

Custom Layout Format

The layout API supports complex scene configurations. Layouts can be arrays of objects with properties:

// Simple layout with two videos
{
  "action": "layout",
  "value": [
    {"x": 0, "y": 0, "w": 50, "h": 100, "slot": 0},
    {"x": 50, "y": 0, "w": 50, "h": 100, "slot": 1}
  ]
}

Layout object properties:

  • x, y: Position (percentage of canvas)
  • w, h: Width and height (percentage)
  • slot: Which video slot to display (0-indexed)
  • z: Z-index for layering (optional)
  • c: Cover mode (true/false, optional)

Implementation Examples

Python Example

import websockets
import asyncio
import json

async def control_camera():
    async with websockets.connect("wss://api.vdo.ninja:443") as websocket:
        # Join with API key
        await websocket.send(json.dumps({"join": "YOUR_API_KEY"}))
        
        # Zoom in camera
        await websocket.send(json.dumps({
            "action": "zoom",
            "value": 0.5,
            "value2": "abs"
        }))
        
        # Wait for response
        response = await websocket.recv()
        print(f"Response: {response}")

asyncio.run(control_camera())

JavaScript HTTP Example

// Toggle microphone via HTTP
fetch("https://api.vdo.ninja/YOUR_API_KEY/mic/toggle")
    .then(response => response.text())
    .then(result => console.log("Mic toggled, new state:", result));

Integration with Automation Tools

The API integrates well with:

  1. BitFocus Companion: Official module available at github.com/bitfocus/companion-module-vdo-ninja
  2. Stream Deck: Can use HTTP requests for button actions
  3. Node-RED: Great for complex automation workflows
  4. Home Assistant: For smart home integration

Security Considerations

  • Keep your API key private
  • Consider using unique keys for different productions
  • The API has full control over the VDO.Ninja instance it's connected to
  • All connections are encrypted over SSL/TLS

Troubleshooting

  • Ensure the API key matches exactly between VDO.Ninja and your requests
  • For WebSocket connections, implement reconnection logic (connections timeout after ~1 minute of inactivity)
  • When using HTTP API, a timeout response means the request couldn't reach the target

Additional Resources

Advanced Usage: Self-Hosting the API

For production environments, you can self-host the API server:

  1. Clone the repository from GitHub

  2. Install dependencies with npm install

  3. Modify the server URL in your VDO.Ninja instances:

    session.apiserver = "wss://your-custom-domain:443";

  4. Run the server with proper SSL certificates

Note: Self-hosting support is limited and should only be attempted by experienced developers.

description: This is a snapshot of the VDO.Ninja API documentation as of Aug 16th, 2023

API reference

For the most up to date copy of this API endpoint documentation, please go to https://github.com/steveseguin/Companion-Ninja/#readme

For a test sandbox, to easily try out a few of the basic API options via a web dashboard, please go to: https://companion.vdo.ninja/

You can use this API on its own directly, or can use it indirectly via the Bitfocus Companion app /w the VDO.Ninja module. The Companion app can be found here: https://bitfocus.io/companion

While not maintained or controlled by VDO.Ninja, you can find the third-party Bitfocus Companion module for VDO.Ninja here: https://github.com/bitfocus/companion-module-vdo-ninja

Companion Ninja (aka, the VDO.Ninja remote HTTP/WSS API)

Remote control VDO.Ninja using an HTTP or Websocket interface; now Companion compatible.

Direct integration into VDO.Ninja

Support for Companion.Ninja is now built into VDO.Ninja (v19), with a set of hard-coded commands. The available API commands and their related options are listed further down. The index.html file contains sample code with an interactive layer, where you can press buttons to send commands to VDO.Ninja. HTTP and Websocket methods of sending commands are provided as examples. Details of those two methods are also below.

To use the integrated command set and API, just add &api=XXXXXX to the VDO.Ninja link you wish to remotely control, like you would any other parameter. ie: https://vdo.ninja?api=XXXXXX The API value needs to match the value used by Companion Ninja and should be kept private. Then just send commands however you may wish.

Note: This API should also work with the vdo.ninja/beta/mixer?api=XXXXX page.

Companion Plugin

A fantastic user in the community also has made a BitFocus-Companion module for this VDO.Ninja API. If you wish to avoid doing custom API calls, definitely give the module a go.

https://github.com/bitfocus/companion-module-vdo-ninja

Customized IFRAME API Integration

You can also use the Companion Ninja service with your own custom set of commands if desired. You would wrap VDO.Ninja into an IFRAME, and use the parent-window to relay commands to VDO.Ninja and Companion Ninja. You can speak to VDO.Ninja via the IFRAME API in that case, to have access to the more exhaustive set of remote control options.

An example of this approach can be found here:

https://github.com/steveseguin/Companion-Ninja/blob/main/iframe_api_customizable_example.html

Also note, the IFRAME API used by VDO.Ninja (v19.1) is also largely backwards compatible with the Companion Ninja API. You can find the IFRAME developer sandbox here: https://vdo.ninja/beta/iframe to get a sense of what is available.

Technical Details of the API

The API is likely to change over time, as this is still early days and user feedback with direct how things evolve. More commands added on request.

HTTP/GET API (/w SSL)

The HTTP API uses GET-requests (not POST/PUT), and is structured in a way to be compatible with existing hotkey control software.

https://api.vdo.ninja/{apiID}/{action}/{target}/{value}

or

https://api.vdo.ninja/{apiID}/{action}/{value}

or

https://api.vdo.ninja/{apiID}/{action}

Any field can be replaced with "null", if no value is being passed to it. Double slashes will cause issues though, so avoid those.

Websocket API

If using the Websocket API, this accepts JSON-based commands

connect to: wss://api.vdo.ninja:443

On connection, send: {"join": $apiID }, where $apiID is your api ID.

  • be sure to stringify objects as JSON before sending over the websocket connection. ie: JSON.stringify(object)

Once joined, you can then issue commands at will, such as this object

{
  "action":"reload",
  "value": "true",
  "target" "null"
}

Be sure to implement reconnection logic with the websocket connection, as it will timeout every minute or so by default otherwise. You will need to rejoin after a timeout.

API Commands

The API and its commands are currently in a DRAFT form, and as such, may/will undergo change.

Action Target Value Details
speaker null true Unmute the Local Speaker
speaker null false Mute the Local Speaker
speaker null toggle Toggle the state of the local Speaker
mic null true Unmute the local Microphone
mic null false Mute the local Microphone
mic null toggle Toggle the state of the local Microphone
camera null true Unmute local Camera
camera null false Mute local Camera
camera null toggle Toggle the state of the local Camera
volume null true Mutes all local audio tracks by setting the volume to 0%
volume null false Sets the playback volume of all audio tracks to 100%
volume null {integer value between 0 and 100} Sets the playback volume of all local playback audio
sendChat null {some chat message} Sends a chat message to everyone connected. Better suited for the websocket API over the HTTP one.
record null true Start recording the local video stream to disk; will probably create a popup currently
record null false Stops recording the local video stream
reload null null Reload the current page
hangup null null Hang up the current connection. For the director, this just stops the mic and camera mainly.
bitrate null true Unlock/reset bitrate of all currently incoming video
bitrate null false Pause all currently incoming video streams (bitrate to 0)
bitrate null {some integer} Set video bitrate of all incoming video streams to target bitrate in kilobits per second.
panning null true Centers the pan
panning null false Centers the pan
panning null {an integer between 0 and 180} Sets the stereo panning of all incoming audio streams; left to right, with 90 being center.
togglehand null null Toggles whether your hand is raised or not
togglescreenshare null null Toggles screen sharing on or off; will still ask you to select the screen though.
forceKeyframe null null Forces the publisher of a stream to issue keyframes to all viewers; "rainbow puke fix"
group null {an integer between 1 and 8} Toggle the director of a room in/out of a specified group room (vdo.ninja +v22). Useful for Comms app, etc
joinGroup null {an integer between 1 and 8} Have the director of a room join a specified group room (vdo.ninja +v22.12)
leaveGroup null {an integer between 1 and 8} Have the director of a room leave a specified group room (vdo.ninja +v22.12)
viewGroup null {an integer between 1 and 8} Toggle the director of a room's preview of a specific group (vdo.ninja +v22). Useful for Comms app, etc
joinViewGroup null {an integer between 1 and 8} Have the director of a room preview a specific group (vdo.ninja +v22.12)
leaveViewGroup null {an integer between 1 and 8} Have the director of a room un-preview a specific group (vdo.ninja +v22.12)
getDetails null null Will return a JSON object containing detailed state of everything. If a director, this will contain guest-state as seen by the director.
nextSlide null null Next PowerPoint slide. See https://github.com/steveseguin/powerpoint\_remote for setup (vdo.ninja +v22.12)
prevSlide null null Previous PowerPoint slide. See https://github.com/steveseguin/powerpoint\_remote for setup (vdo.ninja +v22.12)
soloVideo null toggle Toggle the Highlight of video for all guests (if a director) (vdo.ninja +v23)
soloVideo null true Highlight your video for all guests (if a director) (vdo.ninja +v23)
soloVideo null false Un-highlight your video for all guests (if a director) (vdo.ninja +v23)
stopRoomTimer null null Stop the timer for everyone in the room (if a director) (vdo.ninja +v23.9)
startRoomTimer null Integer to count down from Value to count down from is in seconds in the room; applies to everyone in a room (if a director) (vdo.ninja +v23.9)
PauseRoomTimer null null Pause the timer for all everyone in the room (if a director) (vdo.ninja +v23.9)
getGuestList null null Returns an object containing the guest slots positional values, so "1", "2", etc. Each is a key that contains the stream ID and label for that guest as well.

layout | null | {** see below}

Custom layout switching **

You can create an array of layouts, set them via the URL parameters in VDO.Ninja, and then switch between them remotely using the API.

The value passed to the API can either be a number, representing the position in the array of the layout you want to activate, or it can be a single layout object.

{action: "layout", value:3} or {action: "layout", value:[{"x":0,"y":0,"w":100,"h":100,"slot":0}]}

layout 0 is the auto mixer
layout 1 is the first custom layout
layout 2 is the second custom layout
etc

If using the Mixer App, the layout objects are controlled via the mixer app itself, so you don't need to pass an object in that case to the URL.

?layouts=[[{"x":0,"y":0,"w":100,"h":100,"slot":0}],[{"x":0,"y":0,"w":100,"h":100,"slot":1}],[{"x":0,"y":0,"w":100,"h":100,"slot":2}],[{"x":0,"y":0,"w":100,"h":100,"slot":3}],[{"x":0,"y":0,"w":50,"h":100,"c":false,"slot":0},{"x":50,"y":0,"w":50,"h":100,"c":false,"slot":1}],[{"x":0,"y":0,"w":100,"h":100,"z":0,"c":false,"slot":1},{"x":70,"y":70,"w":30,"h":30,"z":1,"c":true,"slot":0}],[{"x":0,"y":0,"w":50,"h":50,"c":true,"slot":0},{"x":50,"y":0,"w":50,"h":50,"c":true,"slot":1},{"x":0,"y":50,"w":50,"h":50,"c":true,"slot":2},{"x":50,"y":50,"w":50,"h":50,"c":true,"slot":3}],[{"x":0,"y":16.667,"w":66.667,"h":66.667,"c":true,"slot":0},{"x":66.667,"y":0,"w":33.333,"h":33.333,"c":true,"slot":1},{"x":66.667,"y":33.333,"w":33.333,"h":33.333,"c":true,"slot":2},{"x":66.667,"y":66.667,"w":33.333,"h":33.333,"c":true,"slot":3}]]

Some of these layout features are only available with Version 22 of VDO.Ninja; specifically the &layouts= parameter is available on v22.5 or newer only.

See for details and better documentation on this layout function:

and-layouts.md

Commands that target remote guests as a director (available on VDO.Ninja v19)

The guest slot (1 to 99) or the guests's stream ID can be used as a target.

Currently toggling is primarily available for options; on/off absolute value options will be coming soon.

Action Target Value Details
forward {guest slot or stream ID} {destination room} Transfer guest to specified room
addScene {guest slot or stream ID} {scene ID; 0 to 8, or an active custom scene name} Toggle guest in/out of specified scene
muteScene {guest slot or stream ID} {scene ID; 0 to 8, or an active custom scene name} Toggle guest's mic audio in scenes
group {guest slot or stream ID} {group ID; 1 to 8} Toggle guest in/out of specified group; default group 1
mic {guest slot or stream ID} null Toggle the mic of a specific guest
hangup {guest slot or stream ID} null Hangup a specific guest
soloChat {guest slot or stream ID} null Toggle solo chat with a specific guest
soloChatBidirectional {guest slot or stream ID} null Toggle two-way solo chat with a specific guest
speaker {guest slot or stream ID} null Toggle speaker with a specific guest
display {guest slot or stream ID} null Toggle whether a specific guest can see any video or not
sendDirectorChat {guest slot or stream ID} {some chat message} Sends a chat message to a guest and overlays it on their screen. Expires after a few moments.
sendPinnedDirectorChat {guest slot or stream ID} {some chat message} Same as sendDirectorChat, but stays until replaced with a new message
forceKeyframe {guest slot or stream ID} null Trigger a keyframe for active scenes, wrt to a guest; helps resolve rainbow puke
soloVideo {guest slot or stream ID} null Toggle whether a video is highlighted everywhere
volume {guest slot or stream ID} {0 to 100} Set the microphone volume of a specific remote guest
stopRoomTimer {guest slot or stream ID} null Stop the timer for the specific guest (+v23.9)
startRoomTimer {guest slot or stream ID} Integer to count down from Value to count down from is in seconds (+v23.9)
PauseRoomTimer {guest slot or stream ID} null Pause the timer for the specific guest (+v23.9)

Callbacks / State Responses

Start with Version 22 of VDO.Ninja, the API requests will have a response reflecting the state of the request.

For example, if toggling a mic of a guest, the response of the HTTP API request will be true or false, based on whether the mic is now muted or not. If the request is an object, such as when using getDetails, you'll get a JSON response instead of basic text. There's also getGuestList, which can be useful for getting a set of possible guest slot positional values, along with its corresponding stream ID and label.

Basic text/word responses are such things as true, false, null, fail, {somevalue}, or timeout. Timeout occurs if there's no listener or no response to a request; the system will stop the callback and fail to a timeout after 1-second.

If the request was made via WebSockets, instead of the HTTP request, you'll get a JSON object back that contains the same data, along with the original request, including custom data fields. These custom data fields, such as data.cid = 3124, can be used to link requests with the callback, if precision with the requests is needed.

There is no time-out when using WebSockets; the callback can happen seconds or minutes later even, although normally a response should be expected in under a second as well.

description: Simple VDO.Ninja API WebSocket Client Example

Client (node) event example

While I'm a fan of just connecting and seeing what the API outputs, based on different events/actions, here's some code to get you started with basic incoming connection detection.

Simple VDO.Ninja API WebSocket Client Example

Here's a NodeJS example that demonstrates how to:

  1. Connect to the VDO.Ninja API via WebSocket
  2. Detect when streams connect or disconnect
  3. Periodically poll for stream details
const WebSocket = require('ws');

class VDONinjaMonitor {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.apiServer = 'wss://api.vdo.ninja:443';
    this.ws = null;
    this.connected = false;
    this.streams = {};
    this.reconnectTimeout = null;
    this.pollInterval = null;
  }

  // Connect to the WebSocket server
  connect() {
    console.log(`Connecting to ${this.apiServer}...`);
    
    this.ws = new WebSocket(this.apiServer);
    
    this.ws.on('open', () => {
      console.log('WebSocket connection established');
      // Join with the API key
      this.ws.send(JSON.stringify({ join: this.apiKey }));
      this.connected = true;
      
      // Start polling for details periodically
      this.startPolling();
    });
    
    this.ws.on('message', (data) => {
      try {
        const message = JSON.parse(data);
        this.handleMessage(message);
      } catch (error) {
        console.error('Error parsing message:', error);
      }
    });
    
    this.ws.on('close', () => {
      console.log('WebSocket connection closed');
      this.connected = false;
      this.stopPolling();
      this.scheduleReconnect();
    });
    
    this.ws.on('error', (error) => {
      console.error('WebSocket error:', error);
      this.stopPolling();
      this.scheduleReconnect();
    });
  }
  
  // Handle messages from the WebSocket
  handleMessage(message) {
    // Log all messages for debugging
    console.log('Received message:', JSON.stringify(message, null, 2));
    
    // Handle connection events
    if (message.action === 'guest-connected') {
      const streamID = message.streamID;
      console.log(`Stream connected: ${streamID}`);
      
      // Store stream info
      this.streams[streamID] = {
        connected: true,
        label: message.value?.label || 'Unknown',
        connectTime: new Date()
      };
      
      // You could trigger additional actions here
    }
    // Handle alternative connection event
    else if (message.action === 'push-connection' && (message.value === true || message.value === "true")) {
      const streamID = message.streamID;
      console.log(`Stream connected (via push-connection): ${streamID}`);
      
      // Store stream info or update existing
      if (!this.streams[streamID]) {
        this.streams[streamID] = {
          connected: true,
          connectTime: new Date()
        };
      } else {
        this.streams[streamID].connected = true;
        this.streams[streamID].reconnectTime = new Date();
      }
    }
    // Handle disconnection events
    else if (message.action === 'push-connection' && (message.value === false || message.value === "false")) {
      const streamID = message.streamID;
      console.log(`Stream disconnected: ${streamID}`);
      
      if (this.streams[streamID]) {
        this.streams[streamID].connected = false;
        this.streams[streamID].disconnectTime = new Date();
        
        // Optional: Remove from active streams after a period
        setTimeout(() => {
          if (this.streams[streamID] && !this.streams[streamID].connected) {
            delete this.streams[streamID];
          }
        }, 60000);
      }
    }
    
    // Handle responses to our getDetails requests
    else if (message.callback && message.callback.action === 'getDetails') {
      console.log('Received stream details:');
      
      // The result contains detailed information about all connected streams
      const details = message.callback.result;
      
      if (details && details.guests) {
        // Update our local cache with the latest details
        Object.keys(details.guests).forEach(streamID => {
          if (!this.streams[streamID]) {
            this.streams[streamID] = {
              connected: true,
              connectTime: new Date()
            };
            console.log(`Discovered stream in poll: ${streamID}`);
          }
          
          // Update stream details
          this.streams[streamID] = {
            ...this.streams[streamID],
            ...details.guests[streamID],
            lastSeen: new Date()
          };
        });
        
        // Check for streams that are in our cache but not in the response
        Object.keys(this.streams).forEach(streamID => {
          if (this.streams[streamID].connected && !details.guests[streamID]) {
            console.log(`Stream not found in poll, marking as disconnected: ${streamID}`);
            this.streams[streamID].connected = false;
            this.streams[streamID].disconnectTime = new Date();
          }
        });
      }
    }
    
    // Handle action-specific events
    else if (message.action) {
      switch (message.action) {
        case 'remote-mute-state':
          // Handle remote mute state changes
          if (message.streamID && this.streams[message.streamID]) {
            this.streams[message.streamID].remoteMuted = message.value;
            console.log(`Stream ${message.streamID} remote mute state: ${message.value}`);
          }
          break;
          
        case 'remote-video-mute-state':
          // Handle remote video mute state changes
          if (message.streamID && this.streams[message.streamID]) {
            this.streams[message.streamID].videoMuted = message.value;
            console.log(`Stream ${message.streamID} video mute state: ${message.value}`);
          }
          break;
        
        case 'director':
        case 'codirector':
          // Handle director status changes
          if (message.streamID && this.streams[message.streamID]) {
            this.streams[message.streamID].isDirector = message.value;
            console.log(`Stream ${message.streamID} director state: ${message.value}`);
          }
          break;
      }
    }
  }
  
  // Send a command to the WebSocket
  sendCommand(action, value = null, target = null) {
    if (!this.connected) {
      console.warn('Cannot send command: WebSocket not connected');
      return false;
    }
    
    const command = { action };
    if (value !== null) command.value = value;
    if (target !== null) command.target = target;
    
    try {
      this.ws.send(JSON.stringify(command));
      return true;
    } catch (error) {
      console.error('Error sending command:', error);
      return false;
    }
  }
  
  // Request updated details about all streams
  requestDetails() {
    return this.sendCommand('getDetails');
  }
  
  // Start polling for stream details
  startPolling(intervalMs = 10000) {
    this.stopPolling();
    this.pollInterval = setInterval(() => {
      this.requestDetails();
    }, intervalMs);
    
    // Initial request
    this.requestDetails();
  }
  
  // Stop polling
  stopPolling() {
    if (this.pollInterval) {
      clearInterval(this.pollInterval);
      this.pollInterval = null;
    }
  }
  
  // Schedule reconnection attempt
  scheduleReconnect(delayMs = 5000) {
    if (this.reconnectTimeout) {
      clearTimeout(this.reconnectTimeout);
    }
    
    this.reconnectTimeout = setTimeout(() => {
      console.log('Attempting to reconnect...');
      this.connect();
    }, delayMs);
  }
  
  // Get a summary of connected streams
  getStreamSummary() {
    const connectedStreams = Object.keys(this.streams).filter(id => this.streams[id].connected);
    
    console.log(`\n=== Stream Summary ===`);
    console.log(`Total tracked streams: ${Object.keys(this.streams).length}`);
    console.log(`Currently connected: ${connectedStreams.length}`);
    
    console.log(`\nConnected streams:`);
    connectedStreams.forEach(streamID => {
      const stream = this.streams[streamID];
      console.log(`- ${streamID} (${stream.label || 'Unlabeled'})`);
    });
    
    return {
      total: Object.keys(this.streams).length,
      connected: connectedStreams.length,
      streams: this.streams
    };
  }
  
  // Close the connection
  disconnect() {
    this.stopPolling();
    if (this.reconnectTimeout) {
      clearTimeout(this.reconnectTimeout);
      this.reconnectTimeout = null;
    }
    
    if (this.ws) {
      this.ws.close();
      this.ws = null;
    }
    
    this.connected = false;
  }
}

// Usage example
const API_KEY = 'YOUR_API_KEY_HERE'; // Replace with your actual API key
const monitor = new VDONinjaMonitor(API_KEY);

// Connect to the API
monitor.connect();

// Periodically print a summary of streams (every 30 seconds)
setInterval(() => {
  monitor.getStreamSummary();
}, 30000);

// Handle application shutdown
process.on('SIGINT', () => {
  console.log('Shutting down...');
  monitor.disconnect();
  process.exit(0);
});

How to Use This Example

  1. Save this code as vdo-ninja-monitor.js

  2. Install the WebSocket dependency:

    npm install ws

  3. Replace 'YOUR_API_KEY_HERE' with your actual VDO.Ninja API key

  4. Run the script:

    node vdo-ninja-monitor.js

Key Features

This script demonstrates:

  1. WebSocket Connection: Establishes and maintains a connection to the VDO.Ninja API
  2. Event Handling: Detects when streams connect and disconnect
  3. Auto-Reconnection: Reconnects if the connection drops
  4. Periodic Polling: Requests updated details every 10 seconds
  5. Stream Tracking: Maintains a record of all seen streams with their status

You can extend this example to:

  • Send notifications when streams connect/disconnect
  • Log connection events to a database
  • Trigger actions based on specific stream events
  • Control streams or layouts based on connection patterns

Usage on links

Any link type that connects to a stream can use the API parameter to detect the incoming media connection status:

  1. View link: https://vdo.ninja/?view=streamID&api=myapikey - Detects when the broadcaster you're viewing connects/disconnects
  2. Scene link: https://vdo.ninja/?scene&view=streamID&api=myapikey - Shows the video while monitoring connection status
  3. Director link: https://vdo.ninja/?director=roomname&api=myapikey - Monitors all connections in a specific room

Each option enables the WebSocket API that sends events when streams connect or disconnect. The monitoring code works with any of these link types, though director links provide the most comprehensive monitoring if you're using rooms.

The key difference is which connection events you'll receive - view links only report on the specific stream being viewed, while director links report on all room participants.

You can also detect events from publishers, or those pushing media streams, however each publisher may need the &api added to detect when they go live. When they disconnect, you may or may not get a notification from them that they are hanging up — it depends on if they do a proper hang-up or a hard-close.

description: Filters, adding delay, bitrate, channels, mono/stereo, muting guests etc.

Audio Parameters

They are separated in three groups: general options (push and view), source side (push) options and viewer side (view) options.

General options

You can add them to both, source (&push) and viewer (&view, &scene or &solo) sides.

ParameterExplanation
&proaudioImproves the audio quality, changes default audio settings and sets the audio mode to stereo
&stereoSets the audio mode to stereo and changes default audio settings to improve audio quality
&mutespeakerAuto mutes the speaker
&deafenAudio playback is muted
&noaudioprocessingDisables all webaudio audio-processing pipelines

Source side options

You have to add them to the source side (&push).

ParameterExplanation
&audiodevicePre-configures the selected audio device
&echocancellationAutomatic echo-cancellation is ON or OFF
&audiogainApplies a gain multiplier (as a percentage) to the local microphone
&autogainSets whether audio auto-normalization is ON or OFF
&compressorApplies a generic audio compressor to the local microphone
&denoiseTurn audio noise reduction filter ON or OFF
&distortWill try to "distort" your microphone's output audio, making your voice a bit anonymous
&equalizerProvides access to a generic audio equalizer that can be applied to the local microphone
&limiterApplies a generic audio limiter to the local microphone
&lowcutAdds a low-cut filter
&noisegateLowers your mic volume to 10% of its current value based on volume-level activity
&noisegatesettingsLets you tweak the &noisegate variables, making it more or less aggressive as needed
&audiocontenthint=music fixed bitrate; =speech bitrate is variable
&audiolatencyAdds an audio-latency to the published audio stream
&micdelayDelays the microphone by specified time in ms
&muteStarts with the microphone muted by default
&automuteWill mute the microphone of a guest when not loaded in an active OBS scene
&outboundaudiobitrateTarget audio bitrate and max bitrate for outgoing audio streams
&inputchannelsAudio capture device to select N-number of audio channels
&monomicSets a guest's audio input to mono (1-channel)

Viewer side options

You have to add them to the viewer side (&view, &scene or &solo).

ParameterExplanation
&audiooutputLike &sink, but selects the audio output device
&sinkOutputs the audio to the specified audio output device, rather than the default
&volumeSets the 'default' playback volume for all video elements
&volumecontrolShows a dedicated local audio-volume control bar for canvas or image elements
&audiobitrateManually sets the audio bitrate in kbps
&vbrSets the audio bitrate to be variable, instead of constant
&monoHas the inbound audio playback as mono audio
&noaudioDelivers video only streams; audio playback is disabled
&nodirectoraudio*Disables all audio playback from room directors
&panningPans the outgoing audio left or right, allowing for spatial audio group chats
&syncSets an offset (in ms) for the automatic audio sync fix node
&samplerateAudio playback sample-rate, in hz
&channelsSpecifies the number of output audio channels you wish to mix up or down to
&channeloffsetShifts audio channels 0 and 1 up channels, based on the offset value
&playchannelWill play either the left or right audio stream-only for an incoming stereo stream
&ptimeAudio packet size
&maxptimeMaximum packet size of audio
&minptimeMinimum packet size of audio
&audiocodecLets you specify the audio codec
&dtxTurns off the audio encoder automatically when no little to no sound is detected
&nofecDisables FEC (audio forward error correction)

*NEW IN VERSION 24

description: '=music fixed bitrate; =speech bitrate is variable'

&audiocontenthint

Sender-Side Option! (&push)

Aliases

  • &audiohint
  • &audiocontenttype
  • &audiocontent

Options

Example: &audiocontenthint=music

Value Description
music seems to be a fixed bitrate of 32-kbps sent out by default
speech bitrate is variable, using less bandwidth when not speaking

Details

There are two options for &audiocontenthint: speech and music. No idea what it does exactly, but when using music there seems to be a fixed bitrate of 32-kbps sent out by default, where as with speech it is variable, using less bandwidth when not speaking.

{% hint style="warning" %} This parameter has been tested on Chrome, but other browsers may vary in behavior. Safari seems to just ignore things, for example. {% endhint %}

Related

{% content-ref url="../view-parameters/vbr.md" %} vbr.md {% endcontent-ref %}

{% content-ref url="../video-parameters/and-contenthint.md" %} and-contenthint.md {% endcontent-ref %}

description: Applies a gain multiplier (as a percentage) to the local microphone

&audiogain

Sender-Side Option! (&push)

Aliases

  • &g
  • &gain

Options

Example: &audiogain=80

ValueDescription
0mutes the microphone so that only the Director can unmute it; the guest cannot unmute.
100full volume - default
(integer value)value will be applied as a percentage.

Details

Adding &audiogain=50 to a source link sets the audio gain of the source to 50%.

  • Can be used to have a guest muted by default when joining a room (&audiogain=0).
  • Can be remotely controlled by the Director if in a room; the guest cannot unmute themselves.
  • Only applies to the first audio-source selected by a guest, if there is more than one selected.
  • If audio processing is on, then this should be available by default for the director to remotely control.
  • The gain function will NOT work if web-audio node processing cannot be enabled.

In Version 22 you can control the audio gain in the Audio Settings. If you want the guests to be able to change it by themselves, you can add &mediasettings to the guests' link.
.png>)

{% hint style="warning" %} Enables the audio processing pipeline. {% endhint %}

Related

{% content-ref url="and-volume.md" %} and-volume.md {% endcontent-ref %}

{% content-ref url="../../source-settings/autogain.md" %} autogain.md {% endcontent-ref %}

{% content-ref url="../../source-settings/and-limiter.md" %} and-limiter.md {% endcontent-ref %}

description: Will mute the microphone of a guest when not loaded in an active OBS scene

&automute

Sender-Side Option! (&push)

Aliases

  • &am

Options

Example: &automute=2

ValueDescription
(no value given)will auto mute the microphone of a guest when not loaded in an active OBS scene
2will mute it everywhere, while the default will still allow the director to speak to the guest, even if not in a scene

Details

&automute will auto mute the microphone of a guest when not loaded in an active OBS scene. Useful for perhaps limiting the discussion in a group chat to those on air.

&automute=2 will mute it everywhere, while the default will still allow the director to speak to the guest, even if not in a scene.

This is a guest-side URL parameter; you may want to apply it to all guests.

Required quite a bit of code reworking; error reporting is on in the console, so please report issues. Feedback also welcomed.

Related

{% content-ref url="../../source-settings/and-mute.md" %} and-mute.md {% endcontent-ref %}

{% content-ref url="and-audiogain.md" %} and-audiogain.md {% endcontent-ref %}

&bufferaudio

Also known as: &audiobuffer

Description

Sets a minimum audio buffer duration in milliseconds for incoming audio streams to improve playback stability.

Viewer-Side Option

This parameter controls the audio buffering for received streams, helping to smooth out network jitter.

Usage

  • &bufferaudio=100 - Sets 100ms audio buffer
  • &bufferaudio=250 - Sets 250ms audio buffer
  • &bufferaudio=0 - Minimal buffering (lowest latency)
  • &audiobuffer=200 - Alias usage

Examples

https://vdo.ninja/?view=streamID&bufferaudio=150
https://vdo.ninja/?scene=1&room=roomname&bufferaudio=200
https://vdo.ninja/?director&room=roomname&audiobuffer=100

Details

  • Value in milliseconds (ms)
  • Higher values increase stability but add latency
  • Lower values reduce latency but may cause glitches
  • Helps with poor network conditions
  • Only affects received audio, not sent audio

Recommended Values

  • 0-50ms: Ultra-low latency, stable networks only
  • 100-200ms: Good balance for most situations
  • 250-500ms: Poor network conditions
  • 500ms+: Very unstable connections

Trade-offs

Low Buffer (0-50ms):

  • ✅ Minimal latency
  • ❌ May glitch on poor networks
  • ❌ Sensitive to jitter

High Buffer (200ms+):

  • ✅ Smooth playback
  • ✅ Handles network issues
  • ❌ Noticeable delay

Use Cases

  • Music performances requiring sync
  • Interviews over unstable connections
  • International calls with high latency
  • Mobile connections with variable quality

Notes

  • Independent from video buffering
  • Applies to all incoming audio streams
  • May affect lip-sync at high values
  • Consider network conditions when setting

Related Parameters

description: >- Will play either the left or right audio stream-only for an incoming stereo stream

&playchannel

Viewer-Side Option! (&view, &scene, &room)

Options

Example: &playchannel=1

ValueDescription
1Will play the left audio channel only
2Will play the right audio channel only
3-6Will play the selected channel

Details

&playchannel will play either the left or right audio stream-only for an incoming stereo stream.

It will play back the selected channel as mono audio, dropping other channels from the playback. &playchannel=1 is left channel; 2 is right; and if multi channel works for you, then you can target 6 different channels.

This is useful if you wanted to capture the left and right audio channels of a remote guest in OBS in different browser sources, without having to do any fancy audio routing on the studio side.

Both left and right audio channels are still sent; it's just during local playback that the non-selected channels are dropped, so it's not as efficient as local routing, nor will both channel be in exact sync anymore either.

This will not currently work in conjunction with &panning of &channeloffset; and will override those options.

Example usage: https://vdo.ninja/?view=XXXXXXXX&stereo&playchannel=1

Related

{% content-ref url="../view-parameters/and-channels.md" %} and-channels.md {% endcontent-ref %}

{% content-ref url="and-inputchannels.md" %} and-inputchannels.md {% endcontent-ref %}

{% content-ref url="../view-parameters/and-channels.md" %} and-channels.md {% endcontent-ref %}

description: >- Will try to "distort" your microphone's output audio, making your voice a bit anonymous

&distort

Sender-Side Option! (&push)

Details

&distort as a URL parameter for the sender's side will try to "distort" your microphone's output audio, making your voice a bit anonymous.
https://vdo.ninja/?push&webcam&distort

description: >- Audio capture device to select N-number of audio channels; force mono or stereo capture

&inputchannels

Sender-Side Option! (&push)

Aliases

  • &channelcount
  • &ac

Options

Example: &inputchannels=6

Value Description
1 Audio capture device set to mono; 1 channel
2 Audio capture device set to 2 channels
6 Audio capture device set to 6 channels
(integer value X) Audio capture device set to X channels

Details

&inputchannels=N tells the audio capture device explicitly to select N-number of audio channels.

Setting &stereo=0 will set &inputchannels=1 by default.

If using &proaudio you want want to disable stereo-audio capture, particularly if you are using an XLR to USB microphone preamp that has two channels, but only one microphone connected.

For example, if a guest joins and you can only hear them in the left or right channel, either add &mono to the view-link or add &inputchannels=1 to the respective guest invite-link.

Mono-specific alias

If looking for a memorable parameter to set a guest's audio input to mono (1-channel), &monomic is the same as &inputchannels=1. This was added in VDO.Ninja v22.

Related

{% content-ref url="and-monomic.md" %} and-monomic.md {% endcontent-ref %}

{% content-ref url="../view-parameters/mono.md" %} mono.md {% endcontent-ref %}

{% content-ref url="../../general-settings/stereo.md" %} stereo.md {% endcontent-ref %}

description: Sets a guest's audio input to mono (1-channel)

&monomic

Sender-Side Option! (&push)

Aliases

  • &channelcount=1
  • &ac=1
  • &inputchannels=1

Details

&monomic sets a guest's audio input to mono (1-channel). &monomic is the same as &inputchannels=1.

There is &mono to set the audio output to mono on the viewer's side.

Related

{% content-ref url="and-inputchannels.md" %} and-inputchannels.md {% endcontent-ref %}

{% content-ref url="../view-parameters/mono.md" %} mono.md {% endcontent-ref %}

description: Disables all audio playback from room directors

&nodirectoraudio

Viewer-Side Option! (&view, &scene, &room)

Details

&nodirectoraudio is just like &noaudio (disables all audio playback on the local computer), except it only applies to incoming connections from room directors. So, if your are using the Mixer App with OBS, but you want to exclude the audio of yourself from the OBS, this potentially could be an easy way to do that.

Related

{% content-ref url="../view-parameters/noaudio.md" %} noaudio.md {% endcontent-ref %}

{% content-ref url="../video-parameters/and-nodirectorvideo.md" %} and-nodirectorvideo.md {% endcontent-ref %}

{% content-ref url="../../viewers-settings/director.md" %} director.md {% endcontent-ref %}

{% content-ref url="../../steves-helper-apps/mixer-app.md" %} mixer-app.md {% endcontent-ref %}

description: >- Lets you tweak the &noisegate variables, making it more or less aggressive as needed

&noisegatesettings

Sender-Side Option! (&push)

Options

Example: &noisegatesettings=10,25,3000

Value Description
(TargetGain,Threshold,GateOpenPosition) see Details for more information
10,25,3000 example

Details

&noisegatesettings is used in conjunction with &noisegate. This feature lets you tweak the noise-gate's variables, making it more or less aggressive as needed.

It takes a comma separated list:

  • First value is target volume (0 to 100), although 0 to 40 is probably the recommended range here.
    • Since how we perceive loudness isn't linear, to have the audio become inaudible, you'll want to set this to 0 to 3. Setting it to 10 for example will leave it still quite audible, but just dampened.
  • Second value is the threshold value where the gate is triggered if below it. ~ 100 is loudly speaking, ~ 20 is light background noise levels, and under 5 is quiet background levels.
  • Third value is how 'sticky' the gate-open position is, in milliseconds. Having this set to a few seconds should prevent someone from being cut off while speaking or if taking a short pause.
    • You may want to try a value of 10 to 300 for this third value, if just testing or want a sharper cut off.

Example:
https://vdo.ninja/?noisegate&noisegatesettings=10,25,3000

To help users with testing the noise gate and configurating the noise gate settings, there's an interactive page here for it: https://vdo.ninja/noisegate

Related

{% content-ref url="../../source-settings/noisegate.md" %} noisegate.md {% endcontent-ref %}

&outboundsamplerate

Also known as: &obsr

Description

Sets the sample rate for outbound audio processing in the web audio pipeline.

Sender-Side Option

This parameter controls the sample rate used for audio resampling before transmission.

Usage

  • &outboundsamplerate=48000 - Sets sample rate to 48kHz (default in v24+)
  • &outboundsamplerate=44100 - Sets sample rate to 44.1kHz
  • &outboundsamplerate=0 - Disables resampling
  • &obsr=48000 - Short alias for the parameter

Examples

https://vdo.ninja/?push=streamID&outboundsamplerate=48000
https://vdo.ninja/?push=streamID&obsr=44100
https://vdo.ninja/?push=streamID&outboundsamplerate=0

Details

  • In VDO.Ninja v24+, audio is automatically resampled to 48kHz for web audio processing
  • This parameter allows override of the default resampling behavior
  • Audio is encoded to 48kHz by Opus regardless of this setting
  • Mainly useful for debugging or testing audio issues

Platform Behavior

  • Chrome/Chromium: Resampling enabled by default (can be disabled)
  • Firefox/Safari: No default resampling (can be force-enabled)
  • Mobile browsers: No default resampling (can be force-enabled)

Important Notes

  • High sample rates can crash the web audio pipeline
  • Avoid sample rates above 48kHz
  • Setting to 0 or omitting value disables resampling
  • Using &noap disables the entire web audio pipeline

Technical Background

  • Resampling ensures consistent audio processing across different input devices
  • Helps prevent audio glitches with certain hardware configurations
  • Final transmission uses Opus codec at 48kHz regardless

Related Parameters

&preferaudiocodec

Description

Sets the preferred audio codec for outgoing streams, allowing the sender to specify which audio codec they prefer to use.

Sender-Side Option

This parameter influences which audio codec is negotiated during the WebRTC connection setup.

Usage

  • &preferaudiocodec=opus - Prefer Opus codec (default for most browsers)
  • &preferaudiocodec=red - Prefer RED (redundancy encoding) for packet loss resilience
  • &preferaudiocodec=g722 - Prefer G.722 codec

Examples

https://vdo.ninja/?push=streamID&preferaudiocodec=opus
https://vdo.ninja/?push=streamID&preferaudiocodec=red
https://vdo.ninja/?push=streamID&whipout=whipserver&preferaudiocodec=g722

Details

  • The parameter sets a preference, but the final codec is negotiated between peers
  • Both sender and receiver must support the codec for it to be used
  • Primarily intended for debugging or WHIP publishing scenarios
  • Codec names are case-insensitive (converted to lowercase)

Available Codecs

  • opus - Default, high-quality codec with good compression
  • red - Redundancy encoding, better for poor network conditions
  • g722 - Traditional telephony codec, wider compatibility

Notes

  • Not all browsers support all codecs
  • Using RED codec may limit bitrate to 216 kbps
  • This is an advanced parameter mainly for debugging or specific use cases
  • WHIP servers may require specific codecs

Related Parameters

description: >- Improves the audio quality, changes default audio settings and sets the audio mode to stereo

&proaudio

General Option! (&push, &room, &view, &scene)

Aliases

Options

Example: &proaudio=1

ValueDescription
(no value given)it behaves like 3 or 1, depending on if you are a guest or not
0will try to down-mix your mic to mono. Does not enable any pro-audio settings
1enables it for both push and view (if used on both links) and switches off aec/denoise/autogain settings
2enables it just for viewing requests and not publishing requests
3enables it for just publishing requests and not viewing requests
4enables 5.1-multichannel audio support (Experimental and may require a Chrome flag to be set)
5this is the default if nothing is set. It behaves like 3 or 1, depending on if you are a guest or not
6solely just enables stereo for both in/out

Details

Adding &proaudio to the URL will apply audio-specific setting presets. For inbound audio streams, it can be used to increase the audio bitrate from 32-kbps to 256-kbps. For outbound streams, it will disable echo-cancellation and noise-reduction. When applied to both the outbound and inbound sides of an audio stream, it will also enable stereo audio if available.

There are a variety of different modes that apply different combination of presets. You can also override any preset with other URL parameters, such as &audiobitrate, &outboundaudiobitrate, and &aec=1.

If using a microphone, wearing headphones is strongly recommended if using this parameter, along with knowledge of correctly setting your microphone gain settings. Echo and feedback issues can occur if this option is used incorrectly.

When using this option in a group room, you can't simply just apply this URL option to the director and have it apply to all guests. You will need to add the flag to each guest and to each scene-link to enable the pro-audio stereo mode. Depending on the value you pass to the URL parameter, you will get slightly different outcomes.

There is a director's room toggle for guest's invite link and for scene links:
(1).png>)

More Details

&stereo and &proaudio currently do the same thing, so they are just aliases of each other. When used, they can be used to setup the audio transfer pipeline to allow for unprocessed, high-bitrate, stereo audio.

Use of this option is generally for advanced users who understand the consequences of enabling this. High-quality audio can cause audio clicking, reduced video quality, feedback issues, low volume levels, and higher background noise levels.

For stereo-channel support to work, you will want both the viewer AND the publisher of the stream to have the respective &proaudio flag add to their URL.

You can customize things further using &aec, &ag, &dn, &ab and &mono. These flags will override the presets applied by the &proaudio flag. Please note, depending on your browser, enabling &aec, &ag, or &dn can force disable stereo audio.

The most powerful mode is proaudio=1 , which if enabled:

  • Turns off audio normalization or auto-gain when publishing (&push)
  • Turns off noise-cancellation when publishing
  • Turns off echo-cancellation when publishing
  • Enables higher audio bitrate playback, up to 256-kbps, when listening (&view)

If the parameter is used, but left without a value, it is treated as a special case (either 1 or 3). Please see follow link for more info:

https://docs.google.com/spreadsheets/d/e/2PACX-1vS7Up5jgXPcmg_tN52JLgXBZG3wfHB3pZDQWimzxixiuRIDbeMdmU11fgrMpdYFT6yy4Igrkc9hnReY/pubhtml

Optionaliasaecautogaindenoisestereo playbackstereo outputdefault ab inmax ab outlimited ab incbr
&proaudio=0offonononoffno32510510no
&proaudio=1bothoffoffoffonyes256510510yes
&proaudio=2inononononno256510510yes
&proaudio=3outoffoffoffoffyes32510510no
&proaudio=4multioffoffoffon (5.1)yes256510510yes

Newbie mode

The default mode when &proaudio is used alone is &proaudio=5, which acts like either &proaudio=3 or &proaudio=1, depending on whether the link its applied to is a room guest or not. This option will make the most sense for most users.

Option Context alias aec autogain denoise stereo playback stereo output default ab in max ab out limited ab in cbr
&proaudio=5 Regular/OBS 5 off off off on yes 256 510 510 yes
&proaudio=5 Director 5 off off off on yes 32 510 510 no
&proaudio=5 Room Guest 5 off off off off yes 32 510 510 no

iOS Devices

Option alias aec autogain denoise stereo playback stereo output default ab in max ab out limited ab in cbr
iOS devices on on on off off 32 32 32 no

Just for reference, the audio codec used by VDO.Ninja is OPUS (48khz), which can provide high-fidelity music transfer when the audio bitrate is set to 80-kbps per channel or higher. The default audio bitrate used is 32-kbps VBR, which is sufficient for most voice applications. Increasing the audio bitrate to a near-lossless 500-kbps or something may end up causing more problems than anything, but that is supported if needed.

Disabling stereo when using &proaudio

If you want to use the &proaudio parameter but wish the output to still be mono (1-channel), there's some options.

  • &inputchannels=1 or &monomic can be used on the sender's side, which will force their audio-capture device (microphone) to only capture in mono.
  • &mono can be added to the viewer's side, which will try to playback incoming audio as mono.
  • If using OBS, in the audio settings, you can set the browser-source's audio to be mono.

Related

{% content-ref url="../view-parameters/audiobitrate.md" %} audiobitrate.md {% endcontent-ref %}

{% content-ref url="../../source-settings/and-outboundaudiobitrate.md" %} and-outboundaudiobitrate.md {% endcontent-ref %}

{% content-ref url="../../newly-added-parameters/and-screensharestereo.md" %} and-screensharestereo.md {% endcontent-ref %}

description: Sets the 'default' playback volume for all video elements

&volume

Viewer-Side Option! (&scene, &room, &view, &solo)

Aliases

  • &vol

Options

Example: &volume=50

Value Description
(0-100) audio playback volume in percent

Details

&volume can set the 'default' playback volume for all video elements in VDO.Ninja. Currently the range is 0 to 100 and other volume commands or mute states may override this value. The default is 100.

(1) (2) (1).png>)

&volume=50

Related

{% content-ref url="and-audiogain.md" %} and-audiogain.md {% endcontent-ref %}

{% content-ref url="../../source-settings/autogain.md" %} autogain.md {% endcontent-ref %}

{% content-ref url="and-volumecontrol.md" %} and-volumecontrol.md {% endcontent-ref %}

description: Shows a dedicated local audio-volume control bar for canvas or image elements

&volumecontrol

Viewer-Side Option! (&scene, &room, &view, &solo)

Aliases

  • &volumecontrols
  • &vc

Details

&volumecontrol shows a dedicated local audio-volume control bar for canvas or image elements. Video elements already have a control-bar with volume, so I don't show it there currently.

The Comms app is a good demonstrator of the feature @vdo.ninja/alpha/comms.

Related

{% content-ref url="and-volume.md" %} and-volume.md {% endcontent-ref %}

{% content-ref url="and-audiogain.md" %} and-audiogain.md {% endcontent-ref %}

description: Lets you specify the audio codec

&audiocodec

Viewer-Side Option! (&view, &scene, &room, &solo)

Options

Example: &audiocodec=opus

Value Description
opus default; selects audio codec opus
red selects audio codec red
pcmu selects audio codec pcmu
pcma selects audio codec pcma
isac selects audio codec isac
g722 selects audio codec g722
pcm selects audio codec pcm

Details

&audiocodec on the viewer side can let you specify the audio codec; opus (default), pcmu, pcma, isac, g722, red and pcm.

red

&audiocodec=red is pretty much like sending two opus streams, with one as a backup in case of packet loss; support in Chromium 97 and up, but the only way I can so far tell that it is working is to check if the audio bitrate has doubled.

When using &proaudio, &stereo, or higher than &audiobitrate=216 with this, the resulting bitrate may not actually double. I don't quite understand what's going on here, if its still working or not, so to be safe when using &proaudio or &stereo, along with &audiocodec=red, I set the bitrate to 216 by default, which will then result in a sending bitrate of around 440-kbps.

I've tried to enable RED-mode to work with PCM audio, but so far it will only work with OPUS audio.

pcm

&audiocodec=pcm now will support 48khz and 44.1khz mono playback (48khz default), and if &stereo is used, it changes to two-channel stereo 32khz.

The existing &samplerate=44100 option can lower the sample rate of this pcm mode (down to 8khz even), and hence the resulting audio bitrate. Since PCM is raw, &audiobitrate won't work, so expect 550 to 1200-kbps in just audio bitrates per viewer.

There may be clicking when using PCM mode (L16) if you are on a bad connection, as PCM doesn't have much in the way of error correction. You'll need to address this yourself probably with post-processing if any issue.

Future options

In the near future you'll be able to send PCM audio via &chunked mode, which will guarantees delivery of all packets sent, however there may be buffering issues if your connection can't keep up with bandwidth requirements.

Currently &chunked mode does work with OPUS-audio though; please provide feedback and requests if you use it. Chunked mode does not support WHIP/WHEP or Meshcast.

Related

{% content-ref url="../view-parameters/codec.md" %} codec.md {% endcontent-ref %}

{% content-ref url="minptime-3.md" %} minptime-3.md {% endcontent-ref %}

description: >- Turns off the audio encoder automatically when no little to no sound is detected

&dtx

Viewer-Side Option! (&view, &scene, &room, &solo)

Aliases

  • &usedtx

Details

Using &dtx will turn off the audio encoder automatically when no little to no sound is detected. The VDO.Ninja default uses a dynamic audio bitrate mode (&vbr), but using &dtx takes things to the next level. It might be useful as a very mild noise-gate I suppose?

Related

{% content-ref url="../view-parameters/vbr.md" %} vbr.md {% endcontent-ref %}

{% content-ref url="minptime-3.md" %} minptime-3.md {% endcontent-ref %}

{% content-ref url="minptime-1.md" %} minptime-1.md {% endcontent-ref %}

description: Disables FEC (audio forward error correction)

&nofec

Viewer-Side Option! (&view, &scene, &room, &solo)

Details

&nofec on the viewer side can disable audio forward error correction (FEC). I show the audio codec now used in the stats, along with whether FEC is on or not (on by default).
(5).png>)

description: Show/hide buttons, adjust the user control bar and video control bar

Buttons and Control Bar Parameters

User Control Bar Options

The user control bar

ParameterExplanation
&autohideAuto-hides the control bar after a few moments of the mouse being idle
&controlbarspaceForces the user control bar to be in its own dedicated space
&nosettingsDisables the local settings button
&nomicbuttonDisables the mic button; guests can't mute audio
&nospeakerbuttonHides the speaker button
&novideobuttonDisables the video button; guests can't mute video
&nofileshareHides the ability for a guest to upload a file
&screensharebuttonForces the screen-share button to appear for guests
&nohangupbuttonHides the hang-up button
&chatbuttonShows or hides the chat button
&bigbuttonMakes the microphone mute button a lot bigger
&fullscreenbuttonAdds a full-screen button to the control bar
&nowebsiteDisables IFrames from loading, such as remotely shared websites by another guest or director
&handsEnables a "Raise Hand" button for guests

Positioning the control bar

While you can position the control bar by dragging it around, you can also set it's initial position with the use of a custom CSS parameter. For example:

&cssb64=I3N1YkNvbnRyb2xCdXR0b25ze3RyYW5zZm9ybTp0cmFuc2xhdGUoMHB4LCBjYWxjKC0xMDB2aCArIDkwcHgpKSFpbXBvcnRhbnR9Ow

The above is a base64 encoded version of the following CSS, which positions the control bar at the top by default. Base64 encoding allows us to use stylings safely as a URL parameter.

#subControlButtons{transform:translate(0px, calc(-100vh + 90px))!important};

Video Control Bar Options

The video control bar

ParameterExplanation
&videocontrolsShows the video control bar
&nocontrolsWill force hide the video control bar
&forcecontrols*Will try to keep the video controls visible, even if your mouse isn't hovering over the video

*NEW IN VERSION 24

&controlbarspace

Also known as: &nocontrolbarspace (to disable)

Description

Reserves dedicated space for the control bar to prevent video content from being obscured when controls appear.

General Option

This parameter ensures the control bar has its own space rather than overlaying on top of video content.

Usage

  • &controlbarspace - Reserves space for control bar
  • &nocontrolbarspace - Disables reserved space (overlay mode)

Examples

https://vdo.ninja/?push=streamID&controlbarspace
https://vdo.ninja/?view=streamID&controlbarspace
https://vdo.ninja/?room=roomname&nocontrolbarspace

Visual Behavior

With &controlbarspace:

  • Video content is sized to leave room for controls
  • Controls don't cover any video content
  • Consistent layout whether controls are visible or hidden

Without (or with &nocontrolbarspace):

  • Controls overlay on top of video
  • Full video area when controls are hidden
  • May obscure bottom portion when controls appear

Details

  • Affects layout calculations for video sizing
  • Useful for professional presentations
  • Prevents important content from being hidden
  • Trade-off between screen space and visibility

Interaction with Other Parameters

  • Disabled by default when using &autohide
  • Works with all control bar configurations
  • Affects both sender and viewer interfaces

Use Cases

  • Professional broadcasts
  • Educational content where controls are frequently used
  • Presentations with important bottom content
  • Kiosk displays with permanent controls

Notes

  • Consider your content layout when choosing
  • More important for content with subtitles or lower thirds
  • Can affect overall video size calculations

Related Parameters

description: >- Will try to keep the video controls visible, even if your mouse isn't hovering over the video

&forcecontrols

General Option! (&push, &room, &view, &scene)

Details

&forcecontrols is experimental, but it will try to keep the video controls visible, even if your mouse isn't hovering over the video.

{% hint style="info" %} The VDO.Ninja tab/window still needs to be 'active' however, for this to work; changing focus to another tab will stop it. {% endhint %}

{% hint style="warning" %} Only works really for Chrome/Chromium on desktop; not Firefox, etc. {% endhint %}

Related

{% content-ref url="../newly-added-parameters/and-videocontrols.md" %} and-videocontrols.md {% endcontent-ref %}

{% content-ref url="../settings-parameters/and-nocontrols.md" %} and-nocontrols.md {% endcontent-ref %}

description: Options to pre-set the camera settings

Camera Parameters

General options

You have to add the parameters to the source link (&push).

ParameterExplanation
&whitebalance*Lets you manually pre-set the white balance of the camera/webcam
&exposure*Lets you manually pre-set the exposure of the camera/webcam
&saturation*Lets you manually pre-set the saturation of the camera/webcam
&sharpness*Lets you manually pre-set the sharpness of the camera/webcam
&contrast*Lets you manually pre-set the contrast of the camera/webcam
&brightness*Lets you manually pre-set the brightness of the camera/webcam

Please see https://vdo.ninja/supports for a list of values that are available.

Some option may be supported via URL but not yet listed in the documentation yet.

If options are not available via the URL parameters, you can often still access them vid the Settings -> Video settings menu within a Chromium-based browser. From there you can adjust dynamically via sliders, toggles, or drop-down menus.

Firefox, Safari, and non-Chromium-based browsers may not support options, nor will all devices. Many cameras on Windows, Mac, or Linux will have limit options, although typically Logitech webcams have good support.

description: Lets you manually pre-set the brightness of the camera/webcam

&brightness

Sender-Side Option! (&push)

Options

Example: &brightness=128

ValueDescription
(integer value; 1 to 255)brightness of the camera

Details

Lets you manually pre-set the brightness of the camera/webcam:

It will normally take an integer value in the range of 1 to 255, at least for a Logitech webcam, but will vary based on the camera / device you are using.

VDO.Ninja already tries to auto-save camera settings for android devices that support video settings, but for desktop browsers, it does not. Using these new values though you can manually set things to auto-configure as you want.

These settings will apply to ALL video devices though, not just a specific one. If a setting isn't supported by your camera or browser, it will just fail quietly, and not apply. You'll see an error in the console log though.\

{% hint style="warning" %}

  • Firefox and Safari may not support this feature.
  • Not all cameras/smartphones will support this option {% endhint %}

You can check the video settings menu as to whether a device supports a certain feature or what value ranges are support; you can also check it out here https://vdo.ninja/supports.

Related

{% content-ref url="./" %} . {% endcontent-ref %}

description: Lets you manually pre-set the contrast of the camera/webcam

&contrast

Sender-Side Option! (&push)

Options

Example: &contrast=128

ValueDescription
(integer value; 1 to 255)contrast of the camera

Details

Lets you manually pre-set the contrast of the camera/webcam:

It will normally take an integer value in the range of 1 to 255, at least for a Logitech webcam, but will vary based on the camera / device you are using.

VDO.Ninja already tries to auto-save camera settings for android devices that support video settings, but for desktop browsers, it does not. Using these new values though you can manually set things to auto-configure as you want.

These settings will apply to ALL video devices though, not just a specific one. If a setting isn't supported by your camera or browser, it will just fail quietly, and not apply. You'll see an error in the console log though.\

{% hint style="warning" %}

  • Firefox and Safari may not support this feature.
  • Not all cameras/smartphones will support this option {% endhint %}

You can check the video settings menu as to whether a device supports a certain feature or what value ranges are support; you can also check it out here https://vdo.ninja/supports.

Related

{% content-ref url="./" %} . {% endcontent-ref %}

description: Lets you manually pre-set the exposure of the camera/webcam

&exposure

Sender-Side Option! (&push)

Options

Example: &exposure=128

ValueDescription
(integer value; 1 to 255)exposure of the camera for a Logitech webcam
(integer value; 1 to 8000)exposure of the camera for a Pixel 4a Android smartphone

Details

Lets you manually pre-set the exposure of the camera/webcam:

It will normally take an integer value in the range of 1 to 255, at least for a Logitech webcam, but will vary based on the camera / device you are using. On Android, it's a specific time value, represented as exposure time, often in milliseconds.

VDO.Ninja already tries to auto-save camera settings for android devices that support video settings, but for desktop browsers, it does not. Using these new values though you can manually set things to auto-configure as you want.

These settings will apply to ALL video devices though, not just a specific one. If a setting isn't supported by your camera or browser, it will just fail quietly, and not apply. You'll see an error in the console log though.

Shutter Speed

On Android/Chrome , the exposureTime value is often loosely consider the same as shutter speed. Depending on what the camera driver reports, it might be in seconds of milliseconds. To be safe, you might want to try a few different exposure times, look at the current frame rate, and deduce your own look-up-chart.

Shutter Speed (photography) exposureTime (seconds) exposureTime (milliseconds)
1/8000 s 0.000125 0.125 ms
1/4000 s 0.00025 0.25 ms
1/2000 s 0.0005 0.5 ms
1/1000 s 0.001 1 ms
1/500 s 0.002 2 ms
1/250 s 0.004 4 ms
1/125 s 0.008 8 ms
1/60 s 0.0167 16.7 ms
1/30 s 0.0333 33.3 ms
1/15 s 0.0667 66.7 ms
1/8 s 0.125 125 ms
1/4 s 0.25 250 ms
1/2 s 0.5 500 ms
1 s 1.0 1000 ms

{% hint style="warning" %}

  • Firefox and Safari may not support this feature.
  • Not all cameras/smartphones will support this option {% endhint %}

You can check the video settings menu as to whether a device supports a certain feature or what value ranges are support; you can also check it out here https://vdo.ninja/supports.

Related

{% content-ref url="./" %} . {% endcontent-ref %}

&focus

Description

Manually sets the camera focus distance for devices that support manual focus control.

Sender-Side Option

This parameter overrides auto-focus and sets a specific focal distance for the camera.

Usage

  • &focus=100 - Sets focus distance to 100 units
  • &focus=0 - Sets focus to closest distance (macro)
  • &focus=1000 - Sets focus to far distance

Examples

https://vdo.ninja/?push=streamID&focus=100
https://vdo.ninja/?push=streamID&focus=500

Details

  • Only works on devices/browsers that support manual focus control
  • Most effective on mobile devices (smartphones/tablets)
  • Desktop webcams rarely support manual focus via browser APIs
  • Value represents arbitrary focus distance units (not standardized)
  • Disables auto-focus when set

Device Support

  • Supported: Most modern smartphones (iOS/Android)
  • Limited Support: Some tablets
  • Rarely Supported: Desktop webcams
  • Not Supported: Virtual cameras, screen shares

Notes

  • Useful for fixed-focus scenarios (e.g., document cameras, product demos)
  • Can prevent focus hunting during streams
  • May need experimentation to find optimal value for your setup
  • Focus capability depends on browser MediaStream API support

Related Parameters

description: Lets you manually pre-set the saturation of the camera/webcam

&saturation

Sender-Side Option! (&push)

Options

Example: &saturation=128

ValueDescription
(integer value; 1 to 255)saturation of the camera for a Logitech camera

Details

Lets you manually pre-set the saturation of the camera/webcam:

It will normally take an integer value in the range of 1 to 255, at least for a Logitech webcam, but will vary based on the camera / device you are using.

VDO.Ninja already tries to auto-save camera settings for android devices that support video settings, but for desktop browsers, it does not. Using these new values though you can manually set things to auto-configure as you want.

These settings will apply to ALL video devices though, not just a specific one. If a setting isn't supported by your camera or browser, it will just fail quietly, and not apply. You'll see an error in the console log though.\

{% hint style="warning" %}

  • Firefox and Safari may not support this feature.
  • Not all cameras/smartphones will support this option {% endhint %}

You can check the video settings menu as to whether a device supports a certain feature or what value ranges are support; you can also check it out here https://vdo.ninja/supports.

Related

{% content-ref url="./" %} . {% endcontent-ref %}

description: Lets you manually pre-set the sharpness of the camera/webcam

&sharpness

Sender-Side Option! (&push)

Options

Example: &sharpness=128

ValueDescription
(integer value; 1 to 255)sharpness of the camera

Details

Lets you manually pre-set the sharpness of the camera/webcam:

It will normally take an integer value in the range of 1 to 255, at least for a Logitech webcam, but will vary based on the camera / device you are using.

VDO.Ninja already tries to auto-save camera settings for android devices that support video settings, but for desktop browsers, it does not. Using these new values though you can manually set things to auto-configure as you want.

These settings will apply to ALL video devices though, not just a specific one. If a setting isn't supported by your camera or browser, it will just fail quietly, and not apply. You'll see an error in the console log though.\

{% hint style="warning" %}

  • Firefox and Safari may not support this feature.
  • Not all cameras/smartphones will support this option {% endhint %}

You can check the video settings menu as to whether a device supports a certain feature or what value ranges are support; you can also check it out here https://vdo.ninja/supports.

Related

{% content-ref url="./" %} . {% endcontent-ref %}

description: Lets you manually pre-set the white balance of the camera/webcam

&whitebalance

Sender-Side Option! (&push)

Aliases

  • &wb

Options

Example: &whitebalance=5000

ValueDescription
(integer value)white balance in Kelvin (5000 to 6500 are typical values)

Details

Lets you manually pre-set the white balance of the camera/webcam:

It is normally in Kelvin, so 5000 or 6500 are typical values it will take.

VDO.Ninja already tries to auto-save camera settings for android devices that support video settings, but for desktop browsers, it does not. Using these new values though you can manually set things to auto-configure as you want.

These settings will apply to ALL video devices though, not just a specific one. If a setting isn't supported by your camera or browser, it will just fail quietly, and not apply. You'll see an error in the console log though.\

{% hint style="warning" %}

  • Firefox and Safari may not support this feature.
  • Not all cameras/smartphones will support this option {% endhint %}

You can check the video settings menu as to whether a device supports a certain feature or what value ranges are support; you can also check it out here https://vdo.ninja/supports.

Related

{% content-ref url="./" %} . {% endcontent-ref %}

description: Cheat sheet of the basic URL-based settings

Most common Parameters

VDO.Ninja makes heavy use of URL-based parameters to configure settings. Some of the most commonly used ones are listed below, with a brief explanation of what they are for and links to more detail.

Sender-side parameter Explanation
&push The stream ID you wish to publish your video under; it must be unique. The value can be defined manually and reused. If left blank, a value will be generated automatically.
&quality Sets the default target resolution and frame rate. If not used, the system default is 720p60. Setting &quality=0will result in 1080p60 being the new target default, but this may significantly increase the CPU load on the sender's computer.
&videodevice Specify an video device to auto-select on load. If left blank, the system's default audio device will be selected.
&audiodevice Specify an audio device to auto-select on load. If left blank, the system's default audio device will be selected.
&effects This parameter will allow for digital effects to be applied to the video, including background-blurring and a digital greenscreen. You can preset which effect is loaded by setting this value to a corresponding number, such as &effects=4.
&label Allows the guest connection to be assigned a display name, which will be used in chat and if overlays are turned on. If left blank, the guest will be prompted to enter a display name.
&meshcast Adding &meshcast to a guest or director link will trigger the service, causing the outbound audio/video stream to be transferred to a hosted server, which then distributes the stream to all the viewers. This adds a bit of latency to the stream, but it implies the guest/director does not need to encode and upload multiple videos, lowering CPU load and bandwidth usage.
Viewer-side parameter Explanation
&view

The stream ID you wish to view/hear; a comma-separated list can be passed as well to view multiple at a time. This isn't required if using a group room, but it can be used in conjunction with the &push parameter to create faux-rooms.

Using &view without passing any values to it will prevent any incoming peer connections. It technically is responsible for allowing inbound connections, and not explicitly in control of whether video or audio is requested.
&videobitrate

The video bitrate you wish to view a video at, in kbps. The default is 2500-kbps and is well-suited for interviews and talking-heads, but you may need to increase it if video contains significant motion and scene changes.

This parameter will not work for guests in a group room, but should work elsewhere.
&audiobitrate Sets the audio bitrate, in kbps. The system default is 32-kbps, with the max limit being between 300 to 510-kbps, based on other factors. Too high and you may actually introduce clicking noise issues.
&codec h264, vp9, vp8, and sometimes av1 are options. Setting &codec=h264 can sometimes trigger the sender's hardware encoder to be used, but this can often have unexpected consequences. The default is left up to the browsers to decide.
&novideo This flag will disable incoming video streams. Connections will still be established, allowing for data and audio still. You can pass a list of stream IDs to exempt streams from this filter.
&noaudio This flag will disable incoming audio streams. Connections will still be established, allowing for data and video still. You can pass a list of stream IDs to exempt streams from this filter.
&showlabels If the sender has set a display name, you can overlay that name by using this parameter. Different styles of labels are available, which can be set by passing their corresponding style ID to this parameter.
Director, room, and general parameters Explanation
&room

Defines a room for guests to chat in. If used, everyone in a room will auto-connect to each other on joining, unless &view is used. Rooms benefit from allowing for echo-free conversation and rooms can be managed by a director.

Guests in a room have limited control and will see videos at reduced quality; this is intentional.
&director The director flag should be set to whatever the room name is. The first director to join a room then becomes the controller of the room. They have the ability to remotely control guest's settings, such as microphone volume of a guest, and they can add and remove guests to scenes.
&proaudio

Several other parameters into one, designed to quick-start applications needing high-quality audio. This parameter can be considered pretty heavy duty, so it's primarily designed for professional users needing near-raw audio quality, such as music DJs.

If used on the sender's side, it disable echo-cancellation, noise-reduction, and auto-volume leveling. It also requests stereo audio from the microphone source.

When applied to the viewer's side as well, it will increase the connection's audio bitrate to 256-kbps and request stereo-audio from the sender, if it is available.
&scene

If using a room, then to view a specific stream or collection of streams, the &scene and &room parameter must be added to any view link. The scene parameter lets the system know the connection is not a guest, but rather designed for capture.

Different scenes and scene types are available, and since a director can add and remove streams from scenes from their control room, multiple scenes can be used together to act as media slots in complex show layouts.
&roombitrate

This parameter can be added to a guest's invite link to reduce the maximum video bandwidth they will make available to each other guest.

On mobile devices, outbound bandwidth to other guest is already set very low, but if a guest is still struggling to participate in a group room, adding &roombitrate=0 to their invite link will disable their outbound video to other guests and free up even more CPU. See &totalroombitrate for another option.
&password

Specifies the custom password to be used. If left blank, the user will be prompted for the password on page load. Passwords are not stored and used purely client-side. They are used to encrypt the initial connection handshake between peers and to obfuscate room names.

The &hash parameter is system-generated and is a bit like the &password parameter, except it has the ability to validate a user-entered password.
&broadcast Adding this flag will have guests only accept video connections from the director, but still share audio and accept audio-connections from other guests. This reduces the CPU and network load on guests, allowing for larger rooms, so long as the director can also support those larger rooms.

{% content-ref url="../../advanced-settings.md" %} advanced-settings.md {% endcontent-ref %}

description: A complete list of URL parameters, although not documented

Complete List of Parameters

This is a near-complete list of all the URL parameters within VDO.Ninja (current as of v27.7). It does not offer help in explaining what a parameter does, as it's provided purely as a technical reference.

This list is not exhaustive, it may have flawed descriptions, and it does not offer links or specifics. Please refer to other support material in the documentation for details on how certain parameters actually work. If a parameter below is not found in the rest of the documentation, please refer to the code directly.

This list is AI-generated, based on the contents of the main.js file, which you can refer to on the Github. Searching through the lib.js file also will help provide added detail into any function calls the parameters are calling. Using an LLM with a sufficiently large context-window can help explain the code, as well as nearly any function, so give that a try if stuck.

If you are self-hosting VDO.Ninja, often these URL parameters can be hard-coded to have a certain value without needing URL parameters. Please refer to the main.js file as well for a sense of what needs to be done to accomplish that though.

A

Parameter Aliases Values Description
action - - -
ad See audiodevice - -
addstun - String (format: username;password;url) Adds additional STUN server
ado See audiodevice - -
adevice See audiodevice - -
ag See autogain - -
agc See autogain - -
alertvolume - 0-100 Sets volume for alert sounds
alpha - Boolean -
am See automute - -
apiserver - URL Sets custom API server
ar See aspectratio - -
aspectratio ar Number/String (portrait,landscape,square) Sets aspect ratio
audience - String -
audiobitrate - Integer (kbps) Sets audio bitrate
audiocontenthint audiocontent, audiohint String Sets audio content processing hint
audiodevice adevice, ad, device, d, ado Device ID/name or 0/false/no/off Selects audio input device
audioeffects - Boolean Enables audio effects processing
autoadd - Stream ID(s) (comma-separated) Auto-adds specified streams
autogain ag, agc Boolean Controls automatic gain control
automute am Boolean Enables automatic audio muting
autorecord - Boolean/Integer Starts recording automatically
autorecordlocal - Boolean/Integer -
autorecordremote - Boolean/Integer -
autoreload - Integer (minutes) Auto reloads page after specified minutes
autoreload24 - Time (HH:MM) Reloads at specified time
autostart as Boolean Auto starts session
autohide - Boolean -
avatarimg bgimage, bgimg URL Sets avatar/background image
avatarimg2 bgimage2, bgimg2 URL Sets secondary avatar/background image
avatarimg3 bgimage3, bgimg3 URL Sets tertiary avatar/background image

B

Parameter Aliases Values Description
background appbg URL Sets application background
base64css b64css, cssbase64, cssb64 Base64 encoded CSS Applies custom CSS
base64js b64js, jsbase64, jsb64 Base64 encoded JS Applies custom JavaScript
batterymeeter - Boolean Shows battery meter
beep notify, tone Boolean Enables notification sounds
beepvolume - 0-100 Sets volume for beep sounds
bgimage See avatarimg - -
bgimage2 See avatarimg2 - -
bgimage3 See avatarimg3 - -
bgimg See avatarimg - -
bgimg2 See avatarimg2 - -
bgimg3 See avatarimg3 - -
bigbutton - String Shows large mute button with text
bitrate - Integer (kbps) Sets video bitrate
bitratecutoff bitcut Integer Sets bitrate cutoff threshold
blackout blackoutmode, bo, bom Boolean -
blur - Integer (1-10) Sets background blur amount
bc See broadcast - -
bct See broadcasttransfer - -
broadcast bc Boolean Enables broadcast mode
broadcasttransfer bct Boolean -
buffer - Number Sets buffer delay
buffer2 - Number Alternative buffer setting
bundle - String Sets bundle policy
bypass - Boolean -

C

Parameter Aliases Values Description
cb See chatbutton - -
cbr - Boolean Enables constant bitrate
cc See closedcaptions - -
cccolored cccoloured, coloredcc, colorcc, cccolor Boolean Enables colored closed captions
cftoken cft String -
channelcount ac, inputchannels Integer Sets number of audio channels
channeloffset - Integer -
chat See chatbutton - -
chatbutton chat, cb Boolean Shows chat button
chroma - Color code Sets chroma key color
chunked chunk Integer Sets chunked transfer size
chunkedbuffer sendingbuffer Integer Sets chunk buffer size
clean See cleanoutput - -
cleanoutput clean Boolean Minimizes UI elements
cleanish - Boolean -
cleanstorage clear Boolean Clears stored settings
clock clock24 0-9 Shows clock with position
closedcaptions cc, captions Boolean Enables closed captions
codec codecs, videocodec String Sets video codec
codirector See directorpassword - -
compressor comp Boolean/Integer Audio compression settings
consent - Boolean -
contenthint contenttype, content, hint String Sets content processing hint
controlbarspace - Boolean -
controls videocontrols Boolean Shows video controls
controlroombitrate crb Boolean -
cover - Boolean Sets cover mode for video
crop - Integer (-100 to 100) Sets video crop
css - URL Applies external CSS

D

Parameter Aliases Values Description
d See audiodevice/videodevice - -
darkmode nightmode, darktheme Boolean Enables dark theme
deaf deafen Boolean -
defaultlabel labelsuggestion, ls String Sets default label
delay See micdelay - -
denoise dn Boolean Controls noise suppression
device See audiodevice/videodevice - -
director dir String/Boolean Enables director mode
directorchat dc Boolean -
directorpassword dirpass, dp, codirector String Sets director password
directorview dv Boolean -
displaysurface - String -
dp See directorpassword - -
dpi dpr Number Sets display pixel ratio
drawing - Boolean -
dtx usedtx Boolean -
dv See directorview - -

E

Parameter Aliases Values Description
e2ee - Boolean Enables end-to-end encryption
ec See echocancellation - -
echocancellation aec, ec Boolean Controls echo cancellation
effect effects String/Integer Applies video effects
effectvalue ev Number Sets effect intensity
electronic - Boolean -
enhance - Boolean -
entrymsg welcome String Sets welcome message
equalizer eq Boolean Enables audio equalizer
exclude ex Stream ID(s) Excludes specified streams
excludeaudio exaudio, silence Stream ID(s) -
experimental - Boolean Enables experimental features
exposure - Number Sets camera exposure

F

Parameter Aliases Values Description
facingmode - String (user/environment) Sets camera facing mode
fadein - Number/Boolean Sets fade in effect
fakeguests fakefeeds, fakeusers Integer -
fb See feedbackbutton - -
feedbackbutton fb Boolean/Number Shows feedback button
fileshare fs Boolean Enables file sharing
fit - Boolean Sets fit mode for video
fl See forcelandscape - -
flagship - Boolean -
flip - Boolean Flips video
focus - Number Sets camera focus
forceios - Boolean -
forcelandscape forcedlandscape, fl Boolean Forces landscape orientation
forceportrait forcedportrait, fp Boolean Forces portrait orientation
forceviewerlandscape - Integer -
forceviewerportrait - Integer -
fp See forceportrait - -
frameRate fr, fps Integer Sets frame rate
fs See fileshare - -
fsb See fullscreenbutton - -
fullhd - Boolean Enables 1080p quality
fullscreen - Boolean Enables fullscreen mode
fullscreenbutton fsb Boolean Shows fullscreen button

G

Parameter Aliases Values Description
ga See groupaudio - -
gain See audiogain - -
gate See noisegate - -
gating See noisegate - -
gdrive - Boolean -
gm See groupmode - -
group groups String(s) Sets group membership
groupaudio ga Boolean -
groupmode gm Boolean -
groupview viewgroup, gv String(s) Sets group view
gv See groupview - -

H

Parameter Aliases Values Description
h See height - -
h264profile - String Sets H264 profile
hands hand Boolean -
hangupbutton hub, humb64 Boolean Shows hangup button
hangupmessage hum, humb64 String Sets hangup message
height h Integer Sets video height
hh See hideheader - -
hidecodirector hidedirector Boolean Hides director controls
hidecursor See nocursor - -
hideheader noheader, hh Boolean Hides header
hidemouse See nocursor - -
hidesolo hs Boolean -
hidescreenshare hidess, sshide Boolean Hides screen share option
hint See contenthint - -
holdercolor - Color code -
host - Boolean -
hotkeys See midi - -
hs See hidesolo - -
hub See hangupbutton - -
hum See hangupmessage - -
humb64 See hangupmessage - -

I

Parameter Aliases Values Description
icefilter - String Sets ICE filter
id See push - -
iframe See website - -
iframetarget - String Sets iframe target
imagelist - JSON array Sets list of background images
include - Stream ID(s) Includes specified streams
insertablestreams is Boolean/String -
intro ib Boolean Shows intro
isolation voiceisolation, vi Boolean -

J

Parameter Aliases Values Description
js - URL Applies external JavaScript
justtalk - String -

K

Parameter Aliases Values Description
keyframe See keyframeinterval - -
keyframerate See keyframeinterval - -
keyframeinterval keyframerate, keyframe, fki Integer Sets keyframe interval

L

Parameter Aliases Values Description
l See label - -
label l String Sets display name
labelsize sizelabel, fontsize Integer Sets label size
lanonly - Boolean -
latency al, audiolatency Integer Sets audio latency
layout - JSON/String Sets video layout
layouts - JSON array

L (continued)

Parameter Aliases Values Description
limittotalbitrate ltb Number Sets bitrate limit
locked - Number/String (portrait,landscape,square) Locks aspect ratio
locksize - Boolean -
lowcut lc, higpass Integer Sets low-cut filter frequency
lowbitratescene cutscene String -
lowmobilebitrate - Integer -

M

Parameter Aliases Values Description
maxbitrate mvb Integer Sets maximum bitrate
maxbandwidth - Integer (0-200) -
maxconnections mc Integer Maximum allowed connections
maxframerate mfr, mfps Integer Sets maximum framerate
maxpublishers mp Integer Maximum allowed publishers
maxtotalscenebitrate mtsb, tsb Integer -
maxvideobitrate - Integer -
maxviewers mv Integer Maximum allowed viewers
mc See maxconnections - -
mcaudiobitrate mcab Integer -
mcbitrate mcb Integer -
mccodec - String -
mcscale meshcastscale Integer -
mcscreensharebitrate mcssbitrate Integer -
mcscreensharecodec mcsscodec String -
md See micdelay - -
mediasettings - Boolean Shows media settings
meshcast - String -
meshcastcode mccode String -
meter meterstyle Integer Sets audio meter style
micdelay delay, md Integer Sets microphone delay
mididevice - Integer -
midihotkeys - Boolean/Integer -
midiiframe - Boolean -
midioffset - Integer -
minipreview mini Boolean/Integer Shows mini preview
minipreviewoffset mpo Integer (-20 to 120) -
minroombitrate mrb Integer -
mirror - Integer (0-3) Sets mirror mode
mono - Boolean Forces mono audio
morescenes - Integer -
motionswitch motiondetection Integer -
mp See maxpublishers - -
mrb See minroombitrate - -
mv See maxviewers - -
mvb See maxbitrate - -

N

Parameter Aliases Values Description
na See noaudio - -
ng See noisegate - -
nme See nomouseevents - -
noap See noaudioprocessing - -
noaudio na, hideaudio Stream ID(s) Disables audio for streams
noaudioprocessing noap Boolean Disables audio processing
nocursor hidecursor, nomouse, hidemouse Boolean Hides cursor
nocontrols - Boolean -
nocontrolbar - Boolean -
nodownloads See nofileshare - -
nofec - Boolean Disables forward error correction
nofileshare nofiles Boolean Disables file sharing
nofullscreenbutton nofsb Boolean -
noheader See hideheader - -
nohub See nohangupbutton - -
nohangupbutton nohub Boolean Hides hangup button
noisegate gating, gate, ng Boolean/Integer Sets noise gate
nomouseevents nme Boolean -
nopreview np Boolean Disables preview
nopush noseed Boolean -
noremb - Boolean -
noscale noscaling Boolean Disables scaling
nosettings ns Boolean Hides settings
nostats - Boolean Hides statistics
notios - Boolean -
novideo nv, hidevideo Stream ID(s) Disables video for streams
np See nopreview - -
ns See nosettings - -
nv See novideo - -

O

Parameter Aliases Values Description
oab See outboundaudiobitrate - -
obscontrols remoteobs, obsremote, obs Boolean/String Enables OBS controls
obsfix - Boolean/Integer -
obsoff oo Boolean -
optimize - Integer -
order - Integer -
orderby - String -
orientation - String -
outboundaudiobitrate oab Integer -
outboundvideobitrate ovb Integer -
overlaycontrols - Boolean -
ovb See outboundvideobitrate - -

P

Parameter Aliases Values Description
p See password - -
p0 - Boolean -
pan See panning - -
panning pan Boolean/String Sets audio panning
password pass, pw, p String Sets room password
pcm - Boolean -
permaid See push - -
pie - String/Boolean -
pip - Boolean Picture-in-picture mode
pip2 pipall Boolean -
pip3 mypip, pipme Boolean -
planb - Boolean -
playchannel - Integer -
poster - URL Sets poster image
postimage - URL -
postinterval - Integer -
ppt - Boolean/String Push-to-talk settings
pptcontrols slides, powerpoint Boolean -
preloadbitrate - Integer -
private See privacy - -
privacy private, relay Boolean Enables privacy mode
prompt - Boolean -
proxy - Boolean -
push id, permaid String Sets stream ID
pusheffectsdata - Boolean -
pushloudness getloudness Boolean -
pw See password - -

Q

Parameter Aliases Values Description
q See quality - -
quality q Integer/String Sets video quality
queue - Boolean/String Enables queue system
queue2 screen Boolean Alternative queue mode
queue3 hold Boolean Queue with hold
queue4 holdwithvideo Boolean Queue with video

R

Parameter Aliases Values Description
r See room - -
rampuptime - Integer -
rc See recordcodec - -
record - Boolean Enables recording
recordcodec rc String Sets recording codec
recordfolder - String Sets recording folder
reload - Boolean -
requireencryption - Boolean -
retransmit - Boolean -
retrytimeout - Integer (min 5000) -
room r, roomid String Sets room ID
roombitrate rbr Integer Sets room bitrate
rounded round Integer Sets rounded corners
ruler grid, thirds URL/Boolean Shows composition grid

S

Parameter Aliases Values Description
salt - String -
samplerate sr Integer Sets audio sample rate
saturation - Number Sets video saturation
scale - Integer/Boolean Sets video scale
scene scn String/Integer Sets scene
scenetype type Integer -
screenshare ss Boolean/String Enables screen sharing
screensharecontenthint sscontenthint, sscontent, sshint String -
screenshareaec ssec, ssaec Boolean Screen share audio settings
screensharebitrate ssbitrate Integer Sets screen share bitrate
screensharecodec - String -
screensharefps ssfps Integer Sets screen share framerate
screenshareid ssid String -
screensharelabel sslabel String -
screensharequality ssq Integer/String Sets screen share quality
screensharetype sstype Integer -
secure - Boolean -
selfbrowsersurface - String -
sendframes - String -
sensordata sensor, gyro, gyros, accelerometer Integer -
sensorfilter sensorsfilter, filtersensor String (comma-separated) -
sharpness - Number Sets video sharpness
showall - Boolean -
showdirector sd Boolean/Integer -
showlist - Boolean -
sizelabel See labelsize - -
slideshow - Integer -
slot - Integer -
slots - Integer -
slotmode slotsmode Integer -
smallshare smallscreen Boolean -
solo - Boolean -
speedtest - Boolean/String -
splitrecording - Integer Sets recording split interval
ss See screenshare - -
ssb - Boolean -
ssec See screenshareaec - -
sshint See screensharecontenthint - -
ssid See screenshareid - -
sspaused sspause, ssp Boolean -
ssq See screensharequality - -
sstype See screensharetype - -
stereo s, proaudio String/Integer Sets stereo mode
streamid See view - -
style st Integer (0-7) Sets interface style
stun - String Sets STUN server
surfaceswitching - String -
svc scalabilitymode String Sets scalability mode
systemaudio - String -

T

Parameter Aliases Values Description
tallyoff notally, to Boolean -
tc timecode, showtimecode Boolean -
tcp - Boolean Forces TCP mode
timer - Integer (1-9) Sets timer position
to See tallyoff - -
token - String Authentication token
totalbitrate tb Integer -
totalroombitrate trb, tb Integer Sets total room bitrate
transcript transcribe, trans String -
transparent transparency Boolean Makes background transparent
trb See totalroombitrate - -
turn - String Sets TURN server
type See scenetype - -

U

Parameter Aliases Values Description
unsafe - Boolean -
usedtx See dtx - -

V

Parameter Aliases Values Description
v See view - -
vb See videobitrate - -
vbr - Boolean Variable bitrate mode
vd See videodevice - -
vdevice See videodevice - -
ve See viewereffect - -
vh See viewheight - -
vi See isolation - -
video - Boolean -

V (continued)

Parameter Aliases Values Description
videobitrate bitrate, vb Integer Sets video bitrate
videocontrols See controls - -
videodevice vdevice, vd, device, d, vdo Device ID/name or 0/false/no/off Selects video input device
view v, streamid Stream ID Sets view mode
viewereffect viewereffects, ve Integer Sets viewer effects
viewgroup See groupview - -
viewheight vh Integer Sets view height
viewwidth vw Integer Sets view width
virtualeffects - Boolean -
vdo See videodevice - -
volume vol 0-100 Sets volume level
vred - Boolean -
vw See viewwidth - -

W

Parameter Aliases Values Description
w See width - -
waitmessage - String Sets wait message
waitimage - URL Sets wait screen image
waittimeout - Integer Sets wait timeout
wb See whitebalance - -
webp images String Sets WebP image format
webpquality webpq, wq Integer Sets WebP quality
website iframe URL Embeds website
welcomehtml - HTML/Base64 Sets welcome HTML
welcomeimage welcomeimg URL Sets welcome image
welcomemessage - String Sets welcome message
whep whepplay URL WHEP playback URL
whepicewait whepwait Integer WHEP ICE timeout
whepshare whepsrc URL WHEP share URL
whepsharetoken whepsrctoken String WHEP share token
wheptoken whepplaytoken String WHEP auth token
whip whipview URL WHIP URL
whipicewait whipwait Integer WHIP ICE timeout
whipout whippush URL WHIP output URL
whipoutaudiobitrate woab Integer WHIP audio bitrate
whipoutaudiocodec woac String WHIP audio codec
whipoutcodec woc, wovc String WHIP video codec
whipoutscreensharebitrate wossbitrate Integer WHIP screen share bitrate
whipoutscreensharecodec wosscodec String WHIP screen share codec
whipouttoken - String WHIP output token
whipoutvideobitrate wovb Integer WHIP video bitrate
whitebalance wb, temp Number Sets white balance
width w Integer Sets video width
widgetleft - Boolean -
widgetwidth - Number -
wq See webpquality - -
wss - URL WebSocket server URL
wss2 - URL Alternative WebSocket URL

Y

Parameter Aliases Values Description
youtube - String YouTube integration key

Z

Parameter Aliases Values Description
zoom - Boolean Enables zoom effect
zoomedbitrate zb Integer Sets zoomed video bitrate

Notes

  1. Boolean parameters can typically be set to true, false, 0, 1, off, or no
  2. Many parameters that take integer values have specific valid ranges or expected values
  3. Some parameters may behave differently depending on browser, device, or other active parameters
  4. URL parameters are case-insensitive
  5. When multiple aliases exist for a parameter, they all provide the same functionality
  6. Some parameters may require specific hardware, browser support, or other parameters to function

For the most current and detailed information, please refer to the official VDO.Ninja documentation.

description: >- Labels, styles, clean output, CSS, mirroring, margin, dark mode, background color, disable tallies etc.

Design Parameters

They are separated in three groups: general options (push and view), source side (push) options and viewer side (view) options.

General options

You can add them to both, source (&push) and viewer (&view or &scene) sides.

ParameterExplanation
&labelSets a display name label
&showlabelsDisplay labels as a video overlay
&fontsizeLet you set font-size of the closed captions and stream labels
&styleLets you select how audio-only elements are displayed in OBS and for guests
&bgimageCan be used to set the default image avatar, when using &style=0 or &style=6
&showallIncludes non-media-based push connections as video elements in a group room
&meterstyleOptional audio meter style type
&cleanoutputKeeps the output as clean as possible from UI elements
&cleanishCleaner output; not as clean as &cleanoutput
&cssLoads a custom CSS file
&base64cssLets you add css to the URL, but as a single string, so no external reference to a file is needed
&jsLets you pass a third party hosted javascript file URL
&base64jsLets a user add raw javascript to the URL to run on page load
&mirrorInverts the video so it is the mirror reflection
&nomirror*Disables the default mirror state of the video preview for a guest
&flipInverts the video so it is upside down
&rotatewindowWill rotate the contents of the VDO.Ninja window
&structureWill have the video holding div element be structured to the aspect ratio
&colorYou can specify the background color independent of the border color
&blurWill try to add a blurred background to the video so it fits the structured video container
&borderAdds a border around the videos
&bordercolorDefines the color of &border
&roundedRounds the edges of videos
&marginAdds a margin around the videos in pixel
&darkmodeDarkens the website and interface
&lightmodeForces to enable the lightmode / disable the darkmode
&backgroundAccepts a URL-encoded image URL to make as the app's default background
&chromaSets the background for the website to a particular hex color
&transparentMakes the background transparent
&nocursorHides the mouse cursor over videos at a CSS level
&faviconWill change the browser's page favicon image
&headertitleWill change the browser's page title
&pipall*New floating picture in picture mode, so you can pop out the entire video mix as a pinned window overlay
&pipme*Will cause your self-video preview window to pop out into its own picture in picture

*NEW IN VERSION 24

Source side options

You have to add them to the source side (&push).

ParameterExplanation
&rotateRotates the camera
&gridApplies an rule-of-thirds grid overlay to the self-preview
&hideheaderHides just the top header-bar
&hidemenuHides the VDO.Ninja-branded menu and header bar
&tallyWill make the tally sign larger and colorize the background of the page
&tallyoffDisables the Tally Light's visibility for that particular guest

Viewer side options

You have to add them to the viewer side (&view or &scene).

ParameterExplanation
&cleanviewerHides many of the UI elements and pop-ups that may cause unwanted visual elements
&obsoffDisables the tally light effects
&pipAuto PIP the first loaded video

description: Accepts a URL-encoded image URL to make as the app's default background

&background

General Option! (&push, &room, &view, &scene, &solo)

Aliases

  • &appbg

Options

Example: &background=./media/logo_cropped.png

Value Description
(encoded URL) Changes the background of VDO.Ninja

Details

Accepts a URL-encoded image URL to make as the app's default background.

To test:
https://vdo.ninja/?background=./media/logo_cropped.png

The image will scale in size to cover the VDO.Ninja app's background. &chroma can still be used to set the background color, if using transparencies. There already exists &bgimage, which will set the default background image for videos; this however will set a background image for the entire page.

You can encode and decode a URL here:
https://www.urlencoder.org/

Related

{% content-ref url="and-bgimage.md" %} and-bgimage.md {% endcontent-ref %}

{% content-ref url="chroma.md" %} chroma.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-waitimage.md" %} and-waitimage.md {% endcontent-ref %}

description: >- Lets you add css to the URL, but as a single string, so no external reference to a file is needed

&base64css

General Option! (&push, &room, &view, &scene)

Aliases

  • &b64css
  • &cssbase64
  • &cssb64

Options

Example: &base64css=JTIzbWFpbm1lbnUlN0JiYWNrZ3JvdW5kLWNvbG9yJTNBJTIwcGluayUzQiUyMCVFMiU5RCVBNA

Value Description
(string) Custom base64 string

Details

This command lets you add CSS to VDO.Ninja via the URL, but as a single string, so no external reference to a file is needed.

Example usage:
https://vdo.ninja/?base64css=JTIzbWFpbm1lbnUlN0JiYWNrZ3JvdW5kLWNvbG9yJTNBJTIwcGluayUzQiUyMCVFMiU5RCVBNA

You can create the base64 encoding using btoa(encodeURIComponent(csshere)), for example window.btoa(encodeURIComponent("#mainmenu{background-color: pink; ❤" ));

Will return the base64 encoded string required. Special non-latin characters are supported with this approach; not just latin characters.

The https://invite.vdo.ninja/ tool has an option to do these base64 encoding steps under "General Options".

There's also a page dedicated to creating these base64 encodings here: https://vdo.ninja/base64

Related

{% content-ref url="css.md" %} css.md {% endcontent-ref %}

description: Lets a user add raw javascript to the URL to run on page load

&base64js

General Option! (&push, &room, &view, &scene,&solo)

Aliases

  • &jsb64
  • &b64js
  • &jsb64

Options

Example: &base64js=YWxlcnQoJ2hpJyk=

Value Description
(string) Javascript URL

Details

&base64js lets a user add raw java script to the URL to run on page load.

To test:
https://vdo.ninja/?base64js=YWxlcnQoJ2hpJyk=

Related

{% content-ref url="and-base64css.md" %} and-base64css.md {% endcontent-ref %}

{% content-ref url="and-js.md" %} and-js.md {% endcontent-ref %}

description: Can be used to set the default image avatar, when using &style=0 or &style=6

&bgimage

General Option! (&push, &room, &view, &scene, &solo)

Aliases

  • &bgimg
  • &avatarimg

Options

Example: &bgimage=https%3A%2F%2Fvdo.ninja%2Fmedia%2Fold_icon.png

ValueDescription
(Encoded URL)URL or base64 data image/svg

Details

&bgimage can be used to set the default image avatar, when using &style=0 or &style=6. This only impacts what the person with the parameter added sees and must be either a URL or a base64 data image/svg. URL-encoded values.

https://vdo.ninja/?push=aSmexM6&style=0&vd=0&webcam&bgimage=https%3A%2F%2Fvdo.ninja%2Fmedia%2Fold_icon.png

(1) (4).png>)

You can encode your URL here:
https://www.urlencoder.org/

If you want to change the background image / avatar on the sender's side for all viewers, use &avatar.

&bgimage2 and &bgimage3

&bgimage2 and &bgimage3 work in conjunction with the existing &bgimage parameter. You pass an URL-encoded image URL to each, and when a guest speaks, it will switch their background image between the 3 possible images, based on their loudness.

eg:

vdo.ninja/alpha/?view=stream2,stream2&avatarimg=./media/avatar1.png&avatarimg2=./media/avatar2.png&avatarimg3=./media/avatar3.png

I've included some hand-drawn avatar sample images to test with; they are the default values for &bgimage, &bgimage2, and &bgimage3.

The images will only show when there is no active video and is essentially the same as using &meterstyle=4 with some custom CSS to specify the behaviour, but it is not stream ID specific however.

Related

{% content-ref url="style.md" %} style.md {% endcontent-ref %}

{% content-ref url="../video-parameters/and-avatar.md" %} and-avatar.md {% endcontent-ref %}

{% content-ref url="../newly-added-parameters/and-waitimage.md" %} and-waitimage.md {% endcontent-ref %}

{% content-ref url="and-background.md" %} and-background.md {% endcontent-ref %}

description: >- Will try to add a blurred background to the video so it fits the structured video container

&blur

General Option! (&push, &room, &view, &scene)

Options

Example: &blur=25

Value Description
(no value given) blurring intensity = 10
(integer) blurring intensity
25 blurring intensity = 25

Details

&blur which will try to add a blurred background to the video so it fits the structured video container. Using &blur auto enables &structure.

Code in the auto mixer, so you won't see the effect in a simple preview or some self-preview types.

&blur doesn't work with &color, etc.

You can change the blurring intensity with &blur=25 or whatever; 10 is default

&blur=0 works as well.

May be buggy if using it with &forcedlandscape or &rotate

Related

{% content-ref url="and-structure.md" %} and-structure.md {% endcontent-ref %}

{% content-ref url="and-border.md" %} and-border.md {% endcontent-ref %}

{% content-ref url="and-color.md" %} and-color.md {% endcontent-ref %}

description: Adds a border around the videos

&border

General Option! (&push, &room, &view, &scene, &solo)

Options

Example: &border=20

ValueDescription
(no value given)adds a border with 10 px
(integer value)adds a border in px

Details

Adds a border around the videos.

Related

{% content-ref url="and-bordercolor.md" %} and-bordercolor.md {% endcontent-ref %}

{% content-ref url="margin.md" %} margin.md {% endcontent-ref %}

{% content-ref url="rounded.md" %} rounded.md {% endcontent-ref %}

description: Defines the color of &border

&bordercolor

General Option! (&push, &room, &view, &scene, &solo)

Options

Example: &bordercolor=ffffff or &bordercolor=white

Value Description
(no value given) black border
(HEX) | (color name) specifies the color of the border
ffffff white border

{% hint style="danger" %} Do not include the # character with the hex value. {% endhint %}

Details

Defines the color of &border.

Related

{% content-ref url="and-border.md" %} and-border.md {% endcontent-ref %}

{% content-ref url="margin.md" %} margin.md {% endcontent-ref %}

{% content-ref url="rounded.md" %} rounded.md {% endcontent-ref %}

description: >- Hides many of the UI elements and pop-ups that may cause unwanted visual elements

&cleanviewer

Viewer-Side Option! (&view, &scene, &room)

Aliases

  • &cv

Details

This is the exact same thing as &cleanoutput, except it only triggers if added to a view-only link.

Hides many of the UI elements and pop-ups that may cause unwanted visual elements not desired in a high-stakes live stream.

Related

{% content-ref url="cleanoutput.md" %} cleanoutput.md {% endcontent-ref %}

description: You can specify the background color independent of the border color

&color

General Option! (&push, &room, &view, &scene)

Options

Example: &color=ffffff or &color=white

Value Description
(no value given) black background
(HEX) | (color name) specifies the color of the background
ffffff white background

{% hint style="danger" %} Do not include the # character with the hex value. {% endhint %}

Details

You can specify the background color independent of the border color with &color. If using &border, it will not set the background color, so you may need to use both &border and &color.

May not yet work with &forcedlandscape or &rotate.\

Related

{% content-ref url="and-structure.md" %} and-structure.md {% endcontent-ref %}

{% content-ref url="and-border.md" %} and-border.md {% endcontent-ref %}

{% content-ref url="and-blur.md" %} and-blur.md {% endcontent-ref %}

{% content-ref url="and-bordercolor.md" %} and-bordercolor.md {% endcontent-ref %}

description: Will change the browser's page favicon image

&favicon

General Option! (&push, &room, &view, &scene, &solo)

Options

Example: &favicon=https%3A%2F%2Fmeshcast.io%2Ffavicon.ico

ValueDescription
(URL encoded URL)Changes the favicon

https://www.urlencoder.org/

Details

&favicon will change the browser's page favicon image. Passed values should be URL encoded. (Google URL encoding if needed). Since this is Javascript based, the values only update once the page loads. Meta-page-previews will likely not reflect the values.

Sample link: https://vdo.ninja/?headertitle=LINDENKRON4TW&favicon=https%3A%2F%2Fmeshcast.io%2Ffavicon.ico

Related

{% content-ref url="and-headertitle.md" %} and-headertitle.md {% endcontent-ref %}

description: Inverts the video so it is upside down

&flip

General Option! (&push, &room, &view, &scene)

Details

Inverts the video so it is upside down. That's it. It doesn't change the viewer's link. If you want to have the viewer's link. If you want to flip the viewer's link as well, you have to add &flip to the viewer's side as well.

Alternative method for mirroring and flipping

If you are looking for a form of rotation and flipping that rotates the actual video, rather than relying on CSS to achieve it, you can check out the sender-side &effects options.

https://vdo.ninja/?effects=-1, which will flip the video
https://vdo.ninja/?effects=-2, which will flip and mirror the video
https://vdo.ninja/?effects=2, which will mirror the video

Effects however may increase CPU/GPU usage, and could cause frame rate instability, especially if the browser tab is not in active focus.

Dedicated teleprompter tool that works for most sites

There's a dedicated tool for mirror, flipping, and rotating websites as part of VDO.Ninja as well:

teleprompter-tool.md

In case the built-in options to mirror or flip don't work, the teleprompter app might be a good alternative.

Related

{% content-ref url="../../steves-helper-apps/teleprompter-tool.md" %} teleprompter-tool.md {% endcontent-ref %}

{% content-ref url="and-mirror.md" %} and-mirror.md {% endcontent-ref %}

{% content-ref url="../../source-settings/effects.md" %} effects.md {% endcontent-ref %}

description: Will change the browser's page title

&headertitle

General Option! (&push, &room, &view, &scene, &solo)

Options

Example: &headertitle=LINDENKRON4TW

ValueDescription
(string)Changes the browser's page title

Details

&headertitle will change the browser's page title.

Sample link: https://vdo.ninja/?headertitle=LINDENKRON4TW&favicon=https%3A%2F%2Fmeshcast.io%2Ffavicon.ico

Related

{% content-ref url="and-favicon-alpha.md" %} and-favicon-alpha.md {% endcontent-ref %}

description: Hides just the top header-bar

&hideheader

Sender-Side Option! (&push)

Aliases

  • &noheader
  • &hh

Details

&hideheader could be useful for hiding VDO.Ninja branding, making videos a bit larger at times, or for IFRAME use-case applications.

It hides this:

Related

{% content-ref url="and-hidemenu.md" %} and-hidemenu.md {% endcontent-ref %}

description: Hides the VDO.Ninja-branded menu and header bar

&hidemenu

Sender-Side Option! (&push)

Aliases

  • &hm

Details

Hides the VDO.Ninja-branded menu and header bar.

Useful for making videos larger for guests by freeing up space.

Related

{% content-ref url="and-hideheader.md" %} and-hideheader.md {% endcontent-ref %}

description: Lets you pass a third party hosted javascript file URL

&js

General Option! (&push, &room, &view, &scene)

Options

Example: &js=https%3A%2F%2Fvdo.ninja%2Fexamples%2Ftestjs.js

Value Description
(encoded URL) Third party hosted java script file URL

Details

&js lets you pass a third party hosted java script file URL (URL-encoded), allowing for a custom code injection without self-hosting, IFrames or chrome extensions.

Example:
https://vdo.ninja/?js=https%3A%2F%2Fvdo.ninja%2Fexamples%2Ftestjs.js

You can use this tool to encode the URL you want to link to
https://www.urlencoder.org/

Related

{% content-ref url="and-base64js.md" %} and-base64js.md {% endcontent-ref %}

description: Forces to enable the lightmode / disable the darkmode

&lightmode

General Option! (&push, &room, &view, &scene)

Details

Forces to enable the lightmode. It's the same like &darkmode=0 or &darkmode=false.

Related

{% content-ref url="darkmode.md" %} darkmode.md {% endcontent-ref %}

description: Inverts the video so it is the mirror reflection

&mirror

General Option! (&push, &room, &view, &scene)

Options

Example: &mirror=2

ValueDescription
(no value given)Mirroring is forced for all videos
0Preview video is mirrored only (excluding rear cameras and OBS Virtualcam/NDI)
1Mirroring is forced for all videos
2Inverts the default; local previews are not mirrored, but guests are mirrored
3Same as default, except everything is mirrored, including text - useful for teleprompters

Details

Mirroring does not work if using the browser's native video full-screen button. Use &effects=2 instead for this use case.

Try F11 or the Electron Capture app (right-click → Resize window -> Fullscreen) to hide the browser menu instead.

Alternative method for mirroring and flipping

If you are looking for a form of rotation and flipping that rotates the actual video, rather than relying on CSS to achieve it, you can check out the sender-side &effects options.

https://vdo.ninja/beta/?effects=-1, which will flip the video https://vdo.ninja/beta/?effects=-2, which will flip and mirror the video
https://vdo.ninja/beta/?effects=2, which will mirror the video

Effects however may increase CPU/GPU usage, and could cause frame rate instability, especially if the browser tab is not in active focus.

Dedicated teleprompter tool that works for most sites

There's a dedicated tool for mirror, flipping, and rotating websites as part of VDO.Ninja as well:

teleprompter-tool.md

In case the built-in options to mirror or flip don't work, the teleprompter app might be a good alternative.

Related

{% content-ref url="../../steves-helper-apps/teleprompter-tool.md" %} teleprompter-tool.md {% endcontent-ref %}

{% content-ref url="../../source-settings/effects.md" %} effects.md {% endcontent-ref %}

{% content-ref url="and-flip.md" %} and-flip.md {% endcontent-ref %}

description: Disables the default mirror state of the video preview for a guest

&nomirror

General Option! (&push, &room, &view, &scene)

Details

&nomirror disables the default mirror state of the video preview for a guest, unlike &mirror=0. Previews are often mirrored by default. &mirror can be applied on top of that state, to mirror things back for everyone if needed.

Related

{% content-ref url="and-mirror.md" %} and-mirror.md {% endcontent-ref %}

{% content-ref url="../../guides/how-to-mirror-a-video-while-full-screen-for-ipads-and-teleprompters.md" %} how-to-mirror-a-video-while-full-screen-for-ipads-and-teleprompters.md {% endcontent-ref %}

description: Disables the tally light effects

&obsoff

Viewer-Side Option! (&view, &scene, &room)

Aliases

  • &oo
  • &disableobs

Details

Disables the tally light effects; can be applied to both viewer or publisher. Tally lights are represented as a glowing red border around videos. When the light is on, the video is considered "VISIBLE" within OBS Studio. This is based on whether OBS Studio tells VDO.Ninja if a video is active or not.

{% hint style="info" %} Videos on first-load in OBS, even if visible in OBS, don't glow red; it requires an initial visibility change to trigger it. {% endhint %}

&obsoff can be used to set permissions to fully off (also disables tally light and scene optimizations tho) when added to the OBS browser source link.

Related

{% content-ref url="../settings-parameters/and-controlobs.md" %} and-controlobs.md {% endcontent-ref %}

{% content-ref url="tallyoff-1.md" %} tallyoff-1.md {% endcontent-ref %}

description: Auto PIP the first loaded video

&pip

Viewer-Side Option! (&view, &scene, &room)

Details

Adding this to a guest's link in a room, it forces the system-based PIP to trigger on the first video that loads.

.png>)

Related

{% content-ref url="and-pipall-alpha.md" %} and-pipall-alpha.md {% endcontent-ref %}

{% content-ref url="and-pipme-alpha.md" %} and-pipme-alpha.md {% endcontent-ref %}

description: >- New floating picture in picture mode, so you can pop out the entire video mix as a pinned window overlay

&pipall

General Option! (&push, &room, &view, &scene)

Aliases

  • &pip2

Details

Added a new floating picture in picture mode, so you can pop out the entire video mix as a pinned window overlay.

&pipall will add a dedicated button for this mode.
(1) (1) (1) (1).png>)

Or just right-click any video and select "Picture in picture all" from the context menu. This is available without any URL option.
.png>)

This requires Chrome v115 right now; it might vanish in v116 due to it being in a chrome field trial, and so you might need to enable it via chrome:flags if it stops working.

Update: Doesn't break the site if browser does not supported.

Related

{% content-ref url="and-pip.md" %} and-pip.md {% endcontent-ref %}

{% content-ref url="and-pipme-alpha.md" %} and-pipme-alpha.md {% endcontent-ref %}

description: >- Will cause your self-video preview window to pop out into its own picture in picture

&pipme

General Option! (&push, &room, &view, &scene)

Aliases

  • &mypip
  • &pip3

Details

&pipme will cause your self-video preview window to pop out into its own picture in picture (floating/draggable) on load.

This is not compatible with &autostart. Works with director or guest; not tested on mobile.

CTRL + ALT + P will also toggle the picture in picture, without needing any URL parameters. (cmd + ALT + P on Mac)

Related

{% content-ref url="and-pip.md" %} and-pip.md {% endcontent-ref %}

{% content-ref url="and-pipall-alpha.md" %} and-pipall-alpha.md {% endcontent-ref %}

description: Rotates the camera

&rotate

Sender-Side Option! (&push)

Options

Example: &rotate=180

ValueDescription
(no value given) | 9090 degree
(degree)Rotates the camera in the specified value in degree

Details

Applies to the publisher's side. Rotates the camera 90-deg by default, or specify &rotate=180 or &rotate=270 to rotate more.

Rotates your video for the guests/OBS as well. The rotation uses CSS.

{% hint style="warning" %} CSS-based video effects will not work in full-screen mode. As well, the control-bar gets rotated with the video, when using CSS. {% endhint %}

If looking to flip or mirror a video instead:

If you are looking for a form of mirroring and flipping that changes the actual video, rather than relying on CSS to achieve the effect, you can check out the sender-side &effects options.

https://vdo.ninja/beta/?effects=-1, which will flip the video https://vdo.ninja/beta/?effects=-2, which will flip and mirror the video
https://vdo.ninja/beta/?effects=2, which will mirror the video

Effects however may increase CPU/GPU usage, and could cause frame rate instability, especially if the browser tab is not in active focus.

There's also the &flip and &mirror options, which use CSS, but are generally viewer-side only.

Dedicated teleprompter tool that works for most sites

There's a dedicated tool for mirror, flipping, and rotating websites as part of VDO.Ninja as well:

https://vdo.ninja/teleprompter

In case the built-in options to mirror or flip don't work, the teleprompter app might be a good alternative.

Related

{% content-ref url="../../source-settings/effects.md" %} effects.md {% endcontent-ref %}

{% content-ref url="and-flip.md" %} and-flip.md {% endcontent-ref %}

{% content-ref url="and-mirror.md" %} and-mirror.md {% endcontent-ref %}

{% content-ref url="and-rotatewindow.md" %} and-rotatewindow.md {% endcontent-ref %}

description: Will rotate the contents of the VDO.Ninja window

&rotatewindow

General Option! (&push, &room, &view, &scene)

Aliases

  • &rotatepage

Options

Example: &rotatewindow=270

ValueDescription
(no value given) | 9090 degree
(degree)Rotates the page in the specified value in degree

Details

&rotatewindow will rotate the contents of the VDO.Ninja window. It doesn't target any specific video, and can be used on the viewer-side, not just the sender.

This will be overridden by &forcelandscape mode, if that is used also.

You can pass 90, 180, or 270 as a value to the parameter, to rotate accordingly. The default is 90 though, if used without any value.

You might still want to use OBS to rotate instead, but if not using OBS and find the teleprompter app too cumbersome, this is a good option.

Related

{% content-ref url="and-rotate.md" %} and-rotate.md {% endcontent-ref %}

{% content-ref url="and-flip.md" %} and-flip.md {% endcontent-ref %}

{% content-ref url="and-mirror.md" %} and-mirror.md {% endcontent-ref %}

description: Lets you specify how many rows to use in the VDO.Ninja auto mixer.,

&rows

&rows lets you specify how many rows to use in the VDO.Ninja auto mixer.,

  • eg: https://vdo.ninja/?scene=0&room=123123123333&cover&rows=1,1,1,2&fakeguests=3,
  • you'll notice the parameter can take comma separated values, or just 1 value if needed,
  • row=1 will be just one row, regardless of how many guests, and row=1,1,1,2 for example will be 1 row if 1 guest, 2 guest, or 3 guest, but two rows (2x2) if 4 guests. If more than than, the guests will squeeze into still just two rows.

When using &rows a negative row value will now center the videos in the row if not a complete row.

  • eg: &rows=1,-2 vs &rows=1,2

Centered: https://vdo.ninja/alpha/?fakeguests=3&room=XX&scene&rows=1,-2

Centered: https://vdo.ninja/alpha/?fakeguests=3&room=XX&scene&rows=1,-2

Not-Centered: https://vdo.ninja/alpha/?fakeguests=3&room=XX&scene&rows=1,2

description: Includes non-media-based push connections as video elements in a group room

&showall

General Option! (&push, &room, &view, &scene, &solo)

Aliases

  • &style=7

Details

Added &showall (or &style=7), which will include non-media-based push connections as video elements in a group room. This can include guests that joined without audio/video, directors, or a data-only connection, like maybe MIDI-output source.

To help avoid some types of connections showing up when using &showall, I've also added a &nopush mode, which blocks outbound publishing connections. This acts a bit like a &scene=1 link, so unless &showall is added, you'll need to use the IFRAME API to show/hide videos in it.

Related

{% content-ref url="style.md" %} style.md {% endcontent-ref %}

{% content-ref url="../settings-parameters/and-nopush.md" %} and-nopush.md {% endcontent-ref %}

description: Will have the video holding div element be structured to the aspect ratio

&structure

General Option! (&push, &room, &view, &scene)

Details

&structure will have the video holding div element be structured to 16:9 (or whatever &aspectratio is set to), making it easier to apply custom CSS backgrounds to videos.

It will have the label/border/margins align relative to the 16:9 holder element, rather than video itself.

Also related, you can also specify the background color independent of the border color with &color. If using &border, it will not set the background color, so you may need to use both &border and &color.

May not yet work with &forcedlandscape or &rotate.

Updated &structure to work with &cover, allowing for some more flexibility with controlling fixed aspect-ratios from the viewer/scene side.
ie: https://vdo.ninja/?room=XXXXX&scene&cover&structure&square&fakeguests=10
(1) (1) (1) (1) (1) (1).png>) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png>)

Related

{% content-ref url="../mixer-scene-parameters/and-locked.md" %} and-locked.md {% endcontent-ref %}

{% content-ref url="and-color.md" %} and-color.md {% endcontent-ref %}

{% content-ref url="and-blur.md" %} and-blur.md {% endcontent-ref %}

{% content-ref url="and-border.md" %} and-border.md {% endcontent-ref %}

description: Makes the background transparent

&transparent

General Option! (&push, &room, &view, &scene)

Aliases

  • &transparency

Details

Makes the background for the website transparent using CSS.

The browser source in OBS already has a transparent background by default.

This is useful for embedding VDO.Ninja as an IFRAME.
Not helpful with the Electron Capture app.
Not needed for OBS if using default OBS CSS stylesheet:

body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}

Related

A video demo of the &chunked transfer and how to enable support for alpha-channel transparency is available here: https://youtu.be/SWDlm1Jf-Oo

{% content-ref url="chroma.md" %} chroma.md {% endcontent-ref %}

{% content-ref url="../../newly-added-parameters/and-chunked.md" %} and-chunked.md {% endcontent-ref %}

description: Sets the background for the website to a particular hex color

&chroma

General Option! (&push, &room, &view, &scene)

Options

Example: &chroma=F0F

Value Description
(no value given) green background
F0F any RGB format color
DEDEDE any RRGGBB format color

{% hint style="info" %} Use it to chroma-key out the background on the Electron Capture app. {% endhint %}

{% hint style="danger" %} Do not include the # character with the hex value. {% endhint %}

Can be 3 or 6 characters in length, 0 to F, in RGB or RRGGBB format.

https://vdo.ninja/?scene&room=roomname&chroma
(1) (1) (2) (2).png>)

See &color if you want to set the background color of one single video feed.

Related

{% content-ref url="and-color.md" %} and-color.md {% endcontent-ref %}

{% content-ref url="and-transparent.md" %} and-transparent.md {% endcontent-ref %}

{% content-ref url="and-background.md" %} and-background.md {% endcontent-ref %}

description: Cleaner output; not as clean as &cleanoutput

&cleanish

General Option! (&push, &room, &view, &scene)

Details

Same as &cleanoutput, except:

  • It still shows the play button that allows handling gesture requirements in chrome.
  • Director direct overlay messages are still visible.
  • When using &cleanish and &record, you'll get the record button showing, but nothing else.

and as of VDO.Ninja version 26.4,

  • You can still access the right-click menu, while you can't if using &clean
    \

Related

{% content-ref url="cleanoutput.md" %} cleanoutput.md {% endcontent-ref %}

{% content-ref url="../../director-settings/cleandirector.md" %} cleandirector.md {% endcontent-ref %}

description: Keeps the output as clean as possible from UI elements

&cleanoutput

General Option! (&push, &room, &view, &scene)

Aliases

  • &clean

Details

Hides many of the UI elements and pop-ups that may cause unwanted visual elements not desired in a high-stakes live stream.

&cleanishis a slightly less strict version, which tries to better balance what is available and what isn't in this mode.\

As of VDO.Ninja version 26.4,

  • You cannot access the right-click menu when using &clean, however you can with &cleanish

Related

{% content-ref url="cleanish.md" %} cleanish.md {% endcontent-ref %}

{% content-ref url="../../director-settings/cleandirector.md" %} cleandirector.md {% endcontent-ref %}

{% content-ref url="and-cleanviewer.md" %} and-cleanviewer.md {% endcontent-ref %}

description: Loads a custom CSS file

&css

General Option! (&push, &room, &view, &scene)

Options

Example: &css=https%3A%2F%2Fbackup.vdo.ninja%2Fdev4321%2Fexamples%2Fmain.css

ValueDescription
(encoded URL)will show the VU-style meter that the director has by default already

Any URL-encoded URL that links to a CSS file.

Example:
https://vdo.ninja/?css=https%3A%2F%2Fbackup.vdo.ninja%2Fdev4321%2Fexamples%2Fmain.css

You can use this tool to encode the URL you want to link to
https://www.urlencoder.org/

Details

Link to a remotely hosted CSS style sheet via the URL. You can stylize VDO.Ninja without needing to host anything more than a CSS file. The page elements are not visible until the remote style sheet has been loaded.

I've made the &css parameter within VDO.Ninja more tolerant to invalid forms of input, so if you don't know what URL or Base64 encoding is, you might be able to get away without using any now.
https://vdo.ninja/?css=body{background-color:blue!important}

base64css

You can pass CSS as a base64-encoded string using the &base64css parameter. This needs to be URLComponent encoded first, and then converted to base 64.

The https://invite.vdo.ninja/ tool has an option to do these base64 encoding steps under "General Options".

Customizable director's dock for OBS

Customizable director's dock for OBS example made:
&css=minidirector.css

Example:
https://vdo.ninja/?css=minidirector.css&cleanoutput&hidesolo&director

Related

{% content-ref url="and-base64css.md" %} and-base64css.md {% endcontent-ref %}

description: Darkens the website and interface

&darkmode

General Option! (&push, &room, &view, &scene)

Aliases

  • &nightmode

Options

Example: &darkmode=0

Value Description
(no value given) enables the dark-mode
0 | false disables the dark-mode

Details

Enables the dark-mode stylings of the website.

Conversely, setting &lightmode, &darkmode=0 or &darkmode=false will disable the dark-mode, forcing the light-mode.

The dark-mode will be selected automatically by default if your system is set to dark color mode, so this flag can be used to override that.

Related

{% content-ref url="and-lightmode.md" %} and-lightmode.md {% endcontent-ref %}

description: Applies an rule-of-thirds grid overlay to the self-preview

&grid

Sender-Side Option! (&push)

Aliases

  • &ruler
  • &thirds

Options

Example: &grid=./media/thirdshead.svg

ValueDescription
(no value given)adds a white rule-of-thirds grid overlay
(encoded URL)adds an image as a overlay

Details

Applies an rule-of-thirds grid overlay to the self-preview video window. This is useful for passively nudging guests to better center themselves while on camera.

{% hint style="warning" %} As of v19.0, this only works for guests of a room or of a faux-room. It doesn't yet support basic push/view links, as those don't use the auto-mixer code, which is where this code is currently applied. {% endhint %}

(1).png>)

Changes in Version 22

Added the option to customize the &grid effect by passing an image link (can help center guests).

A transparent PNG or an SVG file are the recommended options.

It will stretch to cover the camera preview-area, so probably best to keep things 16:9 aspect if needed.

URL can be URL-encoded, for more complex URLs. Simple URLs might work without.

Technically this can be used as an overlay for other things, but it only works with the self-preview.

Example: https://vdo.ninja/?push&grid=./media/thirdshead.svg

Leave the passed value empty if you wish to have the white basic rule-of-thirds show as default.

{% hint style="info" %}

  • As of v22, it now works in non-room mode (basic push links):
    https://vdo.ninja/?push&grid
  • You can now also toggle it in the director's room to add it to the guest's link:
    (1).png>) {% endhint %}

You can encode your URL here:
https://www.urlencoder.org/

description: Adds a margin around the videos in pixel

&margin

General Option! (&push, &room, &view, &scene)

Options

Example: &margin=100

Value Description
(no value given) margin value = 10px
(integer value) margin value in px

Details

Adds 10px around the videos for some spacing, by default. It can be customized.
https://vdo.ninja/?scene&room=roomname&margin=100
(1) (2) (1).png>)

It's also available as a toggle to the director's room.
.png>)

description: Optional audio meter style type

&meterstyle

General Option! (&push, &room, &view, &scene, &director)

Aliases

  • &meter

Options

Example: &meterstyle=3

ValueDescription
Defaulta green dot in the right-corner that only shows in the guest / director view
1 | (no value given)will show the VU-style meter that the director has by default already
2will show a green-border around the guest's video when they are talking
3will show a little green dot in the top-right corner when the guest's talking; this is default for the guest's view already
4no meter is shown, but a data-attribute named data-loudness is applied to the video element. This can be targeted with CSS to do custom styles via OBS browser source or with &css
5has the audio-only background image pulse larger in size when that specific guest is speaking

Details

If you add this to a director's/guest's URL, it will show an optional audio style type, when a guest is talking.

For guests and directors, there is a default meter style that shows a green dot in the top right for when someone is speaking.

Default meter style for guests/directors

When using any &meterstyle effect, I now include a data attribute called data-speaking to the video element. It will be either 0, 1, or 2. 0 is quiet, 1 is whispering, and 2 is loud. &meterstyle=4 includes a fine-grain option already for loudness as an attribute, but for basic CSS needs, this option might be more approachable.

You can use this attribute to use CSS to customize your own effects when someone speaks. You can further target what is CSS used based on a specific guest by using each video's stream ID data attribute as well.

The meter will not appear if audio is not yet playing/active, or is audio-processing is disabled (&noap). This might be the case with certain mobile devices as well.

&meterstyle=2

A common request is a green box around the activer speaker

.png>)

&meterstyle=4

When using &meterstyle=4 or greater, the background of an audio-only element is transparent now; not black. I also specifically hide the video-control bar when using &meterstyle=4, but you can use &videocontrols to add them back in if needed.

&meterstyle=5

It can be used in conjunction with &bgimage to specific a custom background image for the video, which will pulse in size. ie: &meterstyle=5&bgimage=./media/avatar1.png

Related

{% content-ref url="../view-parameters/activespeaker.md" %} activespeaker.md {% endcontent-ref %}

{% content-ref url="style.md" %} style.md {% endcontent-ref %}

description: Rounds the edges of videos

&rounded

General Option! (&push, &room, &view, &scene)

Aliases

  • &round

Options

Example: &rounded=100

ValueDescription
(no value given)50 px
(positive integer value)the higher the number, the more aggressive the curve

Details

This is a stylistic effect; it attempts to apply rounded edges to videos (crop-based).

The default value is 50-pixels. You can pass other integer values to customize the amount of curving; the higher the number, the more aggressive the curve.

This works great for solo-video streams where the video fits the window fully, but may not round the edges of videos that do not fit their container area. To compensate for this, using the &cover command as well can force the video to fit the window, and hence, have the rounded edges applied correctly.

An example of an aggressive rounded effect is with the following parameters:
https://vdo.ninja/?view=streamID123&cover&rounded=1000

.png>)

Related

{% content-ref url="../view-parameters/cover.md" %} cover.md {% endcontent-ref %}

description: Display labels as a video overlay

&showlabels

General Option! (&push, &room, &view, &scene)

Aliases

  • &showlabel
  • &sl

Options

There are some preset style options, which can be passed to the parameter as a value. You can also choose to just edit the label's style with CSS, as discussed lower on this page.

Example: &showlabels=ninjablue

ValueDescription
(no value given)Generic styled display names
fireFire looking display names
ninjablueVDO.Ninja styled display names
skypeSkype styled display names
teamsMicrosoft Teams styled display names
toproundedTop-center rounded display names
zoomZoom styled display names
roundedRounded lower-right names; bold

Details

This parameter will display the user's display name or label on screen, as a text overlay. The label can be set either via the URL using the &label parameter, or the room's director can set it dynamically via the "Add a label" option.

This parameter can be used on guest links, view links, or scene links. It will be sticky to each individual video and not the browser window as a whole.

Underscores "_" used in label values will be replaced by spaces, allowing for word separation.

HTML5 Emojis 🎈 and some non-Latin characters are supported.

For example: https://vdo.ninja/?showlabels=fire
.png>)

If no preset option is passed, a default generic style is used:
.png>)

Font size customization

You can change the font-size without using CSS, using the &fontsize parameter. CSS is also supported though.

Font-size of labels will adjust slightly based on the window size.

Advanced Customization

CSS of the styles can be set via the OBS browser source stylesheet window.
The CSS class name you can customize is called video-label.

(1) (1).png>)

You can copy the below code, modifying it as you desire, as a starting point. You'll still need to use &showlabels to trigger the labels to display though.

.video-label {
	color: red;
  bottom: 2vh;
	left: 50%;
	transform: translateX(-50%);
  background: rgba(0, 0, 0, .8);
	pointer-events:none;
	border-radius: 5px;
	font-size: 0.8em;
}

Below is another example, this time we target the video tile class, creating a margin above the video elements. We can then move the display label into that space, creating a label that is not overlaying the video itself, but still attached.

(1).png>)

.tile {
  margin-top: 10vh !important;
  max-height: 90vh!important;
}

.video-label {
	bottom:unset;
	top:0;
	text-align:middle;
	left:unset;
	background:unset;
	text-shadow : 0 0 10px #035;
	font-size: 7vh!important;
}

Related

{% content-ref url="../../general-settings/label.md" %} label.md {% endcontent-ref %}

{% content-ref url="../../newly-added-parameters/and-screensharelabel.md" %} and-screensharelabel.md {% endcontent-ref %}

{% content-ref url="../view-parameters/fontsize.md" %} fontsize.md {% endcontent-ref %}

{% content-ref url="css.md" %} css.md {% endcontent-ref %}

{% content-ref url="../setup-parameters/and-labelsuggestion.md" %} and-labelsuggestion.md {% endcontent-ref %}

description: Lets you select how audio-only elements are displayed in OBS and for guests

&style

General Option! (&push, &room, &view, &scene)

Aliases

  • &st

Options

Example: &style=2

ValueDescription
0shows the audio-control bar with a little person as a background silhouette, if the stream is an audio-only. This lets you control the volume and mute and get some feedback that the stream is present
1 | (no value given)hides audio-only windows from appearing. The default is for guests to see audio-only boxes for guests that do not have a video feed; the director is excluded
2just shows an animated audio waveform of the speaker's voice, although I made the quality HD now
3shows the audio meter, which you can customize using &meterstyle. You can conversely just use &meterstyle on its own, and mix it with a different style, and it will still work
4will just show a black background for any audio-only source
5will show a random color for a background, instead of just black
6will show the first letter of the guest's display name, in a colored circle, with a black background. If no display name is provided, it will just be a colored circle on a black background
7will include non-media-based push connections as video elements in a group room. This can include guests that joined without audio/video, directors, or a data-only connection, like maybe MIDI-output source

Details

&style lets you select how media elements are displayed in OBS and for guests; audio-only elements in particular.

Styles are experimental and will undergo change, tweaks, and likely there are more to come.

The default style depends on numerous factors; the intent is to predict the most desirable for a given situation. Manually setting the style will override the default. Defaults may be changed from time to time, based on user feedback.

There is a toggle in the director's room which adds &st to the guest's invite link..png>)

Related

{% content-ref url="meterstyle.md" %} meterstyle.md {% endcontent-ref %}

{% content-ref url="and-bgimage.md" %} and-bgimage.md {% endcontent-ref %}

{% content-ref url="and-showall.md" %} and-showall.md {% endcontent-ref %}

description: Disables the Tally Light's visibility for that particular guest

&tallyoff

Sender-Side Option! (&push)

Aliases

  • &notally
  • &disabletally
  • &to

Details

Disables the Tally Light's visibility for that particular guest.

Related

{% content-ref url="and-obsoff.md" %} and-obsoff.md {% endcontent-ref %}

description: Will make the tally sign larger and colorize the background of the page

&tally

Sender-Side Option! (&push)

Details

&tally will make the tally sign larger and colorize the background of the page, for added emphasis when the feed is added to OBS.

Related

{% content-ref url="tallyoff-1.md" %} tallyoff-1.md {% endcontent-ref %}

{% content-ref url="and-obsoff.md" %} and-obsoff.md {% endcontent-ref %}

description: Options for &director URLs

Director Parameters

Parameters specified for the director's control panel; have to be used together with the &director parameter.

Director Only Parameters

ParameterExplanation
&directorEnters a room as the director, instead of a guest and have full control
&codirectorAllows assistant directors to have access to the director's room, with a subset of control
&blindallIt allows the director 'blinding' all the guests at a time with a new button
&cleandirectorHides the invite URL options in the Director's room
&hidesoloLets you hide the solo links from showing
&hidecodirectorsHides the co-directors from appearing in the director's room
&minidirectorDefault mini director stylesheet
&orderbyOrders guest's by their stream ID in the director's room
&queueA basic guest queuing system
&roomsQuick director access to a list of rooms for transfering guests
&broadcasttransferWill let you specify the default for whether to transfer a guest from room to room in broadcast mode or not
&showdirectorLets the director perform alongside guests, showing up in scene-view links
&slotmodeGives you the possibility to assign slots to the connected guests
&previewmodeActivates the Preview layout for the director's room by default
&noviceHides some advanced guest options in the director's control center
&layoutsAn ordered array of layouts, which can be used to switch between using the API layouts action
&maindirectorpasswordLets you set a pseudo 'master room password' as a director

Parameters you can also use as a director

ParameterExplanation
&totalroombitrateThe total bitrate the guests in a room can view video streams with
&limittotalbitrateLimits the total outbound bitrate
&notifyAudio alerts for raised hands, chat messages and if somebody joins the room
&mutespeaker=0Can be used to have the director join unmuted
&showconnectionsDisplays the total number of p2p connections of a remote stream
&widgetWill load a side-bar for guests with an IFrame embed, with support for YouTube / Twitch / Social Stream

description: >- Will let you specify the default for whether to transfer a guest from room to room in broadcast mode or not

&broadcasttransfer

Director Option! (&director)

Aliases

  • &bct

Details

&broadcasttransfer will let you specify the default for whether to transfer a guest from room to room in broadcast mode or not. Mainly useful for when using &rooms, since there isn't a transfer menu option when using it, since its more of a hotkey option.

If a director clicks "transfer", there is a checkmark to enable "covert user into broadcast mode when transferred". This URL option enables it by default. It also then is enabled by default when using the quick-transfer feature used by &rooms.

Related

{% content-ref url="../view-parameters/broadcast.md" %} broadcast.md {% endcontent-ref %}

{% content-ref url="../../director-settings/rooms.md" %} rooms.md {% endcontent-ref %}

{% content-ref url="../../getting-started/rooms/transfer-rooms.md" %} transfer-rooms.md {% endcontent-ref %}

description: Hides the co-directors from appearing in the director's room

&hidecodirectors

Director Option! (&director)

Aliases

  • &hidedirector
  • &hd

Details

&hidecodirectors will hide the co-directors from appearing in the director's room. You might have a few co-directors join you, but they might be taking up space, so this is a way to prevent that. It simply hides the boxes; they are still there at a code level.

Changed the logic so it stops the video/audio/IFrame/widget data from any director loading.

This

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment