├── .github
    └── workflows
    │   └── pages.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── LICENSE
├── README.md
├── demo
    └── app.ts
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── global.d.ts
    ├── index.ts
    ├── media-source.ts
    ├── source-buffer.ts
    ├── style.css
    ├── time-ranges.ts
    ├── track-buffer.ts
    ├── util.ts
    ├── vendor
    │   └── mp4box.d.ts
    └── video-element.ts
├── tsconfig.json
└── vite.config.js


/.github/workflows/pages.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to GitHub Pages
 2 | 
 3 | on:
 4 |   # Runs on pushes targeting the default branch
 5 |   push:
 6 |     branches: ["main"]
 7 | 
 8 |   # Allows you to run this workflow manually from the Actions tab
 9 |   workflow_dispatch:
10 | 
11 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
12 | permissions:
13 |   contents: read
14 |   pages: write
15 |   id-token: write
16 | 
17 | # Allow one concurrent deployment
18 | concurrency:
19 |   group: "pages"
20 |   cancel-in-progress: true
21 | 
22 | jobs:
23 |   # Build job
24 |   build:
25 |     runs-on: ubuntu-latest
26 |     steps:
27 |       - name: Checkout
28 |         uses: actions/checkout@v3
29 |       - name: Setup Pages
30 |         uses: actions/configure-pages@v2
31 |       - name: Build with Vite
32 |         run: |
33 |           npm ci
34 |           npm run build
35 |       - name: Upload artifact
36 |         uses: actions/upload-pages-artifact@v1
37 |         with:
38 |           path: dist/
39 | 
40 |   # Deployment job
41 |   deploy:
42 |     environment:
43 |       name: github-pages
44 |       url: ${{ steps.deployment.outputs.page_url }}
45 |     runs-on: ubuntu-latest
46 |     needs: build
47 |     steps:
48 |       - name: Deploy to GitHub Pages
49 |         id: deployment
50 |         uses: actions/deploy-pages@v1
51 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | dist/
3 | node_modules/
4 | *.tgz
5 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | dist/
2 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "trailingComma": "none"
4 | }
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2022 Mattias Buelens
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Baby's first HTML5 <video> element
 2 | 
 3 | A basic partial re-implementation of the HTML5 <video> element, to explain the inner workings of video playback in
 4 | a browser.
 5 | 
 6 | This is purely for demonstration purposes. Don't use this in production, use a real `<video>` element instead.
 7 | 
 8 | ## Features
 9 | 
