Skip to content

Commit

Permalink
Deploying to gh-pages from @ fb1d4a3 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@sirknightj
sirknightj committed Nov 7, 2023
1 parent 4df1686 commit 4a43d6b
Show file tree
Hide file tree
Showing 9 changed files with 503 additions and 38 deletions.
4 changes: 2 additions & 2 deletions examples/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ pre .warn {
color: goldenrod;
}

#debug pre {
#logs {
height: 500px;
overflow: auto;
}
}
179 changes: 179 additions & 0 deletions examples/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ function getFormValues() {
sendAudio: $('#sendAudio').is(':checked'),
streamName: $('#streamName').val(),
ingestMedia: $('#ingest-media').is(':checked'),
showJSSButton: $('#show-join-storage-session-button').is(':checked'),
openDataChannel: $('#openDataChannel').is(':checked'),
widescreen: $('#widescreen').is(':checked'),
fullscreen: $('#fullscreen').is(':checked'),
Expand All @@ -88,6 +89,18 @@ function getFormValues() {
secretAccessKey: $('#secretAccessKey').val(),
sessionToken: $('#sessionToken').val() || null,
enableDQPmetrics: $('#enableDQPmetrics').is(':checked'),
sendHostCandidates: $('#send-host').is(':checked'),
acceptHostCandidates: $('#accept-host').is(':checked'),
sendRelayCandidates: $('#send-relay').is(':checked'),
acceptRelayCandidates: $('#accept-relay').is(':checked'),
sendSrflxCandidates: $('#send-srflx').is(':checked'),
acceptSrflxCandidates: $('#accept-srflx').is(':checked'),
sendPrflxCandidates: $('#send-prflx').is(':checked'),
acceptPrflxCandidates: $('#accept-prflx').is(':checked'),
sendTcpCandidates: $('#send-tcp').is(':checked'),
acceptTcpCandidates: $('#accept-tcp').is(':checked'),
sendUdpCandidates: $('#send-udp').is(':checked'),
acceptUdpCandidates: $('#accept-udp').is(':checked'),
};
}

