Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

栏目: IT技术 · 发布时间: 4年前

内容简介:Today, I am so excited to tell you about the newThe service enables you to create a channel using either the Amazon Interactive Video Service (IVS) Console or the API. You can then use any standard streaming software to stream video to this channel, and th
Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

Today, I am so excited to tell you about the new Amazon Interactive Video Service , which allows you to add live video directly into your own apps and websites. If you are anything like me, you are going to be blown away by how simple the team have made it to integrate interactive, low latency, live video into an application.

The service enables you to create a channel using either the Amazon Interactive Video Service (IVS) Console or the API. You can then use any standard streaming software to stream video to this channel, and the service does everything required to make the live video available to any viewer around the world. The service includes a player SDK that make it straightforward to get the live video integrated into your web, iOS, or Android project.

I think I would be impressed by this service if its capabilities stopped there, but the team have really gone the extra mile and added two key features that I think make this service unique.

Firstly, the video is low latency, which means that the time between you broadcasting and the time the video shows up on your viewer’s screens can be as low as 2-3 seconds. Low latency is vital because this service aims to help you build interactive realtime applications, and this is only possible if there is a minimal delay.

Secondly, the team have added the ability to send timed metadata along with the video so that you can fire events in your application at crucial points in the live stream. So for example, you could send an event to say that a live poll is open, and your app could respond and allow viewers to vote in the poll alongside the live video.

The combination of these two features means that you can build experiences that create a more valuable relationship with your viewers on your own websites and applications. For example, if you were live-streaming a product launch, you could synchronize additional product information to be displayed as new products appear in the video. You could even show a buy now button that allows viewers to purchase the exact product they are watching at that moment on the live-stream.

Over the last few months, I have been running live quizzes on Twitch.tv , and this new service got me thinking that I could build a more personalized and integrated version directly on my website. Let me show you how you would create something like this by heading over to theAmazon IVS Console and creating a channel.

On the first screen of the Amazon IVS console I see a button called Create channel, I click on this to start creating my channel.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

I give my channel a name and choose the default configuration, which means I want to deliver video in Full HD, and I want low latency. I then click the Create Channel button at the bottom.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

A few seconds later, I receive a message saying Channel successfully created . On the screen, there is a  Get started section which explains how to configure the computer or device that I am using to stream my video.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites On the same screen, you can see some Stream configuration information. The Ingest server and the Stream key are the two pieces of information I will need to start sending video to the service.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

I use a software package called XSplit Broadcaster for all my online streaming, but the next few steps would be similar in whatever broadcast software you use. I set up a new output and choose  Custom RTMPS .

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

In the properties screen for the new RTMPS output, I add a name and a description. I add the RTMPS URL that I copied from the Stream configuration section of the console. I also add the Stream Key into the Stream Name text box (this is called different things in different software so you should check with the documentation of your broadcast software to find out where you should add the Stream Key )

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

Now that I have configured the output, I can now broadcast to the new Custom RTMPS output. Behind the scenes, the software begins streaming the video and audio to the Amazon Interactive Video Service.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

Back over at the console, in the Live stream section, you should now see your live video appear in the console. In my experience, it took a few seconds fo the video to start streaming.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

To add this live video into a website, I will need to use the Player SDK . In the Player configuration section on the console, I can see a  Playback URL , and I will need this to configure a player to play my video.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

The team that built this service created a fantastic example project on Codepen , which I will modify to test out my video and create my quiz. This example uses the JavaScript Player SDK, and all I need to do to play my video is to set the playbackUrl variable to point to my newly created  Playback URL . Once I have done this, my video stream appears on the webpage.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

This example project has some code which handles the timed metadata feature that I talked about earlier. Basically when I send metadata to the service it will relay this to the player SDK as an event. I can then handle this event and do exciting things with it. In this example, I add an event listener to listen for a PlayerEventType.TEXT_METADATA_CUE  event and then use the  cue object that is passed to my function to show some on-screen HTML buttons which allows a user to vote in my poll.

player.addEventListener(PlayerEventType.TEXT_METADATA_CUE, function (cue) {
    const metadataText = cue.text;
    triggerQuiz(metadataText);
});

At any time during my broadcast I can send Metadata to my channel using the PutMetadata API. As an example, If i send the following command using the the AWS CLI then the data will be sent to the service and then a few seconds later the PlayerEventType.TEXT_METADATA_CUE event will be raised in my JavaScript code.

payload='{"question": "In which year did Jeff Barr Start a blog at Amazon?","answers": [ "1992", "2004", "2008", "2015"],"correctIndex": 1}'

aws ivs put-metadata --channel-arn arn:aws:ivs:us-west-2:365489315573:channel/XBoZcusef81m --metadata "$payload" --region us-west-2

As you can see below the poll HTML elements are shown as an overlay on top of the live video and users can interact with it and vote in my poll.

Amazon Interactive Video Service – Add Live Video to Your Apps and Websites

Amazon Interactive Video Service (Amazon IVS) has pay-as-you-go pricing based upon the total duration of video input to Amazon IVS and the total duration of video output delivered to your viewers. You can dig deeper into the typical costs over on the pricing section of the product page .

The Amazon IVS Console and APIs are available today in the Europe (Ireland) , US East (N. Virginia) , and US West (Oregon) regions. You will need to use one of those regions to create and modify your channels, however, video ingestion and delivery is available around the globe over a managed network of infrastructure that is optimized for live video. Check out the FAQ’s to get more details on the services global coverage.

I hope you enjoy this service as much as I do. I can’t wait to see what you are going to build with it.

Happy Streaming

— Martin

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

失业的程序员

失业的程序员

沈逸 / 2014-5-1 / 39.00元

这是一个程序员从失业到自行创业的奋斗历程,虽然囧事连连、过程曲折,却充满了趣味。本书以作者的真实创业经历为主线,文字幽默诙谐,情节生动真实,包括了招聘、团队管理和用户公关,以及技术架构设计、核心代码编写、商务谈判、项目运作等场景经验。 从初期的创业伙伴、领路人,到商业竞争对手,各种复杂的关系在各个关键时刻却都发生了意想不到的逆转。在历经千辛万苦,眼看快要成功时,主人公却几乎再次失业。 ......一起来看看 《失业的程序员》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具