From 78c4897592362edc5c52de47eca7fa27fd01df98 Mon Sep 17 00:00:00 2001
From: bdhandap <34078957+bdhandap@users.noreply.github.com>
Date: Fri, 22 Sep 2023 00:50:27 +0000
Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20awslabs/?=
 =?UTF-8?q?amazon-kinesis-video-streams-webrtc-sdk-js@a8b21d21361b407ff45e?=
 =?UTF-8?q?526e0a6aa7e33a66bbba=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/app.js          | 13 +++++++++++++
 examples/createStream.js | 33 +++++++++++++++++++++++++++++++++
 examples/index.html      | 34 +++++++++++++++++++++++++++++++++-
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 examples/createStream.js

diff --git a/examples/app.js b/examples/app.js
index 0bea128..0fc9f4b 100644
--- 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
new file mode 100644
index 0000000..f742af1
--- /dev/null
+++ 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
index a906222..d56d95d 100644
--- 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>