← All demos

Two-way chat

Two peers on this page each publish a canvas animation plus a WebAudio tone, and each one views the other's stream. No camera or microphone is needed. Each peer uses its own SDK instance in a shared, password-protected room.

  1. Click Connect on Peer 1. It starts its animation and tone and publishes them.
  2. Click Connect on Peer 2. The two peers find each other and each shows the other's stream.
  3. Change the animation, speed, tone or volume on one peer and watch and hear it on the other. Use Mute on a remote video if two tones are too much.

Peer 1

Not connected
Sending
From Peer 2
Room
-
Stream ID
-
Viewing
-

Peer 2

Not connected
Sending
From Peer 1
Room
-
Stream ID
-
Viewing
-
Key SDK calls in this demo
// Each peer runs this with its own SDK instance
const sdk = new VDONinjaSDK({ room, password });
sdk.addEventListener('track', (e) => {
  if (e.detail.streams[0]) remoteVideo.srcObject = e.detail.streams[0];
});
await sdk.connect();
await sdk.joinRoom({ room, password });

// Canvas video + WebAudio tone, no camera needed
const stream = new MediaStream([
  canvas.captureStream(30).getVideoTracks()[0],
  toneDestination.stream.getAudioTracks()[0]
]);
await sdk.publish(stream, { streamID: myStreamID });

// One view request; if the other peer isn't publishing yet,
// the SDK connects when it shows up in the room.
sdk.view(otherStreamID, { audio: true, video: true });