Multi-Stream Setup

YOM supports multiple independent game streams on a single page. Each stream has its own container, launch button, and communication channel.

Setup

Give each stream a unique data-yom-stream-id:

<!-- Stream 1 -->
<div class="yom-player-placeholder"
     data-yom-stream-id="1"
     data-game-id="racing-game"
     style="width: 100%; aspect-ratio: 16/9;">
</div>
<input class="yom-name-input" data-yom-stream-id="1" placeholder="Name for Racing">
<button class="yom-launch-button" data-yom-stream-id="1">Start Racing</button>

<!-- Stream 2 -->
<div class="yom-player-placeholder"
     data-yom-stream-id="2"
     data-game-id="fps-game"
     style="width: 100%; aspect-ratio: 16/9;">
</div>
<input class="yom-name-input" data-yom-stream-id="2" placeholder="Name for FPS">
<button class="yom-launch-button" data-yom-stream-id="2">Start FPS</button>

Each stream operates independently, launching, stopping, and communicating separately.

Sending Commands to Specific Streams

Use window.postToPlayer() with the target stream’s ID:

// Send command to stream 1
window.postToPlayer('1', 'SpawnBot', { amount: '1' });

// Send command to stream 2
window.postToPlayer('2', 'SetCameraSensitivityX', { MouseSensitivityX: '0.3' });

Listening for Events from Specific Streams

Events from the player include a streamId so you can distinguish which stream they came from:

window.addEventListener('message', function(event) {
    if (event.origin !== 'https://player.yom.net') return;

    const { event: eventName, streamId } = event.data;

    if (eventName === 'streamActive') {
        console.log(`Stream ${streamId} started playing`);
    }
});

Per-Stream Visibility Toggles

Visibility toggles are scoped to their data-yom-stream-id:

<!-- Only toggles when stream 1 changes state -->
<div class="yom-toggle-visibility" data-yom-stream-id="1">
    Controls for Racing Game
</div>

<!-- Only toggles when stream 2 changes state -->
<div class="yom-toggle-visibility" data-yom-stream-id="2">
    Controls for FPS Game
</div>

Use Cases

• Game portals: Showcase multiple games on a single landing page
• Comparison pages: Let players try two experiences side by side
• Content aggregators: Curate streams from different publishers
• Events: Run multiple tournament streams on one dashboard