AWS Builder Center

Builder Center

Building Scalable, Interactive Live Streams with AWS and PubNub

Building Scalable, Interactive Live Streams with AWS and PubNub

Learn how to add interactive audience features like real-time messaging, content moderation, live reactions, and quizzes to your stream.fin

Tony Vu

This article was jointly authored by Sergey Viktorovich Kurson (Principal Solutions Architect) from AWS, along with Joshua Carr and Darryn Campbell from PubNub.
How would you build a live streaming application?  Apps that stream experiences such as virtual events, video game tournaments, live shopping experiences, or real-money gaming are tough to get right… You must deliver low-latency real-time video streams to viewers worldwide while offering engaging and safe community experiences such as chat, polls, and reactions. Amazon Interactive Video Service (IVS) with PubNub Chat allows you to build a scalable live streaming solution with interactive audience features, and this article will explain how.
Whether you are hosting an intimate stream with a few dozen participants or significant events with hundreds of thousands of global viewers, your users need to have the same experience with conversations in sync with the streamed content.  You only get one chance to deliver a live stream, so having a reliable global infrastructure with built-in redundancy and intelligent failover is paramount, as well as automatically scaling to meet demand spikes regardless of your audience size.
As the number of stream viewers increases, so does the challenge of moderating their content, and effective moderation requires a combination of manual and automated tools.  Spam, harmful content, or inappropriate behavior should be flagged as soon as possible, either by user reports or an AI-based flagging system, for later manual review.  Moderators need to take action, such as deleting messages, muting, or banning users, with restrictions enforced immediately.
Adding an interactive viewer poll or a Q&A are great ways to drive engagement during a stream, but both can be tricky to implement using standard messaging systems, for example:
  • How do you ensure all participants see the same questions simultaneously?
  • How do you show the streamer the votes or answers as they are made, without giving access to tech-savvy viewers?  Then you distribute the results or answers to everyone at the same time?  
Finally, public live streams can attract unwanted attention, so it's essential to have user authentication and access rights that support granular permissions and integrate with your user identity management service.

SDK Support

Amazon IVS and PubNub Chat both provide comprehensive SDK support for:
  • Web applications through JavaScript
  • Native Android development through Kotlin
  • Native iOS development through Swift. 
This means developers can implement video streaming and chat using the same programming languages and all the functionality your streaming app requires in parallel.

The Live Streaming Demo


We have created an example application that uses both Amazon IVS and PubNub Chat to deliver a low-latency video stream with community features like chat (both public and subscriber-only), reactions, commentary, and even language translation.  This example real-money gaming application, available on  GitHub , will also synchronize the betting window with the stream to ensure all users have the same opportunity to place their race bets. After creating your IVS channel and PubNub account, as detailed below, return to the demo readme to build and run the application.

Setup Amazon IVS

If you haven’t already done so, create and configure an AWS account with Amazon IVS for either  Low-Latency Streaming  or  Real-Time Streaming .  What’s the difference?  Low-latency offers latency under 5 seconds, whereas real-time offers a lower latency, under 300ms delivered through WebRTC.
  1. Access IVS in the AWS Console, or search for “IVS” in the services search bar
  1. Create a channel: Click “Create channel” and choose the default channel configuration and a region close to you.  Optionally, enable recording to S3, though it is not required for this demo.
  1. After creating your channel, you will receive an  Ingest server URL , a  Stream key , and a  Playback URL .  Make a note of the  Playback URL  as you will need to provide it to the front end of the demo application.
  1. Start streaming. You can follow  this guide  to get started, which details several options such as streaming from the IVS console or streaming over OBS.

Create and Configure a PubNub account

You will need a PubNub keyset to send or receive messages over PubNub, which requires an account.
  1. Sign up for a free PubNub account from  https://admin.pubnub.com/ 
  1. Create an  app and keyset  and enable the following configuration options on your keyset: Stream Controller, Presence (enable for all channels), App Context.
  1. Enable all presence events through  Presence Management  for all channels.
  1. Make a note of your  publish  and  subscribe  keys, as you will need these when working with the PubNub Chat SDK.

Code Walkthrough

We will not go through all the demo features in this article but the following code snippets show how to configure the PubNub Chat SDK to send and receive simple text messages, as well as rendering the IVS stream.
Examples are given in TypeScript, but the Kotlin and Swift APIs are named similarly. 
HTML
<script src="https://player.live-video.net/1.40.0/amazon-ivs-player.min.js"></script>
<video id="video-player" playsinline></video>
<script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create();
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.setAutoPlay(true)    
    player.play();
  }
</script>


Configure the PubNub Chat SDK

Create an instance of the Chat object, which will be your primary interface to PubNub:
JavaScript
const chat = await Chat.init({
  publishKey: PUBLISH_KEY_FROM_PUBNUB_PORTAL,
  subscribeKey: SUBSCRIBE_KEY_FROM_PUBNUB_PORTAL,
  userId: UNIQUE_ID_FOR_USER,
  authKey: ACCESS_CONTROL_TOKEN, //  Can leave blank for PoC
})
//  In production keys should be stored securely, 
//  or protected against unauthorized access 


Create a PubNub Chat Channel

In production, these channels will be created on the backend by an entity with elevated permissions, but for this demo, we can just create channels from the client.  Note that if a channel already exists, as it will every subsequent time you run this code, the call will return a reference to the existing channel.
JavaScript
let channel: any = null
channel = await chat.createPublicConversation({
  channelData: {
    name: “My Test Channel”,
    description: `Test Public Channel`
  }
})


Send and Receive Messages over the Channel

Register to receive messages on the channel using the  connect()  API. 
JavaScript
 // Message state
 const [messages, setMessages] = useState<Message[]>([])

//  Called when page is loaded
unsubscribeMessages = channel.connect(async (message: Message) => {
  setMessages(prevMessages => {
    const newMessages = [...prevMessages, message]
    return newMessages
  })
})

Send a message on the channel using the  sendText  API.
JavaScript
channel.sendText(“Hello World”);
You have now successfully connected to PubNub, created a channel and sent & received your first message.  To see how to react to messages, switch between channels, determine whether your users are online or offline, and more, check out the example real-money gaming application, available on  GitHub .

Learn More

To learn more about PubNub Chat, visit their  webpage ,  docs , or contact their  devrel  team, who are happy to answer any questions.
# livestreaming
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article