VDO.Ninja DataChannel Pub/Sub Example

This example demonstrates replacing IFRAME-based messaging with the DataChannel SDK.

Publisher Node

Disconnected

Publish Message

Stream Data

Subscriber Node

Disconnected

Subscribe to Labels

Received Messages

Received Streams

Mesh Network Status

Code Example (Replacing IFRAME)

Before (with IFRAME):

<iframe src="https://vdo.ninja/?room=myroom&push=cam1&datachannel=true" 
        style="display:none"></iframe>

// Communicate via postMessage
iframe.contentWindow.postMessage({data: 'hello'}, '*');

After (with SDK):

const node = new VDONinjaDataChannel();
await node.joinRoom({room: 'myroom', streamID: 'cam1'});

// Direct data channel communication
node.publish({data: 'hello'});

// Subscribe to specific labels
node.subscribe('sensors');
node.addEventListener('data', (e) => {
    console.log('Received:', e.detail.data);
});