Skip to content

Preparation for Dual-Stack AWS Endpoint Support #431

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

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Preparation for Dual-Stack AWS Endpoint Support #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
425d50e
Add check-box field for controlling dual-stack endpoint mode
stefankiesz Mar 13, 2025
6e7c116
Space out header top margins
stefankiesz Mar 13, 2025
3e2dd27
Update info message
stefankiesz Apr 12, 2025
4facb6c
Change input field to a switch, reposition it
stefankiesz Apr 24, 2025
40c437a
Revert redundant change
stefankiesz Oct 29, 2025
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
4 changes: 4 additions & 0 deletions examples/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,7 @@ pre .warn {
height: 500px;
overflow: auto;
}

#subheader {
margin-top: 30px;
}
2 changes: 2 additions & 0 deletions examples/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ function getFormValues() {
forceSTUN: $('#forceSTUN').is(':checked'),
forceTURN: $('#forceTURN').is(':checked'),
accessKeyId: $('#accessKeyId').val(),
useDualStackEndpoints: $('#useDualStackEndpoints').is(':checked'),
endpoint: $('#endpoint').val() || null,
secretAccessKey: $('#secretAccessKey').val(),
sessionToken: $('#sessionToken').val() || null,
Expand Down Expand Up @@ -533,6 +534,7 @@ const fields = [
{field: 'accessKeyId', type: 'text'},
{field: 'secretAccessKey', type: 'text'},
{field: 'sessionToken', type: 'text'},
{field: 'useDualStackEndpoints', type: 'checkbox'},
{field: 'endpoint', type: 'text'},
{field: 'sendVideo', type: 'checkbox'},
{field: 'sendAudio', type: 'checkbox'},
Expand Down
1 change: 1 addition & 0 deletions examples/createSignalingChannel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ async function createSignalingChannel(formValues) {
},
endpoint: formValues.endpoint,
logger: formValues.logAwsSdkCalls ? console : undefined,
useDualstackEndpoint: formValues.useDualStackEndpoints,
});

// Create signaling channel
Expand Down
1 change: 1 addition & 0 deletions examples/createStream.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ async function createStream(formValues) {
region: formValues.region,
endpoint: formValues.endpoint,
logger: formValues.logAwsSdkCalls ? console : undefined,
useDualstackEndpoint: formValues.useDualStackEndpoints,
});

const createStreamResponse = await kinesisVideoClient
Expand Down
1 change: 1 addition & 0 deletions examples/describeMediaStorageConfiguration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ async function describeMediaStorageConfiguration(formValues) {
},
endpoint: formValues.endpoint,
logger: formValues.logAwsSdkCalls ? console : undefined,
useDualstackEndpoint: formValues.useDualStackEndpoints,
});

const mediaStorageConfiguration = await kinesisVideoClient.send(new AWS.KinesisVideo.DescribeMediaStorageConfigurationCommand({ ChannelName: formValues.channelName }));
Expand Down
42 changes: 31 additions & 11 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,34 @@ <h1>KVS WebRTC Test Page</h1>
<div class="row loader"></div>
<div id="main" class="d-none">
<form id="form" onsubmit="return false">
<h4>KVS Endpoint</h4>
<h4 id="subheader">KVS Endpoint</h4>
<div class="d-flex align-items-center">
<!-- Left label -->
<label class="mr-2" for="useDualStackEndpoints">IPv4</label>

<!-- Switch -->
<div class="custom-control custom-switch" style="margin-top: -6px;">
<input class="custom-control-input" type="checkbox" id="useDualStackEndpoints" value="useDualStackEndpoints">
<label class="custom-control-label" for="useDualStackEndpoints"></label>
</div>

<!-- Right label -->
<label class="ml-0" for="useDualStackEndpoints">Dual-stack</label>

