Integrating Live Chat with Amazon IVS for Interactive Video Streams

Overview

Real-time audience engagement through interactive video streaming has become a potent weapon in today’s digital world. A stable, scalable, and easily integrated platform for creating live video streaming solutions is provided by Amazon Interactive Video Service (IVS). The incorporation of live chat capabilities is a crucial element in augmenting consumer engagement during live video streaming. You may encourage audience engagement, promote community connection, and create a more immersive viewing experience by adding live chat options to your Amazon IVS broadcasts.

This article describes how to make a simple live streaming application that allows real-time conversation and video playing. It offers a thorough tutorial that covers setting up and starting the React client application and deploying a serverless backend for authentication and chat event processing.

Introduction

This integration is made easy and effective with the help of Amazon Interactive Video Service (IVS). Without worrying about the underlying infrastructure, Amazon Interactive Video Service (Amazon IVS) offers a managed platform to create captivating live broadcasts and interactive video experiences. The plethora of applications for Amazon IVS is readily apparent, ranging from live events to gaming. When we gave it a go, we concentrated on integrating live streaming into an exciting and dynamic online purchasing experience.

Workflow

• Sending events and requesting a chat token to start the process. The client application can be used to do this.
• The Amazon API Gateway, a service that serves as a single entry point for all APIs, receives the request for a chat token and events.
• After that, the Amazon API Gateway sends the request to AWS Lambda, a serverless computing service that enables you to run code without the need to deploy or manage servers.
• The AWS Lambda function most likely gets the chat token and handles the events in this instance.
• Subsequently, the procedure proceeds to Amazon IVS Chat, a hosted live chat platform that facilitates audience interaction during a live broadcast.
• After that, Amazon IVS Chat connects with the live broadcast to provide viewers with chat messages and other updates.
• Lastly, the client application establishes a connection with Amazon IVS Channels, a service that enables you to broadcast live video streams to viewers.

Prerequisites

• AWS CLI Version 2

• AWS SAM CLI

• Npm and NodeJS

Setting up the serverless backend

I have configured and run the React Client App, a live-streaming app with video and chat.

Set up the CLI tool for AWS:  To ensure you are in the right AWS account, do the following command.

Create an Amazon S3 bucket:

Put the name of your Amazon S3 Bucket in place of <S3_BUCKET>. Put the AWS region in place of <AWS_REGION>.

Utilizing the AWS SAM CLI, pack the template:

Deploy the packaged template:

Get the ApiURL output:

Executing the client application locally

Create an Amazon IVS chat room.

Configure the client app.

Navigate back to the web-ui directory in the local repository. The web-ui folder will be in the parent directory if you go from the serverless folder in the preceding steps:

To set the value of CHAT_ROOM_ID, open the src/config.js file and enter the ARN from this section’s first step. Next, after the serverless backend section’s last step, set the value of the API_URL to the stack output.

Run the client app

Run the following commands from the web-ui folder to run the demo.

Consideration should be given to automatic moderating. In your chat room, start by adding a message review handler. An AWS Lambda function called a message review handler enables you to implement custom business logic to examine a message’s content before sending it to chat room users, and logs are stored in an Amazon S3 bucket shown in AWSLogs/ folder.

You also have the option to disconnect or remove the person who delivered the message if you log in to the demo with moderator privileges. In this instance, when a user disconnects, all their messages in the display are likewise removed.

Conclusion

In conclusion, utilizing Amazon Interactive Video Service (IVS) to include live chat features in video streams has several advantages for raising user interaction and engagement. You may build a feeling of community, get fast feedback, and answer viewers’ queries or offer assistance by allowing real-time communication during streaming. In addition to improving the watching experience, this also opens up possibilities for audience engagement and interaction, which are crucial for increasing user loyalty and retention.

Drop a query if you have any questions regarding Amazon IVS and we will get back to you quickly.

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 650k+ professionals in 500+ cloud certifications and completed 300+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner, AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, and many more.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.