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 see live results instantly.

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

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• publish()
• subscribe()

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.

PollHostView.js

let liveStream;

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

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

  try {
    await liveStream?.pubSub.publish("POLL", JSON.stringify(pollData));
  } catch (error) {
    console.log("Error while publishing POLL:", error);
  }
};

// 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.

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 = async () => {
      try {
        await liveStream?.pubSub.publish(
          "POLL_RESPONSE",
          JSON.stringify({
            pollId: activePoll.id,
            option,
          })
        );
      } catch (error) {
        console.log("Error while publishing POLL_RESPONSE:", error);
      }

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

// Subscribe to incoming polls
const listeners = {
  onMessageReceived: ({ message }) => {
    activePoll = JSON.parse(message);
    renderPoll();
  },
};
try {
  await liveStream?.pubSub.subscribe("POLL", listeners);
} catch (error) {
  console.log("Error while subscribing to POLL:", error);
}

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
const listeners = {
  onMessageReceived: ({ message }) => {
    const { pollId, option } = JSON.parse(message);
    const current = results[pollId] || {};
    results[pollId] = {
      ...current,
      [option]: (current[option] || 0) + 1,
    };

    renderResults();
  },
};
try {
  await liveStream?.pubSub.subscribe("POLL_RESPONSE", listeners);
} catch (error) {
  console.log("Error while subscribing to POLL_RESPONSE:", error);
}

API Reference

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

• PubSub