# Simple IFRAME Replacement Example

# Simple IFRAME Replacement with VDO.Ninja DataChannel SDK

## ❌ Old Way: Hidden IFRAME

    // 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);
    });

Problems:

- Hidden IFRAME still loads full VDO.Ninja UI
- Cross-origin communication limitations
- No direct control over connections
- Hard to debug

## ✅ New Way: DataChannel SDK

    // 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);
    });

Benefits:

- No hidden IFRAME overhead
- Direct DataChannel control
- Label-based routing
- Mesh networking support
- Better debugging

## 🚀 Live Demo

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

### Node A

### Node B

## 📝 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'
    });