Whiteboard
VDO.Ninja Whiteboard: Live Streaming Collaboration Tool
Overview
VDO.Ninja Whiteboard is a powerful, browser-based drawing tool that integrates with VDO.Ninja's peer-to-peer streaming technology. It allows you to create and share live drawings, diagrams, or annotations with viewers in real-time without requiring any downloads, installations, or accounts.
You can access it here: https://vdo.ninja/whiteboard

Key Features
Live Whiteboard Streaming: Share your drawings in real-time with anyone through a simple view link
Multiple Publishing Options: Stream via VDO.Ninja P2P, WHIP, or directly to Twitch
End-to-End Encryption: When using the VDO.Ninja mode, all streams are encrypted peer-to-peer
Drawing Tools: Includes brush, text tool, eraser, fill tool, and color picker
No-Install Browser Based: Works entirely in your browser with no plugins required
Free and Open Source: Use it without cost or limitations
Menu setup
How It Works with VDO.Ninja
The whiteboard leverages VDO.Ninja's P2P data channels and media streaming capabilities to broadcast your canvas to viewers securely and efficiently.
Technical Integration
Embedding VDO.Ninja: The whiteboard creates a hidden iframe that loads VDO.Ninja with specific parameters:
function createAndAppendIframe(config) {
let url = new URL("./index.html", window.location.href);
if (config.mode === 'vdo') {
if (config.room) url.searchParams.set("room", config.room);
if (config.push) url.searchParams.set("push", config.push);
if (config.password) url.searchParams.set("password", config.password);
}
url.searchParams.set("framegrab", "");
url.searchParams.set("view", "");
const iframe = document.createElement("iframe");
iframe.style.width = "0";
iframe.style.height = "0";
iframe.src = url.toString();
document.body.appendChild(iframe);
return iframe;
}
Canvas Streaming: The whiteboard captures the canvas content and sends it to the VDO.Ninja iframe:
async function startStreaming() {
const iframe = document.querySelector('iframe');
if (!iframe) return;
// Using modern MediaStreamTrackProcessor API when available
if (typeof MediaStreamTrackProcessor === 'function') {
const { tracks } = await createCanvasStream();
// Send frames to the VDO.Ninja iframe
const processor = new MediaStreamTrackProcessor(track);
const reader = processor.readable.getReader();
// Read and send each frame
// ...
} else {
// Fallback to sending canvas as data URL
frameGenerator = setInterval(() => {
const imageData = canvas.toDataURL('image/webp');
iframe.contentWindow.postMessage({
type: 'canvas-frame',
frame: imageData
}, '*');
}, 1000/10); // 10 fps
}
}
View Link Generation: When using VDO.Ninja mode, it generates a view link that can be shared with viewers:
const viewUrl = new URL("./", window.location.href);
if (push) viewUrl.searchParams.set("view", push);
if (room) viewUrl.searchParams.set("room", room);
if (password) viewUrl.searchParams.set("password", password);
document.getElementById('viewLink').value = viewUrl.toString();
How to Use the Whiteboard
Access the Tool: Open the whiteboard in any modern browser
Choose Publishing Mode:
VDO.Ninja (P2P): For secure, peer-to-peer streaming
WHIP: For streaming to any WHIP-compatible service
Twitch: For direct streaming to Twitch
Playground: For local drawing with no streaming
Configure Your Stream:
For VDO.Ninja mode, enter an optional Stream ID and/or Room Name
Set a password if desired for privacy
Start Drawing: Use the brush, text, eraser, and fill tools to create your content
Share the View Link: Copy and share the generated view link with anyone you want to see your whiteboard
Benefits of Using VDO.Ninja Integration
Low Latency: Direct peer-to-peer connections provide near real-time sharing
Privacy: End-to-end encryption ensures your whiteboard sessions remain private
Firewall Friendly: Works through NATs and firewalls without port forwarding
Scalability: Multiple viewers can connect simultaneously
Cost Effective: No server costs as data transfers directly between peers
Cross-Platform: Works on any device with a modern browser
Use Cases
Remote teaching and tutoring
Live diagramming during video conferences
Virtual brainstorming sessions
Real-time collaboration on design concepts
Creating explanatory drawings for live streams
Adding visual annotations to presentations
The VDO.Ninja Whiteboard combines the power of HTML5 Canvas with VDO.Ninja's peer-to-peer streaming technology to provide a versatile, secure, and accessible tool for real-time visual communication.
Last updated
Was this helpful?