Add H.265/VP8/VP9/AV1 samples to video decoding page.

This should be helpful for developer to test the browser implement
or compare the performance of different codecs on different platforms.

Note that the previous version of mp4box is not able to parse AV1
video codec string correctly, so to support AV1, we also need to
upgrade mp4box to version 0.5.2.

Safari doesn't support `gl.createShader` so change the default
renderer to `2d`.

All sample videos are encoded from `bbb-1920x1080-cfg06.mp4` using
ffmpeg and shaka packager.

Author: StaZhu

samples/audio-video-player/audio_video_player.html

@@ -46,10 +46,27 @@
     with the appropriate HTTP headers.
   </p>
   <div id=controls>
-    <p id=loading>Loading...</p>
-    <button disabled=true>Play</button>
+    <p>
+      Video Codec:
+      <label for="video_codec_h264">
+        <input id="video_codec_h264" type="radio" name="video_codec" value="avc" checked> H.264
+      </label>
+      <label for="video_codec_h265">
+        <input id="video_codec_h265" type="radio" name="video_codec" value="hevc"> H.265
+      </label>
+      <label for="video_codec_vp8">
+        <input id="video_codec_vp8" type="radio" name="video_codec" value="vp8"> VP8
+      </label>
+      <label for="video_codec_vp9">
+        <input id="video_codec_vp9" type="radio" name="video_codec" value="vp9"> VP9
+      </label>
+      <label for="video_codec_av1">
+        <input id="video_codec_av1" type="radio" name="video_codec" value="av1"> AV1
+      </label>
+    </p>
+    <button>Play</button>
     <label for=volume>Volume</label>
-    <input id=volume type=range value=0.8 min=0 max=1.0 step=0.01></input>
+    <input id=volume type=range value=0.8 min=0 max=1.0 step=0.01 disabled></input>
   </div>
   <canvas width=1280 height=720></canvas>
 </div>
@@ -65,35 +82,47 @@
 // Instantiate the "media worker" and start loading the files. The worker will
 // house and drive the demuxers and decoders.
 let mediaWorker = new Worker('./media_worker.js');
-mediaWorker.postMessage({command: 'initialize',
-                         audioFile: '../data/bbb_audio_aac_frag.mp4',
-                         videoFile: '../data/bbb_video_avc_frag.mp4',
-                         canvas: offscreenCanvas},
-                        {transfer: [offscreenCanvas]});
 
-// Wait for worker initialization. Use metadata to init the WebAudioController.
-let initResolver = null;
-let initDone = new Promise(resolver => (initResolver = resolver));
+let initDone = false;
+
 let audioController = new WebAudioController();
-mediaWorker.addEventListener('message', (e) => {
-  console.assert(e.data.command == 'initialize-done');
-  audioController.initialize(e.data.sampleRate, e.data.channelCount,
-                      e.data.sharedArrayBuffer);
-  initResolver();
-  initResolver = null;
-});
-await initDone;
 
 // Set up volume slider.
 $('#volume').onchange = (e) => { audioController.setVolume(e.target.value); }
 
-// Enable play now that we're loaded
 let playButton = $('button');
