Simple IFRAME Replacement with VDO.Ninja DataChannel SDK

// HTML
<iframe id="vdo-iframe" 
        src="https://vdo.ninja/?room=myroom&push=sender&view=receiver&datachannel=true" 
        style="display:none"></iframe>

// JavaScript
const iframe = document.getElementById('vdo-iframe');

// Send message
iframe.contentWindow.postMessage({
    action: 'send-data',
    data: 'Hello from parent'
}, '*');

// Receive messages
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://vdo.ninja') return;
    console.log('Received:', event.data);
});

// JavaScript only - no hidden IFRAME needed!
const node = new VDONinjaDataChannel();

// Connect and join room
await node.joinRoom({
    room: 'myroom',
    streamID: 'sender',
    label: 'my-device'
});

// Send message
node.publish({ data: 'Hello from SDK' });

// Receive messages
node.addEventListener('data', (event) => {
    console.log('Received:', event.detail.data);
});

🚀 Live Demo

Try it out! This demo shows two nodes communicating without any IFRAMEs.

📝 Common Use Cases

1. IoT Sensor Network

// Sensor publishes data
const sensor = new VDONinjaDataChannel();
await sensor.joinRoom({ room: 'iot', label: 'temperature-sensor' });

setInterval(() => {
    sensor.publish({ 
        temp: Math.random() * 30 + 20,
        unit: 'celsius',
        timestamp: Date.now()
    });
}, 5000);

2. Remote Control

// Controller subscribes to specific device
const controller = new VDONinjaDataChannel();
await controller.joinRoom({ room: 'iot', label: 'controller' });

// Subscribe to all temperature sensors
controller.subscribe('temperature-sensor');

controller.addEventListener('data', (e) => {
    if (e.detail.data.temp > 25) {
        // Send command back
        controller.publish(
            { command: 'turn-on-fan' },
            { toLabel: e.detail.label }
        );
    }
});

3. Multi-User Chat

// Each user joins with unique ID but same label
const chat = new VDONinjaDataChannel();
await chat.joinRoom({ 
    room: 'chatroom',
    streamID: `user-${Date.now()}`,
    label: 'chat-user'
});

// Subscribe to all chat users
chat.subscribe('chat-user');

// Send message to all
chat.publish({ 
    message: 'Hello everyone!',
    user: 'John'
});