VDO.Ninja SDK
GitHub
← All demos

Canvas and Web Audio

Publish a canvas animation and a generated tone as a live stream, with no camera or microphone. Watch it in the Viewer panel, on another device, or in VDO.Ninja.

  1. Start publishing. The page draws the animation, generates the tone, and publishes both to the room.
  2. Start viewing in the Viewer panel, open the share link on another device, or use Watch in VDO.Ninja.
  3. Change the animation or tone and watch the viewer update live.
Browsers pause canvas animation in hidden tabs, so keep the publishing tab visible. Watch from a separate window or another device.

Publisher

Not publishing

Optional. The viewer must use the same password. It is not put in the share link.

Sends signaling without the password layer (password: false). The viewer must match. WebRTC still encrypts the media.

Local canvas

Viewer

Not connected

Leave the stream ID empty to list the streams in the room and pick one.

Remote stream
Key SDK calls in this demo 
// Publisher: canvas video plus an oscillator tone
const video = canvas.captureStream(30).getVideoTracks()[0];
const dest = audioContext.createMediaStreamDestination();
oscillator.connect(gain).connect(dest);
const stream = new MediaStream([video, dest.stream.getAudioTracks()[0]]);

const pub = new VDONinjaSDK({ password, salt: 'vdo.ninja' });
await pub.connect();
await pub.joinRoom({ room });
await pub.publish(stream, { streamID });

// Viewer
const viewer = new VDONinjaSDK({ password, salt: 'vdo.ninja' });
viewer.addEventListener('track', (e) => remoteStream.addTrack(e.detail.track));
await viewer.connect();
await viewer.joinRoom({ room });
await viewer.view(streamID, { audio: true, video: true });