Skip to content

Commit ca40956

Browse files
stefankieszstefankiesz
committed
Deploying to gh-pages from @ c99e8e1 🚀
1 parent 86a7f32 commit ca40956

15 files changed

+83
-22
lines changed

‎examples/app.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,7 @@ pre .warn {
3131
height: 500px;
3232
overflow: auto;
3333
}
34+
35+
#subheader {
36+
margin-top: 30px;
37+
}

‎examples/app.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,9 @@ function getTabScopedClientID() {
9393
}
9494

9595
function getFormValues() {
96+
const endpointInput = $('#endpoint').val();
97+
const endpoint = endpointInput?.trim() || undefined;
98+
9699
return {
97100
region: $('#region').val(),
98101
channelName: $('#channelName').val(),
@@ -111,7 +114,8 @@ function getFormValues() {
111114
forceSTUN: $('#forceSTUN').is(':checked'),
112115
forceTURN: $('#forceTURN').is(':checked'),
113116
accessKeyId: $('#accessKeyId').val(),
114-
endpoint: $('#endpoint').val() || null,
117+
useDualStackEndpoints: endpoint === undefined && $('#dual-stack').is(':checked'),
118+
endpoint: endpoint,
115119
secretAccessKey: $('#secretAccessKey').val(),
116120
sessionToken: $('#sessionToken').val() || null,
117121
enableDQPmetrics: $('#enableDQPmetrics').is(':checked'),
@@ -264,7 +268,8 @@ $('#viewer-button').click(async () => {
264268
ChannelHelper.IngestionMode.DETERMINE_THROUGH_DESCRIBE,
265269
'[VIEWER]',
266270
formValues.clientId,
267-
formValues.logAwsSdkCalls ? console : undefined);
271+
formValues.logAwsSdkCalls ? console : undefined,
272+
formValues.useDualStackEndpoints);
268273
await channelHelper.determineMediaIngestionPath();
269274

270275
if (channelHelper.isIngestionEnabled()) {
@@ -364,7 +369,7 @@ async function logLevelSelected(event) {
364369
}
365370

366371
// Fetch regions
367-
fetch('https://api.regional-table.region-services.aws.a2z.com/index.jsons')
372+
fetch('https://api.regional-table.region-services.aws.a2z.com/index.json')
368373
.then(res => {
369374
if (res.ok) {
370375
return res.json();
@@ -575,6 +580,8 @@ const fields = [
575580
{field: 'secretAccessKey', type: 'text'},
576581
{field: 'sessionToken', type: 'text'},
577582
{field: 'endpoint', type: 'text'},
583+
{field: 'legacy', type: 'radio', name: 'endpoint-type'},
584+
{field: 'dual-stack', type: 'radio', name: 'endpoint-type'},
578585
{field: 'sendVideo', type: 'checkbox'},
579586
{field: 'sendAudio', type: 'checkbox'},
580587
{field: 'streamName', type: 'text'},

‎examples/channelHelper.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class ChannelHelper {
1212
DETERMINE_THROUGH_DESCRIBE: 2,
1313
};
1414

15-
constructor(channelName, clientArgs, endpoint, role, ingestionMode, loggingPrefix, clientId, logger) {
15+
constructor(channelName, clientArgs, endpoint, role, ingestionMode, loggingPrefix, clientId, logger, useDualStackEndpoints) {
1616
this._channelName = channelName;
1717
this._clientArgs = clientArgs;
1818
this._role = role;
@@ -21,6 +21,7 @@ class ChannelHelper {
2121
this._loggingPrefix = loggingPrefix;
2222
this._clientId = clientId;
2323
this._logger = logger;
24+
this._useDualStackEndpoints = useDualStackEndpoints;
2425
}
2526

2627
// Must be called first
@@ -188,6 +189,7 @@ class ChannelHelper {
188189
...this._clientArgs,
189190
logger: this._logger,
190191
endpoint: this._endpoint,
192+
useDualstackEndpoint: this._useDualStackEndpoints,
191193
correctClockSkew: true,
192194
});
193195
}

‎examples/createSignalingChannel.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ async function createSignalingChannel(formValues) {
1818
},
1919
endpoint: formValues.endpoint,
2020
logger: formValues.logAwsSdkCalls ? console : undefined,
21+
useDualstackEndpoint: formValues.useDualStackEndpoints,
2122
});
2223

2324
// Create signaling channel

‎examples/createStream.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ async function createStream(formValues) {
2020
region: formValues.region,
2121
endpoint: formValues.endpoint,
2222
logger: formValues.logAwsSdkCalls ? console : undefined,
23+
useDualstackEndpoint: formValues.useDualStackEndpoints,
2324
});
2425

2526
const createStreamResponse = await kinesisVideoClient

‎examples/describeMediaStorageConfiguration.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ async function describeMediaStorageConfiguration(formValues) {
1919
},
2020
endpoint: formValues.endpoint,
2121
logger: formValues.logAwsSdkCalls ? console : undefined,
22+
useDualstackEndpoint: formValues.useDualStackEndpoints,
2223
});
2324

2425
const mediaStorageConfiguration = await kinesisVideoClient.send(new AWS.KinesisVideo.DescribeMediaStorageConfigurationCommand({ ChannelName: formValues.channelName }));

‎examples/index.html‎

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,13 @@ <h1>KVS WebRTC Test Page</h1>
2525
<div class="row loader"></div>
2626
<div id="main" class="d-none">
2727
<form id="form" onsubmit="return false">
28-
<h4>KVS Endpoint</h4>
2928
<div class="form-group has-validation" style="position: relative;">
3029
<label for="region">Region</label>
3130
<input type="text" class="form-control valid" id="region" placeholder="Region" value="us-west-2" autocomplete="off" required>
3231
<datalist id="regionList"></datalist>
3332
<div id="region-invalid-feedback" class="invalid-feedback"></div>
3433
</div>
35-
<h4>AWS Credentials</h4>
34+
<h4 id="subheader">AWS Credentials</h4>
3635
<div class="form-group">
3736
<label for="accessKeyId">Access Key ID</label>
3837
<input type="text" class="form-control" id="accessKeyId" placeholder="Access key id" required>
@@ -45,7 +44,7 @@ <h4>AWS Credentials</h4>
4544
<label for="sessionToken">Session Token <small>(optional)</small></label>
4645
<input type="password" class="form-control" id="sessionToken" placeholder="Session token">
4746
</div>
48-
<h4>Signaling Channel</h4>
47+
<h4 id="subheader">Signaling Channel</h4>
4948
<div>
5049
<label for="channelName">Channel Name</label>
5150
<div class="form-group input-group">
@@ -63,7 +62,7 @@ <h4>Signaling Channel</h4>
6362
"><sup>&#9432;</sup></span>
6463
<input type="text" class="form-control" id="clientId" placeholder="Client id">
6564
</div>
66-
<h4>Tracks</h4>
65+
<h4 id="subheader">Tracks</h4>
6766
<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>
6867
<div class="form-group">
6968
<div class="form-check-inline">
@@ -83,7 +82,7 @@ <h4>Tracks</h4>
8382
"><sup>&#9432;</sup></span>
8483
</div>
8584
</div>
86-
<details id="webrtc-ingestion-and-storage-group"><summary class="h4">WebRTC Ingestion and Storage</summary>
85+
<details id="webrtc-ingestion-and-storage-group"><summary class="h4" id="subheader">WebRTC Ingestion and Storage</summary>
8786
<div>
8887
<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>
8988
<div class="form-group input-group">
@@ -137,7 +136,7 @@ <h4>Tracks</h4>
137136
</div>
138137
</div>
139138
</details>
140-
<h4>Video Resolution</h4>
139+
<h4 id="subheader">Video Resolution</h4>
141140
<p><small>Set the desired video resolution and aspect ratio.</small></p>
142141
<div class="form-group">
143142
<div class="form-check">
@@ -149,7 +148,7 @@ <h4>Video Resolution</h4>
149148
<label class="form-check-label" for="fullscreen">640x480 <small>(4:3 fullscreen)</small></label>
150149
</div>
151150
</div>
152-
<h4>NAT Traversal</h4>
151+
<h4 id="subheader">NAT Traversal</h4>
153152
<p><small>Control settings for ICE candidate generation.</small>
154153
<span data-delay="{ &quot;hide&quot;: 1500 }" data-position="auto" tabindex="0" class="text-info" data-toggle="tooltip" data-html="true" title="
155154
<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>
@@ -183,7 +182,7 @@ <h4>NAT Traversal</h4>
183182
"><sup>&#9432;</sup></span>
184183
</div>
185184
</div>
186-
<h4>Amazon KVS WebRTC DQP</h4>
185+
<h4 id="subheader">Amazon KVS WebRTC DQP</h4>
187186
<div class="form-group">
188187
<div class="form-check-inline">
189188
<input class="form-check-input" type="checkbox" id="enableDQPmetrics" value="enableDQPmetrics">
@@ -195,7 +194,7 @@ <h4>Amazon KVS WebRTC DQP</h4>
195194
</div>
196195
</div>
197196

198-
<h4>Amazon KVS WebRTC Profiling Timeline chart</h4>
197+
<h4 id="subheader">Amazon KVS WebRTC Profiling Timeline chart</h4>
199198
<div class="form-group">
200199
<div class="form-check-inline">
201200
<input class="form-check-input" type="checkbox" id="enableProfileTimeline" value="enableProfileTimeline">
@@ -207,7 +206,7 @@ <h4>Amazon KVS WebRTC Profiling Timeline chart</h4>
207206
</div>
208207
</div>
209208

210-
<details><summary class="h4">Advanced</summary>
209+
<details><summary class="h4" id="subheader">Advanced</summary>
211210
<p class="mt-3"><small>Filter settings for which ICE candidates are sent to and received from the peer.</small></p>
212211
<div class="container">
213212
<div class="row">
@@ -317,6 +316,7 @@ <h6>Audio Codecs Allowed</h6>
317316
</div>
318317
</div>
319318
</div>
319+
320320
<p class="mt-3"><small>TURN connection options</small><span data-delay="{ &quot;hide&quot;: 1500 }" data-position="auto" tabindex="0" class="text-info ml-1" data-toggle="tooltip" data-html="true" title="
321321
<p>Filter options for the URLs from the GetIceServerConfig API call.</p>"><sup>&#9432;</sup></span></p>
322322
<div class="mt-3 mb-3 container">
@@ -338,14 +338,45 @@ <h6>Audio Codecs Allowed</h6>
338338
<p>GetIceServerConfig returns two sets of TURN servers, only use one of the sets.</p>"><sup>&#9432;</sup></span></label>
339339
</div>
340340
</div>
341+
342+
<div class="d-flex align-items-center mt-3">
343+
<p class="mb-0">
344+
<small>KVS Endpoint Type</small>
345+
</p>
346+
347+
<!-- Tooltip icon -->
348+
<span data-delay="{ &quot;hide&quot;: 1500 }"
349+
data-position="auto"
350+
tabindex="0"
351+
class="text-info ml-1"
352+
data-toggle="tooltip"
353+
data-html="true"
354+
title="<p>Use dual-stack KVS endpoints, else will use legacy IPv4-only endpoints. Dual-stack mode will also allow for IPv6 ICE candidates if supported by the browser and local network.</p>
355+
<a href=&quot;https://docs.aws.amazon.com/sdkref/latest/guide/feature-endpoints.html&quot;>Additional information</a>">
356+
<sup>&#9432;</sup>
357+
</span>
358+
</div>
359+
360+
<div class="form-group">
361+
<div class="form-check">
362+
<input class="form-check-input" type="radio" name="endpoint-type" id="legacy" value="option1" checked>
363+
<label class="form-check-label" for="legacy">Legacy <small>"amazonaws.com"</small></label>
364+
</div>
365+
<div class="form-check">
366+
<input class="form-check-input" type="radio" name="endpoint-type" id="dual-stack" value="option2">
367+
<label class="form-check-label" for="dual-stack">Dual-stack <small>"api.aws"</small></label>
368+
</div>
369+
</div>
370+
341371
<p class="mt-3"><small>Endpoint Override</small></p>
342372
<div class="form-group">
343373
<input type="text" class="form-control" id="endpoint" placeholder="Endpoint">
344374
</div>
375+
345376
</details>
346377

347378
<hr>
348-
<div>
379+
<div style="margin-top: 30px;">
349380
<button id="master-button" type="submit" class="btn btn-primary">Start Master</button>
350381
<button id="viewer-button" type="submit" class="btn btn-primary">Start Viewer</button>
351382
</div>

‎examples/joinStorageSession.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ async function joinStorageSessionManually(formValues) {
1818
sessionToken: formValues.sessionToken,
1919
},
2020
endpoint: formValues.endpoint,
21+
useDualstackEndpoint: formValues.useDualStackEndpoints,
2122
});
2223

2324
// Step 1: Obtain the ARN of the Signaling Channel

‎examples/joinStorageSessionAsViewer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ async function joinStorageSessionAsViewerManually(formValues) {
1818
sessionToken: formValues.sessionToken,
1919
},
2020
endpoint: formValues.endpoint,
21+
useDualstackEndpoint: formValues.useDualStackEndpoints,
2122
});
2223

2324
// Step 1: Obtain the ARN of the Signaling Channel

‎examples/listStorageChannels.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ async function listStorageChannels(formValues) {
1919
},
2020
endpoint: formValues.endpoint,
2121
logger: formValues.logAwsSdkCalls ? console : undefined,
22+
useDualstackEndpoint: formValues.useDualStackEndpoints,
2223
});
2324

2425
// Get all signaling channels

0 commit comments

Comments
 (0)