mediabunny 1.19.0 → 1.20.0

package/dist/bundles/mediabunny.cjs

@@ -259,7 +259,7 @@ var Mediabunny = (() => {
     }
   };
   var toUint8Array = (source) => {
-    if (source instanceof Uint8Array) {
+    if (source.constructor === Uint8Array) {
       return source;
     } else if (source instanceof ArrayBuffer) {
       return new Uint8Array(source);
@@ -268,7 +268,7 @@ var Mediabunny = (() => {
     }
   };
   var toDataView = (source) => {
-    if (source instanceof DataView) {
+    if (source.constructor === DataView) {
       return source;
     } else if (source instanceof ArrayBuffer) {
       return new DataView(source);
@@ -706,6 +706,9 @@ var Mediabunny = (() => {
     }
     return true;
   };
+  var polyfillSymbolDispose = () => {
+    Symbol.dispose ??= Symbol("Symbol.dispose");
+  };
 
   // src/tags.ts
   var RichImageData = class {
@@ -2755,23 +2758,18 @@ var Mediabunny = (() => {
     }
     return { modeBlockflags };
   };
-  var determineVideoPacketType = async (videoTrack, packet) => {
-    assert(videoTrack.codec);
-    switch (videoTrack.codec) {
+  var determineVideoPacketType = (codec, decoderConfig, packetData) => {
+    switch (codec) {
       case "avc":
         {
-          const decoderConfig = await videoTrack.getDecoderConfig();
-          assert(decoderConfig);
-          const nalUnits = extractAvcNalUnits(packet.data, decoderConfig);
+          const nalUnits = extractAvcNalUnits(packetData, decoderConfig);
           const isKeyframe = nalUnits.some((x) => extractNalUnitTypeForAvc(x) === 5 /* IDR */);
           return isKeyframe ? "key" : "delta";
         }
         ;
       case "hevc":
         {
-          const decoderConfig = await videoTrack.getDecoderConfig();
-          assert(decoderConfig);
-          const nalUnits = extractHevcNalUnits(packet.data, decoderConfig);
+          const nalUnits = extractHevcNalUnits(packetData, decoderConfig);
           const isKeyframe = nalUnits.some((x) => {
             const type = extractNalUnitTypeForHevc(x);
             return 16 /* BLA_W_LP */ <= type && type <= 23 /* RSV_IRAP_VCL23 */;
@@ -2781,13 +2779,13 @@ var Mediabunny = (() => {
         ;
       case "vp8":
         {
-          const frameType = packet.data[0] & 1;
+          const frameType = packetData[0] & 1;
           return frameType === 0 ? "key" : "delta";
         }
         ;
       case "vp9":
         {
-          const bitstream = new Bitstream(packet.data);
+          const bitstream = new Bitstream(packetData);
           if (bitstream.readBits(2) !== 2) {
             return null;
           }
@@ -2809,7 +2807,7 @@ var Mediabunny = (() => {
       case "av1":
         {
           let reducedStillPictureHeader = false;
-          for (const { type, data } of iterateAv1PacketObus(packet.data)) {
+          for (const { type, data } of iterateAv1PacketObus(packetData)) {
             if (type === 1) {
               const bitstream = new Bitstream(data);
               bitstream.skipBits(4);
@@ -2832,7 +2830,7 @@ var Mediabunny = (() => {
         ;
       default:
         {
-          assertNever(videoTrack.codec);
+          assertNever(codec);
           assert(false);
         }
         ;
@@ -3263,7 +3261,7 @@ var Mediabunny = (() => {
   var PLACEHOLDER_DATA = new Uint8Array(0);
   var EncodedPacket = class _EncodedPacket {
     /** Creates a new {@link EncodedPacket} from raw bytes and timing information. */
-    constructor(data, type, timestamp, duration, sequenceNumber = -1, byteLength) {
+    constructor(data, type, timestamp, duration, sequenceNumber = -1, byteLength, sideData) {
       this.data = data;
       this.type = type;
       this.timestamp = timestamp;
@@ -3295,7 +3293,20 @@ var Mediabunny = (() => {
       if (!Number.isInteger(byteLength) || byteLength < 0) {
         throw new TypeError("byteLength must be a non-negative integer.");
       }
+      if (sideData !== void 0 && (typeof sideData !== "object" || !sideData)) {
+        throw new TypeError("sideData, when provided, must be an object.");
+      }
+      if (sideData?.alpha !== void 0 && !(sideData.alpha instanceof Uint8Array)) {
+        throw new TypeError("sideData.alpha, when provided, must be a Uint8Array.");
+      }
+      if (sideData?.alphaByteLength !== void 0 && (!Number.isInteger(sideData.alphaByteLength) || sideData.alphaByteLength < 0)) {
+        throw new TypeError("sideData.alphaByteLength, when provided, must be a non-negative integer.");
+      }
       this.byteLength = byteLength;
+      this.sideData = sideData ?? {};
+      if (this.sideData.alpha && this.sideData.alphaByteLength === void 0) {
+        this.sideData.alphaByteLength = this.sideData.alpha.byteLength;
+      }
     }
     /** If this packet is a metadata-only packet. Metadata-only packets don't contain their packet data. */
     get isMetadataOnly() {
@@ -3309,7 +3320,9 @@ var Mediabunny = (() => {
     get microsecondDuration() {
       return Math.trunc(SECOND_TO_MICROSECOND_FACTOR * this.duration);
     }
-    /** Converts this packet to an EncodedVideoChunk for use with the WebCodecs API. */
+    /** Converts this packet to an
+     * [`EncodedVideoChunk`](https://developer.mozilla.org/en-US/docs/Web/API/EncodedVideoChunk) for use with the
+     * WebCodecs API. */
     toEncodedVideoChunk() {
       if (this.isMetadataOnly) {
         throw new TypeError("Metadata-only packets cannot be converted to a video chunk.");
@@ -3324,7 +3337,31 @@ var Mediabunny = (() => {
         duration: this.microsecondDuration
       });
     }
-    /** Converts this packet to an EncodedAudioChunk for use with the WebCodecs API. */
+    /**
+     * Converts this packet to an
+     * [`EncodedVideoChunk`](https://developer.mozilla.org/en-US/docs/Web/API/EncodedVideoChunk) for use with the
+     * WebCodecs API, using the alpha side data instead of the color data. Throws if no alpha side data is defined.
+     */
+    alphaToEncodedVideoChunk(type = this.type) {
+      if (!this.sideData.alpha) {
+        throw new TypeError("This packet does not contain alpha side data.");
+      }
+      if (this.isMetadataOnly) {
+        throw new TypeError("Metadata-only packets cannot be converted to a video chunk.");
+      }
+      if (typeof EncodedVideoChunk === "undefined") {
+        throw new Error("Your browser does not support EncodedVideoChunk.");
+      }
+      return new EncodedVideoChunk({
+        data: this.sideData.alpha,
+        type,
+        timestamp: this.microsecondTimestamp,
+        duration: this.microsecondDuration
+      });
+    }
+    /** Converts this packet to an
+     * [`EncodedAudioChunk`](https://developer.mozilla.org/en-US/docs/Web/API/EncodedAudioChunk) for use with the
+     * WebCodecs API. */
     toEncodedAudioChunk() {
       if (this.isMetadataOnly) {
         throw new TypeError("Metadata-only packets cannot be converted to an audio chunk.");
@@ -3340,10 +3377,12 @@ var Mediabunny = (() => {
       });
     }
     /**
-     * Creates an EncodedPacket from an EncodedVideoChunk or EncodedAudioChunk. This method is useful for converting
-     * chunks from the WebCodecs API to EncodedPackets.
+     * Creates an {@link EncodedPacket} from an
+     * [`EncodedVideoChunk`](https://developer.mozilla.org/en-US/docs/Web/API/EncodedVideoChunk) or
+     * [`EncodedAudioChunk`](https://developer.mozilla.org/en-US/docs/Web/API/EncodedAudioChunk). This method is useful
+     * for converting chunks from the WebCodecs API to `EncodedPacket` instances.
      */
-    static fromEncodedChunk(chunk) {
+    static fromEncodedChunk(chunk, sideData) {
       if (!(chunk instanceof EncodedVideoChunk || chunk instanceof EncodedAudioChunk)) {
         throw new TypeError("chunk must be an EncodedVideoChunk or EncodedAudioChunk.");
       }
@@ -3353,7 +3392,10 @@ var Mediabunny = (() => {
         data,
         chunk.type,
         chunk.timestamp / 1e6,
-        (chunk.duration ?? 0) / 1e6
+        (chunk.duration ?? 0) / 1e6,
+        void 0,
+        void 0,
+        sideData
       );
     }
     /** Clones this packet while optionally updating timing information. */
@@ -3455,6 +3497,7 @@ var Mediabunny = (() => {
   };
 
   // src/sample.ts
+  polyfillSymbolDispose();
   var VideoSample = class _VideoSample {
     constructor(data, init) {
       /** @internal */
@@ -3586,6 +3629,13 @@ var Mediabunny = (() => {
     get microsecondDuration() {
       return Math.trunc(SECOND_TO_MICROSECOND_FACTOR * this.duration);
     }
+    /**
+     * Whether this sample uses a pixel format that can hold transparency data. Note that this doesn't necessarily mean
+     * that the sample is transparent.
+     */
+    get hasAlpha() {
+      return this.format && this.format.includes("A");
+    }
     /** Clones this video sample. */
     clone() {
       if (this._closed) {
@@ -3908,6 +3958,10 @@ var Mediabunny = (() => {
       }
       this.duration = newDuration;
     }
+    /** Calls `.close()`. */
+    [Symbol.dispose]() {
+      this.close();
+    }
   };
   var isVideoFrame = (x) => {
     return typeof VideoFrame !== "undefined" && x instanceof VideoFrame;
@@ -4286,6 +4340,10 @@ var Mediabunny = (() => {
       }
       this.timestamp = newTimestamp;
     }
+    /** Calls `.close()`. */
+    [Symbol.dispose]() {
+      this.close();
+    }
     /** @internal */
     static *_fromAudioBuffer(audioBuffer, timestamp) {
       if (!(audioBuffer instanceof AudioBuffer)) {
@@ -4988,6 +5046,20 @@ var Mediabunny = (() => {
       // Safari-specific thing, check usage.
       this.currentPacketIndex = 0;
       this.raslSkipped = false;
+      // For HEVC stuff
+      // Alpha stuff
+      this.alphaDecoder = null;
+      this.alphaHadKeyframe = false;
+      this.colorQueue = [];
+      this.alphaQueue = [];
+      this.merger = null;
+      this.mergerCreationFailed = false;
+      this.decodedAlphaChunkCount = 0;
+      this.alphaDecoderQueueSize = 0;
+      /** Each value is the number of decoded alpha chunks at which a null alpha frame should be added. */
+      this.nullAlphaFrameQueue = [];
+      this.currentAlphaPacketIndex = 0;
+      this.alphaRaslSkipped = false;
       const MatchingCustomDecoder = customVideoDecoders.find((x) => x.supports(codec, decoderConfig));
       if (MatchingCustomDecoder) {
         this.customDecoder = new MatchingCustomDecoder();
@@ -5001,51 +5073,42 @@ var Mediabunny = (() => {
         };
         void this.customDecoderCallSerializer.call(() => this.customDecoder.init());
       } else {
-        const sampleHandler = (sample) => {
-          if (isSafari()) {
-            if (this.sampleQueue.length > 0 && sample.timestamp >= last(this.sampleQueue).timestamp) {
-              for (const sample2 of this.sampleQueue) {
-                this.finalizeAndEmitSample(sample2);
-              }
-              this.sampleQueue.length = 0;
-            }
-            insertSorted(this.sampleQueue, sample, (x) => x.timestamp);
+        const colorHandler = (frame) => {
+          if (this.alphaQueue.length > 0) {
+            const alphaFrame = this.alphaQueue.shift();
+            assert(alphaFrame !== void 0);
+            this.mergeAlpha(frame, alphaFrame);
           } else {
-            const timestamp = this.inputTimestamps.shift();
-            assert(timestamp !== void 0);
-            sample.setTimestamp(timestamp);
-            this.finalizeAndEmitSample(sample);
+            this.colorQueue.push(frame);
           }
         };
         this.decoder = new VideoDecoder({
-          output: (frame) => sampleHandler(new VideoSample(frame)),
+          output: (frame) => {
+            try {
+              colorHandler(frame);
+            } catch (error) {
+              this.onError(error);
+            }
+          },
           error: onError
         });
         this.decoder.configure(decoderConfig);
       }
     }
-    finalizeAndEmitSample(sample) {
-      sample.setTimestamp(Math.round(sample.timestamp * this.timeResolution) / this.timeResolution);
-      sample.setDuration(Math.round(sample.duration * this.timeResolution) / this.timeResolution);
-      sample.setRotation(this.rotation);
-      this.onSample(sample);
-    }
     getDecodeQueueSize() {
       if (this.customDecoder) {
         return this.customDecoderQueueSize;
       } else {
         assert(this.decoder);
-        return this.decoder.decodeQueueSize;
+        return Math.max(
+          this.decoder.decodeQueueSize,
+          this.alphaDecoder?.decodeQueueSize ?? 0
+        );
       }
     }
     decode(packet) {
       if (this.codec === "hevc" && this.currentPacketIndex > 0 && !this.raslSkipped) {
-        const nalUnits = extractHevcNalUnits(packet.data, this.decoderConfig);
-        const hasRaslPicture = nalUnits.some((x) => {
-          const type = extractNalUnitTypeForHevc(x);
-          return type === 8 /* RASL_N */ || type === 9 /* RASL_R */;
-        });
-        if (hasRaslPicture) {
+        if (this.hasHevcRaslPicture(packet.data)) {
           return;
         }
         this.raslSkipped = true;
@@ -5060,14 +5123,156 @@ var Mediabunny = (() => {
           insertSorted(this.inputTimestamps, packet.timestamp, (x) => x);
         }
         this.decoder.decode(packet.toEncodedVideoChunk());
+        this.decodeAlphaData(packet);
       }
     }
+    decodeAlphaData(packet) {
+      if (!packet.sideData.alpha || this.mergerCreationFailed) {
+        this.pushNullAlphaFrame();
+        return;
+      }
+      if (!this.merger) {
+        try {
+          this.merger = new ColorAlphaMerger();
+        } catch (error) {
+          console.error("Due to an error, only color data will be decoded.", error);
+          this.mergerCreationFailed = true;
+          this.decodeAlphaData(packet);
+          return;
+        }
+      }
+      if (!this.alphaDecoder) {
+        const alphaHandler = (frame) => {
+          this.alphaDecoderQueueSize--;
+          if (this.colorQueue.length > 0) {
+            const colorFrame = this.colorQueue.shift();
+            assert(colorFrame !== void 0);
+            this.mergeAlpha(colorFrame, frame);
+          } else {
+            this.alphaQueue.push(frame);
+          }
+          this.decodedAlphaChunkCount++;
+          while (this.nullAlphaFrameQueue.length > 0 && this.nullAlphaFrameQueue[0] === this.decodedAlphaChunkCount) {
+            this.nullAlphaFrameQueue.shift();
+            if (this.colorQueue.length > 0) {
+              const colorFrame = this.colorQueue.shift();
+              assert(colorFrame !== void 0);
+              this.mergeAlpha(colorFrame, null);
+            } else {
+              this.alphaQueue.push(null);
+            }
+          }
+        };
+        this.alphaDecoder = new VideoDecoder({
+          output: (frame) => {
+            try {
+              alphaHandler(frame);
+            } catch (error) {
+              this.onError(error);
+            }
+          },
+          error: this.onError
+        });
+        this.alphaDecoder.configure(this.decoderConfig);
+      }
+      const type = determineVideoPacketType(this.codec, this.decoderConfig, packet.sideData.alpha);
+      if (!this.alphaHadKeyframe) {
+        this.alphaHadKeyframe = type === "key";
+      }
+      if (this.alphaHadKeyframe) {
+        if (this.codec === "hevc" && this.currentAlphaPacketIndex > 0 && !this.alphaRaslSkipped) {
+          if (this.hasHevcRaslPicture(packet.sideData.alpha)) {
+            this.pushNullAlphaFrame();
+            return;
+          }
+          this.alphaRaslSkipped = true;
+        }
+        this.currentAlphaPacketIndex++;
+        this.alphaDecoder.decode(packet.alphaToEncodedVideoChunk(type ?? packet.type));
+        this.alphaDecoderQueueSize++;
+      } else {
+        this.pushNullAlphaFrame();
+      }
+    }
+    pushNullAlphaFrame() {
+      if (this.alphaDecoderQueueSize === 0) {
+        this.alphaQueue.push(null);
+      } else {
+        this.nullAlphaFrameQueue.push(this.decodedAlphaChunkCount + this.alphaDecoderQueueSize);
+      }
+    }
+    /**
+     * If we're using HEVC, we need to make sure to skip any RASL slices that follow a non-IDR key frame such as
+     * CRA_NUT. This is because RASL slices cannot be decoded without data before the CRA_NUT. Browsers behave
+     * differently here: Chromium drops the packets, Safari throws a decoder error. Either way, it's not good
+     * and causes bugs upstream. So, let's take the dropping into our own hands.
+     */
+    hasHevcRaslPicture(packetData) {
+      const nalUnits = extractHevcNalUnits(packetData, this.decoderConfig);
+      return nalUnits.some((x) => {
+        const type = extractNalUnitTypeForHevc(x);
+        return type === 8 /* RASL_N */ || type === 9 /* RASL_R */;
+      });
+    }
+    /** Handler for the WebCodecs VideoDecoder for ironing out browser differences. */
+    sampleHandler(sample) {
+      if (isSafari()) {
+        if (this.sampleQueue.length > 0 && sample.timestamp >= last(this.sampleQueue).timestamp) {
+          for (const sample2 of this.sampleQueue) {
+            this.finalizeAndEmitSample(sample2);
+          }
+          this.sampleQueue.length = 0;
+        }
+        insertSorted(this.sampleQueue, sample, (x) => x.timestamp);
+      } else {
+        const timestamp = this.inputTimestamps.shift();
+        assert(timestamp !== void 0);
+        sample.setTimestamp(timestamp);
+        this.finalizeAndEmitSample(sample);
+      }
+    }
+    finalizeAndEmitSample(sample) {
+      sample.setTimestamp(Math.round(sample.timestamp * this.timeResolution) / this.timeResolution);
+      sample.setDuration(Math.round(sample.duration * this.timeResolution) / this.timeResolution);
+      sample.setRotation(this.rotation);
+      this.onSample(sample);
+    }
+    mergeAlpha(color, alpha) {
+      if (!alpha) {
+        const finalSample2 = new VideoSample(color);
+        this.sampleHandler(finalSample2);
+        return;
+      }
+      assert(this.merger);
+      this.merger.update(color, alpha);
+      color.close();
+      alpha.close();
+      const finalFrame = new VideoFrame(this.merger.canvas, {
+        timestamp: color.timestamp,
+        duration: color.duration ?? void 0
+      });
+      const finalSample = new VideoSample(finalFrame);
+      this.sampleHandler(finalSample);
+    }
     async flush() {
       if (this.customDecoder) {
         await this.customDecoderCallSerializer.call(() => this.customDecoder.flush());
       } else {
         assert(this.decoder);
-        await this.decoder.flush();
+        await Promise.all([
+          this.decoder.flush(),
+          this.alphaDecoder?.flush()
+        ]);
+        this.colorQueue.forEach((x) => x.close());
+        this.colorQueue.length = 0;
+        this.alphaQueue.forEach((x) => x?.close());
+        this.alphaQueue.length = 0;
+        this.alphaHadKeyframe = false;
+        this.decodedAlphaChunkCount = 0;
+        this.alphaDecoderQueueSize = 0;
+        this.nullAlphaFrameQueue.length = 0;
+        this.currentAlphaPacketIndex = 0;
+        this.alphaRaslSkipped = false;
       }
       if (isSafari()) {
         for (const sample of this.sampleQueue) {
@@ -5084,6 +5289,12 @@ var Mediabunny = (() => {
       } else {
         assert(this.decoder);
         this.decoder.close();
+        this.alphaDecoder?.close();
+        this.colorQueue.forEach((x) => x.close());
+        this.colorQueue.length = 0;
+        this.alphaQueue.forEach((x) => x?.close());
+        this.alphaQueue.length = 0;
+        this.merger?.close();
       }
       for (const sample of this.sampleQueue) {
         sample.close();
@@ -5091,6 +5302,127 @@ var Mediabunny = (() => {
       this.sampleQueue.length = 0;
     }
   };
+  var ColorAlphaMerger = class {
+    constructor() {
+      if (typeof OffscreenCanvas !== "undefined") {
+        this.canvas = new OffscreenCanvas(300, 150);
+      } else {
+        this.canvas = document.createElement("canvas");
+      }
+      const gl = this.canvas.getContext("webgl2", {
+        premultipliedAlpha: false
+      });
+      if (!gl) {
+        throw new Error("Couldn't acquire WebGL 2 context.");
+      }
+      this.gl = gl;
+      this.program = this.createProgram();
+      this.vao = this.createVAO();
+      this.colorTexture = this.createTexture();
+      this.alphaTexture = this.createTexture();
+      this.gl.useProgram(this.program);
+      this.gl.uniform1i(this.gl.getUniformLocation(this.program, "u_colorTexture"), 0);
+      this.gl.uniform1i(this.gl.getUniformLocation(this.program, "u_alphaTexture"), 1);
+    }
+    createProgram() {
+      const vertexShader = this.createShader(this.gl.VERTEX_SHADER, `#version 300 es
+			in vec2 a_position;
+			in vec2 a_texCoord;
+			out vec2 v_texCoord;
+			
+			void main() {
+				gl_Position = vec4(a_position, 0.0, 1.0);
+				v_texCoord = a_texCoord;
+			}
+		`);
+      const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, `#version 300 es
+			precision highp float;
+			
+			uniform sampler2D u_colorTexture;
+			uniform sampler2D u_alphaTexture;
+			in vec2 v_texCoord;
+			out vec4 fragColor;
+			
+			void main() {
+				vec3 color = texture(u_colorTexture, v_texCoord).rgb;
+				float alpha = texture(u_alphaTexture, v_texCoord).r;
+				fragColor = vec4(color, alpha);
+			}
+		`);
+      const program = this.gl.createProgram();
+      this.gl.attachShader(program, vertexShader);
+      this.gl.attachShader(program, fragmentShader);
+      this.gl.linkProgram(program);
+      return program;
+    }
+    createShader(type, source) {
+      const shader = this.gl.createShader(type);
+      this.gl.shaderSource(shader, source);
+      this.gl.compileShader(shader);
+      return shader;
+    }
+    createVAO() {
+      const vao = this.gl.createVertexArray();
+      this.gl.bindVertexArray(vao);
+      const vertices = new Float32Array([
+        -1,
+        -1,
+        0,
+        1,
+        1,
+        -1,
+        1,
+        1,
+        -1,
+        1,
+        0,
+        0,
+        1,
+        1,
+        1,
+        0
+      ]);
+      const buffer = this.gl.createBuffer();
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+      this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
+      const positionLocation = this.gl.getAttribLocation(this.program, "a_position");
+      const texCoordLocation = this.gl.getAttribLocation(this.program, "a_texCoord");
+      this.gl.enableVertexAttribArray(positionLocation);
+      this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, false, 16, 0);
+      this.gl.enableVertexAttribArray(texCoordLocation);
+      this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, false, 16, 8);
+      return vao;
+    }
+    createTexture() {
+      const texture = this.gl.createTexture();
+      this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+      return texture;
+    }
+    update(color, alpha) {
+      if (color.displayWidth !== this.canvas.width || color.displayHeight !== this.canvas.height) {
+        this.canvas.width = color.displayWidth;
+        this.canvas.height = color.displayHeight;
+      }
+      this.gl.activeTexture(this.gl.TEXTURE0);
+      this.gl.bindTexture(this.gl.TEXTURE_2D, this.colorTexture);
+      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, color);
+      this.gl.activeTexture(this.gl.TEXTURE1);
+      this.gl.bindTexture(this.gl.TEXTURE_2D, this.alphaTexture);
+      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, alpha);
+      this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+      this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+      this.gl.bindVertexArray(this.vao);
+      this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+    }
+    close() {
+      this.gl.getExtension("WEBGL_lose_context")?.loseContext();
+      this.gl = null;
+    }
+  };
   var VideoSampleSink = class extends BaseMediaSampleSink {
     /** Creates a new {@link VideoSampleSink} for the given {@link InputVideoTrack}. */
     constructor(videoTrack) {
@@ -5165,6 +5497,9 @@ var Mediabunny = (() => {
       if (options && typeof options !== "object") {
         throw new TypeError("options must be an object.");
       }
+      if (options.alpha !== void 0 && typeof options.alpha !== "boolean") {
+        throw new TypeError("options.alpha, when provided, must be a boolean.");
+      }
       if (options.width !== void 0 && (!Number.isInteger(options.width) || options.width <= 0)) {
         throw new TypeError("options.width, when defined, must be a positive integer.");
       }
@@ -5207,6 +5542,7 @@ var Mediabunny = (() => {
         height = options.height;
       }
       this._videoTrack = videoTrack;
+      this._alpha = options.alpha ?? false;
       this._width = width;
       this._height = height;
       this._rotation = rotation;
@@ -5236,13 +5572,13 @@ var Mediabunny = (() => {
         this._nextCanvasIndex = (this._nextCanvasIndex + 1) % this._canvasPool.length;
       }
       const context = canvas.getContext("2d", {
-        alpha: isFirefox()
+        alpha: this._alpha || isFirefox()
         // Firefox has VideoFrame glitches with opaque canvases
       });
       assert(context);
       context.resetTransform();
       if (!canvasIsNew) {
-        if (isFirefox()) {
+        if (!this._alpha && isFirefox()) {
           context.fillStyle = "black";
           context.fillRect(0, 0, this._width, this._height);
         } else {
@@ -5340,7 +5676,13 @@ var Mediabunny = (() => {
         void this.customDecoderCallSerializer.call(() => this.customDecoder.init());
       } else {
         this.decoder = new AudioDecoder({
-          output: (data) => sampleHandler(new AudioSample(data)),
+          output: (data) => {
+            try {
+              sampleHandler(new AudioSample(data));
+            } catch (error) {
+              this.onError(error);
+            }
+          },
           error: onError
         });
         this.decoder.configure(decoderConfig);
@@ -5818,6 +6160,10 @@ var Mediabunny = (() => {
       const colorSpace = await this._backing.getColorSpace();
       return colorSpace.primaries === "bt2020" || colorSpace.primaries === "smpte432" || colorSpace.transfer === "pg" || colorSpace.transfer === "hlg" || colorSpace.matrix === "bt2020-ncl";
     }
+    /** Checks if this track may contain transparent samples with alpha data. */
+    canBeTransparent() {
+      return this._backing.canBeTransparent();
+    }
     /**
      * Returns the [decoder configuration](https://www.w3.org/TR/webcodecs/#video-decoder-config) for decoding the
      * track's packets using a [`VideoDecoder`](https://developer.mozilla.org/en-US/docs/Web/API/VideoDecoder). Returns
@@ -5861,7 +6207,9 @@ var Mediabunny = (() => {
       if (this.codec === null) {
         return null;
       }
-      return determineVideoPacketType(this, packet);
+      const decoderConfig = await this.getDecoderConfig();
+      assert(decoderConfig);
+      return determineVideoPacketType(this.codec, decoderConfig, packet.data);
     }
   };
   var InputAudioTrack = class extends InputTrack {
@@ -8441,6 +8789,9 @@ var Mediabunny = (() => {
         fullRange: this.internalTrack.info.colorSpace?.fullRange
       };
     }
+    async canBeTransparent() {
+      return false;
+    }
     async getDecoderConfig() {
       if (!this.internalTrack.info.codec) {
         return null;
@@ -9100,6 +9451,7 @@ var Mediabunny = (() => {
       this.currentTrack = null;
       this.currentCluster = null;
       this.currentBlock = null;
+      this.currentBlockAdditional = null;
       this.currentCueTime = null;
       this.currentDecodingInstruction = null;
       this.currentTagTargetIsMovie = true;
@@ -9531,7 +9883,8 @@ var Mediabunny = (() => {
             referencedTimestamps: originalBlock.referencedTimestamps,
             data: frameData,
             lacing: 0 /* None */,
-            decoded: true
+            decoded: true,
+            mainAdditional: originalBlock.mainAdditional
           });
         }
         blockIndex += frameCount;
@@ -9761,7 +10114,8 @@ var Mediabunny = (() => {
                 rotation: 0,
                 codec: null,
                 codecDescription: null,
-                colorSpace: null
+                colorSpace: null,
+                alphaMode: false
               };
             } else if (type === 2) {
               this.currentTrack.info = {
@@ -9870,6 +10224,13 @@ var Mediabunny = (() => {
           }
           ;
           break;
+        case 21440 /* AlphaMode */:
+          {
+            if (this.currentTrack?.info?.type !== "video") break;
+            this.currentTrack.info.alphaMode = readUnsignedInt(slice, size) === 1;
+          }
+          ;
+          break;
         case 21936 /* Colour */:
           {
             if (this.currentTrack?.info?.type !== "video") break;
@@ -10032,7 +10393,8 @@ var Mediabunny = (() => {
               referencedTimestamps: [],
               data: blockData,
               lacing,
-              decoded: !hasDecodingInstructions
+              decoded: !hasDecodingInstructions,
+              mainAdditional: null
             });
           }
           ;
@@ -10071,12 +10433,48 @@ var Mediabunny = (() => {
               referencedTimestamps: [],
               data: blockData,
               lacing,
-              decoded: !hasDecodingInstructions
+              decoded: !hasDecodingInstructions,
+              mainAdditional: null
             };
             trackData.blocks.push(this.currentBlock);
           }
           ;
           break;
+        case 30113 /* BlockAdditions */:
+          {
+            this.readContiguousElements(slice.slice(dataStartPos, size));
+          }
+          ;
+          break;
+        case 166 /* BlockMore */:
+          {
+            if (!this.currentBlock) break;
+            this.currentBlockAdditional = {
+              addId: 1,
+              data: null
+            };
+            this.readContiguousElements(slice.slice(dataStartPos, size));
+            if (this.currentBlockAdditional.data && this.currentBlockAdditional.addId === 1) {
+              this.currentBlock.mainAdditional = this.currentBlockAdditional.data;
+            }
+            this.currentBlockAdditional = null;
+          }
+          ;
+          break;
+        case 165 /* BlockAdditional */:
+          {
+            if (!this.currentBlockAdditional) break;
+            this.currentBlockAdditional.data = readBytes(slice, size);
+          }
+          ;
+          break;
+        case 238 /* BlockAddID */:
+          {
+            if (!this.currentBlockAdditional) break;
+            this.currentBlockAdditional.addId = readUnsignedInt(slice, size);
+          }
+          ;
+          break;
         case 155 /* BlockDuration */:
           {
             if (!this.currentBlock) break;
@@ -10654,13 +11052,19 @@ var Mediabunny = (() => {
       const data = options.metadataOnly ? PLACEHOLDER_DATA : block.data;
       const timestamp = block.timestamp / this.internalTrack.segment.timestampFactor;
       const duration = block.duration / this.internalTrack.segment.timestampFactor;
+      const sideData = {};
+      if (block.mainAdditional && this.internalTrack.info?.type === "video" && this.internalTrack.info.alphaMode) {
+        sideData.alpha = options.metadataOnly ? PLACEHOLDER_DATA : block.mainAdditional;
+        sideData.alphaByteLength = block.mainAdditional.byteLength;
+      }
       const packet = new EncodedPacket(
         data,
         block.isKeyFrame ? "key" : "delta",
         timestamp,
         duration,
         cluster.dataStartPos + blockIndex,
-        block.data.byteLength
+        block.data.byteLength,
+        sideData
       );
       this.packetToClusterLocation.set(packet, { cluster, blockIndex });
       return packet;
@@ -10879,6 +11283,9 @@ var Mediabunny = (() => {
         fullRange: this.internalTrack.info.colorSpace?.fullRange
       };
     }
+    async canBeTransparent() {
+      return this.internalTrack.info.alphaMode;
+    }
     async getDecoderConfig() {
       if (!this.internalTrack.info.codec) {
         return null;
@@ -13345,8 +13752,11 @@ var Mediabunny = (() => {
               break;
             }
           } else if (chunkId === "ds64") {
-            const riffChunkSize = readU64(slice2, littleEndian);
-            dataChunkSize = readU64(slice2, littleEndian);
+            let ds64Slice = this.reader.requestSlice(startPos, chunkSize);
+            if (ds64Slice instanceof Promise) ds64Slice = await ds64Slice;
+            if (!ds64Slice) break;
+            const riffChunkSize = readU64(ds64Slice, littleEndian);
+            dataChunkSize = readU64(ds64Slice, littleEndian);
             totalFileSize = Math.min(riffChunkSize + 8, this.reader.fileSize ?? Infinity);
           } else if (chunkId === "LIST") {
             await this.parseListChunk(startPos, chunkSize, littleEndian);
@@ -14840,7 +15250,7 @@ var Mediabunny = (() => {
 
   // src/source.ts
   var nodeAlias = __toESM(require_node(), 1);
-  var node = nodeAlias;
+  var node = typeof nodeAlias !== "undefined" ? nodeAlias : void 0;
   var Source = class {
     constructor() {
       /** @internal */
@@ -15283,6 +15693,7 @@ var Mediabunny = (() => {
         let data = this._options.read(worker.currentPos, originalTargetPos);
         if (data instanceof Promise) data = await data;
         if (data instanceof Uint8Array) {
+          data = toUint8Array(data);
           if (data.length !== originalTargetPos - worker.currentPos) {
             throw new Error(
               `options.read returned a Uint8Array with unexpected length: Requested ${originalTargetPos - worker.currentPos} bytes, but got ${data.length}.`
@@ -15305,8 +15716,9 @@ var Mediabunny = (() => {
             if (!(value instanceof Uint8Array)) {
               throw new TypeError("ReadableStream returned by options.read must yield Uint8Array chunks.");
             }
-            this.onread?.(worker.currentPos, worker.currentPos + value.length);
-            this._orchestrator.supplyWorkerData(worker, value);
+            const data2 = toUint8Array(value);
+            this.onread?.(worker.currentPos, worker.currentPos + data2.length);
+            this._orchestrator.supplyWorkerData(worker, data2);
           }
         } else {
           throw new TypeError("options.read must return or resolve to a Uint8Array or a ReadableStream.");
@@ -15850,7 +16262,7 @@ var Mediabunny = (() => {
   };
 
   // src/input.ts
-  Symbol.dispose ??= Symbol("Symbol.dispose");
+  polyfillSymbolDispose();
   var Input = class {
     /**
      * Creates a new input file from the specified options. No reading operations will be performed until methods are
@@ -16101,53 +16513,73 @@ var Mediabunny = (() => {
       );
     }
   };
+  var checkIsInRange = (slice, bytesToRead) => {
+    if (slice.filePos < slice.start || slice.filePos + bytesToRead > slice.end) {
+      throw new RangeError(
+        `Tried reading [${slice.filePos}, ${slice.filePos + bytesToRead}), but slice is [${slice.start}, ${slice.end}).`
+      );
+    }
+  };
   var readBytes = (slice, length) => {
+    checkIsInRange(slice, length);
     const bytes2 = slice.bytes.subarray(slice.bufferPos, slice.bufferPos + length);
     slice.bufferPos += length;
     return bytes2;
   };
-  var readU8 = (slice) => slice.view.getUint8(slice.bufferPos++);
+  var readU8 = (slice) => {
+    checkIsInRange(slice, 1);
+    return slice.view.getUint8(slice.bufferPos++);
+  };
   var readU16 = (slice, littleEndian) => {
+    checkIsInRange(slice, 2);
     const value = slice.view.getUint16(slice.bufferPos, littleEndian);
     slice.bufferPos += 2;
     return value;
   };
   var readU16Be = (slice) => {
+    checkIsInRange(slice, 2);
     const value = slice.view.getUint16(slice.bufferPos, false);
     slice.bufferPos += 2;
     return value;
   };
   var readU24Be = (slice) => {
+    checkIsInRange(slice, 3);
     const value = getUint24(slice.view, slice.bufferPos, false);
     slice.bufferPos += 3;
     return value;
   };
   var readI16Be = (slice) => {
+    checkIsInRange(slice, 2);
     const value = slice.view.getInt16(slice.bufferPos, false);
     slice.bufferPos += 2;
     return value;
   };
   var readU32 = (slice, littleEndian) => {
+    checkIsInRange(slice, 4);
     const value = slice.view.getUint32(slice.bufferPos, littleEndian);
     slice.bufferPos += 4;
     return value;
   };
   var readU32Be = (slice) => {
+    checkIsInRange(slice, 4);
     const value = slice.view.getUint32(slice.bufferPos, false);
     slice.bufferPos += 4;
     return value;
   };
   var readU32Le = (slice) => {
+    checkIsInRange(slice, 4);
     const value = slice.view.getUint32(slice.bufferPos, true);
     slice.bufferPos += 4;
     return value;
   };
   var readI32Be = (slice) => {
+    checkIsInRange(slice, 4);
     const value = slice.view.getInt32(slice.bufferPos, false);
     slice.bufferPos += 4;
     return value;
   };
   var readI32Le = (slice) => {
+    checkIsInRange(slice, 4);
     const value = slice.view.getInt32(slice.bufferPos, true);
     slice.bufferPos += 4;
     return value;
@@ -16180,19 +16612,19 @@ var Mediabunny = (() => {
     return high * 4294967296 + low;
   };
   var readF32Be = (slice) => {
+    checkIsInRange(slice, 4);
     const value = slice.view.getFloat32(slice.bufferPos, false);
     slice.bufferPos += 4;
     return value;
   };
   var readF64Be = (slice) => {
+    checkIsInRange(slice, 8);
     const value = slice.view.getFloat64(slice.bufferPos, false);
     slice.bufferPos += 8;
     return value;
   };
   var readAscii = (slice, length) => {
-    if (slice.bufferPos + length > slice.bytes.length) {
-      throw new RangeError("Reading past end of slice.");
-    }
+    checkIsInRange(slice, length);
     let str = "";
     for (let i = 0; i < length; i++) {
       str += String.fromCharCode(slice.bytes[slice.bufferPos++]);
@@ -19468,6 +19900,7 @@ var Mediabunny = (() => {
       const videoElement = { id: 224 /* Video */, data: [
         { id: 176 /* PixelWidth */, data: trackData.info.width },
         { id: 186 /* PixelHeight */, data: trackData.info.height },
+        trackData.info.alphaMode ? { id: 21440 /* AlphaMode */, data: 1 } : null,
         colorSpaceIsComplete(colorSpace) ? {
           id: 21936 /* Colour */,
           data: [
@@ -19785,7 +20218,7 @@ var Mediabunny = (() => {
         codecStrings
       });
     }
-    getVideoTrackData(track, meta) {
+    getVideoTrackData(track, packet, meta) {
       const existingTrackData = this.trackDatas.find((x) => x.track === track);
       if (existingTrackData) {
         return existingTrackData;
@@ -19801,7 +20234,9 @@ var Mediabunny = (() => {
         info: {
           width: meta.decoderConfig.codedWidth,
           height: meta.decoderConfig.codedHeight,
-          decoderConfig: meta.decoderConfig
+          decoderConfig: meta.decoderConfig,
+          alphaMode: !!packet.sideData.alpha
+          // The first packet determines if this track has alpha or not
         },
         chunkQueue: [],
         lastWrittenMsTimestamp: null
@@ -19881,7 +20316,7 @@ var Mediabunny = (() => {
     async addEncodedVideoPacket(track, packet, meta) {
       const release = await this.mutex.acquire();
       try {
-        const trackData = this.getVideoTrackData(track, meta);
+        const trackData = this.getVideoTrackData(track, packet, meta);
         const isKeyFrame = packet.type === "key";
         let timestamp = this.validateAndNormalizeTimestamp(trackData.track, packet.timestamp, isKeyFrame);
         let duration = packet.duration;
@@ -19889,7 +20324,8 @@ var Mediabunny = (() => {
           timestamp = roundToMultiple(timestamp, 1 / track.metadata.frameRate);
           duration = roundToMultiple(duration, 1 / track.metadata.frameRate);
         }
-        const videoChunk = this.createInternalChunk(packet.data, timestamp, duration, packet.type);
+        const additions = trackData.info.alphaMode ? packet.sideData.alpha ?? null : null;
+        const videoChunk = this.createInternalChunk(packet.data, timestamp, duration, packet.type, additions);
         if (track.source._codec === "vp9") this.fixVP9ColorSpace(trackData, videoChunk);
         trackData.chunkQueue.push(videoChunk);
         await this.interleaveChunks();
@@ -20063,8 +20499,9 @@ ${cue.notes ?? ""}`;
           } : null,
           chunk.additions ? { id: 30113 /* BlockAdditions */, data: [
             { id: 166 /* BlockMore */, data: [
-              { id: 165 /* BlockAdditional */, data: chunk.additions },
-              { id: 238 /* BlockAddID */, data: 1 }
+              { id: 238 /* BlockAddID */, data: 1 },
+              // Some players expect BlockAddID to come first
+              { id: 165 /* BlockAdditional */, data: chunk.additions }
             ] }
           ] } : null,
           msDuration > 0 ? { id: 155 /* BlockDuration */, data: msDuration } : null
@@ -21471,6 +21908,9 @@ ${cue.notes ?? ""}`;
     if (!options || typeof options !== "object") {
       throw new TypeError("Encoding options must be an object.");
     }
+    if (options.alpha !== void 0 && !["discard", "keep"].includes(options.alpha)) {
+      throw new TypeError("options.alpha, when provided, must be 'discard' or 'keep'.");
+    }
     if (options.bitrateMode !== void 0 && !["constant", "variable"].includes(options.bitrateMode)) {
       throw new TypeError("bitrateMode, when provided, must be 'constant' or 'variable'.");
     }
@@ -21510,8 +21950,8 @@ ${cue.notes ?? ""}`;
       height: options.height,
       bitrate: resolvedBitrate,
       bitrateMode: options.bitrateMode,
+      alpha: options.alpha ?? "discard",
       framerate: options.framerate,
-      // this.source._connectedTrack?.metadata.frameRate,
       latencyMode: options.latencyMode,
       hardwareAcceleration: options.hardwareAcceleration,
       scalabilityMode: options.scalabilityMode,
@@ -21714,7 +22154,9 @@ ${cue.notes ?? ""}`;
       height,
       bitrate,
       framerate: void 0,
-      ...restOptions
+      ...restOptions,
+      alpha: "discard"
+      // Since we handle alpha ourselves
     });
     const support = await VideoEncoder.isConfigSupported(encoderConfig);
     return support.supported === true;
@@ -21949,12 +22391,18 @@ ${cue.notes ?? ""}`;
       this.customEncoder = null;
       this.customEncoderCallSerializer = new CallSerializer();
       this.customEncoderQueueSize = 0;
+      // Alpha stuff
+      this.alphaEncoder = null;
+      this.splitter = null;
+      this.splitterCreationFailed = false;
+      this.alphaFrameQueue = [];
       /**
        * Encoders typically throw their errors "out of band", meaning asynchronously in some other execution context.
        * However, we want to surface these errors to the user within the normal control flow, so they don't go uncaught.
        * So, we keep track of the encoder error and throw it as soon as we get the chance.
        */
-      this.encoderError = null;
+      this.error = null;
+      this.errorNeedsNewStack = true;
     }
     async add(videoSample, shouldClose, encodeOptions) {
       try {
@@ -22028,7 +22476,7 @@ ${cue.notes ?? ""}`;
         if (this.customEncoder) {
           this.customEncoderQueueSize++;
           const clonedSample = videoSample.clone();
-          const promise = this.customEncoderCallSerializer.call(() => this.customEncoder.encode(clonedSample, finalEncodeOptions)).then(() => this.customEncoderQueueSize--).catch((error) => this.encoderError ??= error).finally(() => {
+          const promise = this.customEncoderCallSerializer.call(() => this.customEncoder.encode(clonedSample, finalEncodeOptions)).then(() => this.customEncoderQueueSize--).catch((error) => this.error ??= error).finally(() => {
             clonedSample.close();
           });
           if (this.customEncoderQueueSize >= 4) {
@@ -22037,8 +22485,39 @@ ${cue.notes ?? ""}`;
         } else {
           assert(this.encoder);
           const videoFrame = videoSample.toVideoFrame();
-          this.encoder.encode(videoFrame, finalEncodeOptions);
-          videoFrame.close();
+          if (!this.alphaEncoder) {
+            this.encoder.encode(videoFrame, finalEncodeOptions);
+            videoFrame.close();
+          } else {
+            const frameDefinitelyHasNoAlpha = !!videoFrame.format && !videoFrame.format.includes("A");
+            if (frameDefinitelyHasNoAlpha || this.splitterCreationFailed) {
+              this.alphaFrameQueue.push(null);
+              this.encoder.encode(videoFrame, finalEncodeOptions);
+              videoFrame.close();
+            } else {
+              const width = videoFrame.displayWidth;
+              const height = videoFrame.displayHeight;
+              if (!this.splitter) {
+                try {
+                  this.splitter = new ColorAlphaSplitter(width, height);
+                } catch (error) {
+                  console.error("Due to an error, only color data will be encoded.", error);
+                  this.splitterCreationFailed = true;
+                  this.alphaFrameQueue.push(null);
+                  this.encoder.encode(videoFrame, finalEncodeOptions);
+                  videoFrame.close();
+                }
+              }
+              if (this.splitter) {
+                const colorFrame = this.splitter.extractColor(videoFrame);
+                const alphaFrame = this.splitter.extractAlpha(videoFrame);
+                this.alphaFrameQueue.push(alphaFrame);
+                this.encoder.encode(colorFrame, finalEncodeOptions);
+                colorFrame.close();
+                videoFrame.close();
+              }
+            }
+          }
           if (shouldClose) {
             videoSample.close();
           }
@@ -22054,9 +22533,6 @@ ${cue.notes ?? ""}`;
       }
     }
     ensureEncoder(videoSample) {
-      if (this.encoder) {
-        return;
-      }
       const encoderError = new Error();
       this.ensureEncoderPromise = (async () => {
         const encoderConfig = buildVideoEncoderConfig({
@@ -22082,13 +22558,20 @@ ${cue.notes ?? ""}`;
               throw new TypeError("The second argument passed to onPacket must be an object or undefined.");
             }
             this.encodingConfig.onEncodedPacket?.(packet, meta);
-            void this.muxer.addEncodedVideoPacket(this.source._connectedTrack, packet, meta);
+            void this.muxer.addEncodedVideoPacket(this.source._connectedTrack, packet, meta).catch((error) => {
+              this.error ??= error;
+              this.errorNeedsNewStack = false;
+            });
           };
           await this.customEncoder.init();
         } else {
           if (typeof VideoEncoder === "undefined") {
             throw new Error("VideoEncoder is not supported by this browser.");
           }
+          encoderConfig.alpha = "discard";
+          if (this.encodingConfig.alpha === "keep") {
+            encoderConfig.latencyMode = "quality";
+          }
           const hasOddDimension = encoderConfig.width % 2 === 1 || encoderConfig.height % 2 === 1;
           if (hasOddDimension && (this.encodingConfig.codec === "avc" || this.encodingConfig.codec === "hevc")) {
             throw new Error(
@@ -22101,18 +22584,81 @@ ${cue.notes ?? ""}`;
               `This specific encoder configuration (${encoderConfig.codec}, ${encoderConfig.bitrate} bps, ${encoderConfig.width}x${encoderConfig.height}, hardware acceleration: ${encoderConfig.hardwareAcceleration ?? "no-preference"}) is not supported by this browser. Consider using another codec or changing your video parameters.`
             );
           }
+          const colorChunkQueue = [];
+          const nullAlphaChunkQueue = [];
+          let encodedAlphaChunkCount = 0;
+          let alphaEncoderQueue = 0;
+          const addPacket = (colorChunk, alphaChunk, meta) => {
+            const sideData = {};
+            if (alphaChunk) {
+              const alphaData = new Uint8Array(alphaChunk.byteLength);
+              alphaChunk.copyTo(alphaData);
+              sideData.alpha = alphaData;
+            }
+            const packet = EncodedPacket.fromEncodedChunk(colorChunk, sideData);
+            this.encodingConfig.onEncodedPacket?.(packet, meta);
+            void this.muxer.addEncodedVideoPacket(this.source._connectedTrack, packet, meta).catch((error) => {
+              this.error ??= error;
+              this.errorNeedsNewStack = false;
+            });
+          };
           this.encoder = new VideoEncoder({
             output: (chunk, meta) => {
-              const packet = EncodedPacket.fromEncodedChunk(chunk);
-              this.encodingConfig.onEncodedPacket?.(packet, meta);
-              void this.muxer.addEncodedVideoPacket(this.source._connectedTrack, packet, meta);
+              if (!this.alphaEncoder) {
+                addPacket(chunk, null, meta);
+                return;
+              }
+              const alphaFrame = this.alphaFrameQueue.shift();
+              assert(alphaFrame !== void 0);
+              if (alphaFrame) {
+                this.alphaEncoder.encode(alphaFrame, {
+                  // Crucial: The alpha frame is forced to be a key frame whenever the color frame
+                  // also is. Without this, playback can glitch and even crash in some browsers.
+                  // This is the reason why the two encoders are wired in series and not in parallel.
+                  keyFrame: chunk.type === "key"
+                });
+                alphaEncoderQueue++;
+                alphaFrame.close();
+                colorChunkQueue.push({ chunk, meta });
+              } else {
+                if (alphaEncoderQueue === 0) {
+                  addPacket(chunk, null, meta);
+                } else {
+                  nullAlphaChunkQueue.push(encodedAlphaChunkCount + alphaEncoderQueue);
+                  colorChunkQueue.push({ chunk, meta });
+                }
+              }
             },
             error: (error) => {
               error.stack = encoderError.stack;
-              this.encoderError ??= error;
+              this.error ??= error;
             }
           });
           this.encoder.configure(encoderConfig);
+          if (this.encodingConfig.alpha === "keep") {
+            this.alphaEncoder = new VideoEncoder({
+              // We ignore the alpha chunk's metadata
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              output: (chunk, meta) => {
+                alphaEncoderQueue--;
+                const colorChunk = colorChunkQueue.shift();
+                assert(colorChunk !== void 0);
+                addPacket(colorChunk.chunk, chunk, colorChunk.meta);
+                encodedAlphaChunkCount++;
+                while (nullAlphaChunkQueue.length > 0 && nullAlphaChunkQueue[0] === encodedAlphaChunkCount) {
+                  nullAlphaChunkQueue.shift();
+                  const colorChunk2 = colorChunkQueue.shift();
+                  assert(colorChunk2 !== void 0);
+                  addPacket(colorChunk2.chunk, null, colorChunk2.meta);
+                }
+              },
+              error: (error) => {
+                error.stack = encoderError.stack;
+                this.error ??= error;
+              }
+            });
+            this.alphaEncoder.configure(encoderConfig);
+          }
         }
         assert(this.source._connectedTrack);
         this.muxer = this.source._connectedTrack.output._muxer;
@@ -22129,10 +22675,16 @@ ${cue.notes ?? ""}`;
       } else if (this.encoder) {
         if (!forceClose) {
           await this.encoder.flush();
+          await this.alphaEncoder?.flush();
         }
         if (this.encoder.state !== "closed") {
           this.encoder.close();
         }
+        if (this.alphaEncoder && this.alphaEncoder.state !== "closed") {
+          this.alphaEncoder.close();
+        }
+        this.alphaFrameQueue.forEach((x) => x?.close());
+        this.splitter?.close();
       }
       if (!forceClose) this.checkForEncoderError();
     }
@@ -22144,12 +22696,235 @@ ${cue.notes ?? ""}`;
       }
     }
     checkForEncoderError() {
-      if (this.encoderError) {
-        this.encoderError.stack = new Error().stack;
-        throw this.encoderError;
+      if (this.error) {
+        if (this.errorNeedsNewStack) {
+          this.error.stack = new Error().stack;
+        }
+        throw this.error;
       }
     }
   };
+  var ColorAlphaSplitter = class {
+    constructor(initialWidth, initialHeight) {
+      this.lastFrame = null;
+      if (typeof OffscreenCanvas !== "undefined") {
+        this.canvas = new OffscreenCanvas(initialWidth, initialHeight);
+      } else {
+        this.canvas = document.createElement("canvas");
+        this.canvas.width = initialWidth;
+        this.canvas.height = initialHeight;
+      }
+      const gl = this.canvas.getContext("webgl2", {
+        alpha: true
+        // Needed due to the YUV thing we do for alpha
+      });
+      if (!gl) {
+        throw new Error("Couldn't acquire WebGL 2 context.");
+      }
+      this.gl = gl;
+      this.colorProgram = this.createColorProgram();
+      this.alphaProgram = this.createAlphaProgram();
+      this.vao = this.createVAO();
+      this.sourceTexture = this.createTexture();
+      this.alphaResolutionLocation = this.gl.getUniformLocation(this.alphaProgram, "u_resolution");
+      this.gl.useProgram(this.colorProgram);
+      this.gl.uniform1i(this.gl.getUniformLocation(this.colorProgram, "u_sourceTexture"), 0);
+      this.gl.useProgram(this.alphaProgram);
+      this.gl.uniform1i(this.gl.getUniformLocation(this.alphaProgram, "u_sourceTexture"), 0);
+    }
+    createVertexShader() {
+      return this.createShader(this.gl.VERTEX_SHADER, `#version 300 es
+			in vec2 a_position;
+			in vec2 a_texCoord;
+			out vec2 v_texCoord;
+			
+			void main() {
+				gl_Position = vec4(a_position, 0.0, 1.0);
+				v_texCoord = a_texCoord;
+			}
+		`);
+    }
+    createColorProgram() {
+      const vertexShader = this.createVertexShader();
+      const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, `#version 300 es
+			precision highp float;
+			
+			uniform sampler2D u_sourceTexture;
+			in vec2 v_texCoord;
+			out vec4 fragColor;
+			
+			void main() {
+				vec4 source = texture(u_sourceTexture, v_texCoord);
+				fragColor = vec4(source.rgb, 1.0);
+			}
+		`);
+      const program = this.gl.createProgram();
+      this.gl.attachShader(program, vertexShader);
+      this.gl.attachShader(program, fragmentShader);
+      this.gl.linkProgram(program);
+      return program;
+    }
+    createAlphaProgram() {
+      const vertexShader = this.createVertexShader();
+      const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, `#version 300 es
+			precision highp float;
+			
+			uniform sampler2D u_sourceTexture;
+			uniform vec2 u_resolution; // The width and height of the canvas
+			in vec2 v_texCoord;
+			out vec4 fragColor;
+
+			// This function determines the value for a single byte in the YUV stream
+			float getByteValue(float byteOffset) {
+				float width = u_resolution.x;
+				float height = u_resolution.y;
+
+				float yPlaneSize = width * height;
+
+				if (byteOffset < yPlaneSize) {
+					// This byte is in the luma plane. Find the corresponding pixel coordinates to sample from
+					float y = floor(byteOffset / width);
+					float x = mod(byteOffset, width);
+					
+					// Add 0.5 to sample the center of the texel
+					vec2 sampleCoord = (vec2(x, y) + 0.5) / u_resolution;
+					
+					// The luma value is the alpha from the source texture
+					return texture(u_sourceTexture, sampleCoord).a;
+				} else {
+					// Write a fixed value for chroma and beyond
+					return 128.0 / 255.0;
+				}
+			}
+			
+			void main() {
+				// Each fragment writes 4 bytes (R, G, B, A)
+				float pixelIndex = floor(gl_FragCoord.y) * u_resolution.x + floor(gl_FragCoord.x);
+				float baseByteOffset = pixelIndex * 4.0;
+
+				vec4 result;
+				for (int i = 0; i < 4; i++) {
+					float currentByteOffset = baseByteOffset + float(i);
+					result[i] = getByteValue(currentByteOffset);
+				}
+				
+				fragColor = result;
+			}
+		`);
+      const program = this.gl.createProgram();
+      this.gl.attachShader(program, vertexShader);
+      this.gl.attachShader(program, fragmentShader);
+      this.gl.linkProgram(program);
+      return program;
+    }
+    createShader(type, source) {
+      const shader = this.gl.createShader(type);
+      this.gl.shaderSource(shader, source);
+      this.gl.compileShader(shader);
+      if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+        console.error("Shader compile error:", this.gl.getShaderInfoLog(shader));
+      }
+      return shader;
+    }
+    createVAO() {
+      const vao = this.gl.createVertexArray();
+      this.gl.bindVertexArray(vao);
+      const vertices = new Float32Array([
+        -1,
+        -1,
+        0,
+        1,
+        1,
+        -1,
+        1,
+        1,
+        -1,
+        1,
+        0,
+        0,
+        1,
+        1,
+        1,
+        0
+      ]);
+      const buffer = this.gl.createBuffer();
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+      this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
+      const positionLocation = this.gl.getAttribLocation(this.colorProgram, "a_position");
+      const texCoordLocation = this.gl.getAttribLocation(this.colorProgram, "a_texCoord");
+      this.gl.enableVertexAttribArray(positionLocation);
+      this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, false, 16, 0);
+      this.gl.enableVertexAttribArray(texCoordLocation);
+      this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, false, 16, 8);
+      return vao;
+    }
+    createTexture() {
+      const texture = this.gl.createTexture();
+      this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+      return texture;
+    }
+    updateTexture(sourceFrame) {
+      if (this.lastFrame === sourceFrame) {
+        return;
+      }
+      if (sourceFrame.displayWidth !== this.canvas.width || sourceFrame.displayHeight !== this.canvas.height) {
+        this.canvas.width = sourceFrame.displayWidth;
+        this.canvas.height = sourceFrame.displayHeight;
+      }
+      this.gl.activeTexture(this.gl.TEXTURE0);
+      this.gl.bindTexture(this.gl.TEXTURE_2D, this.sourceTexture);
+      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, sourceFrame);
+      this.lastFrame = sourceFrame;
+    }
+    extractColor(sourceFrame) {
+      this.updateTexture(sourceFrame);
+      this.gl.useProgram(this.colorProgram);
+      this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+      this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+      this.gl.bindVertexArray(this.vao);
+      this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+      return new VideoFrame(this.canvas, {
+        timestamp: sourceFrame.timestamp,
+        duration: sourceFrame.duration ?? void 0,
+        alpha: "discard"
+      });
+    }
+    extractAlpha(sourceFrame) {
+      this.updateTexture(sourceFrame);
+      this.gl.useProgram(this.alphaProgram);
+      this.gl.uniform2f(this.alphaResolutionLocation, this.canvas.width, this.canvas.height);
+      this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+      this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+      this.gl.bindVertexArray(this.vao);
+      this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+      const { width, height } = this.canvas;
+      const chromaSamples = Math.ceil(width / 2) * Math.ceil(height / 2);
+      const yuvSize = width * height + chromaSamples * 2;
+      const requiredHeight = Math.ceil(yuvSize / (width * 4));
+      let yuv = new Uint8Array(4 * width * requiredHeight);
+      this.gl.readPixels(0, 0, width, requiredHeight, this.gl.RGBA, this.gl.UNSIGNED_BYTE, yuv);
+      yuv = yuv.subarray(0, yuvSize);
+      assert(yuv[width * height] === 128);
+      assert(yuv[yuv.length - 1] === 128);
+      const init = {
+        format: "I420",
+        codedWidth: width,
+        codedHeight: height,
+        timestamp: sourceFrame.timestamp,
+        duration: sourceFrame.duration ?? void 0,
+        transfer: [yuv.buffer]
+      };
+      return new VideoFrame(yuv, init);
+    }
+    close() {
+      this.gl.getExtension("WEBGL_lose_context")?.loseContext();
+      this.gl = null;
+    }
+  };
   var VideoSampleSource = class extends VideoSource {
     /**
      * Creates a new {@link VideoSampleSource} whose samples are encoded according to the specified
@@ -22411,7 +23186,8 @@ ${cue.notes ?? ""}`;
        * However, we want to surface these errors to the user within the normal control flow, so they don't go uncaught.
        * So, we keep track of the encoder error and throw it as soon as we get the chance.
        */
-      this.encoderError = null;
+      this.error = null;
+      this.errorNeedsNewStack = true;
     }
     async add(audioSample, shouldClose) {
       try {
@@ -22439,7 +23215,7 @@ ${cue.notes ?? ""}`;
         if (this.customEncoder) {
           this.customEncoderQueueSize++;
           const clonedSample = audioSample.clone();
-          const promise = this.customEncoderCallSerializer.call(() => this.customEncoder.encode(clonedSample)).then(() => this.customEncoderQueueSize--).catch((error) => this.encoderError ??= error).finally(() => {
+          const promise = this.customEncoderCallSerializer.call(() => this.customEncoder.encode(clonedSample)).then(() => this.customEncoderQueueSize--).catch((error) => this.error ??= error).finally(() => {
             clonedSample.close();
           });
           if (this.customEncoderQueueSize >= 4) {
@@ -22520,9 +23296,6 @@ ${cue.notes ?? ""}`;
       }
     }
     ensureEncoder(audioSample) {
-      if (this.encoderInitialized) {
-        return;
-      }
       const encoderError = new Error();
       this.ensureEncoderPromise = (async () => {
         const { numberOfChannels, sampleRate } = audioSample;
@@ -22548,7 +23321,10 @@ ${cue.notes ?? ""}`;
               throw new TypeError("The second argument passed to onPacket must be an object or undefined.");
             }
             this.encodingConfig.onEncodedPacket?.(packet, meta);
-            void this.muxer.addEncodedAudioPacket(this.source._connectedTrack, packet, meta);
+            void this.muxer.addEncodedAudioPacket(this.source._connectedTrack, packet, meta).catch((error) => {
+              this.error ??= error;
+              this.errorNeedsNewStack = false;
+            });
           };
           await this.customEncoder.init();
         } else if (PCM_AUDIO_CODECS.includes(this.encodingConfig.codec)) {
@@ -22567,11 +23343,14 @@ ${cue.notes ?? ""}`;
             output: (chunk, meta) => {
               const packet = EncodedPacket.fromEncodedChunk(chunk);
               this.encodingConfig.onEncodedPacket?.(packet, meta);
-              void this.muxer.addEncodedAudioPacket(this.source._connectedTrack, packet, meta);
+              void this.muxer.addEncodedAudioPacket(this.source._connectedTrack, packet, meta).catch((error) => {
+                this.error ??= error;
+                this.errorNeedsNewStack = false;
+              });
             },
             error: (error) => {
               error.stack = encoderError.stack;
-              this.encoderError ??= error;
+              this.error ??= error;
             }
           });
           this.encoder.configure(encoderConfig);
@@ -22703,9 +23482,11 @@ ${cue.notes ?? ""}`;
       }
     }
     checkForEncoderError() {
-      if (this.encoderError) {
-        this.encoderError.stack = new Error().stack;
-        throw this.encoderError;
+      if (this.error) {
+        if (this.errorNeedsNewStack) {
+          this.error.stack = new Error().stack;
+        }
+        throw this.error;
       }
     }
   };
@@ -23014,9 +23795,15 @@ ${cue.notes ?? ""}`;
     /** Creates a new {@link TextSubtitleSource} where added text chunks are in the specified `codec`. */
     constructor(codec) {
       super(codec);
+      /** @internal */
+      this._error = null;
       this._parser = new SubtitleParser({
         codec,
-        output: (cue, metadata) => this._connectedTrack?.output._muxer.addSubtitleCue(this._connectedTrack, cue, metadata)
+        output: (cue, metadata) => {
+          void this._connectedTrack?.output._muxer.addSubtitleCue(this._connectedTrack, cue, metadata).catch((error) => {
+            this._error ??= error;
+          });
+        }
       });
     }
     /**
@@ -23030,10 +23817,23 @@ ${cue.notes ?? ""}`;
       if (typeof text !== "string") {
         throw new TypeError("text must be a string.");
       }
+      this._checkForError();
       this._ensureValidAdd();
       this._parser.parse(text);
       return this._connectedTrack.output._muxer.mutex.currentPromise;
     }
+    /** @internal */
+    _checkForError() {
+      if (this._error) {
+        throw this._error;
+      }
+    }
+    /** @internal */
+    async _flushAndClose(forceClose) {
+      if (!forceClose) {
+        this._checkForError();
+      }
+    }
   };
 
   // src/output.ts