Expand All @@ -112,6 +125,8 @@ function onStop() {
if (ROLE === 'master') {
stopMaster();
$('#master').addClass('d-none');
$('#master .remote-view').removeClass('d-none');
$('#master .remote').removeClass('d-none');
} else {
stopViewer();
$('#viewer').addClass('d-none');
Expand All @@ -123,6 +138,7 @@ function onStop() {
}

$('#form').removeClass('d-none');
$('#join-storage-session-button').addClass('d-none');
ROLE = null;
}

Expand Down Expand Up @@ -402,6 +418,7 @@ const fields = [
{ field: 'sendAudio', type: 'checkbox' },
{ field: 'streamName', type: 'text' },
{ field: 'ingest-media', type: 'checkbox' },
{ field: 'show-join-storage-session-button', type: 'checkbox' },
{ field: 'widescreen', type: 'radio', name: 'resolution' },
{ field: 'fullscreen', type: 'radio', name: 'resolution' },
{ field: 'openDataChannel', type: 'checkbox' },
Expand All @@ -410,7 +427,21 @@ const fields = [
{ field: 'forceSTUN', type: 'radio', name: 'natTraversal' },
{ field: 'forceTURN', type: 'radio', name: 'natTraversal' },
{ field: 'natTraversalDisabled', type: 'radio', name: 'natTraversal' },
{ field: 'enableDQPmetrics', type: 'checkbox' },
{ field: 'send-host', type: 'checkbox' },
{ field: 'accept-host', type: 'checkbox' },
{ field: 'send-relay', type: 'checkbox' },
{ field: 'accept-relay', type: 'checkbox' },
{ field: 'send-srflx', type: 'checkbox' },
{ field: 'accept-srflx', type: 'checkbox' },
{ field: 'send-prflx', type: 'checkbox' },
{ field: 'accept-prflx', type: 'checkbox' },
{ field: 'send-tcp', type: 'checkbox' },
{ field: 'accept-tcp', type: 'checkbox' },
{ field: 'send-udp', type: 'checkbox' },
{ field: 'accept-udp', type: 'checkbox' },
];

fields.forEach(({ field, type, name }) => {
const id = '#' + field;

Expand Down Expand Up @@ -459,6 +490,149 @@ fields.forEach(({ field, type, name }) => {
});
});

/**
* Determines whether the ICE Candidate should be added.
* @param formValues Settings used.
* @param candidate {RTCIceCandidate} iceCandidate to check
* @returns true if the candidate should be added to the peerConnection.
*/
function shouldAcceptCandidate(formValues, candidate) {
const { transport, type } = extractTransportAndType(candidate);

if (!formValues.acceptUdpCandidates && transport === 'udp') {
return false;
}

if (!formValues.acceptTcpCandidates && transport === 'tcp') {
return false;
}

switch (type) {
case 'host':
return formValues.acceptHostCandidates;
case 'srflx':
return formValues.acceptSrflxCandidates;
case 'relay':
return formValues.acceptRelayCandidates;
case 'prflx':
return formValues.acceptPrflxCandidates;
default:
console.warn('ShouldAcceptICECandidate: Unknown candidate type:', candidate.type);
return false;
}
}

$('#natTraversalEnabled').on('click', () => {
$('#accept-host').prop('checked', true);
$('#send-host').prop('checked', true);
$('#accept-relay').prop('checked', true);
$('#send-relay').prop('checked', true);
$('#accept-srflx').prop('checked', true);
$('#send-srflx').prop('checked', true);
$('#accept-prflx').prop('checked', true);
$('#send-prflx').prop('checked', true);

saveAdvanced();
});

$('#forceSTUN').on('click', () => {
$('#accept-host').prop('checked', false);
$('#send-host').prop('checked', false);
$('#accept-relay').prop('checked', false);
$('#send-relay').prop('checked', false);
$('#accept-srflx').prop('checked', true);
$('#send-srflx').prop('checked', true);
$('#accept-prflx').prop('checked', false);
$('#send-prflx').prop('checked', false);

saveAdvanced();
});

$('#forceTURN').on('click', () => {
$('#accept-host').prop('checked', false);
$('#send-host').prop('checked', false);
$('#accept-relay').prop('checked', true);
$('#send-relay').prop('checked', true);
$('#accept-srflx').prop('checked', false);
$('#send-srflx').prop('checked', false);
$('#accept-prflx').prop('checked', false);
$('#send-prflx').prop('checked', false);

saveAdvanced();
});

$('#natTraversalDisabled').on('click', () => {
$('#accept-host').prop('checked', true);
$('#send-host').prop('checked', true);
$('#accept-relay').prop('checked', true);
$('#send-relay').prop('checked', true);
$('#accept-srflx').prop('checked', true);
$('#send-srflx').prop('checked', true);
$('#accept-prflx').prop('checked', true);
$('#send-prflx').prop('checked', true);

saveAdvanced();
});

function saveAdvanced() {
$('#accept-host').trigger('change');
$('#send-host').trigger('change');
$('#accept-relay').trigger('change');
$('#send-relay').trigger('change');
$('#accept-srflx').trigger('change');
$('#send-srflx').trigger('change');
$('#accept-prflx').trigger('change');
$('#send-prflx').trigger('change');
}

/**
* Determines whether the ICE Candidate should be sent to the peer.
* @param formValues Settings used.
* @param candidate {RTCIceCandidate} iceCandidate to check
* @returns true if the candidate should be sent to the peer.
*/
function shouldSendIceCandidate(formValues, candidate) {
const { transport, type } = extractTransportAndType(candidate);

if (!formValues.sendUdpCandidates && transport === 'udp') {
return false;
}

if (!formValues.sendTcpCandidates && transport === 'tcp') {
return false;
}

switch (type) {
case 'host':
return formValues.sendHostCandidates;
case 'srflx':
return formValues.sendSrflxCandidates;
case 'relay':
return formValues.sendRelayCandidates;
case 'prflx':
return formValues.sendPrflxCandidates;
default:
console.warn('ShouldSendICECandidate: Unknown candidate type:', candidate.type);
return false;
}
}

function randomString() {
return Date.now().toString();
}

function extractTransportAndType(candidate) {
const words = candidate.candidate.split(' ');

if (words.length < 7) {
console.error('Invalid ice candidate!', candidate);
return false;
}

// https://datatracker.ietf.org/doc/html/rfc5245#section-15.1
return { transport: words[2], type: words[7] };
}

$('#copy-logs').on('click', async function() {
const logsResult = [];
$('#logs')
Expand Down Expand Up @@ -506,6 +680,11 @@ $('#create-stream-modal-create-stream-button').on('click', async function() {
});
});

$('#join-storage-session-button').on('click', async function() {
const formValues = getFormValues();
joinStorageSessionManually(formValues);
});

// Enable tooltips
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
Expand Down
77 changes: 72 additions & 5 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,17 @@ <h4>Tracks</h4>
<p><small>List storage channels outputs the ARNs of all signaling channels configured for storage and their associated stream's ARN.</small></p>
</div>
<div class="form-group form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="ingest-media" value="audio">
<input class="form-check-input" type="checkbox" id="ingest-media">
<label for="ingest-media" class="form-check-label"><i>Ingestion and storage peer</i> joins automatically</label>
<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>If WebRTC Ingestion and Storage is configured, after connecting to Kinesis Video Signaling, this sample application will invoke the JoinStorageSession API to have the Kinesis video producing device join the WebRTC session as a viewer.</p>
<a href=&quot;https://docs.aws.amazon.com/kinesisvideostreams/latest/dg/API_webrtc_JoinStorageSession.html&quot;>Additional information</a>
"><sup>&#9432;</sup></span>
</div>
<div class="form-group form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="show-join-storage-session-button">
<label for="show-join-storage-session-button" class="form-check-label">Show button to manually call JoinStorageSession API.</label></span>
</div>
</div>
</details>
<h4>Video Resolution</h4>
Expand Down Expand Up @@ -172,6 +176,67 @@ <h4>Amazon KVS WebRTC DQP</h4>
"><sup>&#9432;</sup></span>
</div>
</div>

<details><summary class="h4">Advanced</summary>
<p><small>Filter settings for which ICE candidates and sent to and received from the peer.</small></p>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="send-relay" checked>
<label for="send-relay" class="form-check-label">Send <code>relay</code> candidates to peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="accept-relay" checked>
<label for="accept-relay" class="form-check-label">Accept <code>relay</code> candidates from peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="send-srflx" checked>
<label for="send-srflx" class="form-check-label">Send <code>srflx</code> candidates to peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="accept-srflx" checked>
<label for="accept-srflx" class="form-check-label">Accept <code>srflx</code> candidates from peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="send-host" checked>
<label for="send-host" class="form-check-label">Send <code>host</code> candidates to peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="accept-host" checked>
<label for="accept-host" class="form-check-label">Accept <code>host</code> candidates from peer</label>
</div>
</div>
<div class="col-sm">
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="send-prflx" checked>
<label for="send-prflx" class="form-check-label">Send <code>prflx</code> candidates to peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="accept-prflx" checked>
<label for="accept-prflx" class="form-check-label">Accept <code>prflx</code> candidates from peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="send-tcp" checked>
<label for="send-tcp" class="form-check-label">Send <code>tcp</code> candidates to peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="accept-tcp" checked>
<label for="accept-tcp" class="form-check-label">Accept <code>tcp</code> candidates from peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="send-udp" checked>
<label for="send-udp" class="form-check-label">Send <code>udp</code> candidates to peer</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="checkbox" id="accept-udp" checked>
<label for="accept-udp" class="form-check-label">Accept <code>udp</code> candidates from peer</label>
</div>
</div>
</div>
</div>
</details>

<hr>
<div>
<button id="master-button" type="submit" class="btn btn-primary">Start Master</button>
Expand Down Expand Up @@ -215,7 +280,7 @@ <h2>Master</h2>
<h5>Master Section</h5>
<div class="video-container"><video class="local-view" autoplay playsinline controls muted></video></div>
</div>
<div id="viewer-view-holder" class="col">
<div id="viewer-view-holder" class="col remote">
<h5>Viewer Return Channel</h5>
<div id="empty-video-placeholder" class="video-container"><video class="remote-view" autoplay playsinline controls></video></div>
</div>
Expand All @@ -226,7 +291,7 @@ <h5>Viewer Return Channel</h5>
<textarea type="text" class="form-control local-message" placeholder="DataChannel message to send to all viewers"> </textarea>
</div>
</div>
<div class="col">
<div class="col remote">
<div class="card bg-light mb-3">
<pre class="remote-message card-body text-monospace preserve-whitespace"></pre>
</div>
Expand All @@ -236,7 +301,8 @@ <h5>Viewer Return Channel</h5>
<span class="send-message datachannel">
<button id="send-message" type="button" class="btn btn-primary">Send DataChannel Message</button>
</span>
<button id="stop-master-button" type="button" class="btn btn-primary">Stop Master</button>
<button id="stop-master-button" type="button" class="btn btn-danger">Stop Master</button>
<button id="join-storage-session-button" type="button" class="btn btn-primary d-none">Join Storage Session</button>
</div>
</div>

Expand Down Expand Up @@ -268,7 +334,7 @@ <h5>From Master</h5>
<span class="send-message datachannel d-none">
<button type="button" class="btn btn-primary">Send DataChannel Message</button>
</span>
<button id="stop-viewer-button" type="button" class="btn btn-primary">Stop Viewer</button>
<button id="stop-viewer-button" type="button" class="btn btn-danger">Stop Viewer</button>
</div>
</div>

Expand Down Expand Up @@ -327,6 +393,7 @@ <h3 id="logs-header">Logs</h3>
<script src="./updateMediaStorageConfiguration.js"></script>
<script src="./describeMediaStorageConfiguration.js"></script>
<script src="./createStream.js"></script>
<script src="./joinStorageSession.js"></script>
<script src="./app.js"></script>

</body>
Expand Down
Loading

0 comments on commit 4a43d6b

Please sign in to comment.