10 | - ▶️ `<baby-video>` custom element behaves like a [`<video>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
11 | - 🚰 `BabyMediaSource` class behaves like a [`MediaSource`](https://developer.mozilla.org/en-US/docs/Web/API/MediaSource), allowing adaptive streaming
12 | - ⏪ Supports reverse playback through negative `playbackRate`
13 | 
14 | ## Talks
15 | 
16 | - [Demuxed 2022: Baby's first HTML5 video element](https://youtu.be/OBhlTcllq_E?si=5OD36WN5T7OoptzB)
17 | - Demuxed 2023: The curious player of Benjamin Button: reverse video on the web
18 | 


--------------------------------------------------------------------------------
/demo/app.ts:
--------------------------------------------------------------------------------
  1 | import "media-chrome";
  2 | import {
  3 |   BabyMediaSource,
  4 |   BabySourceBuffer,
  5 |   BabyVideoElement
  6 | } from "../src/index";
  7 | import { TimeRanges } from "../src/time-ranges";
  8 | import { waitForEvent } from "../src/util";
  9 | 
 10 | const video = document.querySelector<BabyVideoElement>("baby-video")!;
 11 | video.addEventListener("loadedmetadata", logEvent);
 12 | video.addEventListener("loadeddata", logEvent);
 13 | video.addEventListener("canplay", logEvent);
 14 | video.addEventListener("canplaythrough", logEvent);
 15 | video.addEventListener("waiting", logEvent);
 16 | video.addEventListener("play", logEvent);
 17 | video.addEventListener("pause", logEvent);
 18 | video.addEventListener("playing", logEvent);
 19 | // video.addEventListener("timeupdate", logEvent);
 20 | video.addEventListener("durationchange", logEvent);
 21 | video.addEventListener("ratechange", logEvent);
 22 | video.addEventListener("seeking", logEvent);
 23 | video.addEventListener("seeked", logEvent);
 24 | video.addEventListener("progress", logEvent);
 25 | video.addEventListener("resize", logEvent);
 26 | video.addEventListener("ended", logEvent);
 27 | 
 28 | const streamDuration = 634.56;
 29 | 
 30 | const mediaSource = new BabyMediaSource();
 31 | video.srcObject = mediaSource;
 32 | if (mediaSource.readyState !== "open") {
 33 |   await waitForEvent(mediaSource, "sourceopen");
 34 | }
 35 | mediaSource.duration = streamDuration;
 36 | const videoSourceBuffer = mediaSource.addSourceBuffer(
 37 |   'video/mp4; codecs="avc1.640028"'
 38 | );
 39 | const audioSourceBuffer = mediaSource.addSourceBuffer(
 40 |   'audio/mp4; codecs="mp4a.40.5"'
 41 | );
 42 | const videoInitSegmentURL =
 43 |   "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps_1920x1080_8000k/bbb_30fps_1920x1080_8000k_0.m4v";
 44 | const audioInitSegmentURL =
 45 |   "https://dash.akamaized.net/akamai/bbb_30fps/bbb_a64k/bbb_a64k_0.m4a";
 46 | 
 47 | AbortSignal.prototype.throwIfAborted ??= function throwIfAborted(
 48 |   this: AbortSignal
 49 | ) {
 50 |   if (this.aborted) throw this.reason;
 51 | };
 52 | 
 53 | async function appendSegments(
 54 |   sourceBuffer: BabySourceBuffer,
 55 |   segmentURLs: string[]
 56 | ) {
 57 |   for (const segmentURL of segmentURLs) {
 58 |     const segmentData = await (await fetch(segmentURL)).arrayBuffer();
 59 |     sourceBuffer.appendBuffer(segmentData);
 60 |     await waitForEvent(sourceBuffer, "updateend");
 61 |   }
 62 | }
 63 | 
 64 | await Promise.all([
 65 |   appendSegments(videoSourceBuffer, [videoInitSegmentURL]),
 66 |   appendSegments(audioSourceBuffer, [audioInitSegmentURL])
 67 | ]);
 68 | 
 69 | interface Segment {
 70 |   url: string;
 71 |   startTime: number;
 72 |   endTime: number;
 73 |   isFirst: boolean;
 74 |   isLast: boolean;
 75 | }
 76 | 
 77 | function getSegmentForTime(
 78 |   templateUrl: string,
 79 |   segmentDuration: number,
 80 |   time: number
 81 | ): Segment | undefined {
 82 |   const lastSegmentIndex = Math.ceil(streamDuration / segmentDuration) - 1;
 83 |   const segmentIndex = Math.max(
 84 |     0,
 85 |     Math.min(lastSegmentIndex, Math.floor(time / segmentDuration))
 86 |   );
 87 |   if (segmentIndex < 0) {
 88 |     return undefined;
 89 |   }
 90 |   const url = templateUrl.replace(/%INDEX%/, `${segmentIndex + 1}`);
 91 |   return {
 92 |     url,
 93 |     startTime: segmentIndex * segmentDuration,
 94 |     endTime: (segmentIndex + 1) * segmentDuration,
 95 |     isFirst: segmentIndex === 0,
 96 |     isLast: segmentIndex === lastSegmentIndex
 97 |   };
 98 | }
 99 | 
100 | function getVideoSegmentForTime(time: number): Segment | undefined {
101 |   return getSegmentForTime(
102 |     "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps_1920x1080_8000k/bbb_30fps_1920x1080_8000k_%INDEX%.m4v",
103 |     120 / 30,
104 |     time
105 |   );
106 | }
107 | 
108 | function getAudioSegmentForTime(time: number): Segment | undefined {
109 |   return getSegmentForTime(
110 |     "https://dash.akamaized.net/akamai/bbb_30fps/bbb_a64k/bbb_a64k_%INDEX%.m4a",
111 |     192512 / 48000,
112 |     time
113 |   );
114 | }
115 | 
116 | const forwardBufferSize = 30;
117 | const backwardBufferSize = 10;
118 | 
119 | let pendingBufferLoop: Promise<void> = Promise.resolve();
120 | 
121 | async function trackBufferLoop(
122 |   sourceBuffer: BabySourceBuffer,
123 |   segmentForTime: (time: number) => Segment | undefined,
124 |   signal: AbortSignal
125 | ) {
126 |   while (true) {
127 |     signal.throwIfAborted();
128 |     // Check buffer health
129 |     while (true) {
130 |       const currentRange = sourceBuffer.buffered.find(video.currentTime);
131 |       const forward = video.playbackRate >= 0;
132 |       if (!currentRange) {
133 |         // No buffer, need new segment immediately
134 |         break;
135 |       }
136 |       if (forward) {
137 |         if (currentRange[1] - video.currentTime <= 20) {
138 |           // Not enough buffer ahead of current time
139 |           break;
140 |         }
141 |       } else {
142 |         if (video.currentTime - currentRange[0] <= 20) {
143 |           // Not enough buffer behind current time
144 |           break;
145 |         }
146 |       }
147 |       // Still enough buffer, wait for playback to progress
148 |       await waitForEvent(video, ["timeupdate", "ratechange"], signal);
149 |     }
150 |     // Find next segment
151 |     const currentRange = sourceBuffer.buffered.find(video.currentTime);
152 |     const forward = video.playbackRate >= 0;
153 |     const nextTime = currentRange
154 |       ? forward
155 |         ? currentRange[1]
156 |         : currentRange[0] - 0.001
157 |       : video.currentTime;
158 |     const nextSegment = segmentForTime(nextTime)!;
159 |     // Remove old buffer before/after current time
160 |     const retainStart =
161 |       video.currentTime - (forward ? backwardBufferSize : forwardBufferSize);
162 |     const retainEnd =
163 |       video.currentTime + (forward ? forwardBufferSize : backwardBufferSize);
164 |     const oldBuffered = sourceBuffer.buffered.subtract(
165 |       new TimeRanges([[retainStart, retainEnd]])
166 |     );
167 |     for (let i = 0; i < oldBuffered.length; i++) {
168 |       sourceBuffer.remove(oldBuffered.start(i), oldBuffered.end(i));
169 |       await waitForEvent(sourceBuffer, "updateend");
170 |     }
171 |     // Append next segment
172 |     const segmentData = await (
173 |       await fetch(nextSegment.url, { signal })
174 |     ).arrayBuffer();
175 |     sourceBuffer.appendBuffer(segmentData);
176 |     await waitForEvent(sourceBuffer, "updateend");
177 |     // Check if we're done buffering
178 |     if (forward) {
179 |       if (nextSegment.isLast) {
180 |         return; // Stop buffering until next seek
181 |       }
182 |     } else {
183 |       if (nextSegment.isFirst) {
184 |         return; // Stop buffering until next seek
185 |       }
186 |     }
187 |   }
188 | }
189 | 
190 | async function bufferLoop(signal: AbortSignal) {
191 |   await pendingBufferLoop;
192 |   await Promise.allSettled([
193 |     trackBufferLoop(videoSourceBuffer, getVideoSegmentForTime, signal),
194 |     trackBufferLoop(audioSourceBuffer, getAudioSegmentForTime, signal)
195 |   ]);
196 |   signal.throwIfAborted();
197 |   // All tracks are done buffering until the last segment
198 |   const forward = video.playbackRate >= 0;
199 |   if (forward) {
200 |     mediaSource.endOfStream();
201 |   }
202 | }
203 | 
204 | let bufferAbortController: AbortController = new AbortController();
205 | 
206 | function restartBuffering() {
207 |   bufferAbortController.abort();
208 |   bufferAbortController = new AbortController();
209 |   pendingBufferLoop = bufferLoop(bufferAbortController.signal).catch(() => {});
210 | }
211 | 
212 | video.addEventListener("seeking", restartBuffering);
213 | video.addEventListener("ratechange", restartBuffering);
214 | restartBuffering();
215 | 
216 | function logEvent(event: Event) {
217 |   console.log(`${event.type} @ ${video.currentTime}`);
218 | }
219 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Baby's first HTML5 &lt;video&gt; element</title>
 7 |     <script type="module" src="./src/index.ts"></script>
 8 |     <script type="module" src="./demo/app.ts"></script>
 9 |   </head>
10 |   <body>
11 |     <media-controller
12 |       style="max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9"
13 |     >
14 |       <baby-video slot="media"></baby-video>
15 |       <media-loading-indicator
16 |         slot="centered-chrome"
17 |         noautohide
18 |       ></media-loading-indicator>
19 |       <media-control-bar>
20 |         <media-play-button></media-play-button>
21 |         <media-mute-button></media-mute-button>
22 |         <media-volume-range></media-volume-range>
23 |         <media-time-display showduration></media-time-display>
24 |         <media-time-range></media-time-range>
25 |         <media-playback-rate-button rates="-1 1"></media-playback-rate-button>
26 |         <media-fullscreen-button></media-fullscreen-button>
27 |       </media-control-bar>
28 |     </media-controller>
29 | 
30 |     <p>
31 |       <a href="https://github.com/MattiasBuelens/baby-video"
32 |         >Source code on GitHub</a
33 |       >
34 |     </p>
35 | 
36 |     <style>
37 |       media-mute-button + media-volume-range {
38 |         width: 0;
39 |         overflow: hidden;
40 |         padding-left: 0;
41 |         padding-right: 0;
42 | 
43 |         /* Set the internal width so it reveals, not grows */
44 |         --media-range-track-width: 70px;
45 |         transition: width 0.2s ease-in;
46 |       }
47 | 
48 |       /* Expand volume control when hovered or focused */
49 |       media-mute-button:is(:hover, :focus, :focus-within) + media-volume-range,
50 |       media-mute-button + media-volume-range:is(:hover, :focus, :focus-within) {
51 |         width: var(--media-range-track-width);
52 |       }
53 |     </style>
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "baby-video",
  3 |   "version": "0.0.1",
  4 |   "lockfileVersion": 3,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "name": "baby-video",
  9 |       "version": "0.0.1",
 10 |       "license": "MIT",
 11 |       "dependencies": {
 12 |         "@types/dom-webcodecs": "^0.1.13",
 13 |         "mp4box": "^0.5.3"
 14 |       },
 15 |       "devDependencies": {
 16 |         "media-chrome": "^4.2.3",
 17 |         "prettier": "^3.3.3",
 18 |         "typescript": "^5.6.3",
 19 |         "vite": "^5.4.10"
 20 |       }
 21 |     },
 22 |     "node_modules/@esbuild/aix-ppc64": {
 23 |       "version": "0.21.5",
 24 |       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
 25 |       "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
 26 |       "cpu": [
 27 |         "ppc64"
 28 |       ],
 29 |       "dev": true,
 30 |       "license": "MIT",
 31 |       "optional": true,
 32 |       "os": [
 33 |         "aix"
 34 |       ],
 35 |       "engines": {
 36 |         "node": ">=12"
 37 |       }
 38 |     },
 39 |     "node_modules/@esbuild/android-arm": {
 40 |       "version": "0.21.5",
 41 |       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
 42 |       "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
 43 |       "cpu": [
 44 |         "arm"
 45 |       ],
 46 |       "dev": true,
 47 |       "license": "MIT",
 48 |       "optional": true,
 49 |       "os": [
 50 |         "android"
 51 |       ],
 52 |       "engines": {
 53 |         "node": ">=12"
 54 |       }
 55 |     },
 56 |     "node_modules/@esbuild/android-arm64": {
 57 |       "version": "0.21.5",
 58 |       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
 59 |       "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
 60 |       "cpu": [
 61 |         "arm64"
 62 |       ],
 63 |       "dev": true,
 64 |       "license": "MIT",
 65 |       "optional": true,
 66 |       "os": [
 67 |         "android"
 68 |       ],
 69 |       "engines": {
 70 |         "node": ">=12"
 71 |       }
 72 |     },
 73 |     "node_modules/@esbuild/android-x64": {
 74 |       "version": "0.21.5",
 75 |       "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
 76 |       "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
 77 |       "cpu": [
 78 |         "x64"
 79 |       ],
 80 |       "dev": true,
 81 |       "license": "MIT",
 82 |       "optional": true,
 83 |       "os": [
 84 |         "android"
 85 |       ],
 86 |       "engines": {
 87 |         "node": ">=12"
 88 |       }
 89 |     },
 90 |     "node_modules/@esbuild/darwin-arm64": {
 91 |       "version": "0.21.5",
 92 |       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
 93 |       "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
 94 |       "cpu": [
 95 |         "arm64"
 96 |       ],
 97 |       "dev": true,
 98 |       "license": "MIT",
 99 |       "optional": true,
100 |       "os": [
101 |         "darwin"
102 |       ],
103 |       "engines": {
104 |         "node": ">=12"
105 |       }
106 |     },
107 |     "node_modules/@esbuild/darwin-x64": {
108 |       "version": "0.21.5",
109 |       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
110 |       "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
111 |       "cpu": [
112 |         "x64"
113 |       ],
114 |       "dev": true,
115 |       "license": "MIT",
116 |       "optional": true,
117 |       "os": [
118 |         "darwin"
119 |       ],
120 |       "engines": {
121 |         "node": ">=12"
122 |       }
123 |     },
124 |     "node_modules/@esbuild/freebsd-arm64": {
125 |       "version": "0.21.5",
126 |       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
127 |       "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
128 |       "cpu": [
129 |         "arm64"
130 |       ],
131 |       "dev": true,
132 |       "license": "MIT",
133 |       "optional": true,
134 |       "os": [
135 |         "freebsd"
136 |       ],
137 |       "engines": {
138 |         "node": ">=12"
139 |       }
140 |     },
141 |     "node_modules/@esbuild/freebsd-x64": {
142 |       "version": "0.21.5",
143 |       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
144 |       "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
145 |       "cpu": [
146 |         "x64"
147 |       ],
148 |       "dev": true,
149 |       "license": "MIT",
150 |       "optional": true,
151 |       "os": [
152 |         "freebsd"
153 |       ],
154 |       "engines": {
155 |         "node": ">=12"
156 |       }
157 |     },
158 |     "node_modules/@esbuild/linux-arm": {
159 |       "version": "0.21.5",
160 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
161 |       "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
162 |       "cpu": [
163 |         "arm"
164 |       ],
165 |       "dev": true,
166 |       "license": "MIT",
167 |       "optional": true,
168 |       "os": [
169 |         "linux"
170 |       ],
171 |       "engines": {
172 |         "node": ">=12"
173 |       }
174 |     },
175 |     "node_modules/@esbuild/linux-arm64": {
176 |       "version": "0.21.5",
177 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
178 |       "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
179 |       "cpu": [
180 |         "arm64"
181 |       ],
182 |       "dev": true,
183 |       "license": "MIT",
184 |       "optional": true,
185 |       "os": [
186 |         "linux"
187 |       ],
188 |       "engines": {
189 |         "node": ">=12"
190 |       }
191 |     },
192 |     "node_modules/@esbuild/linux-ia32": {
193 |       "version": "0.21.5",
194 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
195 |       "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
196 |       "cpu": [
197 |         "ia32"
198 |       ],
199 |       "dev": true,
200 |       "license": "MIT",
201 |       "optional": true,
202 |       "os": [
203 |         "linux"
204 |       ],
205 |       "engines": {
206 |         "node": ">=12"
207 |       }
208 |     },
209 |     "node_modules/@esbuild/linux-loong64": {
210 |       "version": "0.21.5",
211 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
212 |       "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
213 |       "cpu": [
214 |         "loong64"
215 |       ],
216 |       "dev": true,
217 |       "license": "MIT",
218 |       "optional": true,
219 |       "os": [
220 |         "linux"
221 |       ],
222 |       "engines": {
223 |         "node": ">=12"
224 |       }
225 |     },
226 |     "node_modules/@esbuild/linux-mips64el": {
227 |       "version": "0.21.5",
228 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
229 |       "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
230 |       "cpu": [
231 |         "mips64el"
232 |       ],
233 |       "dev": true,
234 |       "license": "MIT",
235 |       "optional": true,
236 |       "os": [
237 |         "linux"
238 |       ],
239 |       "engines": {
240 |         "node": ">=12"
241 |       }
242 |     },
243 |     "node_modules/@esbuild/linux-ppc64": {
244 |       "version": "0.21.5",
245 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
246 |       "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
247 |       "cpu": [
248 |         "ppc64"
249 |       ],
250 |       "dev": true,
251 |       "license": "MIT",
252 |       "optional": true,
253 |       "os": [
254 |         "linux"
255 |       ],
256 |       "engines": {
257 |         "node": ">=12"
258 |       }
259 |     },
260 |     "node_modules/@esbuild/linux-riscv64": {
261 |       "version": "0.21.5",
262 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
263 |       "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
264 |       "cpu": [
265 |         "riscv64"
266 |       ],
267 |       "dev": true,
268 |       "license": "MIT",
269 |       "optional": true,
270 |       "os": [
271 |         "linux"
272 |       ],
273 |       "engines": {
274 |         "node": ">=12"
275 |       }
276 |     },
277 |     "node_modules/@esbuild/linux-s390x": {
278 |       "version": "0.21.5",
279 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
280 |       "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
281 |       "cpu": [
282 |         "s390x"
283 |       ],
284 |       "dev": true,
285 |       "license": "MIT",
286 |       "optional": true,
287 |       "os": [
288 |         "linux"
289 |       ],
290 |       "engines": {
291 |         "node": ">=12"
292 |       }
293 |     },
294 |     "node_modules/@esbuild/linux-x64": {
295 |       "version": "0.21.5",
296 |       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
297 |       "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
298 |       "cpu": [
299 |         "x64"
300 |       ],
301 |       "dev": true,
302 |       "license": "MIT",
303 |       "optional": true,
304 |       "os": [
305 |         "linux"
306 |       ],
307 |       "engines": {
308 |         "node": ">=12"
309 |       }
310 |     },
311 |     "node_modules/@esbuild/netbsd-x64": {
312 |       "version": "0.21.5",
313 |       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
314 |       "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
315 |       "cpu": [
316 |         "x64"
317 |       ],
318 |       "dev": true,
319 |       "license": "MIT",
320 |       "optional": true,
321 |       "os": [
322 |         "netbsd"
323 |       ],
324 |       "engines": {
325 |         "node": ">=12"
326 |       }
327 |     },
328 |     "node_modules/@esbuild/openbsd-x64": {
329 |       "version": "0.21.5",
330 |       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
331 |       "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
332 |       "cpu": [
333 |         "x64"
334 |       ],
335 |       "dev": true,
336 |       "license": "MIT",
337 |       "optional": true,
338 |       "os": [
339 |         "openbsd"
340 |       ],
341 |       "engines": {
342 |         "node": ">=12"
343 |       }
344 |     },
345 |     "node_modules/@esbuild/sunos-x64": {
346 |       "version": "0.21.5",
347 |       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
348 |       "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
349 |       "cpu": [
350 |         "x64"
351 |       ],
352 |       "dev": true,
353 |       "license": "MIT",
354 |       "optional": true,
355 |       "os": [
356 |         "sunos"
357 |       ],
358 |       "engines": {
359 |         "node": ">=12"
360 |       }
361 |     },
362 |     "node_modules/@esbuild/win32-arm64": {
363 |       "version": "0.21.5",
364 |       "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
365 |       "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
366 |       "cpu": [
367 |         "arm64"
368 |       ],
369 |       "dev": true,
370 |       "license": "MIT",
371 |       "optional": true,
372 |       "os": [
373 |         "win32"
374 |       ],
375 |       "engines": {
376 |         "node": ">=12"
377 |       }
378 |     },
379 |     "node_modules/@esbuild/win32-ia32": {
380 |       "version": "0.21.5",
381 |       "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
382 |       "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
383 |       "cpu": [
384 |         "ia32"
385 |       ],
386 |       "dev": true,
387 |       "license": "MIT",
388 |       "optional": true,
389 |       "os": [
390 |         "win32"
391 |       ],
392 |       "engines": {
393 |         "node": ">=12"
394 |       }
395 |     },
396 |     "node_modules/@esbuild/win32-x64": {
397 |       "version": "0.21.5",
398 |       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
399 |       "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
400 |       "cpu": [
401 |         "x64"
402 |       ],
403 |       "dev": true,
404 |       "license": "MIT",
405 |       "optional": true,
406 |       "os": [
407 |         "win32"
408 |       ],
409 |       "engines": {
410 |         "node": ">=12"
411 |       }
412 |     },
413 |     "node_modules/@rollup/rollup-android-arm-eabi": {
414 |       "version": "4.24.4",
415 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz",
416 |       "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==",
417 |       "cpu": [
418 |         "arm"
419 |       ],
420 |       "dev": true,
421 |       "license": "MIT",
422 |       "optional": true,
423 |       "os": [
424 |         "android"
425 |       ]
426 |     },
427 |     "node_modules/@rollup/rollup-android-arm64": {
428 |       "version": "4.24.4",
429 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz",
430 |       "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==",
431 |       "cpu": [
432 |         "arm64"
433 |       ],
434 |       "dev": true,
435 |       "license": "MIT",
436 |       "optional": true,
437 |       "os": [
438 |         "android"
439 |       ]
440 |     },
441 |     "node_modules/@rollup/rollup-darwin-arm64": {
442 |       "version": "4.24.4",
443 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz",
444 |       "integrity": "sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==",
445 |       "cpu": [
446 |         "arm64"
447 |       ],
448 |       "dev": true,
449 |       "license": "MIT",
450 |       "optional": true,
451 |       "os": [
452 |         "darwin"
453 |       ]
454 |     },
455 |     "node_modules/@rollup/rollup-darwin-x64": {
456 |       "version": "4.24.4",
457 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz",
458 |       "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==",
459 |       "cpu": [
460 |         "x64"
461 |       ],
462 |       "dev": true,
463 |       "license": "MIT",
464 |       "optional": true,
465 |       "os": [
466 |         "darwin"
467 |       ]
468 |     },
469 |     "node_modules/@rollup/rollup-freebsd-arm64": {
470 |       "version": "4.24.4",
471 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz",
472 |       "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==",
473 |       "cpu": [
474 |         "arm64"
475 |       ],
476 |       "dev": true,
477 |       "license": "MIT",
478 |       "optional": true,
479 |       "os": [
480 |         "freebsd"
481 |       ]
482 |     },
483 |     "node_modules/@rollup/rollup-freebsd-x64": {
484 |       "version": "4.24.4",
485 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz",
486 |       "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==",
487 |       "cpu": [
488 |         "x64"
489 |       ],
490 |       "dev": true,
491 |       "license": "MIT",
492 |       "optional": true,
493 |       "os": [
494 |         "freebsd"
495 |       ]
496 |     },
497 |     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
498 |       "version": "4.24.4",
499 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz",
500 |       "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==",
501 |       "cpu": [
502 |         "arm"
503 |       ],
504 |       "dev": true,
505 |       "license": "MIT",
506 |       "optional": true,
507 |       "os": [
508 |         "linux"
509 |       ]
510 |     },
511 |     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
512 |       "version": "4.24.4",
513 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz",
514 |       "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==",
515 |       "cpu": [
516 |         "arm"
517 |       ],
518 |       "dev": true,
519 |       "license": "MIT",
520 |       "optional": true,
521 |       "os": [
522 |         "linux"
523 |       ]
524 |     },
525 |     "node_modules/@rollup/rollup-linux-arm64-gnu": {
526 |       "version": "4.24.4",
527 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz",
528 |       "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==",
529 |       "cpu": [
530 |         "arm64"
531 |       ],
532 |       "dev": true,
533 |       "license": "MIT",
534 |       "optional": true,
535 |       "os": [
536 |         "linux"
537 |       ]
538 |     },
539 |     "node_modules/@rollup/rollup-linux-arm64-musl": {
540 |       "version": "4.24.4",
541 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz",
542 |       "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==",
543 |       "cpu": [
544 |         "arm64"
545 |       ],
546 |       "dev": true,
547 |       "license": "MIT",
548 |       "optional": true,
549 |       "os": [
550 |         "linux"
551 |       ]
552 |     },
553 |     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
554 |       "version": "4.24.4",
555 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz",
556 |       "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==",
557 |       "cpu": [
558 |         "ppc64"
559 |       ],
560 |       "dev": true,
561 |       "license": "MIT",
562 |       "optional": true,
563 |       "os": [
564 |         "linux"
565 |       ]
566 |     },
567 |     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
568 |       "version": "4.24.4",
569 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz",
570 |       "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==",
571 |       "cpu": [
572 |         "riscv64"
573 |       ],
574 |       "dev": true,
575 |       "license": "MIT",
576 |       "optional": true,
577 |       "os": [
578 |         "linux"
579 |       ]
580 |     },
581 |     "node_modules/@rollup/rollup-linux-s390x-gnu": {
582 |       "version": "4.24.4",
583 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz",
584 |       "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==",
585 |       "cpu": [
586 |         "s390x"
587 |       ],
588 |       "dev": true,
589 |       "license": "MIT",
590 |       "optional": true,
591 |       "os": [
592 |         "linux"
593 |       ]
594 |     },
595 |     "node_modules/@rollup/rollup-linux-x64-gnu": {
596 |       "version": "4.24.4",
597 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz",
598 |       "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==",
599 |       "cpu": [
600 |         "x64"
601 |       ],
602 |       "dev": true,
603 |       "license": "MIT",
604 |       "optional": true,
605 |       "os": [
606 |         "linux"
607 |       ]
608 |     },
609 |     "node_modules/@rollup/rollup-linux-x64-musl": {
610 |       "version": "4.24.4",
611 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz",
612 |       "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==",
613 |       "cpu": [
614 |         "x64"
615 |       ],
616 |       "dev": true,
617 |       "license": "MIT",
618 |       "optional": true,
619 |       "os": [
620 |         "linux"
621 |       ]
622 |     },
623 |     "node_modules/@rollup/rollup-win32-arm64-msvc": {
624 |       "version": "4.24.4",
625 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz",
626 |       "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==",
627 |       "cpu": [
628 |         "arm64"
629 |       ],
630 |       "dev": true,
631 |       "license": "MIT",
632 |       "optional": true,
633 |       "os": [
634 |         "win32"
635 |       ]
636 |     },
637 |     "node_modules/@rollup/rollup-win32-ia32-msvc": {
638 |       "version": "4.24.4",
639 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz",
640 |       "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==",
641 |       "cpu": [
642 |         "ia32"
643 |       ],
644 |       "dev": true,
645 |       "license": "MIT",
646 |       "optional": true,
647 |       "os": [
648 |         "win32"
649 |       ]
650 |     },
651 |     "node_modules/@rollup/rollup-win32-x64-msvc": {
652 |       "version": "4.24.4",
653 |       "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz",
654 |       "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==",
655 |       "cpu": [
656 |         "x64"
657 |       ],
658 |       "dev": true,
659 |       "license": "MIT",
660 |       "optional": true,
661 |       "os": [
662 |         "win32"
663 |       ]
664 |     },
665 |     "node_modules/@types/dom-webcodecs": {
666 |       "version": "0.1.13",
667 |       "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.13.tgz",
668 |       "integrity": "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ==",
669 |       "license": "MIT"
670 |     },
671 |     "node_modules/@types/estree": {
672 |       "version": "1.0.6",
673 |       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
674 |       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
675 |       "dev": true,
676 |       "license": "MIT"
677 |     },
678 |     "node_modules/esbuild": {
679 |       "version": "0.21.5",
680 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
681 |       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
682 |       "dev": true,
683 |       "hasInstallScript": true,
684 |       "license": "MIT",
685 |       "bin": {
686 |         "esbuild": "bin/esbuild"
687 |       },
688 |       "engines": {
689 |         "node": ">=12"
690 |       },
691 |       "optionalDependencies": {
692 |         "@esbuild/aix-ppc64": "0.21.5",
693 |         "@esbuild/android-arm": "0.21.5",
694 |         "@esbuild/android-arm64": "0.21.5",
695 |         "@esbuild/android-x64": "0.21.5",
696 |         "@esbuild/darwin-arm64": "0.21.5",
697 |         "@esbuild/darwin-x64": "0.21.5",
698 |         "@esbuild/freebsd-arm64": "0.21.5",
699 |         "@esbuild/freebsd-x64": "0.21.5",
700 |         "@esbuild/linux-arm": "0.21.5",
701 |         "@esbuild/linux-arm64": "0.21.5",
702 |         "@esbuild/linux-ia32": "0.21.5",
703 |         "@esbuild/linux-loong64": "0.21.5",
704 |         "@esbuild/linux-mips64el": "0.21.5",
705 |         "@esbuild/linux-ppc64": "0.21.5",
706 |         "@esbuild/linux-riscv64": "0.21.5",
707 |         "@esbuild/linux-s390x": "0.21.5",
708 |         "@esbuild/linux-x64": "0.21.5",
709 |         "@esbuild/netbsd-x64": "0.21.5",
710 |         "@esbuild/openbsd-x64": "0.21.5",
711 |         "@esbuild/sunos-x64": "0.21.5",
712 |         "@esbuild/win32-arm64": "0.21.5",
713 |         "@esbuild/win32-ia32": "0.21.5",
714 |         "@esbuild/win32-x64": "0.21.5"
715 |       }
716 |     },
717 |     "node_modules/fsevents": {
718 |       "version": "2.3.3",
719 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
720 |       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
721 |       "dev": true,
722 |       "hasInstallScript": true,
723 |       "license": "MIT",
724 |       "optional": true,
725 |       "os": [
726 |         "darwin"
727 |       ],
728 |       "engines": {
729 |         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
730 |       }
731 |     },
732 |     "node_modules/media-chrome": {
733 |       "version": "4.2.3",
734 |       "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.2.3.tgz",
735 |       "integrity": "sha512-gzwFy2b+RLsEtnPzUzqzf2L5XkaTLQr8POOyLOcoebWSAWg31cPy2vfXNiUnd93sc5IxwJ8OAwkKxnaJNZ8Gjg==",
736 |       "dev": true,
737 |       "license": "MIT"
738 |     },
739 |     "node_modules/mp4box": {
740 |       "version": "0.5.3",
741 |       "resolved": "https://registry.npmjs.org/mp4box/-/mp4box-0.5.3.tgz",
742 |       "integrity": "sha512-RIvyFZdPDIg3+mL6vUdPBSyQRrEfKO3ryAeJ4xJJV7HBHQUH3KfLlZRzfSpBHCd/HqR63HfbrWQI/CwXDvYENQ==",
743 |       "license": "BSD-3-Clause"
744 |     },
745 |     "node_modules/nanoid": {
746 |       "version": "3.3.7",
747 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
748 |       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
749 |       "dev": true,
750 |       "funding": [
751 |         {
752 |           "type": "github",
753 |           "url": "https://github.com/sponsors/ai"
754 |         }
755 |       ],
756 |       "license": "MIT",
757 |       "bin": {
758 |         "nanoid": "bin/nanoid.cjs"
759 |       },
760 |       "engines": {
761 |         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
762 |       }
763 |     },
764 |     "node_modules/picocolors": {
765 |       "version": "1.1.1",
766 |       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
767 |       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
768 |       "dev": true,
769 |       "license": "ISC"
770 |     },
771 |     "node_modules/postcss": {
772 |       "version": "8.4.47",
773 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
774 |       "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
775 |       "dev": true,
776 |       "funding": [
777 |         {
778 |           "type": "opencollective",
779 |           "url": "https://opencollective.com/postcss/"
780 |         },
781 |         {
782 |           "type": "tidelift",
783 |           "url": "https://tidelift.com/funding/github/npm/postcss"
784 |         },
785 |         {
786 |           "type": "github",
787 |           "url": "https://github.com/sponsors/ai"
788 |         }
789 |       ],
790 |       "license": "MIT",
791 |       "dependencies": {
792 |         "nanoid": "^3.3.7",
793 |         "picocolors": "^1.1.0",
794 |         "source-map-js": "^1.2.1"
795 |       },
796 |       "engines": {
797 |         "node": "^10 || ^12 || >=14"
798 |       }
799 |     },
800 |     "node_modules/prettier": {
801 |       "version": "3.3.3",
802 |       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
803 |       "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
804 |       "dev": true,
805 |       "license": "MIT",
806 |       "bin": {
807 |         "prettier": "bin/prettier.cjs"
808 |       },
809 |       "engines": {
810 |         "node": ">=14"
811 |       },
812 |       "funding": {
813 |         "url": "https://github.com/prettier/prettier?sponsor=1"
814 |       }
815 |     },
816 |     "node_modules/rollup": {
817 |       "version": "4.24.4",
818 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz",
819 |       "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==",
820 |       "dev": true,
821 |       "license": "MIT",
822 |       "dependencies": {
823 |         "@types/estree": "1.0.6"
824 |       },
825 |       "bin": {
826 |         "rollup": "dist/bin/rollup"
827 |       },
828 |       "engines": {
829 |         "node": ">=18.0.0",
830 |         "npm": ">=8.0.0"
831 |       },
832 |       "optionalDependencies": {
833 |         "@rollup/rollup-android-arm-eabi": "4.24.4",
834 |         "@rollup/rollup-android-arm64": "4.24.4",
835 |         "@rollup/rollup-darwin-arm64": "4.24.4",
836 |         "@rollup/rollup-darwin-x64": "4.24.4",
837 |         "@rollup/rollup-freebsd-arm64": "4.24.4",
838 |         "@rollup/rollup-freebsd-x64": "4.24.4",
839 |         "@rollup/rollup-linux-arm-gnueabihf": "4.24.4",
840 |         "@rollup/rollup-linux-arm-musleabihf": "4.24.4",
841 |         "@rollup/rollup-linux-arm64-gnu": "4.24.4",
842 |         "@rollup/rollup-linux-arm64-musl": "4.24.4",
843 |         "@rollup/rollup-linux-powerpc64le-gnu": "4.24.4",
844 |         "@rollup/rollup-linux-riscv64-gnu": "4.24.4",
845 |         "@rollup/rollup-linux-s390x-gnu": "4.24.4",
846 |         "@rollup/rollup-linux-x64-gnu": "4.24.4",
847 |         "@rollup/rollup-linux-x64-musl": "4.24.4",
848 |         "@rollup/rollup-win32-arm64-msvc": "4.24.4",
849 |         "@rollup/rollup-win32-ia32-msvc": "4.24.4",
850 |         "@rollup/rollup-win32-x64-msvc": "4.24.4",
851 |         "fsevents": "~2.3.2"
852 |       }
853 |     },
854 |     "node_modules/source-map-js": {
855 |       "version": "1.2.1",
856 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
857 |       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
858 |       "dev": true,
859 |       "license": "BSD-3-Clause",
860 |       "engines": {
861 |         "node": ">=0.10.0"
862 |       }
863 |     },
864 |     "node_modules/typescript": {
865 |       "version": "5.6.3",
866 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
867 |       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
868 |       "dev": true,
869 |       "license": "Apache-2.0",
870 |       "bin": {
871 |         "tsc": "bin/tsc",
872 |         "tsserver": "bin/tsserver"
873 |       },
874 |       "engines": {
875 |         "node": ">=14.17"
876 |       }
877 |     },
878 |     "node_modules/vite": {
879 |       "version": "5.4.10",
880 |       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
881 |       "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
882 |       "dev": true,
883 |       "license": "MIT",
884 |       "dependencies": {
885 |         "esbuild": "^0.21.3",
886 |         "postcss": "^8.4.43",
887 |         "rollup": "^4.20.0"
888 |       },
889 |       "bin": {
890 |         "vite": "bin/vite.js"
891 |       },
892 |       "engines": {
893 |         "node": "^18.0.0 || >=20.0.0"
894 |       },
895 |       "funding": {
896 |         "url": "https://github.com/vitejs/vite?sponsor=1"
897 |       },
898 |       "optionalDependencies": {
899 |         "fsevents": "~2.3.3"
900 |       },
901 |       "peerDependencies": {
902 |         "@types/node": "^18.0.0 || >=20.0.0",
903 |         "less": "*",
904 |         "lightningcss": "^1.21.0",
905 |         "sass": "*",
906 |         "sass-embedded": "*",
907 |         "stylus": "*",
908 |         "sugarss": "*",
909 |         "terser": "^5.4.0"
910 |       },
911 |       "peerDependenciesMeta": {
912 |         "@types/node": {
913 |           "optional": true
914 |         },
915 |         "less": {
916 |           "optional": true
917 |         },
918 |         "lightningcss": {
919 |           "optional": true
920 |         },
921 |         "sass": {
922 |           "optional": true
923 |         },
924 |         "sass-embedded": {
925 |           "optional": true
926 |         },
927 |         "stylus": {
928 |           "optional": true
929 |         },
930 |         "sugarss": {
931 |           "optional": true
932 |         },
933 |         "terser": {
934 |           "optional": true
935 |         }
936 |       }
937 |     }
938 |   }
939 | }
940 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "baby-video",
 3 |   "version": "0.0.1",
 4 |   "description": "Baby's first HTML5 <video> element",
 5 |   "private": true,
 6 |   "type": "module",
 7 |   "main": "./dist/baby-video.umd.cjs",
 8 |   "module": "./dist/baby-video.js",
 9 |   "exports": {
10 |     ".": {
11 |       "import": "./dist/baby-video.js",
12 |       "require": "./dist/baby-video.umd.cjs"
13 |     }
14 |   },
15 |   "files": [
16 |     "dist"
17 |   ],
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git+https://github.com/MattiasBuelens/baby-video.git"
21 |   },
22 |   "keywords": [],
23 |   "author": "Mattias Buelens <mattias@buelens.com>",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/MattiasBuelens/baby-video/issues"
27 |   },
28 |   "homepage": "https://github.com/MattiasBuelens/baby-video#readme",
29 |   "scripts": {
30 |     "dev": "vite",
31 |     "build": "tsc && vite build",
32 |     "preview": "vite preview",
33 |     "format": "prettier --write ."
34 |   },
35 |   "devDependencies": {
36 |     "media-chrome": "^4.2.3",
37 |     "prettier": "^3.3.3",
38 |     "typescript": "^5.6.3",
39 |     "vite": "^5.4.10"
40 |   },
41 |   "dependencies": {
42 |     "@types/dom-webcodecs": "^0.1.13",
43 |     "mp4box": "^0.5.3"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.css?inline" {
2 |   const stylesheet: string;
3 |   export default stylesheet;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { BabyVideoElement } from "./video-element";
2 | export { BabyMediaSource } from "./media-source";
3 | export { BabySourceBuffer } from "./source-buffer";
4 | 


--------------------------------------------------------------------------------
/src/media-source.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   BabySourceBuffer,
  3 |   getAudioTrackBuffer,
  4 |   getVideoTrackBuffer
  5 | } from "./source-buffer";
  6 | import {
  7 |   BabyVideoElement,
  8 |   MediaReadyState,
  9 |   notifyEndOfStream,
 10 |   updateDuration,
 11 |   updateReadyState
 12 | } from "./video-element";
 13 | import { queueTask } from "./util";
 14 | import { AudioTrackBuffer, VideoTrackBuffer } from "./track-buffer";
 15 | import { setEndTimeOnLastRange, TimeRanges } from "./time-ranges";
 16 | 
 17 | export type MediaSourceReadyState = "closed" | "ended" | "open";
 18 | 
 19 | export let attachToMediaElement: (
 20 |   mediaSource: BabyMediaSource,
 21 |   mediaElement: BabyVideoElement
 22 | ) => void;
 23 | export let detachFromMediaElement: (mediaSource: BabyMediaSource) => void;
 24 | export let durationChange: (
 25 |   mediaSource: BabyMediaSource,
 26 |   newDuration: number
 27 | ) => void;
 28 | export let endOfStream: (
 29 |   mediaSource: BabyMediaSource,
 30 |   error?: "network" | "decode"
 31 | ) => void;
 32 | export let getMediaElement: (
 33 |   mediaSource: BabyMediaSource
 34 | ) => BabyVideoElement | undefined;
 35 | export let getBuffered: (mediaSource: BabyMediaSource) => TimeRanges;
 36 | export let getActiveVideoTrackBuffer: (
 37 |   mediaSource: BabyMediaSource
 38 | ) => VideoTrackBuffer | undefined;
 39 | export let getActiveAudioTrackBuffer: (
 40 |   mediaSource: BabyMediaSource
 41 | ) => AudioTrackBuffer | undefined;
 42 | export let openIfEnded: (mediaSource: BabyMediaSource) => void;
 43 | export let checkBuffer: (mediaSource: BabyMediaSource) => void;
 44 | 
 45 | export class BabyMediaSource extends EventTarget {
 46 |   #duration: number = NaN;
 47 |   #mediaElement: BabyVideoElement | undefined;
 48 |   #readyState: MediaSourceReadyState = "closed";
 49 |   #sourceBuffers: BabySourceBuffer[] = [];
 50 | 
 51 |   get duration(): number {
 52 |     // https://w3c.github.io/media-source/#dom-mediasource-duration
 53 |     if (this.#readyState === "closed") {
 54 |       return NaN;
 55 |     }
 56 |     return this.#duration;
 57 |   }
 58 | 
 59 |   set duration(duration: number) {
 60 |     // https://w3c.github.io/media-source/#dom-mediasource-duration
 61 |     // 1. If the value being set is negative or NaN
 62 |     //    then throw a TypeError exception and abort these steps.
 63 |     if (duration < 0 || Number.isNaN(duration)) {
 64 |       throw new TypeError("Invalid duration");
 65 |     }
 66 |     // 2. If the readyState attribute is not "open"
 67 |     //    then throw an InvalidStateError exception and abort these steps.
 68 |     if (this.#readyState !== "open") {
 69 |       throw new DOMException("Ready state must be open", "InvalidStateError");
 70 |     }
 71 |     // 3. If the updating attribute equals true on any SourceBuffer in sourceBuffers,
 72 |     //    then throw an InvalidStateError exception and abort these steps.
 73 |     if (this.#sourceBuffers.some((sourceBuffer) => sourceBuffer.updating)) {
 74 |       throw new DOMException(
 75 |         "No source buffer must be updating",
 76 |         "InvalidStateError"
 77 |       );
 78 |     }
 79 |     // 4. Run the duration change algorithm with new duration
 80 |     //   set to the value being assigned to this attribute.
 81 |     this.#durationChange(duration);
 82 |   }
 83 | 
 84 |   get readyState(): MediaSourceReadyState {
 85 |     return this.#readyState;
 86 |   }
 87 | 
 88 |   get sourceBuffers(): readonly BabySourceBuffer[] {
 89 |     return this.#sourceBuffers;
 90 |   }
 91 | 
 92 |   static isTypeSupported(type: string): boolean {
 93 |     // https://w3c.github.io/media-source/#dom-mediasource-istypesupported
 94 |     return type.startsWith("audio/mp4") || type.startsWith("video/mp4");
 95 |   }
 96 | 
 97 |   addSourceBuffer(type: string): BabySourceBuffer {
 98 |     // https://w3c.github.io/media-source/#dom-mediasource-addsourcebuffer
 99 |     // 1. If type is an empty string then throw a TypeError exception and abort these steps.
100 |     // 2. If type contains a MIME type that is not supported or contains a MIME type that is not supported
101 |     //    with the types specified for the other SourceBuffer objects in sourceBuffers,
102 |     //    then throw a NotSupportedError exception and abort these steps.
103 |     if (!BabyMediaSource.isTypeSupported(type)) {
104 |       throw new DOMException(
105 |         `Unsupported MIME type: ${type}`,
106 |         "NotSupportedError"
107 |       );
108 |     }
109 |     // 3. If the user agent can't handle any more SourceBuffer objects or if creating a SourceBuffer
110 |     //    based on type would result in an unsupported SourceBuffer configuration,
111 |     //    then throw a QuotaExceededError exception and abort these steps.
112 |     // 4. If the readyState attribute is not in the "open" state then throw an InvalidStateError exception and abort these steps.
113 |     if (this.#readyState !== "open") {
114 |       throw new DOMException("Ready state must be open", "NotSupportedError");
115 |     }
116 |     // 5. Create a new SourceBuffer object and associated resources.
117 |     const sourceBuffer = new BabySourceBuffer(this);
118 |     // 6 and 7: Ignore.
119 |     // 8. Add the new object to sourceBuffers and queue a task to fire an event named addsourcebuffer at sourceBuffers.
120 |     this.#sourceBuffers.push(sourceBuffer);
121 |     // 9. Return the new object.
122 |     return sourceBuffer;
123 |   }
124 | 
125 |   endOfStream(error?: "network" | "decode"): void {
126 |     // https://w3c.github.io/media-source/#dom-mediasource-endofstream
127 |     // 1. If the readyState attribute is not "open"
128 |     //    then throw an InvalidStateError exception and abort these steps.
129 |     if (this.#readyState !== "open") {
130 |       throw new DOMException("Ready state must be open", "InvalidStateError");
131 |     }
132 |     // 2. If the updating attribute equals true on any SourceBuffer in sourceBuffers,
133 |     //    then throw an InvalidStateError exception and abort these steps.
134 |     if (this.#sourceBuffers.some((sourceBuffer) => sourceBuffer.updating)) {
135 |       throw new DOMException(
136 |         "No source buffer must be updating",
137 |         "InvalidStateError"
138 |       );
139 |     }
140 |     // 3. Run the end of stream algorithm with the error parameter set to error.
141 |     this.#endOfStream(error);
142 |   }
143 | 
144 |   #attachToMediaElement(mediaElement: BabyVideoElement): void {
145 |     // https://w3c.github.io/media-source/#mediasource-attach
146 |     if (this.#readyState !== "closed") {
147 |       throw new DOMException("Ready state must be closed", "InvalidStateError");
148 |     }
149 |     // Otherwise, the MediaSource was constructed in a Window:
150 |     this.#mediaElement = mediaElement;
151 |     // 4. Set the readyState attribute to "open".
152 |     this.#readyState = "open";
153 |     // 5. Queue a task to fire an event named sourceopen at the MediaSource.
154 |     queueTask(() => this.dispatchEvent(new Event("sourceopen")));
155 |   }
156 | 
157 |   #detachFromMediaElement(): void {
158 |     // https://w3c.github.io/media-source/#mediasource-detach
159 |     // Otherwise, the MediaSource was constructed in a Window:
160 |     this.#mediaElement = undefined;
161 |     // 3. Set the readyState attribute to "closed".
162 |     this.#readyState = "closed";
163 |     // 4. Update duration to NaN.
164 |     this.#duration = NaN;
165 |     // 5. Remove all the SourceBuffer objects from activeSourceBuffers.
166 |     // 7. Remove all the SourceBuffer objects from sourceBuffers.
167 |     this.#sourceBuffers.length = 0;
168 |     // 9. Queue a task to fire an event named sourceclose at the MediaSource.
169 |     queueTask(() => this.dispatchEvent(new Event("sourceclose")));
170 |   }
171 | 
172 |   #durationChange(newDuration: number): void {
173 |     // https://w3c.github.io/media-source/#duration-change-algorithm
174 |     // 1. If the current value of duration is equal to new duration, then return.
175 |     if (this.#duration === newDuration) {
176 |       return;
177 |     }
178 |     // 5. Update duration to new duration.
179 |     this.#duration = newDuration;
180 |     // 6.1. Update the media element's duration to new duration.
181 |     // 6.1. Run the HTMLMediaElement duration change algorithm.
182 |     updateDuration(this.#mediaElement!, newDuration);
183 |   }
184 | 
185 |   #endOfStream(error?: "network" | "decode") {
186 |     // https://w3c.github.io/media-source/#dfn-end-of-stream
187 |     // 1. Change the readyState attribute value to "ended".
188 |     this.#readyState = "ended";
189 |     // 2. Queue a task to fire an event named sourceended at the MediaSource.
190 |     queueTask(() => this.dispatchEvent(new Event("sourceended")));
191 |     // 3. If error is not set:
192 |     if (!error) {
193 |       // 3.1. Run the duration change algorithm with new duration set to
194 |       //      the largest track buffer ranges end time across all the track buffers
195 |       //      across all SourceBuffer objects in sourceBuffers.
196 |       const largestEndTime = Math.max(
197 |         ...this.#sourceBuffers.map((sourceBuffer) =>
198 |           sourceBuffer.buffered.end(sourceBuffer.buffered.length - 1)
199 |         )
200 |       );
201 |       this.#durationChange(largestEndTime);
202 |       // 3.2. Notify the media element that it now has all of the media data.
203 |       notifyEndOfStream(this.#mediaElement!);
204 |     } else if (error === "network") {
205 |       // TODO
206 |     } else if (error === "decode") {
207 |       // TODO
208 |     }
209 |   }
210 | 
211 |   #openIfEnded() {
212 |     // If the readyState attribute of the parent media source is in the "ended" state
213 |     // then run the following steps:
214 |     if (this.#readyState === "ended") {
215 |       // Set the readyState attribute of the parent media source to "open"
216 |       this.#readyState = "open";
217 |       // Queue a task to fire an event named sourceopen at the parent media source.
218 |       this.dispatchEvent(new Event("sourceopen"));
219 |     }
220 |   }
221 | 
222 |   #getActiveVideoTrackBuffer(): VideoTrackBuffer | undefined {
223 |     for (const sourceBuffer of this.#sourceBuffers) {
224 |       const videoTrackBuffer = getVideoTrackBuffer(sourceBuffer);
225 |       if (videoTrackBuffer) {
226 |         return videoTrackBuffer;
227 |       }
228 |     }
229 |     return undefined;
230 |   }
231 | 
232 |   #getActiveAudioTrackBuffer(): AudioTrackBuffer | undefined {
233 |     for (const sourceBuffer of this.#sourceBuffers) {
234 |       const audioTrackBuffer = getAudioTrackBuffer(sourceBuffer);
235 |       if (audioTrackBuffer) {
236 |         return audioTrackBuffer;
237 |       }
238 |     }
239 |     return undefined;
240 |   }
241 | 
242 |   #getBuffered(): TimeRanges {
243 |     // https://w3c.github.io/media-source/#htmlmediaelement-extensions-buffered
244 |     // 2.1. Let recent intersection ranges equal an empty TimeRanges object.
245 |     let intersectionRanges = new TimeRanges([]);
246 |     // 2.2. If activeSourceBuffers.length does not equal 0 then run the following steps:
247 |     if (this.#sourceBuffers.length !== 0) {
248 |       // 2.2.1. Let active ranges be the ranges returned by buffered for each SourceBuffer object in activeSourceBuffers.
249 |       const activeRanges = this.#sourceBuffers.map(
250 |         (sourceBuffer) => sourceBuffer.buffered
251 |       );
252 |       // 2.2.2. Let highest end time be the largest range end time in the active ranges.
253 |       const highestEndTime = Math.max(...activeRanges.map(getHighestEndTime));
254 |       // 2.2.3. Let recent intersection ranges equal a TimeRanges object containing a single range from 0 to highest end time.
255 |       intersectionRanges = new TimeRanges([[0, highestEndTime]]);
256 |       // 2.2.4. For each SourceBuffer object in activeSourceBuffers run the following steps:
257 |       // 2.2.4.1. Let source ranges equal the ranges returned by the buffered attribute on the current SourceBuffer.
258 |       for (let sourceRanges of activeRanges) {
259 |         // 2.2.4.2. If readyState is "ended", then set the end time on the last range in source ranges to highest end time.
260 |         if (this.#readyState === "ended") {
261 |           sourceRanges = setEndTimeOnLastRange(sourceRanges, highestEndTime);
262 |         }
263 |         // 2.2.4.3. Let new intersection ranges equal the intersection between the recent intersection ranges and the source ranges.
264 |         // 2.2.4.4. Replace the ranges in recent intersection ranges with the new intersection ranges.
265 |         intersectionRanges = intersectionRanges.intersect(sourceRanges);
266 |       }
267 |     }
268 |     return intersectionRanges;
269 |   }
270 | 
271 |   #checkBuffer(): void {
272 |     // https://w3c.github.io/media-source/#buffer-monitoring
273 |     const mediaElement = this.#mediaElement!;
274 |     const readyState = mediaElement.readyState;
275 |     // If the HTMLMediaElement.readyState attribute equals HAVE_NOTHING:
276 |     if (readyState === MediaReadyState.HAVE_NOTHING) {
277 |       // Abort these steps.
278 |       return;
279 |     }
280 |     const buffered = this.#getBuffered();
281 |     const currentTime = mediaElement.currentTime;
282 |     const duration = this.#duration;
283 |     const playbackRate = mediaElement.playbackRate;
284 |     const currentRange = buffered.find(currentTime);
285 |     // If HTMLMediaElement.buffered does not contain a TimeRanges for the current playback position:
286 |     if (currentRange === undefined) {
287 |       // Set the HTMLMediaElement.readyState attribute to HAVE_METADATA.
288 |       updateReadyState(mediaElement, MediaReadyState.HAVE_METADATA);
289 |       // Abort these steps.
290 |       return;
291 |     }
292 |     // If HTMLMediaElement.buffered contains a TimeRanges that includes the current playback position
293 |     // and enough data to ensure uninterrupted playback:
294 |     if (this.#readyState === "ended" && currentRange[1] === this.#duration) {
295 |       // Set the HTMLMediaElement.readyState attribute to HAVE_ENOUGH_DATA.
296 |       // Playback may resume at this point if it was previously suspended by a transition to HAVE_CURRENT_DATA.
297 |       updateReadyState(mediaElement, MediaReadyState.HAVE_ENOUGH_DATA);
298 |       // Abort these steps.
299 |       return;
300 |     }
301 |     // If HTMLMediaElement.buffered contains a TimeRanges that includes the current playback position
302 |     // and some time beyond the current playback position, then run the following steps:
303 |     if (hasSomeBuffer(buffered, currentTime, duration, playbackRate)) {
304 |       // Set the HTMLMediaElement.readyState attribute to HAVE_FUTURE_DATA.
305 |       // Playback may resume at this point if it was previously suspended by a transition to HAVE_CURRENT_DATA.
306 |       updateReadyState(mediaElement, MediaReadyState.HAVE_FUTURE_DATA);
307 |       // Abort these steps.
308 |       return;
309 |     }
310 |     // If HTMLMediaElement.buffered contains a TimeRanges that ends at the current playback position
311 |     // and does not have a range covering the time immediately after the current position:
312 |     if (buffered.containsRangeEndingAt(currentTime)) {
313 |       // Set the HTMLMediaElement.readyState attribute to HAVE_CURRENT_DATA.
314 |       // Playback is suspended at this point since the media element doesn't have enough data to advance the media timeline.
315 |       updateReadyState(mediaElement, MediaReadyState.HAVE_CURRENT_DATA);
316 |       // Abort these steps.
317 |       return;
318 |     }
319 |   }
320 | 
321 |   static {
322 |     attachToMediaElement = (mediaSource, mediaElement) =>
323 |       mediaSource.#attachToMediaElement(mediaElement);
324 |     detachFromMediaElement = (mediaSource) =>
325 |       mediaSource.#detachFromMediaElement();
326 |     durationChange = (mediaSource, newDuration) =>
327 |       mediaSource.#durationChange(newDuration);
328 |     endOfStream = (mediaSource, error) => mediaSource.#endOfStream(error);
329 |     getMediaElement = (mediaSource) => mediaSource.#mediaElement;
330 |     getBuffered = (mediaSource) => mediaSource.#getBuffered();
331 |     openIfEnded = (mediaSource) => mediaSource.#openIfEnded();
332 |     getActiveVideoTrackBuffer = (mediaSource) =>
333 |       mediaSource.#getActiveVideoTrackBuffer();
334 |     getActiveAudioTrackBuffer = (mediaSource) =>
335 |       mediaSource.#getActiveAudioTrackBuffer();
336 |     checkBuffer = (mediaSource) => mediaSource.#checkBuffer();
337 |   }
338 | }
339 | 
340 | function getHighestEndTime(buffered: TimeRanges): number {
341 |   return buffered.length > 0 ? buffered.end(buffered.length - 1) : 0;
342 | }
343 | 
344 | export function hasSomeBuffer(
345 |   buffered: TimeRanges,
346 |   currentTime: number,
347 |   duration: number,
348 |   playbackRate: number
349 | ): boolean {
350 |   if (playbackRate >= 0) {
351 |     return buffered.containsRange(
352 |       currentTime,
353 |       Math.min(currentTime + 0.1, duration)
354 |     );
355 |   } else {
356 |     return buffered.containsRange(Math.max(0, currentTime - 0.1), currentTime);
357 |   }
358 | }
359 | 


--------------------------------------------------------------------------------
/src/source-buffer.ts:
--------------------------------------------------------------------------------
  1 | import { concatUint8Arrays, queueTask, toUint8Array } from "./util";
  2 | import {
  3 |   AudioTrackInfo,
  4 |   AvcBox,
  5 |   Box,
  6 |   BoxParser,
  7 |   createFile,
  8 |   DataStream,
  9 |   Info,
 10 |   ISOFile,
 11 |   Mp4aBox,
 12 |   MP4ArrayBuffer,
 13 |   MP4BoxStream,
 14 |   Sample,
 15 |   TrackInfo,
 16 |   TrakBox,
 17 |   VideoTrackInfo
 18 | } from "mp4box";
 19 | import type { BabyMediaSource } from "./media-source";
 20 | import {
 21 |   durationChange,
 22 |   endOfStream,
 23 |   getMediaElement,
 24 |   hasSomeBuffer,
 25 |   openIfEnded
 26 | } from "./media-source";
 27 | import {
 28 |   AudioTrackBuffer,
 29 |   TrackBuffer,
 30 |   VideoTrackBuffer
 31 | } from "./track-buffer";
 32 | import {
 33 |   MediaReadyState,
 34 |   notifyProgress,
 35 |   updateReadyState
 36 | } from "./video-element";
 37 | import { setEndTimeOnLastRange, TimeRanges } from "./time-ranges";
 38 | 
 39 | export let getVideoTrackBuffer: (
 40 |   sourceBuffer: BabySourceBuffer
 41 | ) => VideoTrackBuffer | undefined;
 42 | export let getAudioTrackBuffer: (
 43 |   sourceBuffer: BabySourceBuffer
 44 | ) => AudioTrackBuffer | undefined;
 45 | 
 46 | export class BabySourceBuffer extends EventTarget {
 47 |   readonly #parent: BabyMediaSource;
 48 |   #inputBuffer: Uint8Array = new Uint8Array(0);
 49 |   #updating: boolean = false;
 50 |   #firstInitializationSegmentReceived = false;
 51 |   #trackBuffers: TrackBuffer[] = [];
 52 | 
 53 |   // MP4 specific things
 54 |   #initializationData: Uint8Array | undefined = undefined;
 55 |   #isoFile: ISOFile | undefined = undefined;
 56 |   #isoFilePosition: number = 0;
 57 |   #mp4Info: Info | undefined = undefined;
 58 | 
 59 |   constructor(parent: BabyMediaSource) {
 60 |     super();
 61 |     this.#parent = parent;
 62 |   }
 63 | 
 64 |   get updating(): boolean {
 65 |     return this.#updating;
 66 |   }
 67 | 
 68 |   get buffered(): TimeRanges {
 69 |     // https://w3c.github.io/media-source/#dom-sourcebuffer-buffered
 70 |     // 1. If this object has been removed from the sourceBuffers attribute of the parent media source
 71 |     //    then throw an InvalidStateError exception and abort these steps.
 72 |     if (!this.#parent.sourceBuffers.includes(this)) {
 73 |       throw new DOMException("Source buffer was removed", "InvalidStateError");
 74 |     }
 75 |     if (this.#trackBuffers.length === 0) {
 76 |       return new TimeRanges([]);
 77 |     }
 78 |     // 2. Let highest end time be the largest track buffer ranges end time across
 79 |     //    all the track buffers managed by this SourceBuffer object.
 80 |     const highestEndTime = Math.max(
 81 |       ...this.#trackBuffers.map((trackBuffer) => {
 82 |         return trackBuffer.trackBufferRanges.length > 0
 83 |           ? trackBuffer.trackBufferRanges.end(
 84 |               trackBuffer.trackBufferRanges.length - 1
 85 |             )
 86 |           : 0;
 87 |       })
 88 |     );
 89 |     // 3. Let intersection ranges equal a TimeRanges object containing a single range
 90 |     //    from 0 to highest end time.
 91 |     let intersectionRanges = new TimeRanges([[0, highestEndTime]]);
 92 |     // 4. For each audio and video track buffer managed by this SourceBuffer, run the following steps:
 93 |     for (const trackBuffer of this.#trackBuffers) {
 94 |       // 4.1. Let track ranges equal the track buffer ranges for the current track buffer.
 95 |       let trackRanges = trackBuffer.trackBufferRanges;
 96 |       // 4.2. If readyState is "ended", then set the end time on the last range in track ranges to highest end time.
 97 |       if (this.#parent.readyState === "ended") {
 98 |         trackRanges = setEndTimeOnLastRange(trackRanges, highestEndTime);
 99 |       }
100 |       // 4.3. Let new intersection ranges equal the intersection between the intersection ranges and the track ranges.
101 |       // 4.4. Replace the ranges in intersection ranges with the new intersection ranges.
102 |       intersectionRanges = intersectionRanges.intersect(trackRanges);
103 |     }
104 |     return intersectionRanges;
105 |   }
106 | 
107 |   abort() {
108 |     // https://w3c.github.io/media-source/#dom-sourcebuffer-abort
109 |     // 1. If this object has been removed from the sourceBuffers attribute of the parent media source
110 |     //    then throw an InvalidStateError exception and abort these steps.
111 |     if (!this.#parent.sourceBuffers.includes(this)) {
112 |       throw new DOMException("Source buffer was removed", "InvalidStateError");
113 |     }
114 |     // 2. If the readyState attribute of the parent media source is not in the "open" state
115 |     //    then throw an InvalidStateError exception and abort these steps.
116 |     if (this.#parent.readyState !== "open") {
117 |       throw new DOMException("Ready state must be open", "InvalidStateError");
118 |     }
119 |     // 3. If the range removal algorithm is running, then throw an InvalidStateError exception
120 |     //    and abort these steps.
121 |     // TODO
122 |     // 4. If the updating attribute equals true, then run the following steps:
123 |     if (this.#updating) {
124 |       // 4.1. Abort the buffer append algorithm if it is running.
125 |       // TODO
126 |       // 4.2. Set the updating attribute to false.
127 |       this.#updating = false;
128 |       // 4.3. Queue a task to fire an event named abort at this SourceBuffer object.
129 |       queueTask(() => this.dispatchEvent(new Event("abort")));
130 |       // 4.4. Queue a task to fire an event named updateend at this SourceBuffer object.
131 |       queueTask(() => this.dispatchEvent(new Event("updateend")));
132 |     }
133 |     // 5. Run the reset parser state algorithm.
134 |     // TODO
135 |     // 6. Set appendWindowStart to the presentation start time.
136 |     // TODO
137 |     // 7. Set appendWindowEnd to positive Infinity.
138 |     // TODO
139 |   }
140 | 
141 |   appendBuffer(data: BufferSource): void {
142 |     // https://w3c.github.io/media-source/#dom-sourcebuffer-appendbuffer
143 |     // 1. Run the prepare append algorithm.
144 |     this.#prepareAppend();
145 |     // 2. Add data to the end of the [[input buffer]].
146 |     this.#inputBuffer = concatUint8Arrays(
147 |       this.#inputBuffer,
148 |       toUint8Array(data)
149 |     );
150 |     // 3. Set the updating attribute to true.
151 |     this.#updating = true;
152 |     // 4. Queue a task to fire an event named updatestart at this SourceBuffer object.
153 |     queueTask(() => this.dispatchEvent(new Event("updatestart")));
154 |     // 5. Asynchronously run the buffer append algorithm.
155 |     queueMicrotask(() => this.#bufferAppend());
156 |   }
157 | 
158 |   remove(start: number, end: number): void {
159 |     // https://w3c.github.io/media-source/#dom-sourcebuffer-remove
160 |     // 1. If this object has been removed from the sourceBuffers attribute of the parent media source
161 |     //    then throw an InvalidStateError exception and abort these steps.
162 |     if (!this.#parent.sourceBuffers.includes(this)) {
163 |       throw new DOMException("Source buffer was removed", "InvalidStateError");
164 |     }
165 |     // 2. If the updating attribute equals true, then throw an InvalidStateError exception and
166 |     //    abort these steps.
167 |     if (this.#updating) {
168 |       throw new DOMException(
169 |         "Source buffer must not be updating",
170 |         "InvalidStateError"
171 |       );
172 |     }
173 |     // 3. If duration equals NaN, then throw a TypeError exception and abort these steps.
174 |     const duration = this.#parent.duration;
175 |     if (Number.isNaN(duration)) {
176 |       throw new TypeError("Duration must not be NaN");
177 |     }
178 |     // 4. If start is negative or greater than duration,
179 |     //    then throw a TypeError exception and abort these steps.
180 |     if (start < 0 || start > duration) {
181 |       throw new TypeError("Start must be positive and less than duration");
182 |     }
183 |     // 5. If end is less than or equal to start or end equals NaN,
184 |     //    then throw a TypeError exception and abort these steps.
185 |     if (end <= start || Number.isNaN(end)) {
186 |       throw new TypeError("End must be greater than start");
187 |     }
188 |     // 6. If the readyState attribute of the parent media source is in the "ended" state
189 |     //    then run the following steps...
190 |     openIfEnded(this.#parent);
191 |     // 7. Run the range removal algorithm with start and end
192 |     //    as the start and end of the removal range.
193 |     this.#rangeRemoval(start, end);
194 |   }
195 | 
196 |   #prepareAppend(): void {
197 |     // https://w3c.github.io/media-source/#sourcebuffer-prepare-append
198 |     // 1. If the SourceBuffer has been removed from the sourceBuffers attribute of the parent media source
199 |     //    then throw an InvalidStateError exception and abort these steps.
200 |     if (!this.#parent.sourceBuffers.includes(this)) {
201 |       throw new DOMException("Source buffer was removed", "InvalidStateError");
202 |     }
203 |     // 2. If the updating attribute equals true, then throw an InvalidStateError exception and
204 |     //    abort these steps.
205 |     if (this.#updating) {
206 |       throw new DOMException(
207 |         "Source buffer must not be updating",
208 |         "InvalidStateError"
209 |       );
210 |     }
211 |     // TODO Steps 3 to 4
212 |     // 5. If the readyState attribute of the parent media source is in the "ended" state
213 |     //    then run the following steps...
214 |     openIfEnded(this.#parent);
215 |     // TODO Steps 6 to 7
216 |   }
217 | 
218 |   async #bufferAppend(): Promise<void> {
219 |     // https://w3c.github.io/media-source/#dfn-buffer-append
220 |     // 1. Run the segment parser loop algorithm.
221 |     await this.#segmentParserLoop();
222 |     // 2. If the segment parser loop algorithm in the previous step was aborted,
223 |     //    then abort this algorithm.
224 |     // 3. Set the updating attribute to false.
225 |     this.#updating = false;
226 |     // 4. Queue a task to fire an event named update at this SourceBuffer object.
227 |     queueTask(() => this.dispatchEvent(new Event("update")));
228 |     // 5. Queue a task to fire an event named updateend at this SourceBuffer object.
229 |     queueTask(() => this.dispatchEvent(new Event("updateend")));
230 |   }
231 | 
232 |   async #segmentParserLoop(): Promise<void> {
233 |     // https://w3c.github.io/media-source/#sourcebuffer-segment-parser-loop
234 |     const stream = new MP4BoxStream(this.#inputBuffer.buffer);
235 |     try {
236 |       while (true) {
237 |         const parseResult = BoxParser.parseOneBox(stream, true);
238 |         if (parseResult.code === BoxParser.ERR_NOT_ENOUGH_DATA) {
239 |           // 7. Need more data: Return control to the calling algorithm.
240 |           break;
241 |         } else if (parseResult.code === BoxParser.ERR_INVALID_DATA) {
242 |           // 2. If the [[input buffer]] contains bytes that violate the SourceBuffer
243 |           //    byte stream format specification, then run the append error algorithm
244 |           //    and abort this algorithm.
245 |           this.#appendError();
246 |           break;
247 |         } else if (parseResult.code === BoxParser.OK) {
248 |           const boxStart = parseResult.start;
249 |           const boxEnd = parseResult.start + parseResult.size;
250 |           const boxData = this.#inputBuffer.slice(boxStart, boxEnd).buffer;
251 |           await this.#parseBox(parseResult.type, boxData);
252 |           stream.seek(boxEnd);
253 |         }
254 |       }
255 |     } finally {
256 |       this.#inputBuffer = this.#inputBuffer.slice(stream.getPosition());
257 |     }
258 |   }
259 | 
260 |   async #parseBox(boxType: string, boxData: ArrayBuffer): Promise<void> {
261 |     // https://w3c.github.io/media-source/#sourcebuffer-segment-parser-loop
262 |     if (boxType === "ftyp") {
263 |       this.#initializationData = new Uint8Array(boxData);
264 |       this.#isoFile = undefined;
265 |     } else if (boxType === "moov") {
266 |       // 5.2. Run the initialization segment received algorithm.
267 |       this.#initializationData = concatUint8Arrays(
268 |         this.#initializationData!,
269 |         new Uint8Array(boxData)
270 |       );
271 |       this.#isoFile = createFile();
272 |       this.#isoFilePosition = 0;
273 |       this.#isoFile!.appendBuffer(
274 |         toMP4ArrayBuffer(
275 |           this.#initializationData!.buffer,
276 |           this.#isoFilePosition
277 |         )
278 |       );
279 |       this.#isoFilePosition += boxData.byteLength;
280 |       const newInfo = this.#isoFile!.getInfo();
281 |       await this.#initializationSegmentReceived(newInfo);
282 |       this.#mp4Info = newInfo;
283 |     } else if (boxType === "moof" || boxType === "mdat") {
284 |       // 6.1. If the [[first initialization segment received flag]] is false
285 |       //      or the [[pending initialization segment for changeType flag]] is true,
286 |       //      then run the append error algorithm and abort this algorithm.
287 |       if (!this.#firstInitializationSegmentReceived) {
288 |         this.#appendError();
289 |         return;
290 |       }
291 |       if (boxType === "moof") {
292 |         // Parse each movie fragment separately.
293 |         this.#isoFile = createFile();
294 |         this.#isoFilePosition = 0;
295 |         this.#isoFile.appendBuffer(
296 |           toMP4ArrayBuffer(
297 |             this.#initializationData!.buffer,
298 |             this.#isoFilePosition
299 |           )
300 |         );
301 |         this.#isoFilePosition += this.#initializationData!.byteLength;
302 |       }
303 |       this.#isoFile!.appendBuffer(
304 |         toMP4ArrayBuffer(boxData, this.#isoFilePosition)
305 |       );
306 |       this.#isoFilePosition += boxData.byteLength;
307 |       // 6.2. If the [[input buffer]] contains one or more complete coded frames,
308 |       //      then run the coded frame processing algorithm.
309 |       if (boxType === "mdat") {
310 |         this.#codedFrameProcessing();
311 |       }
312 |     }
313 |   }
314 | 
315 |   async #initializationSegmentReceived(info: Info): Promise<void> {
316 |     // https://w3c.github.io/media-source/#sourcebuffer-init-segment-received
317 |     // 1. Update the duration attribute if it currently equals NaN
318 |     if (Number.isNaN(this.#parent.duration)) {
319 |       if (info.duration > 0) {
320 |         // If the initialization segment contains a duration:
321 |         // Run the duration change algorithm with new duration set
322 |         // to the duration in the initialization segment.
323 |         durationChange(this.#parent, info.duration);
324 |       } else {
325 |         // Otherwise:
326 |         // Run the duration change algorithm with new duration set to positive Infinity.
327 |         durationChange(this.#parent, +Infinity);
328 |       }
329 |     }
330 |     // 2. If the initialization segment has no audio, video, or text tracks,
331 |     //    then run the append error algorithm and abort these steps.
332 |     if (info.audioTracks.length === 0 && info.videoTracks.length === 0) {
333 |       this.#appendError();
334 |       return;
335 |     }
336 |     // 3. If the [[first initialization segment received flag]] is true,
337 |     //    then run the following steps:
338 |     if (this.#firstInitializationSegmentReceived) {
339 |       // 3.1. Verify the following properties. If any of the checks fail
340 |       //      then run the append error algorithm and abort these steps.
341 |       const oldInfo = this.#mp4Info!;
342 |       // * The number of audio, video, and text tracks match what was
343 |       //   in the first initialization segment.
344 |       if (
345 |         info.audioTracks.length !== oldInfo.audioTracks.length ||
346 |         info.videoTracks.length !== oldInfo.videoTracks.length
347 |       ) {
348 |         this.#appendError();
349 |         return;
350 |       }
351 |       // * If more than one track for a single type are present (e.g., 2 audio tracks),
352 |       //   then the Track IDs match the ones in the first initialization segment.
353 |       if (
354 |         (info.audioTracks.length > 1 &&
355 |           !hasMatchingTrackIds(info.audioTracks, oldInfo.audioTracks)) ||
356 |         (info.videoTracks.length > 1 &&
357 |           !hasMatchingTrackIds(info.videoTracks, oldInfo.videoTracks))
358 |       ) {
359 |         this.#appendError();
360 |         return;
361 |       }
362 |       // * The codecs for each track are supported by the user agent.
363 |       const audioTrackConfigs = info.audioTracks.map((trackInfo) =>
364 |         buildAudioConfig(trackInfo, this.#isoFile!.getTrackById(trackInfo.id))
365 |       );
366 |       const videoTrackConfigs = info.videoTracks.map((trackInfo) =>
367 |         buildVideoConfig(trackInfo, this.#isoFile!.getTrackById(trackInfo.id))
368 |       );
369 |       for (const audioTrackConfig of audioTrackConfigs) {
370 |         const support = await AudioDecoder.isConfigSupported(audioTrackConfig);
371 |         if (!support.supported) {
372 |           this.#appendError();
373 |           return;
374 |         }
375 |       }
376 |       for (const videoTrackConfig of videoTrackConfigs) {
377 |         const support = await VideoDecoder.isConfigSupported(videoTrackConfig);
378 |         if (!support.supported) {
379 |           this.#appendError();
380 |           return;
381 |         }
382 |       }
383 |       // 3.2. Add the appropriate track descriptions from this initialization segment to each of the track buffers.
384 |       for (let i = 0; i < info.audioTracks.length; i++) {
385 |         const audioTrackInfo = info.audioTracks[i];
386 |         const audioTrackConfig = audioTrackConfigs[i];
387 |         const trackBuffer = this.#getMatchingTrackBuffer(audioTrackInfo)!;
388 |         trackBuffer.reconfigure(audioTrackConfig);
389 |       }
390 |       for (let i = 0; i < info.videoTracks.length; i++) {
391 |         const videoTrackInfo = info.videoTracks[i];
392 |         const videoTrackConfig = videoTrackConfigs[i];
393 |         const trackBuffer = this.#getMatchingTrackBuffer(videoTrackInfo)!;
394 |         trackBuffer.reconfigure(videoTrackConfig);
395 |       }
396 |       // 3.3. Set the need random access point flag on all track buffers to true.
397 |       for (const trackBuffer of this.#trackBuffers) {
398 |         trackBuffer.needRandomAccessPoint = true;
399 |       }
400 |     }
401 |     // 4. Let active track flag equal false.
402 |     let activeTrack = false;
403 |     // 5. If the [[first initialization segment received flag]] is false,
404 |     //    then run the following steps:
405 |     if (!this.#firstInitializationSegmentReceived) {
406 |       // 5.1. If the initialization segment contains tracks with codecs
407 |       //      the user agent does not support, then run the append error
408 |       //      algorithm and abort these steps.
409 |       const audioTrackConfigs = info.audioTracks.map((trackInfo) =>
410 |         buildAudioConfig(trackInfo, this.#isoFile!.getTrackById(trackInfo.id))
411 |       );
412 |       const videoTrackConfigs = info.videoTracks.map((trackInfo) =>
413 |         buildVideoConfig(trackInfo, this.#isoFile!.getTrackById(trackInfo.id))
414 |       );
415 |       for (const audioTrackConfig of audioTrackConfigs) {
416 |         const support = await AudioDecoder.isConfigSupported(audioTrackConfig);
417 |         if (!support.supported) {
418 |           this.#appendError();
419 |           return;
420 |         }
421 |       }
422 |       for (const videoTrackConfig of videoTrackConfigs) {
423 |         const support = await VideoDecoder.isConfigSupported(videoTrackConfig);
424 |         if (!support.supported) {
425 |           this.#appendError();
426 |           return;
427 |         }
428 |       }
429 |       // 5.2. For each audio track in the initialization segment,
430 |       //      run following steps:
431 |       for (let i = 0; i < info.audioTracks.length; i++) {
432 |         const audioTrackInfo = info.audioTracks[i];
433 |         const audioTrackConfig = audioTrackConfigs[i];
434 |         // 5.2.6.7.2. Set active track flag to true.
435 |         activeTrack = true;
436 |         // 5.2.7. Create a new track buffer to store coded frames for this track.
437 |         // 5.2.8. Add the track description for this track to the track buffer.
438 |         const trackBuffer = new AudioTrackBuffer(
439 |           audioTrackInfo.id,
440 |           audioTrackConfig
441 |         );
442 |         this.#trackBuffers.push(trackBuffer);
443 |       }
444 |       // 5.3. For each video track in the initialization segment,
445 |       //      run following steps:
446 |       for (let i = 0; i < info.videoTracks.length; i++) {
447 |         const videoTrackInfo = info.videoTracks[i];
448 |         const videoTrackConfig = videoTrackConfigs[i];
449 |         // 5.3.6.7.2. Set active track flag to true.
450 |         activeTrack = true;
451 |         // 5.3.7. Create a new track buffer to store coded frames for this track.
452 |         // 5.3.8. Add the track description for this track to the track buffer.
453 |         const trackBuffer = new VideoTrackBuffer(
454 |           videoTrackInfo.id,
455 |           videoTrackConfig
456 |         );
457 |         this.#trackBuffers.push(trackBuffer);
458 |       }
459 |       // 5.5. If active track flag equals true, then run the following steps:
460 |       if (activeTrack) {
461 |         // 5.5.1. Add this SourceBuffer to activeSourceBuffers.
462 |         // 5.5.2. Queue a task to fire an event named addsourcebuffer at activeSourceBuffers
463 |         // TODO
464 |       }
465 |       // 5.6. Set [[first initialization segment received flag]] to true.
466 |       this.#firstInitializationSegmentReceived = true;
467 |     }
468 |     // 7. If the active track flag equals true, then run the following steps:
469 |     if (activeTrack) {
470 |       const mediaElement = getMediaElement(this.#parent)!;
471 |       // 8.1. If the HTMLMediaElement.readyState attribute is greater than HAVE_CURRENT_DATA,
472 |       //      then set the HTMLMediaElement.readyState attribute to HAVE_METADATA.
473 |       if (mediaElement.readyState >= MediaReadyState.HAVE_CURRENT_DATA) {
474 |         updateReadyState(mediaElement, MediaReadyState.HAVE_METADATA);
475 |       }
476 |       // 9. If each object in sourceBuffers of the parent media source
477 |       //    has [[first initialization segment received flag]] equal to true,
478 |       if (
479 |         this.#parent.sourceBuffers.every(
480 |           (sourceBuffer) => sourceBuffer.#firstInitializationSegmentReceived
481 |         )
482 |       ) {
483 |         // 9.1. If the HTMLMediaElement.readyState attribute is HAVE_NOTHING,
484 |         //      then set the HTMLMediaElement.readyState attribute to HAVE_METADATA.
485 |         if (mediaElement.readyState === MediaReadyState.HAVE_NOTHING) {
486 |           updateReadyState(mediaElement, MediaReadyState.HAVE_METADATA);
487 |         }
488 |       }
489 |     }
490 |   }
491 | 
492 |   #getMatchingTrackBuffer(track: AudioTrackInfo): AudioTrackBuffer | undefined;
493 |   #getMatchingTrackBuffer(track: VideoTrackInfo): VideoTrackBuffer | undefined;
494 |   #getMatchingTrackBuffer(track: TrackInfo): TrackBuffer | undefined {
495 |     return (
496 |       this.#trackBuffers.find((buffer) => buffer.trackId === track.id) ??
497 |       this.#trackBuffers.find((buffer) => buffer.type === track.type)
498 |     );
499 |   }
500 | 
501 |   #codedFrameProcessing(): void {
502 |     // https://w3c.github.io/media-source/#sourcebuffer-coded-frame-processing
503 |     // 1. For each coded frame in the media segment run the following steps:
504 |     for (const trackBuffer of this.#trackBuffers) {
505 |       this.#isoFile!.setExtractionOptions(trackBuffer.trackId, undefined, {});
506 |     }
507 |     this.#isoFile!.onSamples = (trackId, _user, samples) =>
508 |       this.#processSamples(trackId, samples);
509 |     this.#isoFile!.start();
510 |     this.#isoFile!.flush();
511 |     this.#isoFile!.stop();
512 |     // 2. If the HTMLMediaElement.readyState attribute is HAVE_METADATA and the new coded frames
513 |     //    cause HTMLMediaElement.buffered to have a TimeRanges for the current playback position,
514 |     //    then set the HTMLMediaElement.readyState attribute to HAVE_CURRENT_DATA.
515 |     const mediaElement = getMediaElement(this.#parent)!;
516 |     const buffered = mediaElement.buffered;
517 |     const currentTime = mediaElement.currentTime;
518 |     const duration = this.#parent.duration;
519 |     const playbackRate = mediaElement.playbackRate;
520 |     if (
521 |       mediaElement.readyState === MediaReadyState.HAVE_METADATA &&
522 |       buffered.contains(currentTime)
523 |     ) {
524 |       updateReadyState(mediaElement, MediaReadyState.HAVE_CURRENT_DATA);
525 |     }
526 |     // 3. If the HTMLMediaElement.readyState attribute is HAVE_CURRENT_DATA and the new coded frames
527 |     //    cause HTMLMediaElement.buffered to have a TimeRanges that includes the current playback position
528 |     //    and some time beyond the current playback position, then set the HTMLMediaElement.readyState
529 |     //    attribute to HAVE_FUTURE_DATA.
530 |     if (
531 |       mediaElement.readyState === MediaReadyState.HAVE_CURRENT_DATA &&
532 |       hasSomeBuffer(buffered, currentTime, duration, playbackRate)
533 |     ) {
534 |       updateReadyState(mediaElement, MediaReadyState.HAVE_FUTURE_DATA);
535 |     }
536 |     // 4. If the HTMLMediaElement.readyState attribute is HAVE_FUTURE_DATA and the new coded frames
537 |     //    cause HTMLMediaElement.buffered to have a TimeRanges that includes the current playback position
538 |     //    and enough data to ensure uninterrupted playback, then set the HTMLMediaElement.readyState
539 |     //    attribute to HAVE_ENOUGH_DATA.
540 |     // TODO
541 |     // 5. If the media segment contains data beyond the current duration, then run the duration change
542 |     //    algorithm with new duration set to the maximum of the current duration and the [[group end timestamp]].
543 |     // TODO
544 |     notifyProgress(mediaElement);
545 |   }
546 | 
547 |   #processSamples(trackId: number, samples: Sample[]): void {
548 |     // https://w3c.github.io/media-source/#sourcebuffer-coded-frame-processing
549 |     const trackBuffer = this.#trackBuffers.find(
550 |       (trackBuffer) => trackBuffer.trackId === trackId
551 |     )!;
552 |     // 1. For each coded frame in the media segment run the following steps:
553 |     for (let i = 0; i < samples.length; i++) {
554 |       const sample = samples[i];
555 |       // 1.1. Let presentation timestamp be a double precision floating point representation
556 |       //      of the coded frame's presentation timestamp in seconds.
557 |       const pts = sample.cts / sample.timescale;
558 |       // 1.2. Let decode timestamp be a double precision floating point representation
559 |       //      of the coded frame's decode timestamp in seconds.
560 |       const dts = sample.dts / sample.timescale;
561 |       // 4. If timestampOffset is not 0, then run the following steps:
562 |       // TODO timestampOffset
563 |       // 5. Let track buffer equal the track buffer that the coded frame will be added to.
564 |       // 6. If last decode timestamp for track buffer is set and decode timestamp
565 |       //    is less than last decode timestamp:
566 |       //     OR
567 |       //    If last decode timestamp for track buffer is set and the difference between
568 |       //    decode timestamp and last decode timestamp is greater than 2 times last frame duration:
569 |       if (
570 |         trackBuffer.lastDecodeTimestamp !== undefined &&
571 |         (dts < trackBuffer.lastDecodeTimestamp ||
572 |           dts - trackBuffer.lastDecodeTimestamp >
573 |             2 * trackBuffer.lastFrameDuration!)
574 |       ) {
575 |         // 6.2. Unset the last decode timestamp on all track buffers.
576 |         // 6.3. Unset the last frame duration on all track buffers.
577 |         // 6.4. Unset the highest end timestamp on all track buffers.
578 |         // 6.5. Set the need random access point flag on all track buffers to true.
579 |         for (const trackBuffer of this.#trackBuffers) {
580 |           trackBuffer.requireRandomAccessPoint();
581 |         }
582 |         // 6.6. Jump to the Loop Top step above to restart processing of the current coded frame.
583 |         i--;
584 |         continue;
585 |       }
586 |       // 7. Let frame end timestamp equal the sum of presentation timestamp and frame duration.
587 |       const frameEndTimestamp =
588 |         (sample.cts + sample.duration) / sample.timescale;
589 |       // TODO 8 and 9 appendWindowStart and appendWindowEnd
590 |       // 10. If the need random access point flag on track buffer equals true,
591 |       //     then run the following steps:
592 |       if (trackBuffer.needRandomAccessPoint) {
593 |         // 10.1. If the coded frame is not a random access point, then drop the coded frame
594 |         //       and jump to the top of the loop to start processing the next coded frame.
595 |         if (!sample.is_sync) {
596 |           continue;
597 |         }
598 |         // 10.2. Set the need random access point flag on track buffer to false.
599 |         trackBuffer.needRandomAccessPoint = false;
600 |       }
601 |       // TODO Steps 11 to 12: Audio frame splicing
602 |       // 13. If last decode timestamp for track buffer is unset and presentation timestamp
603 |       //     falls within the presentation interval of a coded frame in track buffer,
604 |       //     then run the following steps:
605 |       // 13.1. Let overlapped frame be the coded frame in track buffer that matches the condition above.
606 |       if (trackBuffer.lastDecodeTimestamp === undefined) {
607 |         const overlappedFrame = trackBuffer.findFrameForTime(pts);
608 |         if (overlappedFrame !== undefined) {
609 |           // 13.2. If track buffer contains audio coded frames:
610 |           // TODO Audio frame splicing
611 |           // 13.2. If track buffer contains video coded frames:
612 |           if (trackBuffer.type === "video") {
613 |             // 1. Let remove window timestamp equal the overlapped frame presentation timestamp
614 |             //    plus 1 microsecond.
615 |             const removeWindowTimestamp = overlappedFrame.timestamp + 1;
616 |             // 2. If the presentation timestamp is less than the remove window timestamp,
617 |             //   then remove overlapped frame from track buffer.
618 |             if (1e6 * pts < removeWindowTimestamp) {
619 |               trackBuffer.removeSamples(
620 |                 overlappedFrame.timestamp,
621 |                 removeWindowTimestamp
622 |               );
623 |             }
624 |           }
625 |         }
626 |       }
627 |       // 14. Remove existing coded frames in track buffer:
628 |       if (trackBuffer.highestEndTimestamp === undefined) {
629 |         // * If highest end timestamp for track buffer is not set:
630 |         //   Remove all coded frames from track buffer that have a presentation timestamp
631 |         //   greater than or equal to presentation timestamp and less than frame end timestamp.
632 |         trackBuffer.removeSamples(
633 |           Math.floor(1e6 * pts),
634 |           Math.floor(1e6 * frameEndTimestamp)
635 |         );
636 |       } else if (trackBuffer.highestEndTimestamp <= pts) {
637 |         // * If highest end timestamp for track buffer is set and less than or equal to presentation timestamp:
638 |         //   Remove all coded frames from track buffer that have a presentation timestamp
639 |         //   greater than or equal to highest end timestamp and less than frame end timestamp.
640 |         trackBuffer.removeSamples(
641 |           Math.floor(1e6 * trackBuffer.highestEndTimestamp),
642 |           Math.floor(1e6 * frameEndTimestamp)
643 |         );
644 |       }
645 |       // 15. Remove all possible decoding dependencies on the coded frames removed in the previous two steps
646 |       //     by removing all coded frames from track buffer between those frames removed in the previous two steps
647 |       //     and the next random access point after those removed frames.
648 |       // Note: already handled by removeSamples()
649 |       // Steps 16 to 19
650 |       trackBuffer.addSample(sample);
651 |     }
652 |     if (samples.length > 0) {
653 |       this.#isoFile!.releaseUsedSamples(
654 |         trackId,
655 |         samples[samples.length - 1].number
656 |       );
657 |     }
658 |   }
659 | 
660 |   #rangeRemoval(start: number, end: number): void {
661 |     // https://w3c.github.io/media-source/#dfn-range-removal
662 |     // 3. Set the updating attribute to true.
663 |     this.#updating = true;
664 |     // 4. Queue a task to fire an event named updatestart at this SourceBuffer object.
665 |     queueTask(() => this.dispatchEvent(new Event("updatestart")));
666 |     // 5. Return control to the caller and run the rest of the steps asynchronously.
667 |     queueMicrotask(() => {
668 |       // 6. Run the coded frame removal algorithm with start and end as the start and end of the removal range.
669 |       this.#codedFrameRemoval(start, end);
670 |       // 7. Set the updating attribute to false.
671 |       this.#updating = false;
672 |       // 8. Queue a task to fire an event named update at this SourceBuffer object.
673 |       queueTask(() => this.dispatchEvent(new Event("update")));
674 |       // 9. Queue a task to fire an event named updateend at this SourceBuffer object.
675 |       queueTask(() => this.dispatchEvent(new Event("updateend")));
676 |     });
677 |   }
678 | 
679 |   #codedFrameRemoval(start: number, end: number): void {
680 |     // https://w3c.github.io/media-source/#dfn-coded-frame-removal
681 |     const startInMicros = Math.floor(1e6 * start);
682 |     const endInMicros = Math.floor(1e6 * end);
683 |     const mediaElement = getMediaElement(this.#parent)!;
684 |     const currentTimeInMicros = Math.floor(1e6 * mediaElement.currentTime);
685 |     // 3. For each track buffer in this SourceBuffer, run the following steps:
686 |     for (const trackBuffer of this.#trackBuffers) {
687 |       // 3.1. Let remove end timestamp be the current value of duration.
688 |       let removeEndTimestamp = Math.floor(1e6 * this.#parent.duration);
689 |       // 3.2. If this track buffer has a random access point timestamp
690 |       //      that is greater than or equal to end, then update remove end timestamp
691 |       //      to that random access point timestamp.
692 |       removeEndTimestamp =
693 |         trackBuffer.getRandomAccessPointAtOrAfter(endInMicros) ??
694 |         removeEndTimestamp;
695 |       // 3.3. Remove all media data, from this track buffer, that contain starting timestamps
696 |       //      greater than or equal to start and less than the remove end timestamp.
697 |       trackBuffer.removeSamples(startInMicros, removeEndTimestamp);
698 |       // 3.3.1. For each removed frame, if the frame has a decode timestamp equal to
699 |       //        the last decode timestamp for the frame's track, run the following steps:
700 |       // TODO
701 |       // 3.3.2. Unset the last decode timestamp on all track buffers.
702 |       // 3.3.3. Unset the last frame duration on all track buffers.
703 |       // 3.3.4. Unset the highest end timestamp on all track buffers.
704 |       // 3.3.5. Set the need random access point flag on all track buffers to true.
705 |       trackBuffer.requireRandomAccessPoint();
706 |       // 3.4. Remove all possible decoding dependencies on the coded frames removed
707 |       //      in the previous step by removing all coded frames from this track buffer
708 |       //      between those frames removed in the previous step and the next random
709 |       //      access point after those removed frames.
710 |       // (Already handled by removeSamples.)
711 |       // 3.5. If this object is in activeSourceBuffers, the current playback position
712 |       //      is greater than or equal to start and less than the remove end timestamp,
713 |       //      and HTMLMediaElement.readyState is greater than HAVE_METADATA,
714 |       //      then set the HTMLMediaElement.readyState attribute to HAVE_METADATA and stall playback.
715 |       if (
716 |         currentTimeInMicros >= startInMicros &&
717 |         currentTimeInMicros < removeEndTimestamp &&
718 |         mediaElement.readyState > MediaReadyState.HAVE_METADATA
719 |       ) {
720 |         updateReadyState(mediaElement, MediaReadyState.HAVE_METADATA);
721 |       }
722 |     }
723 |   }
724 | 
725 |   #resetParserState() {
726 |     // https://w3c.github.io/media-source/#sourcebuffer-reset-parser-state
727 |     // TODO Steps 1 to 6
728 |     // 7. Remove all bytes from the [[input buffer]].
729 |     this.#inputBuffer = new Uint8Array(0);
730 |     // 8. Set [[append state]] to WAITING_FOR_SEGMENT.
731 |     //    (Ignored.)
732 |   }
733 | 
734 |   #appendError() {
735 |     // https://w3c.github.io/media-source/#dfn-append-error
736 |     // 1. Run the reset parser state algorithm.
737 |     this.#resetParserState();
738 |     // 2. Set the updating attribute to false.
739 |     this.#updating = false;
740 |     // 3. Queue a task to fire an event named error at this SourceBuffer object.
741 |     queueTask(() => this.dispatchEvent(new Event("error")));
742 |     // 4. Queue a task to fire an event named updateend at this SourceBuffer object.
743 |     queueTask(() => this.dispatchEvent(new Event("updateend")));
744 |     // 5. Run the end of stream algorithm with the error parameter set to "decode".
745 |     endOfStream(this.#parent, "decode");
746 |   }
747 | 
748 |   #getVideoTrackBuffer(): VideoTrackBuffer | undefined {
749 |     return this.#trackBuffers.find(
750 |       (trackBuffer): trackBuffer is VideoTrackBuffer =>
751 |         trackBuffer instanceof VideoTrackBuffer
752 |     );
753 |   }
754 | 
755 |   #getAudioTrackBuffer(): AudioTrackBuffer | undefined {
756 |     return this.#trackBuffers.find(
757 |       (trackBuffer): trackBuffer is AudioTrackBuffer =>
758 |         trackBuffer instanceof AudioTrackBuffer
759 |     );
760 |   }
761 | 
762 |   static {
763 |     getVideoTrackBuffer = (sourceBuffer) => sourceBuffer.#getVideoTrackBuffer();
764 |     getAudioTrackBuffer = (sourceBuffer) => sourceBuffer.#getAudioTrackBuffer();
765 |   }
766 | }
767 | 
768 | function toMP4ArrayBuffer(ab: ArrayBuffer, fileStart: number): MP4ArrayBuffer {
769 |   return Object.assign(ab, { fileStart });
770 | }
771 | 
772 | function buildAudioConfig(
773 |   info: AudioTrackInfo,
774 |   trak: TrakBox
775 | ): AudioDecoderConfig {
776 |   return {
777 |     codec: info.codec,
778 |     numberOfChannels: info.audio.channel_count,
779 |     sampleRate: info.audio.sample_rate,
780 |     description: getAudioSpecificConfig(trak)
781 |   };
782 | }
783 | 
784 | function buildVideoConfig(
785 |   info: VideoTrackInfo,
786 |   trak: TrakBox
787 | ): VideoDecoderConfig {
788 |   return {
789 |     codec: info.codec,
790 |     codedWidth: info.video.width,
791 |     codedHeight: info.video.height,
792 |     description: createAvcDecoderConfigurationRecord(trak)
793 |   };
794 | }
795 | 
796 | function isAvcEntry(entry: Box): entry is AvcBox {
797 |   return (entry as AvcBox).avcC !== undefined;
798 | }
799 | 
800 | function isMp4aEntry(entry: Box): entry is Mp4aBox {
801 |   return entry.type === "mp4a";
802 | }
803 | 
804 | function createAvcDecoderConfigurationRecord(
805 |   trak: TrakBox
806 | ): Uint8Array | undefined {
807 |   // https://www.w3.org/TR/webcodecs-avc-codec-registration/#videodecoderconfig-description
808 |   const avcC = trak.mdia.minf.stbl.stsd.entries.find(isAvcEntry)?.avcC;
809 |   if (!avcC) {
810 |     return undefined;
811 |   }
812 |   const stream = new DataStream(undefined, 0, DataStream.BIG_ENDIAN);
813 |   avcC.write(stream);
814 |   return new Uint8Array(stream.buffer, 8); // remove the box header
815 | }
816 | 
817 | function getAudioSpecificConfig(trak: TrakBox): Uint8Array | undefined {
818 |   const descriptor =
819 |     trak.mdia.minf.stbl.stsd.entries.find(isMp4aEntry)?.esds.esd.descs[0];
820 |   if (!descriptor) {
821 |     return undefined;
822 |   }
823 |   // 0x04 is the DecoderConfigDescrTag. Assuming MP4Box always puts this at position 0.
824 |   console.assert(descriptor.tag == 0x04);
825 |   // 0x40 is the Audio OTI, per table 5 of ISO 14496-1
826 |   console.assert(descriptor.oti == 0x40);
827 |   // 0x05 is the DecSpecificInfoTag
828 |   console.assert(descriptor.descs[0].tag == 0x05);
829 |   return descriptor.descs[0].data;
830 | }
831 | 
832 | function hasMatchingTrackIds(
833 |   newTracks: readonly TrackInfo[],
834 |   oldTracks: readonly TrackInfo[]
835 | ): boolean {
836 |   return newTracks.every((newTrack) =>
837 |     oldTracks.some((oldTrack) => newTrack.id === oldTrack.id)
838 |   );
839 | }
840 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: inline-flex;
 3 | }
 4 | 
 5 | /*
 6 |  * Add a :host display style that respects the hidden attribute.
 7 |  * https://web.dev/custom-elements-best-practices/
 8 |  */
 9 | :host([hidden]) {
10 |   display: none;
11 | }
12 | 
13 | canvas {
14 |   width: 100%;
15 |   height: 100%;
16 |   object-fit: contain;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/time-ranges.ts:
--------------------------------------------------------------------------------
  1 | export type TimeRange = readonly [number, number];
  2 | 
  3 | export class TimeRanges {
  4 |   readonly #ranges: ReadonlyArray<TimeRange>;
  5 | 
  6 |   constructor(ranges: ReadonlyArray<TimeRange>) {
  7 |     this.#ranges = ranges;
  8 |   }
  9 | 
 10 |   get length(): number {
 11 |     return this.#ranges.length;
 12 |   }
 13 | 
 14 |   start(index: number): number {
 15 |     return this.#ranges[index][0];
 16 |   }
 17 | 
 18 |   end(index: number): number {
 19 |     return this.#ranges[index][1];
 20 |   }
 21 | 
 22 |   find(time: number): readonly [number, number] | undefined {
 23 |     for (const [start, end] of this.#ranges) {
 24 |       if (start > time) {
 25 |         break;
 26 |       } else if (time <= end) {
 27 |         return [start, end];
 28 |       }
 29 |     }
 30 |     return undefined;
 31 |   }
 32 | 
 33 |   contains(time: number): boolean {
 34 |     return this.find(time) !== undefined;
 35 |   }
 36 | 
 37 |   containsRange(rangeStart: number, rangeEnd: number): boolean {
 38 |     return this.#ranges.some(
 39 |       ([start, end]) => start <= rangeStart && rangeEnd <= end
 40 |     );
 41 |   }
 42 | 
 43 |   containsRangeEndingAt(rangeEnd: number): boolean {
 44 |     return this.#ranges.some(([_, end]) => rangeEnd === end);
 45 |   }
 46 | 
 47 |   intersect(other: TimeRanges): TimeRanges {
 48 |     // Based on TimeRanges::intersection from Mozilla Firefox
 49 |     // https://hg.mozilla.org/releases/mozilla-release/file/bd079aadd3fe/dom/html/TimeRanges.cpp#l137
 50 |     let index1 = 0;
 51 |     let index2 = 0;
 52 |     const ranges: TimeRange[] = [];
 53 |     while (index1 < this.length && index2 < other.length) {
 54 |       const start = Math.max(this.start(index1), other.start(index2));
 55 |       const end = Math.min(this.end(index1), other.end(index2));
 56 |       if (start < end) {
 57 |         ranges.push([start, end]);
 58 |       }
 59 |       if (this.end(index1) === other.end(index2)) {
 60 |         index1 += 1;
 61 |         index2 += 1;
 62 |       } else if (this.end(index1) < other.end(index2)) {
 63 |         index1 += 1;
 64 |       } else {
 65 |         index2 += 1;
 66 |       }
 67 |     }
 68 |     return new TimeRanges(ranges);
 69 |   }
 70 | 
 71 |   union(other: TimeRanges, tolerance: number = 0): TimeRanges {
 72 |     if (this.length === 0) {
 73 |       return other;
 74 |     }
 75 |     if (other.length === 0) {
 76 |       return this;
 77 |     }
 78 |     // Merge sorted inputs (we assume that the inputs are normalized)
 79 |     const sorted = this.#mergeSorted(other);
 80 |     // Merge overlaps
 81 |     return sorted.mergeOverlaps(tolerance);
 82 |   }
 83 | 
 84 |   #mergeSorted(other: TimeRanges): TimeRanges {
 85 |     // Based on merge sort (assuming both inputs are already sorted)
 86 |     const ranges: TimeRange[] = [];
 87 |     let index1 = 0;
 88 |     let index2 = 0;
 89 |     while (index1 < this.length && index2 < other.length) {
 90 |       const start1 = this.start(index1);
 91 |       const end1 = this.end(index1);
 92 |       const start2 = other.start(index2);
 93 |       const end2 = other.end(index2);
 94 |       if (start1 < start2 || (start1 === start2 && end1 < end2)) {
 95 |         ranges.push([start1, end1]);
 96 |         index1++;
 97 |       } else {
 98 |         ranges.push([start2, end2]);
 99 |         index2++;
100 |       }
101 |     }
102 |     ranges.push(...this.#ranges.slice(index1));
103 |     ranges.push(...other.#ranges.slice(index2));
104 |     return new TimeRanges(ranges);
105 |   }
106 | 
107 |   mergeOverlaps(tolerance: number = 0): TimeRanges {
108 |     // Based on this::normalize from Mozilla Firefox
109 |     // https://hg.mozilla.org/releases/mozilla-release/file/33c11529607b/dom/html/TimeRanges.cpp#l112
110 |     const length = this.length;
111 |     if (length < 2) {
112 |       return this;
113 |     }
114 |     const ranges: TimeRange[] = [];
115 |     let currentStart = this.start(0);
116 |     let currentEnd = this.end(0);
117 |     for (let index = 1; index < length; index++) {
118 |       const newStart = this.start(index);
119 |       const newEnd = this.end(index);
120 |       // Skip if new range is completely contained in current range
121 |       if (currentStart <= newStart && currentEnd >= newEnd) {
122 |         continue;
123 |       }
124 |       if (currentEnd + tolerance >= newStart) {
125 |         // Extend current range
126 |         currentEnd = newEnd;
127 |       } else {
128 |         // Finish current range
129 |         ranges.push([currentStart, currentEnd]);
130 |         currentStart = newStart;
131 |         currentEnd = newEnd;
132 |       }
133 |     }
134 |     // Finish last range
135 |     ranges.push([currentStart, currentEnd]);
136 |     return new TimeRanges(ranges);
137 |   }
138 | 
139 |   invert(): TimeRanges {
140 |     if (this.length === 0) {
141 |       return new TimeRanges([[-Infinity, +Infinity]]);
142 |     }
143 |     const ranges: TimeRange[] = [];
144 |     if (this.#ranges[0][0] > -Infinity) {
145 |       ranges.push([-Infinity, this.#ranges[0][0]]);
146 |     }
147 |     for (let i = 1; i < this.#ranges.length; i++) {
148 |       ranges.push([this.#ranges[i - 1][1], this.#ranges[i][0]]);
149 |     }
150 |     if (this.#ranges[this.#ranges.length - 1][1] < Infinity) {
151 |       ranges.push([this.#ranges[this.#ranges.length - 1][1], Infinity]);
152 |     }
153 |     return new TimeRanges(ranges);
154 |   }
155 | 
156 |   subtract(other: TimeRanges): TimeRanges {
157 |     return this.intersect(other.invert());
158 |   }
159 | }
160 | 
161 | export function setEndTimeOnLastRange(
162 |   timeRanges: TimeRanges,
163 |   newEndTime: number
164 | ): TimeRanges {
165 |   if (timeRanges.length === 0) {
166 |     return timeRanges;
167 |   }
168 |   return timeRanges.union(
169 |     new TimeRanges([[timeRanges.end(timeRanges.length - 1), newEndTime]])
170 |   );
171 | }
172 | 


--------------------------------------------------------------------------------
/src/track-buffer.ts:
--------------------------------------------------------------------------------
  1 | import { TimeRanges } from "./time-ranges";
  2 | import { Sample } from "mp4box";
  3 | import { arrayRemoveAt, Direction, insertSorted } from "./util";
  4 | 
  5 | const BUFFERED_TOLERANCE: number = 1 / 60;
  6 | 
  7 | export type EncodedChunk = EncodedAudioChunk | EncodedVideoChunk;
  8 | export type DecoderConfig = AudioDecoderConfig | VideoDecoderConfig;
  9 | 
 10 | export interface DecodeQueue {
 11 |   frames: EncodedChunk[];
 12 |   codecConfig: DecoderConfig;
 13 | }
 14 | 
 15 | export abstract class TrackBuffer<T extends EncodedChunk = EncodedChunk> {
 16 |   readonly type: "audio" | "video";
 17 |   readonly trackId: number;
 18 |   protected codecConfig: DecoderConfig;
 19 |   lastDecodeTimestamp: number | undefined = undefined;
 20 |   lastFrameDuration: number | undefined = undefined;
 21 |   highestEndTimestamp: number | undefined = undefined;
 22 |   needRandomAccessPoint: boolean = true;
 23 |   trackBufferRanges: TimeRanges = new TimeRanges([]);
 24 | 
 25 |   protected constructor(
 26 |     type: "audio" | "video",
 27 |     trackId: number,
 28 |     codecConfig: DecoderConfig
 29 |   ) {
 30 |     this.type = type;
 31 |     this.trackId = trackId;
 32 |     this.codecConfig = codecConfig;
 33 |   }
 34 | 
 35 |   requireRandomAccessPoint(): void {
 36 |     this.lastDecodeTimestamp = undefined;
 37 |     this.lastFrameDuration = undefined;
 38 |     this.highestEndTimestamp = undefined;
 39 |     this.needRandomAccessPoint = true;
 40 |   }
 41 | 
 42 |   reconfigure(newConfig: DecoderConfig): void {
 43 |     this.codecConfig = newConfig;
 44 |   }
 45 | 
 46 |   addSample(sample: Sample): void {
 47 |     // https://w3c.github.io/media-source/#sourcebuffer-coded-frame-processing
 48 |     // 1.1. Let presentation timestamp be a double precision floating point representation
 49 |     //      of the coded frame's presentation timestamp in seconds.
 50 |     const pts = sample.cts / sample.timescale;
 51 |     // 1.2. Let decode timestamp be a double precision floating point representation
 52 |     //      of the coded frame's decode timestamp in seconds.
 53 |     const dts = sample.dts / sample.timescale;
 54 |     // 2. Let frame duration be a double precision floating point representation
 55 |     //    of the coded frame's duration in seconds.
 56 |     const frameDuration = sample.duration / sample.timescale;
 57 |     // 7. Let frame end timestamp equal the sum of presentation timestamp and frame duration.
 58 |     const frameEndTimestamp = (sample.cts + sample.duration) / sample.timescale;
 59 |     // 16. Add the coded frame with the presentation timestamp, decode timestamp,
 60 |     //     and frame duration to the track buffer.
 61 |     this.addCodedFrame(sample);
 62 |     this.trackBufferRanges = this.trackBufferRanges.union(
 63 |       new TimeRanges([[pts, frameEndTimestamp]]),
 64 |       BUFFERED_TOLERANCE
 65 |     );
 66 |     // 17. Set last decode timestamp for track buffer to decode timestamp.
 67 |     this.lastDecodeTimestamp = dts;
 68 |     // 18. Set last frame duration for track buffer to frame duration.
 69 |     this.lastFrameDuration = frameDuration;
 70 |     // 19. If highest end timestamp for track buffer is unset or frame end timestamp
 71 |     //     is greater than highest end timestamp, then set highest end timestamp
 72 |     //     for track buffer to frame end timestamp.
 73 |     if (
 74 |       this.highestEndTimestamp === undefined ||
 75 |       frameEndTimestamp > this.highestEndTimestamp
 76 |     ) {
 77 |       this.highestEndTimestamp = frameEndTimestamp;
 78 |     }
 79 |   }
 80 | 
 81 |   protected abstract addCodedFrame(sample: Sample): void;
 82 | 
 83 |   abstract findFrameForTime(time: number): T | undefined;
 84 | 
 85 |   abstract hasFrame(frame: T): boolean;
 86 | 
 87 |   abstract getDecodeDependenciesForFrame(frame: T): DecodeQueue;
 88 | 
 89 |   abstract getNextFrames(
 90 |     frame: T,
 91 |     maxAmount: number,
 92 |     direction: Direction
 93 |   ): DecodeQueue | undefined;
 94 | 
 95 |   abstract getRandomAccessPointAtOrAfter(
 96 |     timeInMicros: number
 97 |   ): number | undefined;
 98 | 
 99 |   abstract removeSamples(startInMicros: number, endInMicros: number): void;
100 | }
101 | 
102 | export interface AudioDecodeQueue extends DecodeQueue {
103 |   frames: EncodedAudioChunk[];
104 |   codecConfig: AudioDecoderConfig;
105 | }
106 | 
107 | export class AudioTrackBuffer extends TrackBuffer<EncodedAudioChunk> {
108 |   protected declare codecConfig: AudioDecoderConfig;
109 |   #frames: EncodedAudioChunk[] = [];
110 | 
111 |   constructor(trackId: number, codecConfig: AudioDecoderConfig) {
112 |     super("audio", trackId, codecConfig);
113 |   }
114 | 
115 |   protected addCodedFrame(sample: Sample): void {
116 |     // FIXME Store codecConfig
117 |     const frame = new EncodedAudioChunk({
118 |       timestamp: (1e6 * sample.cts) / sample.timescale,
119 |       duration: (1e6 * sample.duration) / sample.timescale,
120 |       data: sample.data,
121 |       type: sample.is_sync ? "key" : "delta"
122 |     });
123 |     insertSorted(this.#frames, frame, (x) => x.timestamp);
124 |   }
125 | 
126 |   findFrameForTime(time: number): EncodedAudioChunk | undefined {
127 |     const timeInMicros = Math.floor(time * 1e6);
128 |     return this.#frames.find(
129 |       (frame) =>
130 |         frame.timestamp <= timeInMicros &&
131 |         timeInMicros < frame.timestamp + frame.duration!
132 |     );
133 |   }
134 | 
135 |   hasFrame(frame: EncodedAudioChunk): boolean {
136 |     return this.#frames.includes(frame);
137 |   }
138 | 
139 |   getDecodeDependenciesForFrame(frame: EncodedAudioChunk): AudioDecodeQueue {
140 |     return {
141 |       frames: [frame],
142 |       codecConfig: this.codecConfig
143 |     };
144 |   }
145 | 
146 |   getNextFrames(
147 |     frame: EncodedAudioChunk,
148 |     maxAmount: number,
149 |     direction: Direction
150 |   ): AudioDecodeQueue | undefined {
151 |     const frameIndex = this.#frames.indexOf(frame);
152 |     if (frameIndex < 0) {
153 |       return undefined;
154 |     }
155 |     if (direction === Direction.FORWARD) {
156 |       const nextIndex = frameIndex + 1;
157 |       if (nextIndex >= this.#frames.length) {
158 |         return undefined;
159 |       }
160 |       return {
161 |         frames: this.#frames.slice(nextIndex, nextIndex + maxAmount),
162 |         codecConfig: this.codecConfig
163 |       };
164 |     } else {
165 |       const nextIndex = frameIndex - 1;
166 |       if (nextIndex < 0) {
167 |         return undefined;
168 |       }
169 |       return {
170 |         frames: this.#frames.slice(
171 |           Math.max(0, nextIndex - maxAmount),
172 |           nextIndex
173 |         ),
174 |         codecConfig: this.codecConfig
175 |       };
176 |     }
177 |   }
178 | 
179 |   getRandomAccessPointAtOrAfter(timeInMicros: number): number | undefined {
180 |     return this.#frames.find((frame) => frame.timestamp >= timeInMicros)
181 |       ?.timestamp;
182 |   }
183 | 
184 |   removeSamples(startInMicros: number, endInMicros: number): void {
185 |     let didRemove: boolean = false;
186 |     for (let i = this.#frames.length - 1; i >= 0; i--) {
187 |       const frame = this.#frames[i];
188 |       if (frame.timestamp >= startInMicros && frame.timestamp < endInMicros) {
189 |         arrayRemoveAt(this.#frames, i);
190 |         didRemove = true;
191 |       }
192 |     }
193 |     if (didRemove) {
194 |       this.#updateTrackBufferRanges();
195 |     }
196 |   }
197 | 
198 |   #updateTrackBufferRanges(): void {
199 |     this.trackBufferRanges = new TimeRanges(
200 |       this.#frames.map((frame) => [
201 |         frame.timestamp / 1e6,
202 |         (frame.timestamp + frame.duration!) / 1e6
203 |       ])
204 |     ).mergeOverlaps(BUFFERED_TOLERANCE);
205 |   }
206 | }
207 | 
208 | export interface VideoDecodeQueue extends DecodeQueue {
209 |   frames: EncodedVideoChunk[];
210 |   codecConfig: VideoDecoderConfig;
211 | }
212 | 
213 | interface GroupOfPictures {
214 |   start: number;
215 |   end: number;
216 |   frames: EncodedVideoChunk[];
217 |   codecConfig: VideoDecoderConfig;
218 | }
219 | 
220 | export class VideoTrackBuffer extends TrackBuffer<EncodedVideoChunk> {
221 |   protected declare codecConfig: VideoDecoderConfig;
222 |   #gops: Array<GroupOfPictures> = [];
223 |   #currentGop: GroupOfPictures | undefined = undefined;
224 | 
225 |   constructor(trackId: number, codecConfig: VideoDecoderConfig) {
226 |     super("video", trackId, codecConfig);
227 |   }
228 | 
229 |   protected addCodedFrame(sample: Sample): void {
230 |     const frame = new EncodedVideoChunk({
231 |       timestamp: (1e6 * sample.cts) / sample.timescale,
232 |       duration: (1e6 * sample.duration) / sample.timescale,
233 |       data: sample.data,
234 |       type: sample.is_sync ? "key" : "delta"
235 |     });
236 |     if (this.#currentGop === undefined || frame.type === "key") {
237 |       const gop: GroupOfPictures = {
238 |         start: frame.timestamp,
239 |         end: frame.timestamp + frame.duration!,
240 |         frames: [frame],
241 |         codecConfig: this.codecConfig
242 |       };
243 |       this.#currentGop = gop;
244 |       insertSorted(this.#gops, gop, (x) => x.start);
245 |     } else {
246 |       this.#currentGop.end = Math.max(
247 |         this.#currentGop.end,
248 |         frame.timestamp + frame.duration!
249 |       );
250 |       this.#currentGop.frames.push(frame);
251 |     }
252 |   }
253 | 
254 |   requireRandomAccessPoint(): void {
255 |     super.requireRandomAccessPoint();
256 |     this.#currentGop = undefined;
257 |   }
258 | 
259 |   reconfigure(newConfig: VideoDecoderConfig): void {
260 |     super.reconfigure(newConfig);
261 |     this.#currentGop = undefined;
262 |   }
263 | 
264 |   hasFrame(frame: EncodedAudioChunk): boolean {
265 |     return this.#gops.some((gop) => gop.frames.includes(frame));
266 |   }
267 | 
268 |   findFrameForTime(time: number): EncodedVideoChunk | undefined {
269 |     const timeInMicros = Math.floor(time * 1e6);
270 |     const containingGop = this.#gops.find((gop) => {
271 |       return gop.start <= timeInMicros && timeInMicros < gop.end;
272 |     });
273 |     if (!containingGop) {
274 |       return undefined;
275 |     }
276 |     return containingGop.frames.find(
277 |       (sample) =>
278 |         sample.timestamp <= timeInMicros &&
279 |         timeInMicros < sample.timestamp + sample.duration!
280 |     );
281 |   }
282 | 
283 |   getDecodeDependenciesForFrame(frame: EncodedVideoChunk): VideoDecodeQueue {
284 |     const containingGop = this.#gops.find((gop) => {
285 |       return gop.frames.includes(frame);
286 |     })!;
287 |     // Decode from the first frame in the GOP (i.e. the sync frame)
288 |     // up to (and including) the requested frame.
289 |     let startIndex = 0;
290 |     let endIndex = containingGop.frames.indexOf(frame);
291 |     return {
292 |       frames: containingGop.frames.slice(startIndex, endIndex + 1),
293 |       codecConfig: containingGop.codecConfig
294 |     };
295 |   }
296 | 
297 |   getNextFrames(
298 |     frame: EncodedVideoChunk,
299 |     maxAmount: number,
300 |     direction: Direction
301 |   ): VideoDecodeQueue | undefined {
302 |     let gopIndex = this.#gops.findIndex((gop) => {
303 |       return gop.frames.includes(frame);
304 |     })!;
305 |     if (gopIndex < 0) {
306 |       return undefined;
307 |     }
308 |     let containingGop = this.#gops[gopIndex];
309 |     let frameIndex = containingGop.frames.indexOf(frame);
310 |     let nextGop: GroupOfPictures;
311 |     let nextIndex: number;
312 |     if (direction === Direction.FORWARD) {
313 |       if (frameIndex < containingGop.frames.length - 1) {
314 |         nextGop = containingGop;
315 |         nextIndex = frameIndex + 1;
316 |       } else {
317 |         nextGop = this.#gops[gopIndex + 1];
318 |         if (!nextGop || Math.abs(nextGop.start - containingGop.end) > 1) {
319 |           return undefined;
320 |         }
321 |         nextIndex = 0;
322 |       }
323 |       return {
324 |         frames: nextGop.frames.slice(nextIndex, nextIndex + maxAmount),
325 |         codecConfig: nextGop.codecConfig
326 |       };
327 |     } else {
328 |       if (frameIndex > 0) {
329 |         nextGop = containingGop;
330 |         nextIndex = frameIndex;
331 |       } else {
332 |         nextGop = this.#gops[gopIndex - 1];
333 |         if (!nextGop || Math.abs(nextGop.end - containingGop.start) > 1) {
334 |           return undefined;
335 |         }
336 |         nextIndex = nextGop.frames.length;
337 |       }
338 |       return {
339 |         frames: nextGop.frames.slice(0, nextIndex),
340 |         codecConfig: nextGop.codecConfig
341 |       };
342 |     }
343 |   }
344 | 
345 |   getRandomAccessPointAtOrAfter(timeInMicros: number): number | undefined {
346 |     return this.#gops.find((gop) => gop.start >= timeInMicros)?.start;
347 |   }
348 | 
349 |   removeSamples(startInMicros: number, endInMicros: number): void {
350 |     // https://w3c.github.io/media-source/#dfn-coded-frame-removal
351 |     // 3.3. Remove all media data, from this track buffer, that contain starting timestamps
352 |     //      greater than or equal to start and less than the remove end timestamp.
353 |     // 3.4. Remove all possible decoding dependencies on the coded frames removed
354 |     //      in the previous step by removing all coded frames from this track buffer
355 |     //      between those frames removed in the previous step and the next random
356 |     //      access point after those removed frames.
357 |     let didRemove: boolean = false;
358 |     for (let i = this.#gops.length - 1; i >= 0; i--) {
359 |       const gop = this.#gops[i];
360 |       const removeFrom = gop.frames.findIndex(
361 |         (frame) =>
362 |           frame.timestamp >= startInMicros && frame.timestamp < endInMicros
363 |       );
364 |       if (removeFrom < 0) {
365 |         // Keep entire GOP.
366 |       } else if (removeFrom === 0) {
367 |         // Remove entire GOP.
368 |         arrayRemoveAt(this.#gops, i);
369 |         didRemove = true;
370 |       } else {
371 |         // Remove some frames.
372 |         const lastFrame = gop.frames[removeFrom - 1];
373 |         gop.end = lastFrame.timestamp + lastFrame.duration!;
374 |         gop.frames.splice(removeFrom);
375 |         didRemove = true;
376 |       }
377 |     }
378 |     if (didRemove) {
379 |       this.#updateTrackBufferRanges();
380 |     }
381 |   }
382 | 
383 |   #updateTrackBufferRanges(): void {
384 |     this.trackBufferRanges = new TimeRanges(
385 |       this.#gops.map((gop) => [gop.start / 1e6, gop.end / 1e6])
386 |     ).mergeOverlaps(BUFFERED_TOLERANCE);
387 |   }
388 | }
389 | 


--------------------------------------------------------------------------------
/src/util.ts:
--------------------------------------------------------------------------------
  1 | export function toUint8Array(data: BufferSource): Uint8Array {
  2 |   if (data instanceof ArrayBuffer) {
  3 |     return new Uint8Array(data, 0, data.byteLength);
  4 |   } else if (ArrayBuffer.isView(data)) {
  5 |     return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
  6 |   } else {
  7 |     throw new TypeError(`Unexpected buffer source: ${data}`);
  8 |   }
  9 | }
 10 | 
 11 | export function concatUint8Arrays(
 12 |   left: Uint8Array,
 13 |   right: Uint8Array
 14 | ): Uint8Array {
 15 |   const result = new Uint8Array(left.byteLength + right.byteLength);
 16 |   result.set(left, 0);
 17 |   result.set(right, left.byteLength);
 18 |   return result;
 19 | }
 20 | 
 21 | export function arrayRemove<T>(array: T[], element: T): void {
 22 |   arrayRemoveAt(array, array.indexOf(element));
 23 | }
 24 | 
 25 | export function arrayRemoveAt<T>(array: T[], index: number): void {
 26 |   if (index < 0) {
 27 |     return;
 28 |   } else if (index === 0) {
 29 |     array.shift();
 30 |   } else {
 31 |     array.splice(index, 1);
 32 |   }
 33 | }
 34 | 
 35 | export function sumWith<T>(array: T[], cb: (element: T) => number): number {
 36 |   return array.reduce((total, element) => total + cb(element), 0);
 37 | }
 38 | 
 39 | export function queueTask(fn: () => void): void {
 40 |   setTimeout(fn, 0);
 41 | }
 42 | 
 43 | export function waitForEvent(
 44 |   target: EventTarget,
 45 |   types: string | string[],
 46 |   signal?: AbortSignal
 47 | ): Promise<Event> {
 48 |   types = Array.isArray(types) ? types : [types];
 49 |   return new Promise((resolve, reject) => {
 50 |     if (signal?.aborted) {
 51 |       return reject(signal.reason);
 52 |     }
 53 |     const listener = (event: Event) => {
 54 |       for (const type of types) {
 55 |         target.removeEventListener(type, listener);
 56 |       }
 57 |       signal?.removeEventListener("abort", abortListener);
 58 |       resolve(event);
 59 |     };
 60 |     const abortListener = () => {
 61 |       reject(signal!.reason);
 62 |     };
 63 |     for (const type of types) {
 64 |       target.addEventListener(type, listener, { once: true, signal });
 65 |     }
 66 |     signal?.addEventListener("abort", abortListener, { once: true });
 67 |   });
 68 | }
 69 | 
 70 | export function isDefined<T>(x: T | undefined): x is T {
 71 |   return x !== undefined;
 72 | }
 73 | 
 74 | export function binarySearch<T>(
 75 |   array: readonly T[],
 76 |   key: number,
 77 |   keySelector: (v: T) => number
 78 | ): number {
 79 |   // Original from TypeScript by Microsoft
 80 |   // License: Apache 2.0
 81 |   // https://github.com/microsoft/TypeScript/blob/v4.8.3/src/compiler/core.ts#L1151-L1184
 82 |   let low = 0;
 83 |   let high = array.length - 1;
 84 |   while (low <= high) {
 85 |     const middle = low + ((high - low) >> 1);
 86 |     const midKey = keySelector(array[middle]);
 87 |     if (midKey < key) {
 88 |       low = middle + 1;
 89 |     } else if (midKey > key) {
 90 |       high = middle - 1;
 91 |     } else {
 92 |       return middle;
 93 |     }
 94 |   }
 95 |   return ~low; // key not found
 96 | }
 97 | 
 98 | export function insertSorted<T>(
 99 |   array: T[],
100 |   insert: T,
101 |   keySelector: (v: T) => number,
102 |   allowDuplicates?: boolean
103 | ): void {
104 |   // Original from TypeScript by Microsoft
105 |   // License: Apache 2.0
106 |   // https://github.com/microsoft/TypeScript/blob/v4.8.3/src/compiler/core.ts#L781-L794
107 |   if (array.length === 0) {
108 |     array.push(insert);
109 |     return;
110 |   }
111 |   const insertIndex = binarySearch(array, keySelector(insert), keySelector);
112 |   if (insertIndex < 0) {
113 |     array.splice(~insertIndex, 0, insert);
114 |   } else if (allowDuplicates) {
115 |     array.splice(insertIndex, 0, insert);
116 |   }
117 | }
118 | 
119 | export class Deferred<T> {
120 |   readonly promise: Promise<T>;
121 |   #resolve?: (value: T) => void;
122 |   #reject?: (reason: any) => void;
123 |   #followedSignals: AbortSignal[] = [];
124 | 
125 |   constructor() {
126 |     this.promise = new Promise<T>((resolve, reject) => {
127 |       this.#resolve = resolve;
128 |       this.#reject = reject;
129 |     });
130 |   }
131 | 
132 |   resolve(value: T) {
133 |     this.#resolve?.(value);
134 |     this.#cleanup();
135 |   }
136 | 
137 |   reject(reason: any) {
138 |     this.#reject?.(reason);
139 |     this.#cleanup();
140 |   }
141 | 
142 |   follow(signal: AbortSignal): void {
143 |     if (signal.aborted) {
144 |       return this.reject(signal.reason);
145 |     }
146 |     signal.addEventListener("abort", this.#handleAbort, { once: true });
147 |     this.#followedSignals.push(signal);
148 |   }
149 | 
150 |   #cleanup(): void {
151 |     this.#resolve = this.#reject = undefined;
152 |     for (const signal of this.#followedSignals) {
153 |       signal.removeEventListener("abort", this.#handleAbort);
154 |     }
155 |     this.#followedSignals.length = 0;
156 |   }
157 | 
158 |   readonly #handleAbort = (event: Event) => {
159 |     this.reject((event.target as AbortSignal).reason);
160 |   };
161 | }
162 | 
163 | export enum Direction {
164 |   FORWARD = 1,
165 |   BACKWARD = -1
166 | }
167 | 


--------------------------------------------------------------------------------
/src/vendor/mp4box.d.ts:
--------------------------------------------------------------------------------
  1 | declare module "mp4box" {
  2 |   export class MP4BoxStream {
  3 |     constructor(arrayBuffer: ArrayBuffer);
  4 | 
  5 |     getPosition(): number;
  6 | 
  7 |     seek(position: number): void;
  8 |   }
  9 | 
 10 |   export class DataStream {
 11 |     static BIG_ENDIAN = false;
 12 |     static LITTLE_ENDIAN = true;
 13 | 
 14 |     constructor(
 15 |       arrayBuffer: ArrayBuffer | undefined,
 16 |       byteOffset: number,
 17 |       endianness: boolean
 18 |     );
 19 | 
 20 |     readonly buffer: ArrayBuffer;
 21 |   }
 22 | 
 23 |   export interface Box {
 24 |     type: string;
 25 |     size: number;
 26 |     hdr_size: number;
 27 |     start: number;
 28 | 
 29 |     write(stream: DataStream): void;
 30 |   }
 31 | 
 32 |   export enum BoxParser {
 33 |     ERR_INVALID_DATA = -1,
 34 |     ERR_NOT_ENOUGH_DATA = 0,
 35 |     OK = 1
 36 |   }
 37 | 
 38 |   export interface BoxResult {
 39 |     code: BoxParser.OK;
 40 |     box: Box;
 41 |     size: number;
 42 |   }
 43 | 
 44 |   export interface HeaderOnlyResult {
 45 |     code: BoxParser.OK;
 46 |     type: string;
 47 |     size: number;
 48 |     hdr_size: number;
 49 |     start: number;
 50 |   }
 51 | 
 52 |   export interface InvalidDataResult {
 53 |     code: BoxParser.ERR_INVALID_DATA;
 54 |   }
 55 | 
 56 |   export interface NotEnoughDataResult {
 57 |     code: BoxParser.ERR_NOT_ENOUGH_DATA;
 58 |     type?: string;
 59 |     size?: number;
 60 |     hdr_size?: number;
 61 |     start?: number;
 62 |   }
 63 | 
 64 |   export namespace BoxParser {
 65 |     export function parseOneBox(
 66 |       stream: MP4BoxStream,
 67 |       headerOnly: true
 68 |     ): HeaderOnlyResult | InvalidDataResult | NotEnoughDataResult;
 69 | 
 70 |     export function parseOneBox(
 71 |       stream: MP4BoxStream,
 72 |       headerOnly?: false
 73 |     ): BoxResult | InvalidDataResult | NotEnoughDataResult;
 74 |   }
 75 | 
 76 |   export function createFile(): ISOFile;
 77 | 
 78 |   export interface MP4ArrayBuffer extends ArrayBuffer {
 79 |     fileStart: number;
 80 |   }
 81 | 
 82 |   export interface ISOFile {
 83 |     appendBuffer(ab: MP4ArrayBuffer): void;
 84 | 
 85 |     getInfo(): Info;
 86 | 
 87 |     getTrackById(trackId: number): TrakBox;
 88 | 
 89 |     setExtractionOptions(
 90 |       trackId: number,
 91 |       user: any,
 92 |       options: ExtractionOptions
 93 |     );
 94 | 
 95 |     start(): void;
 96 | 
 97 |     stop(): void;
 98 | 
 99 |     flush(): void;
100 | 
101 |     onSamples?: (trackId: number, user: any, samples: Sample[]) => void;
102 | 
103 |     releaseUsedSamples(trackId: number, sampleNum: number): void;
104 |   }
105 | 
106 |   export interface Info {
107 |     duration: number;
108 |     timescale: number;
109 |     isFragmented: boolean;
110 |     isProgressive: boolean;
111 |     hasIOD: boolean;
112 |     brands: string[];
113 |     created: Date;
114 |     modified: Date;
115 |     tracks: TrackInfo[];
116 |     audioTracks: AudioTrackInfo[];
117 |     videoTracks: VideoTrackInfo[];
118 |   }
119 | 
120 |   export interface TrackInfo {
121 |     type: "audio" | "video";
122 |     id: number;
123 |     name: string;
124 |     created: Date;
125 |     modified: Date;
126 |     movie_duration: number;
127 |     layer: number;
128 |     alternate_group: number;
129 |     volume: number;
130 |     track_width: number;
131 |     track_height: number;
132 |     timescale: number;
133 |     duration: number;
134 |     bitrate: number;
135 |     codec: string;
136 |     language: "und";
137 |     nb_samples: number;
138 |   }
139 | 
140 |   export interface AudioTrackInfo extends TrackInfo {
141 |     type: "audio";
142 |     audio: {
143 |       sample_rate: number;
144 |       channel_count: number;
145 |       sample_size: number;
146 |     };
147 |   }
148 | 
149 |   export interface VideoTrackInfo extends TrackInfo {
150 |     type: "video";
151 |     video: {
152 |       width: number;
153 |       height: number;
154 |     };
155 |   }
156 | 
157 |   export interface TrakBox extends Box {
158 |     type: "trak";
159 |     mdia: MdiaBox;
160 |   }
161 | 
162 |   export interface MdiaBox extends Box {
163 |     type: "mdia";
164 |     minf: MinfBox;
165 |   }
166 | 
167 |   export interface MinfBox extends Box {
168 |     type: "minf";
169 |     stbl: StblBox;
170 |   }
171 | 
172 |   export interface StblBox extends Box {
173 |     type: "stbl";
174 |     stsd: StsdBox;
175 |   }
176 | 
177 |   export interface StsdBox extends Box {
178 |     type: "stsd";
179 |     entries: Box[];
180 |   }
181 | 
182 |   export interface AvcBox extends Box {
183 |     type: "avc1";
184 |     avcC: AvccBox;
185 |   }
186 | 
187 |   export interface AvccBox extends Box {
188 |     type: "avcC";
189 |   }
190 | 
191 |   export interface Mp4aBox extends Box {
192 |     type: "mp4a";
193 |     esds: EsdsBox;
194 |   }
195 | 
196 |   export interface EsdsBox extends Box {
197 |     type: "esds";
198 |     esd: ES_Descriptor;
199 |   }
200 | 
201 |   export interface ES_Descriptor {
202 |     descs: [DecoderConfigDescriptor, ...any[]];
203 |   }
204 | 
205 |   export interface DecoderConfigDescriptor {
206 |     oti: number;
207 |     streamType: number;
208 |     tag: number;
209 |     descs: [DecoderSpecificInfo, ...any[]];
210 |   }
211 | 
212 |   export interface DecoderSpecificInfo {
213 |     tag: number;
214 |     data: Uint8Array;
215 |   }
216 | 
217 |   export interface ExtractionOptions {
218 |     nbSamples?: number;
219 |   }
220 | 
221 |   export interface Sample {
222 |     number: number;
223 |     track_id: number;
224 |     timescale: number;
225 |     description: Box;
226 |     size: number;
227 |     data: Uint8Array;
228 |     duration: number;
229 |     dts: number;
230 |     cts: number;
231 |     is_sync: boolean;
232 |     is_leading: number;
233 |     is_depended_on: number;
234 |     has_redundancy: number;
235 |     degradation_priority: number;
236 |     offset: number;
237 |   }
238 | }
239 | 


--------------------------------------------------------------------------------
/src/video-element.ts:
--------------------------------------------------------------------------------
   1 | import stylesheet from "./style.css?inline";
   2 | import {
   3 |   attachToMediaElement,
   4 |   BabyMediaSource,
   5 |   checkBuffer,
   6 |   detachFromMediaElement,
   7 |   getActiveAudioTrackBuffer,
   8 |   getActiveVideoTrackBuffer,
   9 |   getBuffered
  10 | } from "./media-source";
  11 | import {
  12 |   arrayRemove,
  13 |   arrayRemoveAt,
  14 |   Deferred,
  15 |   Direction,
  16 |   queueTask,
  17 |   sumWith,
  18 |   waitForEvent
  19 | } from "./util";
  20 | import { TimeRange, TimeRanges } from "./time-ranges";
  21 | import {
  22 |   AudioDecodeQueue,
  23 |   EncodedChunk,
  24 |   VideoDecodeQueue
  25 | } from "./track-buffer";
  26 | 
  27 | const template = document.createElement("template");
  28 | template.innerHTML = `<style>${stylesheet}</style>`;
  29 | 
  30 | export enum MediaReadyState {
  31 |   HAVE_NOTHING,
  32 |   HAVE_METADATA,
  33 |   HAVE_CURRENT_DATA,
  34 |   HAVE_FUTURE_DATA,
  35 |   HAVE_ENOUGH_DATA
  36 | }
  37 | 
  38 | export let updateDuration: (
  39 |   videoElement: BabyVideoElement,
  40 |   newDuration: number
  41 | ) => void;
  42 | export let updateReadyState: (
  43 |   videoElement: BabyVideoElement,
  44 |   newReadyState: MediaReadyState
  45 | ) => void;
  46 | export let notifyProgress: (videoElement: BabyVideoElement) => void;
  47 | export let notifyEndOfStream: (videoElement: BabyVideoElement) => void;
  48 | 
  49 | // Low and high watermark for decode queue
  50 | // If the queue drops below the LWM, we try to fill it with up to HWM new frames
  51 | const decodeQueueLwm = 20;
  52 | const decodeQueueHwm = 30;
  53 | 
  54 | const DEBUG = false;
  55 | 
  56 | // Bug showcases
  57 | const BUG_DECODE_VIDEO_IN_REVERSE = false;
  58 | 
  59 | export class BabyVideoElement extends HTMLElement {
  60 |   readonly #canvas: HTMLCanvasElement;
  61 |   readonly #canvasContext: CanvasRenderingContext2D;
  62 | 
  63 |   #currentTime: number = 0;
  64 |   #duration: number = NaN;
  65 |   #ended: boolean = false;
  66 |   #muted: boolean = false;
  67 |   #paused: boolean = true;
  68 |   #playbackRate: number = 1;
  69 |   #played: TimeRanges = new TimeRanges([]);
  70 |   #readyState: MediaReadyState = MediaReadyState.HAVE_NOTHING;
  71 |   #seeking: boolean = false;
  72 |   #srcObject: BabyMediaSource | undefined;
  73 |   #volume: number = 1;
  74 | 
  75 |   #pendingPlayPromises: Array<Deferred<void>> = [];
  76 |   #advanceLoop: number = 0;
  77 |   #lastAdvanceTime: number = 0;
  78 |   #lastAudioTimestamp: number = 0;
  79 |   #lastPlayedTime: number = NaN;
  80 |   #lastTimeUpdate: number = 0;
  81 |   #lastProgress: number = 0;
  82 |   #nextProgressTimer: number = 0;
  83 |   #hasFiredLoadedData: boolean = false;
  84 |   #seekAbortController: AbortController = new AbortController();
  85 |   #isEndOfStream: boolean = false;
  86 | 
  87 |   readonly #videoDecoder: VideoDecoder;
  88 |   #lastVideoDecoderConfig: VideoDecoderConfig | undefined = undefined;
  89 |   #furthestDecodingVideoFrame: EncodedVideoChunk | undefined = undefined;
  90 |   #decodingVideoFrames: EncodedVideoChunk[] = [];
  91 |   #decodedVideoFrames: VideoFrame[] = [];
  92 |   #nextDecodedVideoFramePromise: Deferred<void> | undefined = undefined;
  93 |   #lastRenderedFrame: number | undefined = undefined;
  94 |   #nextRenderFrame: number = 0;
  95 |   #needKeyFrame: boolean = true;
  96 | 
  97 |   readonly #audioDecoder: AudioDecoder;
  98 |   #lastAudioDecoderConfig: AudioDecoderConfig | undefined = undefined;
  99 |   #audioDecoderTimestamp: number = 0;
 100 |   #furthestDecodedAudioFrame: EncodedAudioChunk | undefined = undefined;
 101 |   #decodingAudioFrames: EncodedAudioChunk[] = [];
 102 |   #nextDecodedAudioFramePromise: Deferred<void> | undefined = undefined;
 103 |   #originalDecodingAudioFrames: WeakMap<EncodedAudioChunk, EncodedAudioChunk> =
 104 |     new WeakMap();
 105 |   #decodedAudioFrames: AudioData[] = [];
 106 | 
 107 |   #audioContext: AudioContext | undefined;
 108 |   #lastScheduledAudioFrameTime: number = -1;
 109 |   #scheduledAudioSourceNodes: Array<{
 110 |     node: AudioBufferSourceNode;
 111 |     timestamp: number;
 112 |   }> = [];
 113 |   #volumeGainNode: GainNode | undefined;
 114 | 
 115 |   constructor() {
 116 |     super();
 117 | 
 118 |     const shadow = this.attachShadow({ mode: "open" });
 119 |     shadow.appendChild(template.content.cloneNode(true));
 120 | 
 121 |     this.#canvas = document.createElement("canvas");
 122 |     // The default object size is a width of 300 CSS pixels and a height of 150 CSS pixels.
 123 |     this.#canvas.width = 300;
 124 |     this.#canvas.height = 150;
 125 |     shadow.appendChild(this.#canvas);
 126 | 
 127 |     this.#canvasContext = this.#canvas.getContext("2d")!;
 128 |     this.#canvasContext.fillStyle = "black";
 129 |     this.#canvasContext.fillRect(0, 0, this.#canvas.width, this.#canvas.height);
 130 | 
 131 |     if (typeof VideoDecoder !== "function") {
 132 |       throw new Error(`<baby-video>: This browser does not support WebCodecs.`);
 133 |     }
 134 |     this.#videoDecoder = new VideoDecoder({
 135 |       output: (frame) => this.#onVideoFrame(frame),
 136 |       error: (error) => console.error("WTF", error)
 137 |     });
 138 | 
 139 |     this.#audioDecoder = new AudioDecoder({
 140 |       output: (data) => this.#onAudioData(data),
 141 |       error: (error) => console.error("WTF", error)
 142 |     });
 143 |   }
 144 | 
 145 |   connectedCallback(): void {
 146 |     // Consider checking for properties that may have been set
 147 |     // before the element upgraded.
 148 |     // https://web.dev/custom-elements-best-practices/
 149 |     this.#upgradeProperty("srcObject");
 150 |     this.#upgradeProperty("muted");
 151 |     this.#upgradeProperty("playbackRate");
 152 |     this.#upgradeProperty("volume");
 153 |     this.#upgradeProperty("currentTime");
 154 |   }
 155 | 
 156 |   #upgradeProperty(prop: keyof this) {
 157 |     if (this.hasOwnProperty(prop)) {
 158 |       const value = this[prop];
 159 |       delete this[prop];
 160 |       this[prop] = value;
 161 |     }
 162 |   }
 163 | 
 164 |   get buffered(): TimeRanges {
 165 |     return this.#srcObject ? getBuffered(this.#srcObject) : new TimeRanges([]);
 166 |   }
 167 | 
 168 |   get currentTime(): number {
 169 |     return this.#currentTime;
 170 |   }
 171 | 
 172 |   set currentTime(value: number) {
 173 |     value = Number(value);
 174 |     // https://html.spec.whatwg.org/multipage/media.html#dom-media-currenttime
 175 |     // On setting, if the media element's readyState is HAVE_NOTHING,
 176 |     // then it must set the media element's default playback start position to the new value;
 177 |     // otherwise, it must set the official playback position to the new value and then seek to the new value.
 178 |     if (this.#readyState === MediaReadyState.HAVE_NOTHING) {
 179 |       // TODO
 180 |     } else {
 181 |       this.#seek(value);
 182 |     }
 183 |   }
 184 | 
 185 |   get duration(): number {
 186 |     return this.#duration;
 187 |   }
 188 | 
 189 |   get ended(): boolean {
 190 |     return this.#ended && this.#playbackRate >= 0;
 191 |   }
 192 | 
 193 |   get muted(): boolean {
 194 |     return this.#muted;
 195 |   }
 196 | 
 197 |   set muted(value: boolean) {
 198 |     if (this.#muted !== value) {
 199 |       this.#muted = value;
 200 |       this.dispatchEvent(new Event("volumechange"));
 201 |       this.#updateVolume();
 202 |     }
 203 |   }
 204 | 
 205 |   get paused(): boolean {
 206 |     return this.#paused;
 207 |   }
 208 | 
 209 |   get playbackRate(): number {
 210 |     return this.#playbackRate;
 211 |   }
 212 | 
 213 |   set playbackRate(value: number) {
 214 |     if (value === this.#playbackRate) {
 215 |       return;
 216 |     }
 217 |     const currentTime = this.#getCurrentPlaybackPosition(performance.now());
 218 |     if (Math.sign(value) !== Math.sign(this.#playbackRate)) {
 219 |       this.#resetVideoDecoder();
 220 |       this.#resetAudioDecoder();
 221 |     }
 222 |     this.#playbackRate = value;
 223 |     this.#updateCurrentTime(currentTime);
 224 |     this.#updatePlaying();
 225 |     this.#updatePlayed();
 226 |     this.#updateAudioPlaybackRate();
 227 |     this.dispatchEvent(new Event("ratechange"));
 228 |   }
 229 | 
 230 |   get played(): TimeRanges {
 231 |     return this.#played;
 232 |   }
 233 | 
 234 |   get readyState(): MediaReadyState {
 235 |     return this.#readyState;
 236 |   }
 237 | 
 238 |   get seekable(): TimeRanges {
 239 |     return new TimeRanges([[0, this.#duration]]);
 240 |   }
 241 | 
 242 |   get seeking(): boolean {
 243 |     return this.#seeking;
 244 |   }
 245 | 
 246 |   get srcObject(): BabyMediaSource | undefined {
 247 |     return this.#srcObject;
 248 |   }
 249 | 
 250 |   set srcObject(srcObject: BabyMediaSource | undefined) {
 251 |     if (this.#srcObject) {
 252 |       detachFromMediaElement(this.#srcObject);
 253 |     }
 254 |     this.#srcObject = srcObject;
 255 |     this.#currentTime = 0;
 256 |     this.#duration = NaN;
 257 |     this.#hasFiredLoadedData = false;
 258 |     this.#ended = false;
 259 |     this.#paused = true;
 260 |     this.#played = new TimeRanges([]);
 261 |     this.#readyState = MediaReadyState.HAVE_NOTHING;
 262 |     this.#seeking = false;
 263 |     this.#seekAbortController.abort();
 264 |     this.#lastAdvanceTime = 0;
 265 |     this.#lastAudioTimestamp = 0;
 266 |     this.#lastProgress = 0;
 267 |     this.#lastPlayedTime = NaN;
 268 |     clearTimeout(this.#nextProgressTimer);
 269 |     this.#lastTimeUpdate = 0;
 270 |     this.#updatePlaying();
 271 |     queueTask(() => this.dispatchEvent(new Event("emptied")));
 272 |     if (srcObject) {
 273 |       attachToMediaElement(srcObject, this);
 274 |     }
 275 |   }
 276 | 
 277 |   get videoWidth(): number {
 278 |     return this.#canvas.width;
 279 |   }
 280 | 
 281 |   get videoHeight(): number {
 282 |     return this.#canvas.height;
 283 |   }
 284 | 
 285 |   get volume(): number {
 286 |     return this.#volume;
 287 |   }
 288 | 
 289 |   set volume(value: number) {
 290 |     if (this.#volume !== value) {
 291 |       this.#volume = value;
 292 |       this.dispatchEvent(new Event("volumechange"));
 293 |       this.#updateVolume();
 294 |     }
 295 |   }
 296 | 
 297 |   load(): void {
 298 |     // TODO
 299 |   }
 300 | 
 301 |   play(): Promise<void> {
 302 |     // https://html.spec.whatwg.org/multipage/media.html#dom-media-play
 303 |     // 3. Let promise be a new promise and append promise to the list of pending play promises.
 304 |     const deferred = new Deferred<void>();
 305 |     this.#pendingPlayPromises.push(deferred);
 306 |     // 4. Run the internal play steps for the media element.
 307 |     this.#internalPlay();
 308 |     // 5. Return promise.
 309 |     return deferred.promise;
 310 |   }
 311 | 
 312 |   #takePendingPlayPromises(): Array<Deferred<void>> {
 313 |     // https://html.spec.whatwg.org/multipage/media.html#take-pending-play-promises
 314 |     const pendingPlayPromises = this.#pendingPlayPromises.slice();
 315 |     this.#pendingPlayPromises.length = 0;
 316 |     return pendingPlayPromises;
 317 |   }
 318 | 
 319 |   #notifyAboutPlaying(): void {
 320 |     // https://html.spec.whatwg.org/multipage/media.html#notify-about-playing
 321 |     // 1. Take pending play promises and let promises be the result.
 322 |     const promises = this.#takePendingPlayPromises();
 323 |     // 2. Queue a media element task given the element and the following steps:
 324 |     queueTask(() => {
 325 |       // 2.1. Fire an event named playing at the element.
 326 |       this.dispatchEvent(new Event("playing"));
 327 |       // 2.2. Resolve pending play promises with promises.
 328 |       promises.forEach((deferred) => deferred.resolve());
 329 |     });
 330 |     this.#updatePlaying();
 331 |   }
 332 | 
 333 |   #internalPlay(): void {
 334 |     // https://html.spec.whatwg.org/multipage/media.html#internal-play-steps
 335 |     // 2. If the playback has ended and the direction of playback is forwards,
 336 |     //    seek to the earliest possible position of the media resource.
 337 |     if (this.#playbackRate >= 0 && this.#ended) {
 338 |       this.#seek(0);
 339 |     }
 340 |     if (this.#paused) {
 341 |       // 3. If the media element's paused attribute is true, then:
 342 |       // 3.1. Change the value of paused to false.
 343 |       this.#paused = false;
 344 |       this.#updatePlayed();
 345 |       // 3.3. Queue a media element task given the media element to fire an event named play at the element.
 346 |       queueTask(() => this.dispatchEvent(new Event("play")));
 347 |       if (this.#readyState <= MediaReadyState.HAVE_CURRENT_DATA) {
 348 |         // 3.4. If the media element's readyState attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA,
 349 |         //      queue a media element task given the media element to fire an event named waiting at the element.
 350 |         queueTask(() => this.dispatchEvent(new Event("waiting")));
 351 |       } else {
 352 |         // 3.4. Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA:
 353 |         //      notify about playing for the element.
 354 |         this.#notifyAboutPlaying();
 355 |       }
 356 |     } else if (this.#readyState >= MediaReadyState.HAVE_FUTURE_DATA) {
 357 |       // 4. Otherwise, if the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA,
 358 |       //    take pending play promises and queue a media element task given the media element
 359 |       //    to resolve pending play promises with the result.
 360 |       const promises = this.#takePendingPlayPromises();
 361 |       queueTask(() => promises.forEach((deferred) => deferred.resolve()));
 362 |     }
 363 |   }
 364 | 
 365 |   pause(): void {
 366 |     // https://html.spec.whatwg.org/multipage/media.html#dom-media-pause
 367 |     this.#internalPause();
 368 |   }
 369 | 
 370 |   #internalPause(): void {
 371 |     // https://html.spec.whatwg.org/multipage/media.html#internal-pause-steps
 372 |     // 2. If the media element's paused attribute is false, run the following steps:
 373 |     if (!this.#paused) {
 374 |       const now = performance.now();
 375 |       const currentPlaybackPosition = this.#getCurrentPlaybackPosition(now);
 376 |       // 2.1. Change the value of paused to true.
 377 |       this.#updatePlayed();
 378 |       this.#paused = true;
 379 |       this.#updatePlayed();
 380 |       // 2.2. Take pending play promises and let promises be the result.
 381 |       const promises = this.#takePendingPlayPromises();
 382 |       // 2.3. Queue a media element task given the media element and the following steps:
 383 |       queueTask(() => {
 384 |         // 2.3.1. Fire an event named timeupdate at the element.
 385 |         this.dispatchEvent(new Event("timeupdate"));
 386 |         // 2.3.2. Fire an event named pause at the element.
 387 |         this.dispatchEvent(new Event("pause"));
 388 |         // 2.3.3. Reject pending play promises with promises and an "AbortError" DOMException.
 389 |         const error = new DOMException(
 390 |           "Aborted by a call to pause()",
 391 |           "AbortError"
 392 |         );
 393 |         promises.forEach((deferred) => deferred.reject(error));
 394 |         // 2.4. Set the official playback position to the current playback position.
 395 |         this.#updateCurrentTime(currentPlaybackPosition);
 396 |         this.#timeMarchesOn(false, now);
 397 |       });
 398 |       this.#updatePlaying();
 399 |     }
 400 |   }
 401 | 
 402 |   #updatePlayed(): void {
 403 |     if (this.#isPotentiallyPlaying() && !this.#seeking) {
 404 |       if (!isNaN(this.#lastPlayedTime)) {
 405 |         const newRange: TimeRange = [
 406 |           Math.min(this.#currentTime, this.#lastPlayedTime),
 407 |           Math.max(this.#currentTime, this.#lastPlayedTime)
 408 |         ];
 409 |         this.#played = this.#played.union(new TimeRanges([newRange]));
 410 |       }
 411 |       this.#lastPlayedTime = this.#currentTime;
 412 |     } else {
 413 |       this.#lastPlayedTime = NaN;
 414 |     }
 415 |   }
 416 | 
 417 |   #updatePlaying(): void {
 418 |     if (this.#isPotentiallyPlaying() && !this.#seeking) {
 419 |       void this.#audioContext?.resume();
 420 |       if (this.#advanceLoop === 0) {
 421 |         this.#lastAdvanceTime = performance.now();
 422 |         this.#lastAudioTimestamp = this.#audioContext?.currentTime ?? 0;
 423 |         this.#advanceLoop = requestAnimationFrame((now) => {
 424 |           this.#advanceCurrentTime(now);
 425 |         });
 426 |       }
 427 |     } else if (this.#advanceLoop !== 0) {
 428 |       void this.#audioContext?.suspend();
 429 |       cancelAnimationFrame(this.#advanceLoop);
 430 |       this.#advanceLoop = 0;
 431 |     }
 432 |   }
 433 | 
 434 |   #getCurrentPlaybackPosition(now: number): number {
 435 |     // When a media element is potentially playing and its Document is a fully active Document,
 436 |     // its current playback position must increase monotonically at the element's playbackRate units
 437 |     // of media time per unit time of the media timeline's clock.
 438 |     if (this.#isPotentiallyPlaying() && !this.#seeking) {
 439 |       let elapsedTime: number;
 440 |       // Use audio clock as sync, otherwise use wall-clock time.
 441 |       if (
 442 |         this.#audioContext !== undefined &&
 443 |         this.#audioContext.state === "running"
 444 |       ) {
 445 |         elapsedTime = this.#audioContext.currentTime - this.#lastAudioTimestamp;
 446 |       } else {
 447 |         elapsedTime = (now - this.#lastAdvanceTime) / 1000;
 448 |       }
 449 |       const newTime =
 450 |         this.#currentTime + this.#playbackRate * Math.max(0, elapsedTime);
 451 |       // Do not advance outside the current buffered range.
 452 |       const currentRange = this.buffered.find(this.#currentTime);
 453 |       if (currentRange !== undefined) {
 454 |         return Math.min(Math.max(currentRange[0], newTime), currentRange[1]);
 455 |       }
 456 |     }
 457 |     return this.#currentTime;
 458 |   }
 459 | 
 460 |   #updateCurrentTime(currentTime: number) {
 461 |     this.#currentTime = currentTime;
 462 |     this.#decodeVideoFrames();
 463 |     this.#decodeAudio();
 464 |     if (this.#srcObject) {
 465 |       checkBuffer(this.#srcObject);
 466 |     }
 467 |     this.#updatePlayed();
 468 |     this.#updateEnded();
 469 |   }
 470 | 
 471 |   #updateEnded() {
 472 |     const wasEnded = this.#ended;
 473 |     this.#ended = this.#hasEndedPlayback();
 474 |     if (wasEnded || !this.#ended) {
 475 |       return;
 476 |     }
 477 |     // When the current playback position reaches the end of the media resource
 478 |     // when the direction of playback is forwards, then the user agent must follow these steps:
 479 |     if (this.#playbackRate >= 0) {
 480 |       // 3. Queue a media element task given the media element and the following steps:
 481 |       queueTask(() => {
 482 |         // 3.1. Fire an event named timeupdate at the media element.
 483 |         this.dispatchEvent(new Event("timeupdate"));
 484 |         // 3.2. If the media element has ended playback, the direction of playback is forwards,
 485 |         //      and paused is false, then:
 486 |         if (this.#ended && this.#playbackRate >= 0 && !this.#paused) {
 487 |           // 3.2.1. Set the paused attribute to true.
 488 |           this.#paused = true;
 489 |           // 3.2.2. Fire an event named pause at the media element.
 490 |           this.dispatchEvent(new Event("pause"));
 491 |           // 3.2.3. Take pending play promises and reject pending play promises with the result and an "AbortError" DOMException.
 492 |           const error = new DOMException("Aborted because ended", "AbortError");
 493 |           this.#takePendingPlayPromises().forEach((deferred) =>
 494 |             deferred.reject(error)
 495 |           );
 496 |         }
 497 |         // 3.3. Fire an event named ended at the media element.
 498 |         this.dispatchEvent(new Event("ended"));
 499 |       });
 500 |     }
 501 |     // When the current playback position reaches the earliest possible position of the media resource
 502 |     // when the direction of playback is backwards, then the user agent must only queue a media element
 503 |     // task given the media element to fire an event named timeupdate at the element.
 504 |     else {
 505 |       queueTask(() => this.dispatchEvent(new Event("timeupdate")));
 506 |     }
 507 |   }
 508 | 
 509 |   #hasEndedPlayback(): boolean {
 510 |     // https://html.spec.whatwg.org/multipage/media.html#ended-playback
 511 |     if (this.#readyState < MediaReadyState.HAVE_METADATA) {
 512 |       return false;
 513 |     }
 514 |     if (this.#playbackRate >= 0) {
 515 |       return this.#isEndOfStream && this.#currentTime === this.#duration;
 516 |     } else {
 517 |       return this.#currentTime === 0;
 518 |     }
 519 |   }
 520 | 
 521 |   #advanceCurrentTime(now: number): void {
 522 |     this.#updateCurrentTime(this.#getCurrentPlaybackPosition(now));
 523 |     this.#renderVideoFrame();
 524 |     this.#renderAudio();
 525 |     this.#lastAdvanceTime = now;
 526 |     this.#lastAudioTimestamp = this.#audioContext?.currentTime ?? 0;
 527 |     this.#timeMarchesOn(true, now);
 528 |     if (this.#isPotentiallyPlaying() && !this.#seeking) {
 529 |       this.#advanceLoop = requestAnimationFrame((now) =>
 530 |         this.#advanceCurrentTime(now)
 531 |       );
 532 |     }
 533 |   }
 534 | 
 535 |   #timeMarchesOn(isNormalPlayback: boolean, now: number): void {
 536 |     // https://html.spec.whatwg.org/multipage/media.html#time-marches-on
 537 |     // 6. If the time was reached through the usual monotonic increase of the current playback position during normal playback,
 538 |     //    and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms
 539 |     //    and is not still running event handlers for such an event,
 540 |     //    then the user agent must queue a media element task given the media element to fire an event
 541 |     //    named timeupdate at the element.
 542 |     if (isNormalPlayback && now - this.#lastTimeUpdate > 15) {
 543 |       this.#lastTimeUpdate = now;
 544 |       queueTask(() => this.dispatchEvent(new Event("timeupdate")));
 545 |     }
 546 |   }
 547 | 
 548 |   #seek(newPosition: number): void {
 549 |     // https://html.spec.whatwg.org/multipage/media.html#dom-media-seek
 550 |     // 2. If the media element's readyState is HAVE_NOTHING, return.
 551 |     if (this.#readyState === MediaReadyState.HAVE_NOTHING) {
 552 |       return;
 553 |     }
 554 |     // 3. If the element's seeking IDL attribute is true, then another instance of this algorithm is already running.
 555 |     //    Abort that other instance of the algorithm without waiting for the step that it is running to complete.
 556 |     if (this.#seeking) {
 557 |       this.#seekAbortController.abort();
 558 |     }
 559 |     this.#updatePlayed();
 560 |     // 4. Set the seeking IDL attribute to true.
 561 |     this.#seeking = true;
 562 |     // 6. If the new playback position is later than the end of the media resource,
 563 |     //    then let it be the end of the media resource instead.
 564 |     const duration = this.duration;
 565 |     if (!Number.isNaN(duration) && newPosition > duration) {
 566 |       newPosition = this.duration;
 567 |     }
 568 |     // 7. If the new playback position is less than the earliest possible position, let it be that position instead.
 569 |     if (newPosition < 0) {
 570 |       newPosition = 0;
 571 |     }
 572 |     // 10. Queue a media element task given the media element to fire an event named seeking at the element.
 573 |     queueTask(() => this.dispatchEvent(new Event("seeking")));
 574 |     // 11. Set the current playback position to the new playback position.
 575 |     this.#resetVideoDecoder();
 576 |     this.#resetAudioDecoder();
 577 |     this.#updateCurrentTime(newPosition);
 578 |     this.#updatePlaying();
 579 |     // 12. Wait until the user agent has established whether or not the media data for the new playback position
 580 |     //     is available, and, if it is, until it has decoded enough data to play back that position.
 581 |     this.#seekAbortController = new AbortController();
 582 |     this.#waitForSeekToComplete(
 583 |       Math.floor(1e6 * newPosition),
 584 |       this.#seekAbortController.signal
 585 |     ).catch(() => {});
 586 |   }
 587 | 
 588 |   async #waitForSeekToComplete(
 589 |     timeInMicros: number,
 590 |     signal: AbortSignal
 591 |   ): Promise<void> {
 592 |     // https://html.spec.whatwg.org/multipage/media.html#dom-media-seek
 593 |     // 12. Wait until the user agent has established whether or not the media data for the new playback position
 594 |     //     is available, and, if it is, until it has decoded enough data to play back that position.
 595 |     while (true) {
 596 |       if (this.#readyState <= MediaReadyState.HAVE_CURRENT_DATA) {
 597 |         await waitForEvent(this, "canplay", signal);
 598 |       } else if (!this.#hasDecodedVideoFrameAtTime(timeInMicros)) {
 599 |         await this.#waitForNextDecodedVideoFrame(signal);
 600 |       } else if (!this.#hasDecodedAudioFrameAtTime(timeInMicros)) {
 601 |         await this.#waitForNextDecodedAudioFrame(signal);
 602 |       } else {
 603 |         break;
 604 |       }
 605 |     }
 606 |     // 13. Await a stable state.
 607 |     // 14. Set the seeking IDL attribute to false.
 608 |     this.#seeking = false;
 609 |     this.#updatePlaying();
 610 |     this.#updatePlayed();
 611 |     // 15. Run the time marches on steps.
 612 |     this.#timeMarchesOn(false, performance.now());
 613 |     // 16. Queue a media element task given the media element to fire an event named timeupdate at the element.
 614 |     queueTask(() => this.dispatchEvent(new Event("timeupdate")));
 615 |     // 17. Queue a media element task given the media element to fire an event named seeked at the element.
 616 |     queueTask(() => this.dispatchEvent(new Event("seeked")));
 617 |   }
 618 | 
 619 |   #hasDecodedVideoFrameAtTime(timeInMicros: number): boolean {
 620 |     return this.#hasDecodedFrameAtTime(this.#decodedVideoFrames, timeInMicros);
 621 |   }
 622 | 
 623 |   #hasDecodedAudioFrameAtTime(timeInMicros: number): boolean {
 624 |     return this.#hasDecodedFrameAtTime(this.#decodedAudioFrames, timeInMicros);
 625 |   }
 626 | 
 627 |   #hasDecodedFrameAtTime(
 628 |     frames: ReadonlyArray<VideoFrame | AudioData>,
 629 |     timeInMicros: number
 630 |   ): boolean {
 631 |     return frames.some(
 632 |       (frame: VideoFrame | AudioData) =>
 633 |         frame.timestamp <= timeInMicros &&
 634 |         timeInMicros < frame.timestamp + frame.duration!
 635 |     );
 636 |   }
 637 | 
 638 |   async #waitForNextDecodedVideoFrame(signal: AbortSignal): Promise<void> {
 639 |     this.#nextDecodedVideoFramePromise = new Deferred<void>();
 640 |     this.#nextDecodedVideoFramePromise.follow(signal);
 641 |     await this.#nextDecodedVideoFramePromise.promise;
 642 |   }
 643 | 
 644 |   async #waitForNextDecodedAudioFrame(signal: AbortSignal): Promise<void> {
 645 |     this.#nextDecodedAudioFramePromise = new Deferred<void>();
 646 |     this.#nextDecodedAudioFramePromise.follow(signal);
 647 |     await this.#nextDecodedAudioFramePromise.promise;
 648 |   }
 649 | 
 650 |   #decodeVideoFrames(): void {
 651 |     const mediaSource = this.#srcObject;
 652 |     if (!mediaSource) {
 653 |       return;
 654 |     }
 655 |     const videoTrackBuffer = getActiveVideoTrackBuffer(mediaSource);
 656 |     if (!videoTrackBuffer) {
 657 |       return;
 658 |     }
 659 |     const direction =
 660 |       this.#playbackRate < 0 ? Direction.BACKWARD : Direction.FORWARD;
 661 |     // Check if last decoded frame still exists, i.e. it was not overwritten
 662 |     // or removed from the SourceBuffer
 663 |     if (
 664 |       this.#furthestDecodingVideoFrame !== undefined &&
 665 |       !videoTrackBuffer.hasFrame(this.#furthestDecodingVideoFrame)
 666 |     ) {
 667 |       if (DEBUG) {
 668 |         console.warn(
 669 |           `last decoded video frame was removed (timestamp=${
 670 |             this.#furthestDecodingVideoFrame.timestamp
 671 |           }), decoding from current time`
 672 |         );
 673 |       }
 674 |       this.#furthestDecodingVideoFrame = undefined;
 675 |     }
 676 |     // Decode frames for current time
 677 |     if (this.#furthestDecodingVideoFrame === undefined) {
 678 |       const frameAtTime = videoTrackBuffer.findFrameForTime(this.currentTime);
 679 |       if (frameAtTime === undefined) {
 680 |         return;
 681 |       }
 682 |       this.#processVideoDecodeQueue(
 683 |         videoTrackBuffer.getDecodeDependenciesForFrame(frameAtTime),
 684 |         direction
 685 |       );
 686 |     }
 687 |     // Decode next frames in advance
 688 |     while (
 689 |       this.#decodingVideoFrames.length + this.#decodedVideoFrames.length <
 690 |       decodeQueueLwm
 691 |     ) {
 692 |       const nextQueue = videoTrackBuffer.getNextFrames(
 693 |         this.#furthestDecodingVideoFrame!,
 694 |         decodeQueueHwm -
 695 |           (this.#decodingVideoFrames.length + this.#decodedVideoFrames.length),
 696 |         direction
 697 |       );
 698 |       if (nextQueue === undefined) {
 699 |         break;
 700 |       }
 701 |       this.#processVideoDecodeQueue(nextQueue, direction);
 702 |     }
 703 |   }
 704 | 
 705 |   #processVideoDecodeQueue(
 706 |     decodeQueue: VideoDecodeQueue,
 707 |     direction: Direction
 708 |   ): void {
 709 |     const { frames, codecConfig } = decodeQueue;
 710 |     if (DEBUG) {
 711 |       console.log(
 712 |         `decode video frames: timestamp=${frames[0].timestamp} count=${frames.length}`
 713 |       );
 714 |     }
 715 |     if (
 716 |       this.#videoDecoder.state === "unconfigured" ||
 717 |       this.#lastVideoDecoderConfig !== codecConfig
 718 |     ) {
 719 |       this.#videoDecoder.configure(codecConfig);
 720 |       this.#lastVideoDecoderConfig = codecConfig;
 721 |       this.#needKeyFrame = true;
 722 |     }
 723 |     if (direction === Direction.BACKWARD && BUG_DECODE_VIDEO_IN_REVERSE) {
 724 |       frames.reverse();
 725 |     }
 726 |     for (const frame of frames) {
 727 |       if (this.#needKeyFrame) {
 728 |         if (frame.type === "key") {
 729 |           this.#needKeyFrame = false;
 730 |         } else {
 731 |           // Drop non-keyframe
 732 |           continue;
 733 |         }
 734 |       }
 735 |       this.#videoDecoder.decode(frame);
 736 |       this.#decodingVideoFrames.push(frame);
 737 |     }
 738 |     // The "furthest decoded frame" depends on the rendering order,
 739 |     // since we must decode the frames in their original order.
 740 |     if (direction === Direction.BACKWARD && !BUG_DECODE_VIDEO_IN_REVERSE) {
 741 |       this.#furthestDecodingVideoFrame = frames[0];
 742 |     } else {
 743 |       this.#furthestDecodingVideoFrame = frames[frames.length - 1];
 744 |     }
 745 |   }
 746 | 
 747 |   async #onVideoFrame(frame: VideoFrame) {
 748 |     const decodingFrameIndex = this.#decodingVideoFrames.findIndex((x) =>
 749 |       isFrameTimestampEqual(x, frame)
 750 |     );
 751 |     if (decodingFrameIndex < 0) {
 752 |       // Drop frames that are no longer in the decode queue.
 753 |       if (DEBUG) {
 754 |         console.log(
 755 |           `dropping decoded video frame at timestamp=${frame.timestamp}, no longer in queue`
 756 |         );
 757 |       }
 758 |       frame.close();
 759 |       return;
 760 |     }
 761 |     const decodingFrame = this.#decodingVideoFrames[decodingFrameIndex];
 762 |     arrayRemoveAt(this.#decodingVideoFrames, decodingFrameIndex);
 763 |     // Drop frames that are beyond current time, since we're too late to render them.
 764 |     const currentTimeInMicros = Math.floor(1e6 * this.#currentTime);
 765 |     const direction =
 766 |       this.#playbackRate < 0 ? Direction.BACKWARD : Direction.FORWARD;
 767 |     if (isFrameBeyondTime(decodingFrame, direction, currentTimeInMicros)) {
 768 |       if (DEBUG) {
 769 |         console.log(
 770 |           `dropping decoded video frame at timestamp=${decodingFrame.timestamp}, beyond currentTime=${currentTimeInMicros}us`
 771 |         );
 772 |       }
 773 |       frame.close();
 774 |       // Decode more frames (if we now have more space in the queue)
 775 |       this.#decodeVideoFrames();
 776 |       return;
 777 |     }
 778 |     if (DEBUG) {
 779 |       console.log(
 780 |         `decoded video frame at timestamp=${decodingFrame.timestamp}`
 781 |       );
 782 |     }
 783 |     // Note: Chrome does not yet copy EncodedVideoChunk.duration to VideoFrame.duration
 784 |     const bitmap = await createImageBitmap(
 785 |       frame as unknown as CanvasImageSource
 786 |     );
 787 |     const newFrame = new VideoFrame(bitmap, {
 788 |       timestamp: decodingFrame.timestamp,
 789 |       duration: decodingFrame.duration!
 790 |     });
 791 |     frame.close();
 792 |     frame = newFrame;
 793 |     this.#decodedVideoFrames.push(newFrame);
 794 |     if (this.#nextDecodedVideoFramePromise) {
 795 |       this.#nextDecodedVideoFramePromise.resolve();
 796 |       this.#nextDecodedVideoFramePromise = undefined;
 797 |     }
 798 |     // Schedule render immediately if this is the first decoded frame after a seek
 799 |     if (this.#lastRenderedFrame === undefined) {
 800 |       this.#scheduleRenderVideoFrame();
 801 |     }
 802 |     // Decode more frames (if we now have more space in the queue)
 803 |     this.#decodeVideoFrames();
 804 |   }
 805 | 
 806 |   #scheduleRenderVideoFrame() {
 807 |     if (this.#nextRenderFrame === 0) {
 808 |       this.#nextRenderFrame = requestAnimationFrame(() =>
 809 |         this.#renderVideoFrame()
 810 |       );
 811 |     }
 812 |   }
 813 | 
 814 |   #renderVideoFrame(): void {
 815 |     this.#nextRenderFrame = 0;
 816 |     const currentTimeInMicros = Math.floor(1e6 * this.#currentTime);
 817 |     const direction =
 818 |       this.#playbackRate < 0 ? Direction.BACKWARD : Direction.FORWARD;
 819 |     // Drop all frames that are before current time, since we're too late to render them.
 820 |     for (let i = this.#decodedVideoFrames.length - 1; i >= 0; i--) {
 821 |       const frame = this.#decodedVideoFrames[i];
 822 |       if (isFrameBeyondTime(frame, direction, currentTimeInMicros)) {
 823 |         frame.close();
 824 |         arrayRemoveAt(this.#decodedVideoFrames, i);
 825 |       }
 826 |     }
 827 |     // Render the frame at current time.
 828 |     let currentFrameIndex = this.#decodedVideoFrames.findIndex((frame) => {
 829 |       return (
 830 |         frame.timestamp <= currentTimeInMicros &&
 831 |         currentTimeInMicros < frame.timestamp + frame.duration!
 832 |       );
 833 |     });
 834 |     if (currentFrameIndex < 0) {
 835 |       // Decode more frames (if we now have more space in the queue)
 836 |       this.#decodeVideoFrames();
 837 |       return;
 838 |     }
 839 |     const frame = this.#decodedVideoFrames[currentFrameIndex];
 840 |     if (this.#lastRenderedFrame !== frame.timestamp) {
 841 |       if (DEBUG) {
 842 |         console.log(`render video frame timestamp=${frame.timestamp}`);
 843 |       }
 844 |       this.#updateSize(frame.displayWidth, frame.displayHeight);
 845 |       this.#canvasContext.drawImage(
 846 |         frame,
 847 |         0,
 848 |         0,
 849 |         frame.displayWidth,
 850 |         frame.displayHeight
 851 |       );
 852 |       arrayRemoveAt(this.#decodedVideoFrames, currentFrameIndex);
 853 |       this.#lastRenderedFrame = frame.timestamp;
 854 |       frame.close();
 855 |     }
 856 |     // Decode more frames (if we now have more space in the queue)
 857 |     this.#decodeVideoFrames();
 858 |   }
 859 | 
 860 |   #resetVideoDecoder(): void {
 861 |     for (const frame of this.#decodedVideoFrames) {
 862 |       frame.close();
 863 |     }
 864 |     this.#lastVideoDecoderConfig = undefined;
 865 |     this.#furthestDecodingVideoFrame = undefined;
 866 |     this.#lastRenderedFrame = undefined;
 867 |     this.#decodingVideoFrames.length = 0;
 868 |     this.#decodedVideoFrames.length = 0;
 869 |     this.#needKeyFrame = true;
 870 |     this.#videoDecoder.reset();
 871 |   }
 872 | 
 873 |   #decodeAudio(): void {
 874 |     const mediaSource = this.#srcObject;
 875 |     if (!mediaSource) {
 876 |       return;
 877 |     }
 878 |     const audioTrackBuffer = getActiveAudioTrackBuffer(mediaSource);
 879 |     if (!audioTrackBuffer) {
 880 |       return;
 881 |     }
 882 |     const direction =
 883 |       this.#playbackRate < 0 ? Direction.BACKWARD : Direction.FORWARD;
 884 |     // Check if last decoded frame still exists, i.e. it was not overwritten
 885 |     // or removed from the SourceBuffer
 886 |     if (
 887 |       this.#furthestDecodedAudioFrame !== undefined &&
 888 |       !audioTrackBuffer.hasFrame(this.#furthestDecodedAudioFrame)
 889 |     ) {
 890 |       if (DEBUG) {
 891 |         console.warn(
 892 |           `last decoded audio frame was removed (timestamp=${
 893 |             this.#furthestDecodedAudioFrame.timestamp
 894 |           }), decoding from current time`
 895 |         );
 896 |       }
 897 |       this.#furthestDecodedAudioFrame = undefined;
 898 |     }
 899 |     // Decode audio for current time
 900 |     if (this.#furthestDecodedAudioFrame === undefined) {
 901 |       const frameAtTime = audioTrackBuffer.findFrameForTime(this.currentTime);
 902 |       if (frameAtTime === undefined) {
 903 |         return;
 904 |       }
 905 |       this.#processAudioDecodeQueue(
 906 |         audioTrackBuffer.getDecodeDependenciesForFrame(frameAtTime),
 907 |         direction
 908 |       );
 909 |     }
 910 |     // Decode next frames in advance
 911 |     while (
 912 |       this.#decodingAudioFrames.length + this.#decodedAudioFrames.length <
 913 |       decodeQueueLwm
 914 |     ) {
 915 |       const nextQueue = audioTrackBuffer.getNextFrames(
 916 |         this.#furthestDecodedAudioFrame!,
 917 |         decodeQueueHwm -
 918 |           (this.#decodingAudioFrames.length + this.#decodedAudioFrames.length),
 919 |         direction
 920 |       );
 921 |       if (nextQueue === undefined) {
 922 |         break;
 923 |       }
 924 |       this.#processAudioDecodeQueue(nextQueue, direction);
 925 |     }
 926 |   }
 927 | 
 928 |   #processAudioDecodeQueue(
 929 |     decodeQueue: AudioDecodeQueue,
 930 |     direction: Direction
 931 |   ): void {
 932 |     const { frames, codecConfig } = decodeQueue;
 933 |     if (DEBUG) {
 934 |       console.log(
 935 |         `decode audio frames: timestamp=${frames[0].timestamp} count=${frames.length}`
 936 |       );
 937 |     }
 938 |     if (
 939 |       this.#audioDecoder.state === "unconfigured" ||
 940 |       this.#lastAudioDecoderConfig !== codecConfig
 941 |     ) {
 942 |       this.#audioDecoder.configure(codecConfig);
 943 |       this.#lastAudioDecoderConfig = codecConfig;
 944 |     }
 945 |     if (direction === Direction.BACKWARD) {
 946 |       // Audio has no dependencies between frames, so we can decode them
 947 |       // in the same order as they will be rendered.
 948 |       frames.reverse();
 949 |     }
 950 |     for (const frame of frames) {
 951 |       // AudioDecoder does not always preserve EncodedAudioChunk.timestamp
 952 |       // to the decoded AudioData.timestamp, instead it adds up the sample durations
 953 |       // since the last decoded chunk. This breaks reverse playback, since we
 954 |       // intentionally feed the decoder chunks in the "wrong" order.
 955 |       // Copy to a new chunk with the same *increasing* timestamp,
 956 |       // and fix the timestamp later on.
 957 |       const newFrame = cloneEncodedAudioChunk(
 958 |         frame,
 959 |         this.#audioDecoderTimestamp
 960 |       );
 961 |       this.#originalDecodingAudioFrames.set(newFrame, frame);
 962 |       this.#audioDecoder.decode(newFrame);
 963 |       this.#decodingAudioFrames.push(newFrame);
 964 |       this.#audioDecoderTimestamp += frame.duration!;
 965 |     }
 966 |     // The "furthest audio frame" is always the last one,
 967 |     // since we decode them in rendering order (see above).
 968 |     this.#furthestDecodedAudioFrame = frames[frames.length - 1];
 969 |   }
 970 | 
 971 |   #onAudioData(frame: AudioData): void {
 972 |     const decodingFrameIndex = this.#decodingAudioFrames.findIndex((x) =>
 973 |       isFrameTimestampEqual(x, frame)
 974 |     );
 975 |     if (decodingFrameIndex < 0) {
 976 |       // Drop frames that are no longer in the decode queue.
 977 |       if (DEBUG) {
 978 |         console.log(
 979 |           `dropping decoded audio frame at timestamp=${frame.timestamp}, no longer in queue`
 980 |         );
 981 |       }
 982 |       frame.close();
 983 |       return;
 984 |     }
 985 |     const decodingFrame = this.#decodingAudioFrames[decodingFrameIndex];
 986 |     arrayRemoveAt(this.#decodingAudioFrames, decodingFrameIndex);
 987 |     // Restore original timestamp
 988 |     const decodedFrame = cloneAudioData(
 989 |       frame,
 990 |       this.#originalDecodingAudioFrames.get(decodingFrame)!.timestamp
 991 |     );
 992 |     frame.close();
 993 |     // Drop frames that are beyond current time, since we're too late to render them.
 994 |     const currentTimeInMicros = Math.floor(1e6 * this.#currentTime);
 995 |     const direction =
 996 |       this.#playbackRate < 0 ? Direction.BACKWARD : Direction.FORWARD;
 997 |     if (isFrameBeyondTime(decodedFrame, direction, currentTimeInMicros)) {
 998 |       if (DEBUG) {
 999 |         console.log(
1000 |           `dropping decoded audio frame at timestamp=${decodedFrame.timestamp}, beyond currentTime=${currentTimeInMicros}us`
1001 |         );
1002 |       }
1003 |       decodedFrame.close();
1004 |       // Decode more frames (if we now have more space in the queue)
1005 |       this.#decodeAudio();
1006 |       return;
1007 |     }
1008 |     if (DEBUG) {
1009 |       console.log(`decoded audio frame at timestamp=${decodedFrame.timestamp}`);
1010 |     }
1011 |     this.#decodedAudioFrames.push(decodedFrame);
1012 |     if (this.#nextDecodedAudioFramePromise) {
1013 |       this.#nextDecodedAudioFramePromise.resolve();
1014 |       this.#nextDecodedAudioFramePromise = undefined;
1015 |     }
1016 |     // Decode more frames (if we now have more space in the queue)
1017 |     this.#decodeAudio();
1018 |   }
1019 | 
1020 |   #initializeAudio(sampleRate: number): AudioContext {
1021 |     this.#audioContext = new AudioContext({
1022 |       sampleRate: sampleRate,
1023 |       latencyHint: "playback"
1024 |     });
1025 | 
1026 |     this.#volumeGainNode = new GainNode(this.#audioContext);
1027 |     this.#volumeGainNode.connect(this.#audioContext.destination);
1028 |     this.#updateVolume();
1029 | 
1030 |     if (this.#isPotentiallyPlaying() && !this.#seeking) {
1031 |       void this.#audioContext.resume();
1032 |     } else {
1033 |       void this.#audioContext.suspend();
1034 |     }
1035 | 
1036 |     return this.#audioContext;
1037 |   }
1038 | 
1039 |   #renderAudio() {
1040 |     const currentTimeInMicros = Math.floor(1e6 * this.#currentTime);
1041 |     const direction =
1042 |       this.#playbackRate < 0 ? Direction.BACKWARD : Direction.FORWARD;
1043 |     // Drop all frames that are before current time, since we're too late to render them.
1044 |     for (let i = this.#decodedAudioFrames.length - 1; i >= 0; i--) {
1045 |       const frame = this.#decodedAudioFrames[i];
1046 |       if (isFrameBeyondTime(frame, direction, currentTimeInMicros)) {
1047 |         frame.close();
1048 |         arrayRemoveAt(this.#decodedAudioFrames, i);
1049 |       }
1050 |     }
1051 |     // Don't render audio while playback is stopped.
1052 |     if (this.#playbackRate === 0) return;
1053 |     let nextFrameIndex: number = -1;
1054 |     if (this.#lastScheduledAudioFrameTime >= 0) {
1055 |       // Render the next frame.
1056 |       nextFrameIndex = this.#decodedAudioFrames.findIndex((frame) => {
1057 |         if (direction === Direction.BACKWARD) {
1058 |           return (
1059 |             frame.timestamp + frame.duration ===
1060 |             this.#lastScheduledAudioFrameTime
1061 |           );
1062 |         } else {
1063 |           return frame.timestamp === this.#lastScheduledAudioFrameTime;
1064 |         }
1065 |       });
1066 |     }
1067 |     if (nextFrameIndex < 0) {
1068 |       // Render the frame at current time.
1069 |       nextFrameIndex = this.#decodedAudioFrames.findIndex((frame) => {
1070 |         return (
1071 |           frame.timestamp <= currentTimeInMicros &&
1072 |           currentTimeInMicros < frame.timestamp + frame.duration
1073 |         );
1074 |       });
1075 |     }
1076 |     if (nextFrameIndex < 0) {
1077 |       // Decode more frames (if we now have more space in the queue)
1078 |       this.#decodeAudio();
1079 |       return;
1080 |     }
1081 |     // Collect as many consecutive audio frames as possible
1082 |     // to schedule in a single batch.
1083 |     const firstFrame = this.#decodedAudioFrames[nextFrameIndex];
1084 |     const frames: AudioData[] = [firstFrame];
1085 |     for (
1086 |       let frameIndex = nextFrameIndex + 1;
1087 |       frameIndex < this.#decodedAudioFrames.length;
1088 |       frameIndex++
1089 |     ) {
1090 |       const frame = this.#decodedAudioFrames[frameIndex];
1091 |       const previousFrame = frames[frames.length - 1];
1092 |       if (
1093 |         isConsecutiveAudioFrame(previousFrame, frame, direction) &&
1094 |         frame.format === firstFrame.format &&
1095 |         frame.numberOfChannels === firstFrame.numberOfChannels &&
1096 |         frame.sampleRate === firstFrame.sampleRate
1097 |       ) {
1098 |         // This frame is consecutive with the previous frame.
1099 |         frames.push(frame);
1100 |       } else {
1101 |         // This frame is not consecutive. We can't schedule this in the same batch.
1102 |         break;
1103 |       }
1104 |     }
1105 |     this.#audioContext ??= this.#initializeAudio(firstFrame.sampleRate);
1106 |     this.#renderAudioFrame(frames, currentTimeInMicros, direction);
1107 |     // Decode more frames (if we now have more space in the queue)
1108 |     this.#decodeAudio();
1109 |   }
1110 | 
1111 |   #renderAudioFrame(
1112 |     frames: AudioData[],
1113 |     currentTimeInMicros: number,
1114 |     direction: Direction
1115 |   ) {
1116 |     const firstFrame = frames[0];
1117 |     const lastFrame = frames[frames.length - 1];
1118 |     const firstTimestamp = firstFrame.timestamp;
1119 |     const lastTimestamp = lastFrame.timestamp + lastFrame.duration;
1120 |     if (DEBUG) {
1121 |       console.log(
1122 |         `render audio frames start=${firstTimestamp} end=${lastTimestamp} duration=${
1123 |           lastTimestamp - firstTimestamp
1124 |         } count=${frames.length}`
1125 |       );
1126 |     }
1127 |     // For reverse playback, first put the frames back in their original order,
1128 |     // so we can reverse the individual samples later.
1129 |     if (direction === Direction.BACKWARD) {
1130 |       frames.reverse();
1131 |     }
1132 |     // Create an AudioBuffer containing all frame data
1133 |     const { numberOfChannels, sampleRate } = frames[0];
1134 |     const audioBuffer = new AudioBuffer({
1135 |       numberOfChannels,
1136 |       length: sumWith(frames, (frame) => frame.numberOfFrames),
1137 |       sampleRate
1138 |     });
1139 |     for (let channel = 0; channel < numberOfChannels; channel++) {
1140 |       const options: AudioDataCopyToOptions = {
1141 |         format: "f32-planar",
1142 |         planeIndex: channel
1143 |       };
1144 |       const destination = audioBuffer.getChannelData(channel);
1145 |       let offset = 0;
1146 |       for (const frame of frames) {
1147 |         const size =
1148 |           frame.allocationSize(options) / Float32Array.BYTES_PER_ELEMENT;
1149 |         frame.copyTo(destination.subarray(offset, offset + size), options);
1150 |         offset += size;
1151 |       }
1152 |       if (direction === Direction.BACKWARD) {
1153 |         // For reverse playback, reverse the order of the individual samples.
1154 |         destination.reverse();
1155 |       }
1156 |     }
1157 |     // Schedule an AudioBufferSourceNode to play the AudioBuffer
1158 |     this.#scheduleAudioBuffer(
1159 |       audioBuffer,
1160 |       firstTimestamp,
1161 |       currentTimeInMicros,
1162 |       this.#playbackRate
1163 |     );
1164 |     this.#lastScheduledAudioFrameTime = lastTimestamp;
1165 |     // Close the frames, so the audio decoder can reclaim them.
1166 |     for (let i = frames.length - 1; i >= 0; i--) {
1167 |       const frame = frames[i];
1168 |       frame.close();
1169 |       arrayRemove(this.#decodedAudioFrames, frame);
1170 |     }
1171 |   }
1172 | 
1173 |   #resetAudioDecoder(): void {
1174 |     for (const frame of this.#decodedAudioFrames) {
1175 |       frame.close();
1176 |     }
1177 |     for (const audioSourceNode of this.#scheduledAudioSourceNodes) {
1178 |       audioSourceNode.node.stop();
1179 |     }
1180 |     this.#lastAudioDecoderConfig = undefined;
1181 |     this.#audioDecoderTimestamp = 0;
1182 |     this.#furthestDecodedAudioFrame = undefined;
1183 |     this.#decodingAudioFrames.length = 0;
1184 |     this.#decodedAudioFrames.length = 0;
1185 |     this.#scheduledAudioSourceNodes.length = 0;
1186 |     this.#lastScheduledAudioFrameTime = -1;
1187 |     this.#audioDecoder.reset();
1188 |   }
1189 | 
1190 |   #updateVolume(): void {
1191 |     if (this.#volumeGainNode === undefined) return;
1192 |     this.#volumeGainNode.gain.value = this.#muted ? 0 : this.#volume;
1193 |   }
1194 | 
1195 |   #updateAudioPlaybackRate() {
1196 |     // Re-schedule all audio nodes with the new playback rate.
1197 |     const currentTimeInMicros = Math.floor(1e6 * this.#currentTime);
1198 |     const playbackRate = this.#playbackRate;
1199 |     for (const entry of this.#scheduledAudioSourceNodes.slice()) {
1200 |       entry.node.stop();
1201 |       this.#scheduleAudioBuffer(
1202 |         entry.node.buffer!,
1203 |         entry.timestamp,
1204 |         currentTimeInMicros,
1205 |         playbackRate
1206 |       );
1207 |     }
1208 |   }
1209 | 
1210 |   #scheduleAudioBuffer(
1211 |     audioBuffer: AudioBuffer,
1212 |     timestamp: number,
1213 |     currentTimeInMicros: number,
1214 |     playbackRate: number
1215 |   ): void {
1216 |     const node = this.#audioContext!.createBufferSource();
1217 |     node.buffer = audioBuffer;
1218 |     node.connect(this.#volumeGainNode!);
1219 | 
1220 |     const entry = { node: node, timestamp };
1221 |     this.#scheduledAudioSourceNodes.push(entry);
1222 |     node.addEventListener("ended", () => {
1223 |       arrayRemove(this.#scheduledAudioSourceNodes, entry);
1224 |     });
1225 | 
1226 |     const offset = (timestamp - currentTimeInMicros) / (1e6 * playbackRate);
1227 |     node.playbackRate.value = Math.abs(playbackRate);
1228 |     if (offset > 0) {
1229 |       node.start(0, offset);
1230 |     } else {
1231 |       node.start(-offset);
1232 |     }
1233 |   }
1234 | 
1235 |   #isPotentiallyPlaying(): boolean {
1236 |     // https://html.spec.whatwg.org/multipage/media.html#potentially-playing
1237 |     return !this.#paused && !this.#hasEndedPlayback() && !this.#isBlocked();
1238 |   }
1239 | 
1240 |   #isBlocked(): boolean {
1241 |     // https://html.spec.whatwg.org/multipage/media.html#blocked-media-element
1242 |     return this.#readyState <= MediaReadyState.HAVE_CURRENT_DATA;
1243 |   }
1244 | 
1245 |   #updateDuration(newDuration: number): void {
1246 |     // https://html.spec.whatwg.org/multipage/media.html#dom-media-duration
1247 |     const oldDuration = this.#duration;
1248 |     this.#duration = newDuration;
1249 |     // When the length of the media resource changes to a known value
1250 |     // (e.g. from being unknown to known, or from a previously established length to a new length)
1251 |     // the user agent must queue a media element task given the media element to fire an event named durationchange at the media element.
1252 |     if (
1253 |       (Number.isNaN(oldDuration) && !Number.isNaN(newDuration)) ||
1254 |       oldDuration !== newDuration
1255 |     ) {
1256 |       queueTask(() => this.dispatchEvent(new Event("durationchange")));
1257 |     }
1258 |     // If the duration is changed such that the current playback position ends up being greater than
1259 |     // the time of the end of the media resource, then the user agent must also seek to
1260 |     // the time of the end of the media resource.
1261 |     if (this.currentTime > newDuration) {
1262 |       this.#seek(newDuration);
1263 |     }
1264 |   }
1265 | 
1266 |   #updateReadyState(newReadyState: MediaReadyState): void {
1267 |     const wasPotentiallyPlaying = this.#isPotentiallyPlaying();
1268 |     const previousReadyState = this.#readyState;
1269 |     this.#readyState = newReadyState;
1270 |     this.#updatePlaying();
1271 |     this.#updatePlayed();
1272 |     if (previousReadyState === newReadyState) {
1273 |       return;
1274 |     }
1275 |     // TODO https://html.spec.whatwg.org/multipage/media.html#ready-states
1276 |     // If the previous ready state was HAVE_NOTHING, and the new ready state is HAVE_METADATA
1277 |     if (
1278 |       previousReadyState === MediaReadyState.HAVE_NOTHING &&
1279 |       newReadyState === MediaReadyState.HAVE_METADATA
1280 |     ) {
1281 |       // Queue a media element task given the media element to fire an event named loadedmetadata at the element.
1282 |       queueTask(() => this.dispatchEvent(new Event("loadedmetadata")));
1283 |       return;
1284 |     }
1285 |     // If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater
1286 |     if (
1287 |       previousReadyState === MediaReadyState.HAVE_METADATA &&
1288 |       newReadyState >= MediaReadyState.HAVE_CURRENT_DATA
1289 |     ) {
1290 |       // If this is the first time this occurs for this media element since the load() algorithm was last invoked,
1291 |       // the user agent must queue a media element task given the media element to fire an event named loadeddata at the element.
1292 |       if (!this.#hasFiredLoadedData) {
1293 |         this.#hasFiredLoadedData = true;
1294 |         queueTask(() => this.dispatchEvent(new Event("loadeddata")));
1295 |       }
1296 |       if (this.#advanceLoop === 0) {
1297 |         this.#scheduleRenderVideoFrame();
1298 |       }
1299 |       // If the new ready state is HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA, then the relevant steps below must then be run also.
1300 |     }
1301 |     // If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is HAVE_CURRENT_DATA or less
1302 |     if (
1303 |       previousReadyState >= MediaReadyState.HAVE_FUTURE_DATA &&
1304 |       newReadyState <= MediaReadyState.HAVE_CURRENT_DATA
1305 |     ) {
1306 |       // If the media element was potentially playing before its readyState attribute changed to a value lower than HAVE_FUTURE_DATA,
1307 |       // and the element has not ended playback, and playback has not stopped due to errors,
1308 |       // paused for user interaction, or paused for in-band content,
1309 |       // the user agent must queue a media element task given the media element to fire an event named timeupdate at the element,
1310 |       // and queue a media element task given the media element to fire an event named waiting at the element.
1311 |       if (wasPotentiallyPlaying && !this.#hasEndedPlayback()) {
1312 |         queueTask(() => this.dispatchEvent(new Event("timeupdate")));
1313 |         queueTask(() => this.dispatchEvent(new Event("waiting")));
1314 |       }
1315 |       return;
1316 |     }
1317 |     // If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state is HAVE_FUTURE_DATA
1318 |     // Note: this also handles the first steps of HAVE_ENOUGH_DATA
1319 |     if (
1320 |       previousReadyState <= MediaReadyState.HAVE_CURRENT_DATA &&
1321 |       newReadyState >= MediaReadyState.HAVE_FUTURE_DATA
1322 |     ) {
1323 |       // The user agent must queue a media element task given the media element to fire an event named canplay at the element.
1324 |       queueTask(() => this.dispatchEvent(new Event("canplay")));
1325 |       // If the element's paused attribute is false, the user agent must notify about playing for the element.
1326 |       if (!this.#paused) {
1327 |         this.#notifyAboutPlaying();
1328 |       }
1329 |       // Decode more frames
1330 |       this.#decodeVideoFrames();
1331 |       this.#decodeAudio();
1332 |     }
1333 |     // If the new ready state is HAVE_ENOUGH_DATA
1334 |     if (newReadyState === MediaReadyState.HAVE_ENOUGH_DATA) {
1335 |       // Note: the first step is handled together with HAVE_FUTURE_DATA
1336 |       // The user agent must queue a media element task given the media element to fire an event named canplaythrough at the element.
1337 |       queueTask(() => this.dispatchEvent(new Event("canplaythrough")));
1338 |     }
1339 |   }
1340 | 
1341 |   #updateSize(width: number, height: number): void {
1342 |     const oldWidth = this.#canvas.width;
1343 |     const oldHeight = this.#canvas.height;
1344 |     if (oldWidth !== width || oldHeight !== height) {
1345 |       this.#canvas.width = width;
1346 |       this.#canvas.height = height;
1347 |       // https://html.spec.whatwg.org/multipage/media.html#concept-video-intrinsic-width
1348 |       // Whenever the intrinsic width or intrinsic height of the video changes
1349 |       // (including, for example, because the selected video track was changed),
1350 |       // if the element's readyState attribute is not HAVE_NOTHING,
1351 |       // the user agent must queue a media element task given the media element
1352 |       // to fire an event named resize at the media element.
1353 |       if (this.#readyState !== MediaReadyState.HAVE_NOTHING) {
1354 |         queueTask(() => this.dispatchEvent(new Event("resize")));
1355 |       }
1356 |     }
1357 |   }
1358 | 
1359 |   #notifyProgress(): void {
1360 |     // https://html.spec.whatwg.org/multipage/media.html#concept-media-load-resource
1361 |     // While the load is not suspended (see below), every 350ms (±200ms) or for every byte received, whichever is least frequent,
1362 |     // queue a media element task given the media element to fire an event named progress at the element.
1363 |     clearTimeout(this.#nextProgressTimer);
1364 |     const now = performance.now();
1365 |     const timeUntilNextProgress = 350 - (now - this.#lastProgress);
1366 |     if (timeUntilNextProgress <= 0) {
1367 |       this.#lastProgress = now;
1368 |       queueTask(() => this.dispatchEvent(new Event("progress")));
1369 |     } else {
1370 |       this.#nextProgressTimer = setTimeout(
1371 |         () => this.#notifyProgress(),
1372 |         timeUntilNextProgress
1373 |       );
1374 |     }
1375 |   }
1376 | 
1377 |   #notifyEndOfStream(): void {
1378 |     this.#isEndOfStream = true;
1379 |   }
1380 | 
1381 |   static {
1382 |     updateDuration = (videoElement: BabyVideoElement, newDuration: number) => {
1383 |       videoElement.#updateDuration(newDuration);
1384 |     };
1385 |     updateReadyState = (
1386 |       videoElement: BabyVideoElement,
1387 |       newReadyState: MediaReadyState
1388 |     ) => {
1389 |       videoElement.#updateReadyState(newReadyState);
1390 |     };
1391 |     notifyProgress = (videoElement: BabyVideoElement) => {
1392 |       videoElement.#notifyProgress();
1393 |     };
1394 |     notifyEndOfStream = (videoElement: BabyVideoElement) => {
1395 |       videoElement.#notifyEndOfStream();
1396 |     };
1397 |   }
1398 | }
1399 | 
1400 | customElements.define("baby-video", BabyVideoElement);
1401 | 
1402 | function isFrameBeyondTime(
1403 |   frame: EncodedChunk | AudioData | VideoFrame,
1404 |   direction: Direction,
1405 |   timeInMicros: number
1406 | ): boolean {
1407 |   if (direction == Direction.FORWARD) {
1408 |     return frame.timestamp + frame.duration! <= timeInMicros;
1409 |   } else {
1410 |     return frame.timestamp >= timeInMicros;
1411 |   }
1412 | }
1413 | 
1414 | function getFrameTolerance(frame: EncodedChunk | AudioData | VideoFrame) {
1415 |   return Math.ceil(frame.duration! / 16);
1416 | }
1417 | 
1418 | function isFrameTimestampEqual(
1419 |   left: EncodedChunk,
1420 |   right: AudioData | VideoFrame
1421 | ): boolean {
1422 |   // Due to rounding, there can be a small gap between encoded and decoded frames.
1423 |   return Math.abs(left.timestamp - right.timestamp) <= getFrameTolerance(left);
1424 | }
1425 | 
1426 | function isConsecutiveAudioFrame(
1427 |   previous: AudioData,
1428 |   next: AudioData,
1429 |   direction: Direction
1430 | ): boolean {
1431 |   let diff: number;
1432 |   if (direction === Direction.BACKWARD) {
1433 |     diff = previous.timestamp - (next.timestamp + next.duration);
1434 |   } else {
1435 |     diff = next.timestamp - (previous.timestamp + previous.duration);
1436 |   }
1437 |   // Due to rounding, there can be a small gap between consecutive audio frames.
1438 |   return Math.abs(diff) <= getFrameTolerance(previous);
1439 | }
1440 | 
1441 | function cloneEncodedAudioChunk(
1442 |   original: EncodedAudioChunk,
1443 |   timestamp: number
1444 | ): EncodedAudioChunk {
1445 |   const data = new ArrayBuffer(original.byteLength);
1446 |   original.copyTo(data);
1447 |   return new EncodedAudioChunk({
1448 |     data,
1449 |     timestamp,
1450 |     duration: original.duration ?? undefined,
1451 |     type: original.type
1452 |   });
1453 | }
1454 | 
1455 | function cloneAudioData(original: AudioData, timestamp: number): AudioData {
1456 |   const format = "f32-planar";
1457 |   let totalSize = 0;
1458 |   for (
1459 |     let channelIndex = 0;
1460 |     channelIndex < original.numberOfChannels;
1461 |     channelIndex++
1462 |   ) {
1463 |     totalSize +=
1464 |       original.allocationSize({ format, planeIndex: channelIndex }) /
1465 |       Float32Array.BYTES_PER_ELEMENT;
1466 |   }
1467 |   const buffer = new Float32Array(totalSize);
1468 |   let offset = 0;
1469 |   for (
1470 |     let channelIndex = 0;
1471 |     channelIndex < original.numberOfChannels;
1472 |     channelIndex++
1473 |   ) {
1474 |     const options: AudioDataCopyToOptions = {
1475 |       format,
1476 |       planeIndex: channelIndex
1477 |     };
1478 |     const channelSize =
1479 |       original.allocationSize(options) / Float32Array.BYTES_PER_ELEMENT;
1480 |     original.copyTo(buffer.subarray(offset, offset + totalSize), options);
1481 |     offset += channelSize;
1482 |   }
1483 |   return new AudioData({
1484 |     data: buffer,
1485 |     format,
1486 |     numberOfChannels: original.numberOfChannels,
1487 |     numberOfFrames: original.numberOfFrames,
1488 |     sampleRate: original.sampleRate,
1489 |     timestamp: timestamp
1490 |   });
1491 | }
1492 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2022",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "es2022",
 6 |     "lib": ["es2022", "dom"],
 7 |     "moduleResolution": "bundler",
 8 |     "strict": true,
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "noEmit": true,
14 |     "noUnusedLocals": true,
15 |     "noUnusedParameters": true,
16 |     "noImplicitReturns": true,
17 |     "skipLibCheck": true
18 |   },
19 |   "include": ["src", "demo"]
20 | }
21 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | 
 3 | export default defineConfig({
 4 |   base: "/baby-video/",
 5 |   build: {
 6 |     target: "es2022",
 7 |     minify: false,
 8 |     sourcemap: true
 9 |   }
10 | });
11 | 


--------------------------------------------------------------------------------