← All demos

Media quality

Publish your camera with a chosen codec, bitrate, and resolution, change them while live, and watch the result in a second tab. Codec selection works best in Chromium-based browsers.

Start as Publisher in this tab and allow the camera and microphone.
Open the second tab. It opens as Viewer with the same stream ID; click Start there.
Change settings and click Apply, then watch the video stats on either side.

Connection

Disconnected

Role

Stream ID

Signaling host (WSS)

Change only if you run your own signaling server. Both tabs must use the same host.

Media preferences

Publisher only

Video codec

Audio codec

Video bitrate (kbps)

Audio bitrate (kbps)

Resolution preset

Custom width

Custom height

Frame rate

Custom values override the preset. Bitrate and resolution change live when you click Apply; a codec change takes effect for viewers that connect afterwards. The camera may not support every size, and unsupported options are ignored.

Local preview

Remote view

Video stats

Idle

Resolution–

Frame rate–

Bitrate–

Codec–

Log

Key SDK calls in this demo

// Publisher
const sdk = new VDONinjaSDK({ host: 'wss://wss.vdo.ninja' });
await sdk.connect();
await sdk.publish(camera, {
    streamID,
    media: {
        video: { codec: 'VP9', maxBitrate: 2500, resolution: '1280x720@30' },
        audio: { maxBitrate: 128 }
    }
});
// Later, while live:
await sdk.updatePublisherMedia({ media: { video: { maxBitrate: 800 } } });

// Viewer (second tab)
await sdk.connect();
await sdk.view(streamID, { audio: true, video: true });
const stats = await sdk.getStats(); // raw WebRTC stats per peer