Kinesis Video Streams with WebRTC SDK in JavaScript for web applications
You can find the Kinesis Video Streams with WebRTC SDK in JavaScript for web applications and its
corresponding samples in GitHub
Topics
Install the Kinesis Video Streams with WebRTC SDK in JavaScript
Whether and how you install the Kinesis Video Streams with WebRTC SDK in JavaScript depends on whether the
code executes in Node.js
modules or browser scripts.
Kinesis Video Streams with WebRTC JavaScript SDK documentation
The documentation for the SDK methods are on the GitHub readme, under Documentation
In the Usage
See the examples
directory for an example of a complete application, including both a master and viewer role.
Use the Kinesis Video Streams with WebRTC sample application
Kinesis Video Streams with WebRTC also hosts a sample application that you can use to either create a new signaling channel or connect to an existing channel and use it as a master or viewer.
The Kinesis Video Streams with WebRTC sample application is located in GitHub
The code for the sample application is in the examples
directory.
Topics
Stream peer-to-peer from the sample application to the AWS Management Console
-
Open the Kinesis Video Streams with WebRTC sample application
and complete the following: -
AWS Region. For example,
us-west-2
. -
The AWS access key and the secret key for your IAM user or role. Leave the session token blank if you are using long-term AWS credentials.
-
The name of the signaling channel to which you want to connect.
If you want to connect to a new signaling channel, choose Create Channel to create a signaling channel with the value provided in the box.
Note
Your signaling channel name must be unique for the current account and region. You can use letters, numbers, underscores (_), and hyphens (-), but not spaces.
-
Whether you want to send audio, video, or both.
-
WebRTC Ingestion and Storage. Expand the node and choose one of the following:
-
Select Automatically determine ingestion mode.
-
Make sure Automatically determine ingestion mode isn't selected and set the manual override to OFF.
Note
Automatically determine ingestion mode has the application call the DescribeMediaStorageConfiguration API to determine which mode to run in (Peer-to-peer or WebRTC ingestion). This additional API call adds a small amount to the startup time.
If you know ahead of time which mode this signaling channel is running in, use the manual override to skip this API call.
-
-
ICE candidate generation. Leave
STUN
/TURN
selected and leaveTrickle ICE
enabled.
-
-
Choose Start Master to connect to the signaling channel.
Allow access to your camera and/or microphone, if needed.
Open the Kinesis Video Streams console
in the AWS Management Console. Make sure the correct region is selected.
In the left navigation, select signaling channels
. Select the name of the signaling channel above. Use the search bar, if needed.
Expand the Media playback viewer section.
Choose the play button on the video player. This joins the WebRTC session as a
viewer
.The media that is being sent on the demo page should display in the AWS Management Console.
Stream peer-to-peer from the sample application to the sample application
-
Open the Kinesis Video Streams with WebRTC sample application
and complete the following information: -
AWS Region. For example,
us-west-2
. -
The AWS access key and the secret key for your IAM user or role. Leave the session token blank if you are using long-term AWS credentials.
-
The name of the signaling channel to which you want to connect.
If you want to connect to a new signaling channel, choose Create Channel to create a signaling channel with the value provided in the box.
Note
Your signaling channel name must be unique for the current account and region. You can use letters, numbers, underscores (_), and hyphens (-), but not spaces.
-
Whether you want to send audio, video, or both.
-
WebRTC Ingestion and Storage. Expand the node and choose one of the following:
-
Select Automatically determine ingestion mode.
-
Make sure Automatically determine ingestion mode isn't selected and set the manual override to OFF.
Note
Automatically determine ingestion mode has the application call the DescribeMediaStorageConfiguration API to determine which mode to run in (Peer-to-peer or WebRTC ingestion). This additional API call adds a small amount to the startup time.
If you know ahead of time which mode this signaling channel is running in, use the manual override to skip this API call.
-
-
ICE candidate generation. Leave
STUN
/TURN
selected and leaveTrickle ICE
enabled.
-
-
Choose Start Master to connect to the signaling channel as the
master
role.Allow access to your camera and/or microphone, if needed.
-
Open another browser tab and open the Kinesis Video Streams with WebRTC sample application
. All of the information from the previous run should load. -
Scroll down and choose Start Viewer to connect to the signaling channel as the
viewer
role.You should see the media being exchanged between the
master
andviewer
.
Stream peer-to-peer with WebRTC Ingestion from the sample page to the sample page
Follow Ingest media from a browser to connect a master participant and make sure it is connected to the storage session.
Follow Add viewers to the ingestion session to add viewer participants.
Viewer participants will connect to and receive media from the storage session. They can send optional audio back to the storage session.
The storage session handles mixing the media received from master and viewer participants and sending it to the appropriate destinations.
You can view and consume ingested media through Kinesis Video Streams playback.
Edit the Kinesis Video Streams with WebRTC sample application
To edit the SDK and sample application for development purposes, follow the instructions below.
Prerequisite
NodeJS version 16+
Note
We recommend downloading the latest long term support (LTS) version from
https://nodejs.org/en/download
Edit the sample application
-
Download the Kinesis Video Streams with WebRTC SDK in JavaScript.
Type the following in the terminal:
git clone https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js.git
-
Navigate to the directory with the package.json file. The file is located in the repository's root directory.
Type the following in the terminal:
cd amazon-kinesis-video-streams-webrtc-sdk-js
-
Install dependencies.
Type the following npm CLI
command in the terminal: npm install
-
Start the web server to start serving web pages.
Type the following npm CLI
command in the terminal: npm run develop
-
In your browser, visit http://localhost:3001/
. You can make edits to the web page by editing the files in the
examples
directory.