Skip to content

docs: README syntax highlighting + addTransciever note #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 28, 2023
Merged

docs: README syntax highlighting + addTransciever note #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ This SDK is intended to be used along side the [AWS SDK for JS](https://github.c
#### In the Browser
To use the SDK in the browser, simply add the following script tag to your HTML pages:

```
```html
<script src="https://unpkg.com/amazon-kinesis-video-streams-webrtc/dist/kvs-webrtc.min.js"></script>
```

Expand All @@ -27,12 +27,12 @@ The SDK is also compatible with bundlers like Webpack. Follow the instructions i
#### In NodeJS
The preferred way to install the SDK for NodeJS is to use the npm package manager. Simply type the following into a terminal window:

```
```bash
npm install amazon-kinesis-video-streams-webrtc
```

The SDK classes can then be imported like typical NodeJS modules:
```
```js
// JavaScript
const SignalingClient = require('amazon-kinesis-video-streams-webrtc').SignalingClient;

Expand Down Expand Up @@ -60,7 +60,7 @@ Refer to the [`examples`](examples) directory for an example of a complete appli
These code snippets demonstrate how to build a viewer application that receives audio and video and also sends audio and video from a webcam back to the master.

##### Set Up Variables
```
```js
// DescribeSignalingChannel API can also be used to get the ARN from a channel name.
const channelARN = 'arn:aws:kinesisvideo:us-west-2:123456789012:channel/test-channel/1234567890';

Expand All @@ -79,7 +79,7 @@ const clientId = 'RANDOM_VALUE';
See [Managing Credentials](#Managing-Credentials) for more information about managing credentials in a web environment.

##### Create KVS Client
```
```js
const kinesisVideoClient = new AWS.KinesisVideo({
region,
accessKeyId,
Expand All @@ -90,7 +90,7 @@ const kinesisVideoClient = new AWS.KinesisVideo({

##### Get Signaling Channel Endpoints
Each signaling channel is assigned an HTTPS and WSS endpoint to connect to for data-plane operations. These can be discovered using the `GetSignalingChannelEndpoint` API.
```
```js
const getSignalingChannelEndpointResponse = await kinesisVideoClient
.getSignalingChannelEndpoint({
ChannelARN: channelARN,
Expand All @@ -108,7 +108,7 @@ const endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpoint

##### Create KVS Signaling Client
The HTTPS endpoint from the `GetSignalingChannelEndpoint` response is used with this client. This client is just used for getting ICE servers, not for actual signaling.
```
```js
const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
region,
accessKeyId,
Expand All @@ -121,7 +121,7 @@ const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannel
##### Get ICE server configuration
For best performance, we collect STUN and TURN ICE server configurations. The KVS STUN endpoint is always `stun:stun.kinesisvideo.${region}.amazonaws.com:443`.
To get TURN servers, the `GetIceServerConfig` API is used.
```
```js
const getIceServerConfigResponse = await kinesisVideoSignalingChannelsClient
.getIceServerConfig({
ChannelARN: channelARN,
Expand All @@ -141,13 +141,13 @@ getIceServerConfigResponse.IceServerList.forEach(iceServer =>

##### Create RTCPeerConnection
The [RTCPeerConnection](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection) is the primary interface for WebRTC communications in the Web.
```
```js
const peerConnection = new RTCPeerConnection({ iceServers });
```

##### Create WebRTC Signaling Client
This is the actual client that is used to send messages over the signaling channel.
```
```js
signalingClient = new KVSWebRTC.SignalingClient({
channelARN,
channelEndpoint: endpointsByProtocol.WSS,
Expand All @@ -162,7 +162,7 @@ signalingClient = new KVSWebRTC.SignalingClient({
});
```
##### Add Signaling Client Event Listeners
```
```js
// Once the signaling channel connection is open, connect to the webcam and create an offer to send to the master
signalingClient.on('open', async () => {
// Get a stream from the webcam, add it to the peer connection, and display it in the local view
Expand All @@ -179,6 +179,7 @@ signalingClient.on('open', async () => {
}

// Create an SDP offer and send it to the master
// If there is no concern about browser compatibility, using `addTransceiver` would be better
const offer = await viewer.peerConnection.createOffer({
offerToReceiveAudio: true,
offerToReceiveVideo: true,
Expand Down Expand Up @@ -208,7 +209,7 @@ signalingClient.on('error', error => {
```

##### Add Peer Connection Event Listeners
```
```js
// Send any ICE candidates generated by the peer connection to the other peer
peerConnection.addEventListener('icecandidate', ({ candidate }) => {
if (candidate) {
Expand Down Expand Up @@ -372,7 +373,7 @@ Note that you will also have to get other data, such as the ICE server config, o

### IAM Permissions
Regardless of the mechanism used to manage the credentials, the credentials will need to have permissions to perform KVS operations. The following is an example policy for a viewer of a particular channel:
```
```json
{
"Version": "2012-10-17",
"Statement": [
Expand Down