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

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

内容简介: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

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

查看所有标签

猜你喜欢:

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

风口上的汽车新商业

风口上的汽车新商业

郭桂山 / 人民邮电出版社 / 59

本书从互联网+汽车趋势解析、汽车电商困局突围策略、汽车后市场溃败求解等三个篇章详细阐述了作者的观察与思考,当然更多的还是作者在汽车电商行业的实践中得出的解决诸多问题的战略策略,作者站在行业之巅既有战略策略的解决方案,同时也有战术上的实施细则,更有实操案例解析与行业大咖访谈等不可多得的干货。当然,作者一向追崇的宗旨是,书中观点的对错不是最重要的,重在与行业同仁探讨,以书会友,希望作者的这块破砖头,能......一起来看看 《风口上的汽车新商业》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试