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.

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 = () => {
  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);
};

// 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 = () => {
      liveStream?.pubSub.publish("POLL_RESPONSE", {
        pollId: activePoll.id,
        option,
      });

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

// Subscribe to incoming polls
liveStream?.pubSub.subscribe("POLL", ({ message }) => {
  activePoll = message;
  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