How to create your virtual event platform with AWS IVS

#aws #javascript

Over the last year, businesses were forced to make a sudden pivot towards virtual events, and most were very unprepared for the change. Instead of traveling for business functions and enjoyment, we logged into conferencing and digital platforms and services. The pivot to digital experiences is expected to be semi-permanent, and business are expected to delivery high quality digital experiences for their audiences.

Reaching your market and growing your brand through video experiences doesn't have to be expensive, difficult, or time-consuming. In this blog post, we'll share how you can host your virtual event using Amazon Interactive Video Service (Amazon IVS). Follow along with this guide.

Getting Started with Amazon Interactive Video Service

Amazon Interactive Video Service (Amazon IVS) is a live video streaming service that offers low-latency video streaming and playback. Amazon IVS managed streaming services lowers the bar for businesses to offer high quality video streaming anywhere in the world. Amazon IVS is simple to use and scalable for large audiences. The IVS SDK lets viewers easily stream through the web, iOS, or Android.

In this guide, we will create a virtual event platform using Open Broadcast Software (OBS) and the Amazon IVS API and player SDK to embed the stream into a web-based application.

As shown in the image above OBS is the streaming software that will broadcast a live video stream to the Amazon IVS service. The Amazon IVS API and player SDK will allow us to embed the stream into a web, iOS, or Android application and build additional interactive capabilities.

To get started with your first stream

Download and Install Open Broadcast Software. This streaming tool will help you get started with setting up your video stream.
Create an Amazon IVS channel. Navigate to the Amazon IVS service to create a new video stream channel called live-event-stream. Here, we used the preconfigured default configurations.
After creating a channel, you will see your stream configuration details in the Amazon IVS dashboard. Make a note of your stream configuration for the next step when we begin configuring our stream through OBS.
In OBS, enter the channel's stream configuration. The OBS Auto-Configuration Wizard will prompt you to set up a new stream. In the Service drop-down menu, select the Custom… option. Next, enter the corresponding ingest server and stream key provided by the Amazon IVS console.
Select Next and wait for the OBS to validate your configurations.
Finally, set up your media sources and begin the streaming broadcast in OBS.

If the setup is correct, your video stream will appear in the Amazon IVS console. As shown below:

Now that we have set up our video stream to be used for our virtual event, let's use the Amazon IVS player SDK to build our virtual event application.

Integrating Video into a web application with Amazon IVS

Amazon IVS offers two Player SDK types for developers to integrate with their framework of choice. The Amazon IVS Player SDK for Web is a lightweight option for developers looking to customize their applications. Alternatively, the Amazon IVS Player Tech for Video.js is the full-featured option for developers who may already be using Video.js. This guide will use the Video.js Amazon IVS Player to customize our live stream video player and add it to a simple web page.

Below is a screenshot of a basic website created for the virtual event, {Unscripted}. There is little functionality for the event date itself, so we will need to use the player library to add our video stream to the webpage.

Using Amazon IVS Video.js Player SDK to load the stream source:

In your application code:

Include the following script tag (to add the latest version of the Amazon IVS player). <script src="https://player.live-video.net/1.2.0/amazon-ivs-player.min.js">
Register the Amazon IVS tech with Video.js using the registerIVSTech function: registerIVSTech(videojs); The videojs object is provided by Video.js.
Create an instance of the player and set the source stream using the playblack url found in your channel's configuration dashboard.

// Initialize player
var player = videojs('amazon-ivs-videojs', {
    techOrder: ["AmazonIVS"]
}, () => {
    console.log('Player is ready to use!');
       // Play stream
    player.src(PLAYBACK_URL);
});

In this example, the PLAYBACK_URL variable should be replaced with the playback URL of the source stream you want to load for your application. In this guide, we used the playback URL found in our channel's configuration dashboard.

After following these steps and starting live stream broadcast through OBS, the {Unscripted} event page now streams live content to its audience.

It's worthwhile building additional capabilities and integrations into your virtual event platform solution, but this guide showcased an introduction to the Amazon IVS player. If you'd like more examples of using the Amazon IVS Player SDK, I recommend checking out additional Amazon IVS Player Web SDK samples. The Amazon IVS Player SDK also offers the ability to record sessions for playback later, allowing you video on-demand capabilities.

Conclusion

We saw annual industry conference events like AWS: ReInvent move towards a virtual experience. Despite the pandemic, smaller business and individual conference organizers can still grow market awareness, reach their communities, and create lasting impressions by leveraging video services. This post shared a guide to building your own scalable virtual event platform using Amazon Interactive Video Service (Amazon IVS).

If you'd like to try Amazon IVS, it is available for AWS customers. Check out the product page and get started here. I hope this post helps you leverage IVS to create a memorable virtual experience!

Here's to making virtual events a fulfilling experience!