AWS Kinesis video stream makes it easy to stream video securely from connected devices like mobile phones, laptops, desktops, tablet pc, etc. to AWS, for analysis, replay, and other user processing. You can stream video by using tools like AWS SDK Client and Amazon Kinesis Video Streams WebRTC.
Amazon Kinesis Video Streams is a fully managed AWS service that you can use to stream live video from devices to the AWS Cloud or build applications for real-time video processing or batch-oriented video analytics. It isn’t just storage for video data. You can use it to watch video streams in real-time from the cloud. You can also use it to monitor live streams in the AWS Management Console or for developing a monitoring application that uses the Kinesis Video Streams API library for displaying live video.
Glossary
Streaming media: Streaming media is multimedia that is delivered and consumed in a continuous manner from a source, with little or no intermediate storage in network elements. Streaming refers to the delivery method of content, rather than the content itself.
Cloud: The cloud refers to servers that are accessed over the Internet, and the software and databases that run on those servers.
SDK: A software development kit (SDK) is a collection of software development tools in one installable package.
Management Console: A terminal or workstation used to monitor and control a network either locally or remotely.
What we will be doing
In this tutorial, we will not be dealing with the setup of UI and related code for streaming live video. We will be explaining how to create a signed URL using the SigV4RequestSigner module of the AWS webrtc package. We will also be using the signed URL for streaming on clients without AWS credentials.
Prerequisites.
This tutorial will not be taking us through the basics of setting up video live stream, or kinesis video stream on the frontend. You need to have a basic understanding of the following
Server-side Javascript programming knowledge with Nodejs and Express.js.
We will first initialize a new npm project to set up our package.json file and then install our dependencies.
Run the code below in your terminal.
npm init
The code above will initialize a new npm project so that we can install our dependencies using the code below.
npm i -S express dotenv amazon-kinesis-video-streams-webrtc aws-sdk
Step 2 – Setup folder and create Express server
We will create an src folder in the root of the project and add an index.js file for express server.
In the /src/index.js add the code snippet below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
We will create a file src/util/kinesis.js to set up our kinesis util file. We will be using a class base implementation because we will be creating multiple methods for this solution.
Copy the code in the snippet below to set up the kinesis util file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In the code above, we created the class KinesisUtil with the following methods:
createChannel: This method is for creating a new signaling channel if the channel name does not exist. It takes the parameters: channel name which is the name of the channel, role which is either MASTER or VIEWER, and the client id which can be null. The client Id can be null if the role is for the master but will be unique for each person connecting to the stream if the role is the viewer. This method also calls other methods like listEndpoints for listing the endpoints using the channelARN and role; and listICEServers for the server configuration
listEndpoints: This method returns endpoints by protocol i.e HTTPS and WSS for web-socket.
listIceServers: this method returns the ice servers which is then used in the configuration.
The createChannel method uses the SigV4RequestSigner method of amazon-kinesis-video-streams-webrtc package to return the signed URL to the client. With the signed URL, the client will not need to provide the AWS credentials to connect to the AWS kinesis video stream. The create channel method now returns the signed URL, configuration, and role to the client.
Step 4 – Update index.js and create .env file
Next, we now update our index.js file to include a new get route that returns the kinesis video data and also a .env file for our AWS credentials. Replace the code in src/index.js with the updated code below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Next we create our .env file in the root of the project using the sample below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
From the client e.g react app, you can then make a get request to the backend on the endpoint
http://localhost:3000/kinesis-video-url
to fetch the signed URL on the client.
Step 6 – Setting up Kinesis Util on client/frontend
We can securely connect to AWS kinesis video stream without exposing AWS credentials on the client by simply using the signed URL from the backend endpoint. We can set up kinesis video util on the frontend following the sample below for both Master and Viewer connection.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The two methods in the client util file above take kinesisInfo params which is an object returned from our API call to the backend. It uses the info to connect to the video stream using the SignalingClient method of amazon-kinesis-video-streams-webrtc package. We also create a custom class CustomSigner which takes the signed URL in the constructor and returns the URL in the getSignedURL method of the class. The SignalingClient method takes a custom requestSigner property which returns the signed URL from our CustomSigner class. Using this approach, we can leave other credentials with any string, as kinesis will be connecting through the URL in our custom request signer which is similar to what the SignalingClient method does when we provide the AWS credentials.
Learning Tools
There are lots of things we can gain security wise by using the signed URL on clients for Kinesis video streams. To learn more about Kinesis Video stream and using Signed URL, we can check the links below
I had to first learn how to connect to AWS kinesis video stream for Video live chat on both frontend and backend using AWS credentials. But then I understand that this method is not secure enough, because we have to expose the AWS credentials on the client which can leak one way or the other. So I took a step further to learn how to use Signed URL on the client as I couldn’t find any tutorial that explicitly discussed how to set up the client using Signed URL on the internet. There are tutorials that will discuss video streams on AWS using Socket live chat, but getting one that uses Signed URL is scarce even if there is any.
Reflective Analysis
The benefit of using Signed URL is huge, as in the past months, I have been working with applications that use Kinesis Video streams for live chat interviews. The project was setup using kinesis credentials on both frontend and backend, then I think of the security aspect, even though we secure the AWS credentials on the frontend using an env file, but a request will still be made on the frontend using these credentials which can expose it one way or the other. With this approach, you secure your AWS credentials better on the frontend without exposing it.
Conclusion
Kinesis Video stream is useful if you want to build applications that use live video. Examples like Video chats, Video interviews, etc. The complete code for this tutorial can be found here.
Hi Peter,
It was a nice article for beginner, I followed your steps and generated the Signed urls, could you please help how to use client file in frontend. I tried a sample react js and normal HTML with JS but none of then worked.
Hello Guima, this should work on Signaling Channel as well, though its a while I worked on this, but the main concept is to have the signed URL which contains all authorization info. So this should also work seamlessly with signaling channel. You can check the github gist for sample codes
Hi Peter,
It was a nice article for beginner, I followed your steps and generated the Signed urls, could you please help how to use client file in frontend. I tried a sample react js and normal HTML with JS but none of then worked.
Hello bsrikanth88, I already gave a sample code for connecting to react client in step 6 of the article. You only need to use your URL in the viewer. Check the sample code here https://gist.github.com/cwizard2011/e2627b056e50cd6137a3bd322b80612c#file-kinesis-client-js-L52
Thank your for this content, Peter.
Would this client be able to send video to a signaling channel as well?
How could this be done?
Hello Guima, this should work on Signaling Channel as well, though its a while I worked on this, but the main concept is to have the signed URL which contains all authorization info. So this should also work seamlessly with signaling channel. You can check the github gist for sample codes