PeerPigeon Streaming Examples

peerpigeon-streaming-examples.js

// PeerPigeon Streaming Patterns Examples
// Who calls startMedia() determines the streaming pattern

// =============================================================================
// 1:1 (One-to-One) Streaming - Video call between two people
// =============================================================================

const peer1 = new PeerPigeon.PeerPigeonMesh({
    enableCrypto: true,
    autoConnect: true
});

const peer2 = new PeerPigeon.PeerPigeonMesh({
    enableCrypto: true,
    autoConnect: true
});

// Both connect to signaling server
await peer1.connect('ws://signaling-server');
await peer2.connect('ws://signaling-server');

// Both start their media - creates 1:1 streaming
await peer1.startMedia({ video: true, audio: true });
await peer2.startMedia({ video: true, audio: true });

// Result: Each peer broadcasts to and receives from exactly one other peer

// =============================================================================
// 1:Many (One-to-Many) Streaming - Presenter broadcasts to multiple viewers
// =============================================================================

const presenter = new PeerPigeon.PeerPigeonMesh({
    enableCrypto: true,
    autoConnect: true
});

const viewer1 = new PeerPigeon.PeerPigeonMesh({
    enableCrypto: true,
    autoConnect: true
});

const viewer2 = new PeerPigeon.PeerPigeonMesh({
    enableCrypto: true,
    autoConnect: true
});

// All connect to same signaling server
await presenter.connect('ws://signaling-server');
await viewer1.connect('ws://signaling-server');
await viewer2.connect('ws://signaling-server');

// ONLY the presenter starts media
await presenter.startMedia({ video: true, audio: true });

// Viewers don't call startMedia() - they only receive
// Result: One broadcaster, multiple receivers

// =============================================================================
// Many:Many (Many-to-Many) Streaming - Group video conference
// =============================================================================

const participant1 = new PeerPigeon.PeerPigeonMesh({
    enableCrypto: true,
    autoConnect: true
});

const participant2 = new PeerPigeon.PeerPigeonMesh({
    enableCrypto: true,
    autoConnect: true
});

const participant3 = new PeerPigeon.PeerPigeonMesh({
    enableCrypto: true,
    autoConnect: true
});

// All connect to same signaling server
await participant1.connect('ws://signaling-server');
await participant2.connect('ws://signaling-server');
await participant3.connect('ws://signaling-server');

// EVERYONE starts media
await participant1.startMedia({ video: true, audio: true });
await participant2.startMedia({ video: true, audio: true });
await participant3.startMedia({ video: true, audio: true });

// Result: Everyone broadcasts to everyone else

// =============================================================================
// Event Handling for All Patterns
// =============================================================================

mesh.addEventListener('localStreamStarted', (data) => {
    document.getElementById('local-video').srcObject = data.stream;
});

mesh.addEventListener('remoteStream', (data) => {
    // Create video element for each peer
    const video = document.createElement('video');
    video.id = `remote-${data.peerId}`;
    video.srcObject = data.stream;
    video.autoplay = true;
    video.playsinline = true;
    document.getElementById('remote-streams').appendChild(video);
});

mesh.addEventListener('peerDisconnected', (data) => {
    // Clean up video element when peer leaves
    const video = document.getElementById(`remote-${data.peerId}`);
    if (video) video.remove();
});

// =============================================================================
// Dynamic Stream Control
// =============================================================================

// Toggle your own video during a call
const toggleMyVideo = () => {
    const enabled = mesh.toggleVideo();
    console.log(`My video is now ${enabled ? 'on' : 'off'}`);
};

// Mute/unmute your microphone
const toggleMyAudio = () => {
    const enabled = mesh.toggleAudio();
    console.log(`My microphone is now ${enabled ? 'on' : 'off'}`);
};

// Stop streaming entirely (but stay connected for chat)
const stopMyStream = async () => {
    await mesh.stopMedia();
    // You'll stop broadcasting but can still receive others' streams
};