-let loadingElement = $('#loading');
-playButton.disabled = false;
-loadingElement.innerText = 'Ready! Click play.'
+playButton.onclick = async () => {
+  if (!initDone) {
+    document.querySelectorAll("input[name=\"video_codec\"]").forEach(input => input.disabled = true);
+    playButton.innerText = "Loading...";
+    playButton.disabled = true;
+
+    // Wait for worker initialization. Use metadata to init the WebAudioController.
+    await new Promise(resolve => {
+      const videoCodec = `${document.querySelector("input[name=\"video_codec\"]:checked").value}`;
+      mediaWorker.postMessage(
+        {
+          command: 'initialize',
+          audioFile: '../data/bbb_audio_aac_frag.mp4',
+          videoFile: `../data/bbb_video_${videoCodec}_frag.mp4`,
+          canvas: offscreenCanvas
+        },
+        { transfer: [offscreenCanvas] }
+      );
 
-playButton.onclick = () => {
+      mediaWorker.addEventListener('message', (e) => {
+        console.assert(e.data.command == 'initialize-done');
+        audioController.initialize(e.data.sampleRate, e.data.channelCount, e.data.sharedArrayBuffer);
+        initDone = true;
+        resolve();
+      });
+    });
+    playButton.innerText = "Play";
+    playButton.disabled = false;
+    $('#volume').disabled = false;
+  }
+  
+  // Enable play now that we're loaded
   if (playButton.innerText == "Play") {
     console.log("playback start");
 

samples/audio-video-player/mp4_pull_demuxer.js

@@ -42,10 +42,12 @@ export class MP4PullDemuxer extends PullDemuxerBase {
       };
     } else {
       return {
-        codec: this.videoTrack.codec,
+        // Browser doesn't support parsing full vp8 codec (eg: `vp08.00.41.08`),
+        // they only support `vp8`.
+        codec: this.videoTrack.codec.startsWith('vp08') ? 'vp8' : this.videoTrack.codec,
         displayWidth: this.videoTrack.track_width,
         displayHeight: this.videoTrack.track_height,
-        description: this._getAvcDescription(this.source.getAvccBox())
+        description: this._getDescription(this.source.getDescriptionBox())
       }
     }
   }
@@ -64,9 +66,9 @@ export class MP4PullDemuxer extends PullDemuxerBase {
     });
   }
 
-  _getAvcDescription(avccBox) {
+  _getDescription(descriptionBox) {
     const stream = new DataStream(undefined, 0, DataStream.BIG_ENDIAN);
-    avccBox.write(stream);
+    descriptionBox.write(stream);
     return new Uint8Array(stream.buffer, 8);  // Remove the box header.
   }
 
@@ -94,7 +96,6 @@ export class MP4PullDemuxer extends PullDemuxerBase {
     console.assert(this._pending_read_resolver);
     this.source.start(this._onSamples.bind(this));
     return promise;
-
   }
 
   _onSamples(samples) {
@@ -167,9 +168,14 @@ class MP4Source {
     return new Promise((resolver) => { this._info_resolver = resolver; });
   }
 
-  getAvccBox() {
+  getDescriptionBox() {
     // TODO: make sure this is coming from the right track.
-    return this.file.moov.traks[0].mdia.minf.stbl.stsd.entries[0].avcC
+    const entry = this.file.moov.traks[0].mdia.minf.stbl.stsd.entries[0];
+    const box = entry.avcC || entry.hvcC || entry.vpcC || entry.av1C;
+    if (!box) {
+      throw new Error("avcC, hvcC, vpcC, or av1C box not found!");
+    }
+    return box;
   }
 
   getAudioSpecificConfig() {

samples/data/bbb_audio_aac_frag.mp4

@@ -60,21 +60,18 @@ class MP4Demuxer {
   }
 
   // Get the appropriate `description` for a specific track. Assumes that the
-  // track is H.264 or H.265.
+  // track is H.264, H.265, VP8, VP9, or AV1.
   #description(track) {
     const trak = this.#file.getTrackById(track.id);
     for (const entry of trak.mdia.minf.stbl.stsd.entries) {
-      if (entry.avcC || entry.hvcC) {
+      const box = entry.avcC || entry.hvcC || entry.vpcC || entry.av1C;
+      if (box) {
         const stream = new DataStream(undefined, 0, DataStream.BIG_ENDIAN);
-        if (entry.avcC) {
-          entry.avcC.write(stream);
-        } else {
-          entry.hvcC.write(stream);
-        }
+        box.write(stream);
         return new Uint8Array(stream.buffer, 8);  // Remove the box header.
       }
     }
-    throw "avcC or hvcC not found";
+    throw new Error("avcC, hvcC, vpcC, or av1C box not found");
   }
 
   #onReady(info) {
@@ -83,7 +80,9 @@ class MP4Demuxer {
 
     // Generate and emit an appropriate VideoDecoderConfig.
     this.#onConfig({
-      codec: track.codec,
+      // Browser doesn't support parsing full vp8 codec (eg: `vp08.00.41.08`),
+      // they only support `vp8`.
+      codec: track.codec.startsWith('vp08') ? 'vp8' : track.codec,
       codedHeight: track.video.height,
       codedWidth: track.video.width,
       description: this.#description(track),