<!-- Tooltip icon -->
<span data-delay="{ &quot;hide&quot;: 1500 }" data-position="auto" tabindex="0" class="text-info ml-1" data-toggle="tooltip" data-html="true"
title="<p>Use dual-stack KVS endpoints, else will use legacy IPv4-only endpoints.</p>
<a href=&quot;https://docs.aws.amazon.com/sdkref/latest/guide/feature-endpoints.html&quot;>Additional information</a>">
<sup>&#9432;</sup>
</span>
</div>
<div class="form-group has-validation" style="position: relative;">
<label for="region">Region</label>
<input type="text" class="form-control valid" id="region" placeholder="Region" value="us-west-2" autocomplete="off" required>
<datalist id="regionList"></datalist>
<div id="region-invalid-feedback" class="invalid-feedback"></div>
</div>
<h4>AWS Credentials</h4>
<h4 id="subheader">AWS Credentials</h4>
<div class="form-group">
<label for="accessKeyId">Access Key ID</label>
<input type="text" class="form-control" id="accessKeyId" placeholder="Access key id" required>
Expand All @@ -45,7 +65,7 @@ <h4>AWS Credentials</h4>
<label for="sessionToken">Session Token <small>(optional)</small></label>
<input type="password" class="form-control" id="sessionToken" placeholder="Session token">
</div>
<h4>Signaling Channel</h4>
<h4 id="subheader">Signaling Channel</h4>
<div>
<label for="channelName">Channel Name</label>
<div class="form-group input-group">
Expand All @@ -63,7 +83,7 @@ <h4>Signaling Channel</h4>
"><sup>&#9432;</sup></span>
<input type="text" class="form-control" id="clientId" placeholder="Client id">
</div>
<h4>Tracks</h4>
<h4 id="subheader">Tracks</h4>
<p><small>Control which media types are transmitted to the remote client. For WebRTC Ingestion and Storage master, both audio and video must be sent, and viewers cannot not send video and optional audio.</small></p>
<div class="form-group">
<div class="form-check-inline">
Expand All @@ -83,7 +103,7 @@ <h4>Tracks</h4>
"><sup>&#9432;</sup></span>
</div>
</div>
<details id="webrtc-ingestion-and-storage-group"><summary class="h4">WebRTC Ingestion and Storage</summary>
<details id="webrtc-ingestion-and-storage-group"><summary class="h4" id="subheader">WebRTC Ingestion and Storage</summary>
<div>
<p><small>Configure which stream to ingest and store media to. Call update media storage configuration with an empty Stream name to disable this feature.</small></p>
<div class="form-group input-group">
Expand Down Expand Up @@ -137,7 +157,7 @@ <h4>Tracks</h4>
</div>
</div>
</details>
<h4>Video Resolution</h4>
<h4 id="subheader">Video Resolution</h4>
<p><small>Set the desired video resolution and aspect ratio.</small></p>
<div class="form-group">
<div class="form-check">
Expand All @@ -149,7 +169,7 @@ <h4>Video Resolution</h4>
<label class="form-check-label" for="fullscreen">640x480 <small>(4:3 fullscreen)</small></label>
</div>
</div>
<h4>NAT Traversal</h4>
<h4 id="subheader">NAT Traversal</h4>
<p><small>Control settings for ICE candidate generation.</small>
<span data-delay="{ &quot;hide&quot;: 1500 }" data-position="auto" tabindex="0" class="text-info" data-toggle="tooltip" data-html="true" title="
<p>Determines the types of <code>ICE candidates</code> that are generated.<br/><br/>STUN/TURN = host, server reflexive, and relay<br/>STUN only = server reflexive<br/>TURN only = relay<br/>Disabled = host</p>
Expand Down Expand Up @@ -183,7 +203,7 @@ <h4>NAT Traversal</h4>
"><sup>&#9432;</sup></span>
</div>
</div>
<h4>Amazon KVS WebRTC DQP</h4>
<h4 id="subheader">Amazon KVS WebRTC DQP</h4>
<div class="form-group">
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" id="enableDQPmetrics" value="enableDQPmetrics">
Expand All @@ -195,7 +215,7 @@ <h4>Amazon KVS WebRTC DQP</h4>
</div>
</div>

<h4>Amazon KVS WebRTC Profiling Timeline chart</h4>
<h4 id="subheader">Amazon KVS WebRTC Profiling Timeline chart</h4>
<div class="form-group">
<div class="form-check-inline">
<input class="form-check-input" type="checkbox" id="enableProfileTimeline" value="enableProfileTimeline">
Expand All @@ -207,7 +227,7 @@ <h4>Amazon KVS WebRTC Profiling Timeline chart</h4>
</div>
</div>

<details><summary class="h4">Advanced</summary>
<details><summary class="h4" id="subheader">Advanced</summary>
<p class="mt-3"><small>Filter settings for which ICE candidates are sent to and received from the peer.</small></p>
<div class="container">
<div class="row">
Expand Down Expand Up @@ -345,7 +365,7 @@ <h6>Audio Codecs Allowed</h6>
</details>

<hr>
<div>
<div style="margin-top: 30px;">
<button id="master-button" type="submit" class="btn btn-primary">Start Master</button>
<button id="viewer-button" type="submit" class="btn btn-primary">Start Viewer</button>
</div>
Expand Down
1 change: 1 addition & 0 deletions examples/joinStorageSession.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ async function joinStorageSessionManually(formValues) {
sessionToken: formValues.sessionToken,
},
endpoint: formValues.endpoint,
useDualstackEndpoint: formValues.useDualStackEndpoints,
});

// Step 1: Obtain the ARN of the Signaling Channel
Expand Down
1 change: 1 addition & 0 deletions examples/joinStorageSessionAsViewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ async function joinStorageSessionAsViewerManually(formValues) {
sessionToken: formValues.sessionToken,
},
endpoint: formValues.endpoint,
useDualstackEndpoint: formValues.useDualStackEndpoints,
});

// Step 1: Obtain the ARN of the Signaling Channel
Expand Down
1 change: 1 addition & 0 deletions examples/listStorageChannels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ async function listStorageChannels(formValues) {
},
endpoint: formValues.endpoint,
logger: formValues.logAwsSdkCalls ? console : undefined,
useDualstackEndpoint: formValues.useDualStackEndpoints,
});

// Get all signaling channels
Expand Down
1 change: 1 addition & 0 deletions examples/master.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ async function startMaster(localView, remoteView, formValues, onStatsReport, onR
secretAccessKey: formValues.secretAccessKey,
sessionToken: formValues.sessionToken,
},
useDualstackEndpoint: formValues.useDualStackEndpoints,
},
formValues.endpoint,
role,
Expand Down
1 change: 1 addition & 0 deletions examples/updateMediaStorageConfiguration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ async function updateMediaStorageConfiguration(formValues) {
sessionToken: formValues.sessionToken,
},
endpoint: formValues.endpoint,
useDualstackEndpoint: formValues.useDualStackEndpoints,
});

if (formValues.streamName) {
Expand Down
1 change: 1 addition & 0 deletions examples/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,7 @@ async function startViewer(localView, remoteView, formValues, onStatsReport, rem
},
endpoint: formValues.endpoint,
correctClockSkew: true,
useDualstackEndpoint: formValues.useDualStackEndpoints,
});

// Get signaling channel ARN
Expand Down