Exemple — quiz avec page viewers (plugin)

Intention : l'overlay pose une question ; les viewers répondent depuis leur page plugin ; l'overlay agrège les réponses. Illustre le pont kapp.plugin.

infos.json (extrait)

{
  "launch-mode": "external",
  "app-index": "index.html",
  "viewers-plugin": "viewers.html",
  "viewers-plugin-index": "viewers.html",
  "scopes": ["chat:read"]
}

script.js (côté overlay/streamer)

(async function () {
    const answers = new Map();   // viewer login -> choix

    // Reçoit les réponses des viewers
    kapp.events.on('plugin.viewers', ({ viewer, event, data }) => {
        if (event === 'answer') {
            answers.set(viewer.login, data.choice);
        }
    });

    kapp.display();
    document.body.innerHTML = '<h1>Quelle est la capitale ?</h1>';

    // Diffuse la question à tous les viewers
    await kapp.plugin.emitViewers(null, 'question', {
        text: 'Quelle est la capitale de la France ?',
        choices: ['Paris', 'Lyon', 'Marseille'],
    });

    await wait(15000);

    const tally = {};
    for (const choice of answers.values()) tally[choice] = (tally[choice] ?? 0) + 1;
    document.body.innerHTML += `<pre>${JSON.stringify(tally, null, 2)}</pre>`;

    await wait(5000);
    await kapp.finish();
})();

Pourquoi

• kapp.plugin.emitViewers(null, ...) diffuse à tous les viewers ; un tableau d'User ciblerait.
• Les réponses arrivent via l'event plugin.viewers ({ viewer, event, data }) — vérifie la constante exacte (kapp.plugin.EVENTS) dans app-sdk.d.ts.
• launch-mode: external ouvre l'appli en fenêtre dédiée ; la page viewers-plugin est servie aux spectateurs.