Audience Polls during Live Stream - JavaScript

Interactive polls are a great way to increase engagement during livestreams. Using VideoSDK’s PubSub mechanism, you can easily implement real-time audience polling, where viewers can vote and the host can see live results instantly.

This guide walks you through how to create, send, and visualize poll results during a livestream.

Step 1: Creating and Publishing a Poll

To initiate a poll, use the pubsub method with a POLL topic. The poll structure should include a question and multiple options. This message will be published to all participants. Setting the persist option to true ensures that the poll message is retained.

PollHostView.js

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

const startPoll = () => {
  const pollData = {
    id: Date.now(),
    question: "Which feature do you love the most?",
    options: ["Reactions", "Screen Share", "Whiteboard", "Polls"],
    responses: {},
  };

  liveStream?.pubSub.publish("POLL", pollData, { persist: true });
};

// Create the button
const button = document.createElement("button");
button.innerText = "Start Poll";
button.onclick = startPoll;

// Append to DOM
document.body.appendChild(button);

Step 2: Subscribing to Polls and Displaying Options

Participants can listen to the POLL topic and render voting options dynamically based on the incoming data. The senderId of the received poll message identifies the host. Publish the vote with sendOnly set to that id, so only the host receives it and other participants can't see who voted for what.

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

let activePoll = null;

const pollContainer = document.createElement("div");
document.body.appendChild(pollContainer);

const renderPoll = () => {
  pollContainer.innerHTML = ""; // Clear previous poll

  if (!activePoll) return;

  const questionElem = document.createElement("h3");
  questionElem.innerText = activePoll.question;
  pollContainer.appendChild(questionElem);

  activePoll.options.forEach((option) => {
    const button = document.createElement("button");
    button.innerText = option;
    button.onclick = () => {
      liveStream?.pubSub.publish(
        "POLL_RESPONSE",
        { pollId: activePoll.id, option },
        { sendOnly: [activePoll.hostId] }
      );

      // Optionally disable buttons after vote
      pollContainer.innerHTML = `<p>Thanks for voting!</p>`;
    };
    pollContainer.appendChild(button);
  });
};

// Subscribe to incoming polls
liveStream?.pubSub.subscribe("POLL", ({ message, senderId }) => {
  activePoll = { ...message, hostId: senderId };
  renderPoll();
});

Step 3: Aggregating and Displaying Poll Results

The host can subscribe to the POLL_RESPONSE topic to collect responses and render the result in real-time.

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

const results = {};

const resultsContainer = document.createElement("div");
document.body.appendChild(resultsContainer);

const renderResults = () => {
  resultsContainer.innerHTML = "";

  Object.entries(results).forEach(([pollId, pollResult]) => {
    const pollDiv = document.createElement("div");

    const heading = document.createElement("h4");
    heading.innerText = `Poll ID: ${pollId}`;
    pollDiv.appendChild(heading);

    const list = document.createElement("ul");
    Object.entries(pollResult).forEach(([option, count]) => {
      const item = document.createElement("li");
      item.innerText = `${option}: ${count} votes`;
      list.appendChild(item);
    });

    pollDiv.appendChild(list);
    resultsContainer.appendChild(pollDiv);
  });
};

// Subscribe to poll responses
liveStream?.pubSub.subscribe("POLL_RESPONSE", ({ message }) => {
  const { pollId, option } = message;
  const current = results[pollId] || {};
  results[pollId] = {
    ...current,
    [option]: (current[option] || 0) + 1,
  };

  renderResults();
});

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• PubSub