Add CSS, update codec configuration

Author: aboba

samples/encode-decode-worker/css/main.css

@@ -0,0 +1,267 @@
+/*
+ *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+.hidden {
+  display: none;
+}
+
+.highlight {
+  background-color: #eee;
+  font-size: 1.2em;
+  margin: 0 0 30px 0;
+  padding: 0.2em 1.5em;
+}
+
+.warning {
+  color: red;
+  font-weight: 400;
+}
+
+@media screen and (min-width: 1000px) {
+  /* hack! to detect non-touch devices */
+  div#links a {
+    line-height: 0.8em;
+  }
+}
+
+audio {
+  max-width: 100%;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  margin: 0;
+  padding: 1em;
+  word-break: break-word;
+}
+
+button {
+  background-color: #d84a38;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.8em;
+  margin: 0 0 1em 0;
+  padding: 0.5em 0.7em 0.6em 0.7em;
+}
+
+button:active {
+  background-color: #cf402f;
+}
+
+button:hover {
+  background-color: #cf402f;
+}
+
+button[disabled] {
+  color: #ccc;
+}
+
+button[disabled]:hover {
+  background-color: #d84a38;
+}
+
+canvas {
+  background-color: #ccc;
+  max-width: 100%;
+  width: 100%;
+}
+
+code {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+}
+
+div#container {
+  margin: 0 auto 0 auto;
+  max-width: 60em;
+  padding: 1em 1.5em 1.3em 1.5em;
+}
+
+div#links {
+  padding: 0.5em 0 0 0;
+}
+
+h1 {
+  border-bottom: 1px solid #ccc;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  margin: 0 0 0.8em 0;
+  padding: 0 0 0.2em 0;
+}
+
+h2 {
+  color: #444;
+  font-weight: 500;
+}
+
+h3 {
+  border-top: 1px solid #eee;
+  color: #666;
+  font-weight: 500;
+  margin: 10px 0 10px 0;
+  white-space: nowrap;
+}
+
+li {
+  margin: 0 0 0.4em 0;
+}
+
+html {
+  /* avoid annoying page width change
+  when moving from the home page */
+  overflow-y: scroll;
+}
+
+img {
+  border: none;
+  max-width: 100%;
+}
+
+input[type=radio] {
+  position: relative;
+  top: -1px;
+}
+
+p {
+  color: #444;
+  font-weight: 300;
+}
+
+p#data {
+  border-top: 1px dotted #666;
+  font-family: Courier New, monospace;
+  line-height: 1.3em;
+  max-height: 1000px;
+  overflow-y: auto;
+  padding: 1em 0 0 0;
+}
+
+p.borderBelow {
+  border-bottom: 1px solid #aaa;
+  padding: 0 0 20px 0;
+}
+
+section p:last-of-type {
+  margin: 0;
+}
+
+section {
+  border-bottom: 1px solid #eee;
+  margin: 0 0 30px 0;
+  padding: 0 0 20px 0;
+}
+
+section:last-of-type {
+  border-bottom: none;
+  padding: 0 0 1em 0;
+}
+
+select {
+  margin: 0 1em 1em 0;
+  position: relative;
+  top: -1px;
+}
+
+h1 span {
+  white-space: nowrap;
+}
+
+a {
+  color: #1D6EEE;
+  font-weight: 300;
+  text-decoration: none;
+}
+
+h1 a {
+  font-weight: 300;
+  margin: 0 10px 0 0;
+  white-space: nowrap;
+}
+
+a:hover {
+  color: #3d85c6;
+  text-decoration: underline;
+}
+
+a#viewSource {
+  display: block;
+  margin: 1.3em 0 0 0;
+  border-top: 1px solid #999;
+  padding: 1em 0 0 0;
+}
+
+div#errorMsg p {
+  color: #F00;
+}
+
+div#links a {
+  display: block;
+  line-height: 1.3em;
+  margin: 0 0 1.5em 0;
+}
+
+div.outputSelector {
+  margin: -1.3em 0 2em 0;
+}
+
+p.description {
+  margin: 0 0 0.5em 0;
+}
+
+strong {
+  font-weight: 500;
+}
+
+textarea {
+  resize: none;
+  font-family: 'Roboto', sans-serif;
+}
+
+video {
+  background: #222;
+  margin: 0 0 20px 0;
+  --width: 100%;
+  width: var(--width);
+  height: calc(var(--width) * 0.75);
+}
+
+ul {
+  margin: 0 0 0.5em 0;
+}
+
+@media screen and (max-width: 650px) {
+  .highlight {
+    font-size: 1em;
+    margin: 0 0 20px 0;
+    padding: 0.2em 1em;
+  }
+
+  h1 {
+    font-size: 24px;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  button:active {
+    background-color: darkRed;
+  }
+
+  h1 {
+    font-size: 22px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  h1 {
+    font-size: 20px;
+  }
+}
+
+

samples/encode-decode-worker/js/main.js

@@ -258,22 +258,21 @@ document.addEventListener('DOMContentLoaded', async function(event) {
           config.codec = "hvc1.2.4.L123.00"; // Main 10 profile, level 4.1, main Tier
           config.hevc = { format: "annexb" };
           config.pt = 2;
-          addToEventLog('HEVC Encoding not supported yet', 'fatal');
-          break;
+          addToEventLog('HEVC Encoding not supported', 'fatal');
+          return;
         case "VP8":
           config.codec = "vp8";
           config.pt = 3;
           break;
         case "VP9":
-           config.codec = "vp09.00.10.08";
-           config.pt = 4;
-           break;
+          config.codec = "vp09.00.10.08"; //VP9, Profile 0, level 1, bit depth 8
+          config.pt = 4;
+          break;
         case "AV1":
-           config.codec = "av01.0.08M.10.0.112.09.16.09.0" // AV1 Main Profile, level 4.0, Main tier, 10-bit content, non-monochrome, with 4:2:0 chroma subsampling
-           config.pt = 5;
-           break;
+          config.codec = "av01.0.08M.10.0.110.09" // AV1 Main Profile, level 4.0, Main tier, 10-bit content, non-monochrome, with 4:2:0 chroma subsampling
+          config.pt = 5;
+          break;
       }
-    
 
       // Transfer the readable stream to the worker, as well as other info from the user interface.
       // NOTE: transferring frameStream and reading it in the worker is more