From 1d925e22feb7829873a41681c8428a59efbe07fc Mon Sep 17 00:00:00 2001 From: Mitchell Loeppky Date: Tue, 9 Jul 2019 12:29:25 -0700 Subject: [PATCH] Add MPEG-DASH playback, LIVE_REPLAY playback mode, and other UI enhancements. --- CONTRIBUTING.md | 6 +- README.md | 10 +- favicon.ico | Bin 0 -> 1150 bytes index.html | 519 +++++++++++++++++++++++++----------------------- loader.css | 46 +++++ ui.js | 99 +++++++++ 6 files changed, 419 insertions(+), 261 deletions(-) create mode 100644 favicon.ico mode change 100755 => 100644 index.html create mode 100644 loader.css create mode 100644 ui.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8b8b38a..9e1103d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -11,7 +11,7 @@ information to effectively respond to your bug report or contribution. We welcome you to use the GitHub issue tracker to report bugs or suggest features. -When filing an issue, please check [existing open](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/issues), or [recently closed](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aclosed%20), issues to make sure somebody else hasn't already +When filing an issue, please check [existing open](https://github.com/aws-samples/amazon-kinesis-video-streams-media-viewer/issues), or [recently closed](https://github.com/aws-samples/amazon-kinesis-video-streams-media-viewer/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aclosed%20), issues to make sure somebody else hasn't already reported the issue. Please try to include as much information as you can. Details like these are incredibly useful: * A reproducible test case or series of steps @@ -41,7 +41,7 @@ GitHub provides additional document on [forking a repository](https://help.githu ## Finding contributions to work on -Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels ((enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any ['help wanted'](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/labels/help%20wanted) issues is a great place to start. +Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels ((enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any ['help wanted'](https://github.com/aws-samples/amazon-kinesis-video-streams-media-viewer/labels/help%20wanted) issues is a great place to start. ## Code of Conduct @@ -56,6 +56,6 @@ If you discover a potential security issue in this project we ask that you notif ## Licensing -See the [LICENSE](https://github.com/aws-samples/amazon-kinesis-video-streams-hls-viewer/blob/master/LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution. +See the [LICENSE](https://github.com/aws-samples/amazon-kinesis-video-streams-media-viewer/blob/master/LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution. We may ask you to sign a [Contributor License Agreement (CLA)](http://en.wikipedia.org/wiki/Contributor_License_Agreement) for larger changes. diff --git a/README.md b/README.md index e37af36..40b37ea 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -## Amazon Kinesis Video Streams HLS Viewer +## Amazon Kinesis Video Streams Media Viewer -Easily view HLS output of Amazon Kinesis Video Streams +Easily view HLS and MPEG-DASH output of Amazon Kinesis Video Streams * * * ## About -This is a simple static webpage that simplifies testing and experiments with HLS output from Amazon Kinesis Video Streams. This is based on the documentation. +This is a simple static webpage that simplifies testing and experiments with HLS and MPEG-DASH output from Amazon Kinesis Video Streams. This is based on the documentation. ## Getting Started The easiest and recommended approach is to use the Github-hosted version of this project. The second method is to clone/download this project and host it in your own S3 bucket or even locally. @@ -12,10 +12,10 @@ The easiest and recommended approach is to use the Github-hosted version of this ### Using the Github-hosted UI Because the project is a collection of static HTML and JavaScript, you can use the application without deploying the code into your own AWS account. - To get started, go to the hosted [Kinesis Video Streams HLS Viewer](https://aws-samples.github.io/amazon-kinesis-video-streams-hls-viewer/). + To get started, go to the hosted [Kinesis Video Streams Media Viewer](https://aws-samples.github.io/amazon-kinesis-video-streams-media-viewer/).
- + ## License Summary diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..b0f457c3f532045e0609d8027758797e636665c7 GIT binary patch literal 1150 zcmb`H&r1S96vs!YAP*%3bxaT<=+q&Q3X0u)0`5bm?!Xe<1ozw+_*z zThPUB^%vRa?Yd%1nqbIhXXd^4ee>q+tV%`r#p8-+LRANp8dpk9112oKok1yl?;}3m z`X3&~(QB~(2M72qv#n$BV^{2TI0T95#xwpDg!Ql3hQs#uAo0ODtTgAdjC;nhvy7g; zEg8sMS!xLg8_b>NHuQzk_bAL1B=;iy7yBdRVd3~)L4dkOf ZOLe7^Z~R|?N<*p%bFqm}VuE - + - - - - Amazon Kinesis Video Streams HLS Viewer + + + + + + Amazon Kinesis Video Streams Media Viewer - Fork me on GitHub -
-

Amazon Kinesis Video Streams HLS Viewer

-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- +
+
+
+

Amazon Kinesis Video Streams Media Viewer

+ Documentation: + HLS + - + DASH
-
-
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
- - - + + + - - - - + + + + + - - - -
+ + + + + + + +
-

Logs

-
- 

+                        
Logs

+                        

+                            

+                        

                     

                 

             

         

         
-        
+        
+        
+            Fork me on GitHub
+        
     
 
diff --git a/loader.css b/loader.css
new file mode 100644
index 0000000..c476323
--- /dev/null
+++ b/loader.css
@@ -0,0 +1,46 @@
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(0, 0, 0, 0.2);
+  border-right: 1.1em solid rgba(0, 0, 0, 0.2);
+  border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
+  border-left: 1.1em solid #000000;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.main {
+  display: none;
+}
\ No newline at end of file
diff --git a/ui.js b/ui.js
new file mode 100644
index 0000000..1481efc
--- /dev/null
+++ b/ui.js
@@ -0,0 +1,99 @@
+configureLogging();
+
+// Update all of the corresonding fields when switching protocol or playback mode
+$('#protocol').change(function() {
+    updateFieldsCorrespondingToStreamingProtocol();
+});
+$('#playbackMode').change(function() {
+    updateFieldsCorrespondingToPlaybackMode();
+});
+
+// Read/Write all of the fields to/from localStorage so that fields are not lost on refresh.
+[
+    'protocol',
+    'player',
+    'region',
+    'accessKeyId',
+    'secretAccessKey',
+    'sessionToken',
+    'endpoint',
+    'streamName',
+    'playbackMode',
+    'discontinuityMode',
+    'displayFragmentTimestamp',
+    'displayFragmentNumber',
+    'startTimestamp',
+    'endTimestamp',
+    'fragmentSelectorType',
+    'maxResults',
+    'expires'
+].forEach(function(field) {
+    var id = "#" + field;
+
+    // Read field from localStorage
+    try {
+        var localStorageValue = localStorage.getItem(field);
+        if (localStorageValue) { 
+            $(id).val(localStorageValue);
+            $(id).trigger('change');
+        }
+    } catch (e) { /* Don't use localStorage */ }
+
+    // Write field to localstorage on change event
+    $(id).change(function() {
+        try {
+            localStorage.setItem(field, $(id).val());
+        } catch (e) { /* Don't use localStorage */ }
+    });
+});
+
+// Initially hide the player elements
+$('.player').hide();
+
+function configureLogging() {
+    console._error = console.error;
+    console.error = function(messages) {
+        log('ERROR', Array.prototype.slice.call(arguments));
+        console._error.apply(this, arguments);
+    }
+
+    console._log = console.log;
+    console.log = function(messages) {
+        log('INFO', Array.prototype.slice.call(arguments));
+        console._log.apply(this, arguments);
+    }
+
+    function log(level, messages) {
+        var text = '';
+        for (message of messages) {
+            if (typeof message === 'object') { message = JSON.stringify(message, null, 2); }
+            text += ' ' + message;
+        }
+        $('#logs').append($('
').text('[' + level + ']' + text + '\n'));
+    }
+}
+
+function updateFieldsCorrespondingToStreamingProtocol() {
+    var isDASH = $('#protocol').val() === 'DASH';
+    $('#containerFormat').prop('disabled', isDASH);
+    $('#discontinuityMode').prop('disabled', isDASH);  
+    $('#displayFragmentNumber').prop('disabled', !isDASH); 
+
+    var players = isDASH ? DASH_PLAYERS : HLS_PLAYERS;
+    $('#player').empty();
+    players.forEach(function (player) {
+        var option = $('