Skip to content
peer-data

Live demo

Everything below runs in your browser. The two peers on this page find each other through BroadcastChannelSignaling, then talk over WebRTC connections of their own. No server sees what they send.

Open this page in another tab of the same browser and its peers join in too.

Chat

Section titled “Chat”

Each peer is a PeerData in a room called chat. A line typed into one goes over its data channel to every other peer in the room. Open “What went through signaling” to see how they connected: a CONNECT to the room, then an offer, an answer and ICE candidates between each pair.

Peer 1

Connecting…

    Peer 2

    Connecting…

      What went through signaling

      Everything this page's peers sent each other to connect. After that, chat messages go straight from one peer to the other.

        The chat is examples/chat/chat.ts, the same code the getting started guide walks through.

        Video

        Section titled “Video”

        Each peer joins a room called call with a stream, and shows the streams of the others. The streams come from canvases, so the call needs no camera; a real call passes the stream from getUserMedia instead.

        Nothing is shared until you start.

        examples/video/video.ts
        import { PeerData, type Signaling } from 'peer-data';
        

        export interface CallEvents {
          /** The stream a participant shares arrived, or gained a track. */
          stream(id: string, stream: MediaStream): void;
          /** A participant left. */
          left(id: string): void;
        }
        

        /** Joins the call and shares stream with everyone in it. Their streams arrive through on.stream. */
        export function joinCall(signaling: Signaling, stream: MediaStream, on: CallEvents) {
          const peer = new PeerData(signaling);
          const room = peer.connect('call', stream);
        

          room.on('participant', (participant) => {
            participant
              .on('track', ({ streams: [remote] }) => {
                if (remote) on.stream(participant.id, remote);
              })
              .on('disconnected', () => {
                on.left(participant.id);
              });
          });
        

          return {
            leave: (): void => {
              peer.close();
            },
          };
        }

        Where this works

        Section titled “Where this works”

        Both demos signal over BroadcastChannel, which reaches pages of the same origin in one browser. To connect different browsers or devices, the peers need a signaling server: see Signaling.