Deploying to gh-pages from @ a8b21d2 🚀

awslabs · Sep 22, 2023 · 78c4897 · 78c4897
1 parent 758afb1
commit 78c4897
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 1 deletion.
diff --git a/examples/app.js b/examples/app.js
@@ -493,6 +493,19 @@ $('#describe-media-storage-configuration-button').on('click', async function() {
     describeMediaStorageConfiguration(formValues);
 });
 
+$('#create-stream-modal').on('show.bs.modal', function() {
+    // Set the stream name in the modal to the stream name.
+    $('#create-stream-modal-stream-input').val($('#streamName').val());
+});
+
+$('#create-stream-modal-create-stream-button').on('click', async function() {
+    await createStream({
+        ...getFormValues(),
+        streamName: $('#create-stream-modal-stream-input').val(),
+        retentionInHours: $('#create-stream-modal-retention-input').val(),
+    });
+});
+
 // Enable tooltips
 $(document).ready(function() {
     $('[data-toggle="tooltip"]').tooltip();

diff --git a/examples/createStream.js b/examples/createStream.js
@@ -0,0 +1,33 @@
+/**
+ * This file demonstrates the process of creating a Kinesis Video Stream.
+ */
+async function createStream(formValues) {
+    try {
+        console.log(
+            '[CREATE_STREAM] Attempting to create a Kinesis Video Stream with name',
+            formValues.streamName,
+            'with',
+            formValues.retentionInHours,
+            'hours of retention.',
+        );
+        // Create KVS client
+        const kinesisVideoClient = new AWS.KinesisVideo({
+            region: formValues.region,
+            accessKeyId: formValues.accessKeyId,
+            secretAccessKey: formValues.secretAccessKey,
+            sessionToken: formValues.sessionToken,
+            endpoint: formValues.endpoint,
+        });
+
+        const createStreamResponse = await kinesisVideoClient
+            .createStream({
+                StreamName: formValues.streamName,
+                DataRetentionInHours: formValues.retentionInHours,
+            })
+            .promise();
+
+        console.log('[CREATE_STREAM] Success! Stream ARN:', createStreamResponse.StreamARN);
+    } catch (e) {
+        console.error('[CREATE_STREAM] Encountered error:', e);
+    }
+}
diff --git a/examples/index.html b/examples/index.html
@@ -91,6 +91,37 @@ <h4>Tracks</h4>
                 <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">
                     <input type="text" class="form-control" id="streamName" placeholder="Stream name">
+                    <div class="input-group-append">
+                        <button id="create-stream-button" type="submit" class="btn btn-primary ml-1 mr-1" title="Create a Kinesis Video Stream with this name." data-toggle="modal" data-target="#create-stream-modal">Create Stream</button>
+                        <div class="modal fade" id="create-stream-modal" tabindex="-1" role="dialog" aria-labelledby="create-stream-modal-label" aria-hidden="true">
+                            <div class="modal-dialog" role="document">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h5 class="modal-title" id="create-stream-modal-label">Create a Kinesis Video Stream</h5>
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <form>
+                                            <div class="form-group">
+                                                <label for="create-stream-modal-stream-input" class="col-form-label">Stream Name:</label>
+                                                <input type="text" class="form-control" id="create-stream-modal-stream-input">
+                                            </div>
+                                            <div class="form-group">
+                                                <label for="create-stream-modal-retention-input" class="col-form-label">Data retention (hours):</label>
+                                                <input class="form-control" id="create-stream-modal-retention-input" type="number" value="48"/>
+                                            </div>
+                                        </form>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                        <button type="button" class="btn btn-primary" id="create-stream-modal-create-stream-button" data-dismiss="modal">Create Stream</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="input-group-append">
                         <button id="update-media-storage-configuration-button" type="submit" class="btn btn-primary" title="Ingest and Store media to a specific Kinesis Video Stream.">Update Media Storage Configuration</button>
                     </div>
@@ -104,7 +135,7 @@ <h4>Tracks</h4>
                 </div>
                 <div class="form-group form-check form-check-inline">
                     <input class="form-check-input" type="checkbox" id="ingest-media" value="audio">
-                    <label for="sendAudio" class="form-check-label"><i>Ingestion and storage peer</i> joins automatically</label>
+                    <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>
@@ -294,6 +325,7 @@ <h3 id="logs-header">Logs</h3>
 <script src="./listStorageChannels.js"></script>
 <script src="./updateMediaStorageConfiguration.js"></script>
 <script src="./describeMediaStorageConfiguration.js"></script>
+<script src="./createStream.js"></script>
 <script src="./app.js"></script>
 
 </body>