mediabunny 1.34.5 → 1.35.0

package/dist/bundles/mediabunny.cjs

@@ -761,6 +761,38 @@ var Mediabunny = (() => {
   var isNumber = (x) => {
     return typeof x === "number" && !Number.isNaN(x);
   };
+  var simplifyRational = (rational) => {
+    assert(rational.den !== 0);
+    let a = Math.abs(rational.num);
+    let b = Math.abs(rational.den);
+    while (b !== 0) {
+      const t = a % b;
+      a = b;
+      b = t;
+    }
+    const gcd = a || 1;
+    return {
+      num: rational.num / gcd,
+      den: rational.den / gcd
+    };
+  };
+  var validateRectangle = (rect, propertyPath) => {
+    if (typeof rect !== "object" || !rect) {
+      throw new TypeError(`${propertyPath} must be an object.`);
+    }
+    if (!Number.isInteger(rect.left) || rect.left < 0) {
+      throw new TypeError(`${propertyPath}.left must be a non-negative integer.`);
+    }
+    if (!Number.isInteger(rect.top) || rect.top < 0) {
+      throw new TypeError(`${propertyPath}.top must be a non-negative integer.`);
+    }
+    if (!Number.isInteger(rect.width) || rect.width < 0) {
+      throw new TypeError(`${propertyPath}.width must be a non-negative integer.`);
+    }
+    if (!Number.isInteger(rect.height) || rect.height < 0) {
+      throw new TypeError(`${propertyPath}.height must be a non-negative integer.`);
+    }
+  };
 
   // src/metadata.ts
   var RichImageData = class {
@@ -2340,6 +2372,24 @@ var Mediabunny = (() => {
       return null;
     }
   };
+  var AVC_HEVC_ASPECT_RATIO_IDC_TABLE = {
+    1: { num: 1, den: 1 },
+    2: { num: 12, den: 11 },
+    3: { num: 10, den: 11 },
+    4: { num: 16, den: 11 },
+    5: { num: 40, den: 33 },
+    6: { num: 24, den: 11 },
+    7: { num: 20, den: 11 },
+    8: { num: 32, den: 11 },
+    9: { num: 80, den: 33 },
+    10: { num: 18, den: 11 },
+    11: { num: 15, den: 11 },
+    12: { num: 64, den: 33 },
+    13: { num: 160, den: 99 },
+    14: { num: 4, den: 3 },
+    15: { num: 3, den: 2 },
+    16: { num: 2, den: 1 }
+  };
   var parseAvcSps = (sps) => {
     try {
       const bitstream = new Bitstream(removeEmulationPreventionBytes(sps));
@@ -2435,6 +2485,7 @@ var Mediabunny = (() => {
       let transferCharacteristics = 2;
       let matrixCoefficients = 2;
       let fullRangeFlag = 0;
+      let pixelAspectRatio = { num: 1, den: 1 };
       let numReorderFrames = null;
       let maxDecFrameBuffering = null;
       const vuiParametersPresentFlag = bitstream.readBits(1);
@@ -2443,8 +2494,15 @@ var Mediabunny = (() => {
         if (aspectRatioInfoPresentFlag) {
           const aspectRatioIdc = bitstream.readBits(8);
           if (aspectRatioIdc === 255) {
-            bitstream.skipBits(16);
-            bitstream.skipBits(16);
+            pixelAspectRatio = {
+              num: bitstream.readBits(16),
+              den: bitstream.readBits(16)
+            };
+          } else {
+            const aspectRatio = AVC_HEVC_ASPECT_RATIO_IDC_TABLE[aspectRatioIdc];
+            if (aspectRatio) {
+              pixelAspectRatio = aspectRatio;
+            }
           }
         }
         const overscanInfoPresentFlag = bitstream.readBits(1);
@@ -2530,6 +2588,7 @@ var Mediabunny = (() => {
         codedHeight,
         displayWidth,
         displayHeight,
+        pixelAspectRatio,
         colourPrimaries,
         matrixCoefficients,
         transferCharacteristics,
@@ -2659,8 +2718,10 @@ var Mediabunny = (() => {
       let matrixCoefficients = 2;
       let fullRangeFlag = 0;
       let minSpatialSegmentationIdc = 0;
+      let pixelAspectRatio = { num: 1, den: 1 };
       if (bitstream.readBits(1)) {
         const vui = parseHevcVui(bitstream, spsMaxSubLayersMinus1);
+        pixelAspectRatio = vui.pixelAspectRatio;
         colourPrimaries = vui.colourPrimaries;
         transferCharacteristics = vui.transferCharacteristics;
         matrixCoefficients = vui.matrixCoefficients;
@@ -2670,6 +2731,7 @@ var Mediabunny = (() => {
       return {
         displayWidth,
         displayHeight,
+        pixelAspectRatio,
         colourPrimaries,
         transferCharacteristics,
         matrixCoefficients,
@@ -2910,11 +2972,19 @@ var Mediabunny = (() => {
     let matrixCoefficients = 2;
     let fullRangeFlag = 0;
     let minSpatialSegmentationIdc = 0;
+    let pixelAspectRatio = { num: 1, den: 1 };
     if (bitstream.readBits(1)) {
       const aspect_ratio_idc = bitstream.readBits(8);
       if (aspect_ratio_idc === 255) {
-        bitstream.readBits(16);
-        bitstream.readBits(16);
+        pixelAspectRatio = {
+          num: bitstream.readBits(16),
+          den: bitstream.readBits(16)
+        };
+      } else {
+        const aspectRatio = AVC_HEVC_ASPECT_RATIO_IDC_TABLE[aspect_ratio_idc];
+        if (aspectRatio) {
+          pixelAspectRatio = aspectRatio;
+        }
       }
     }
     if (bitstream.readBits(1)) {
@@ -2963,6 +3033,7 @@ var Mediabunny = (() => {
       readExpGolomb(bitstream);
     }
     return {
+      pixelAspectRatio,
       colourPrimaries,
       transferCharacteristics,
       matrixCoefficients,
@@ -4718,15 +4789,56 @@ var Mediabunny = (() => {
         if (init.duration !== void 0 && (!Number.isFinite(init.duration) || init.duration < 0)) {
           throw new TypeError("init.duration, when provided, must be a non-negative number.");
         }
+        if (init.layout !== void 0) {
+          if (!Array.isArray(init.layout)) {
+            throw new TypeError("init.layout, when provided, must be an array.");
+          }
+          for (const plane of init.layout) {
+            if (!plane || typeof plane !== "object" || Array.isArray(plane)) {
+              throw new TypeError("Each entry in init.layout must be an object.");
+            }
+            if (!Number.isInteger(plane.offset) || plane.offset < 0) {
+              throw new TypeError("plane.offset must be a non-negative integer.");
+            }
+            if (!Number.isInteger(plane.stride) || plane.stride < 0) {
+              throw new TypeError("plane.stride must be a non-negative integer.");
+            }
+          }
+        }
+        if (init.visibleRect !== void 0) {
+          validateRectangle(init.visibleRect, "init.visibleRect");
+        }
+        if (init.displayWidth !== void 0 && (!Number.isInteger(init.displayWidth) || init.displayWidth <= 0)) {
+          throw new TypeError("init.displayWidth, when provided, must be a positive integer.");
+        }
+        if (init.displayHeight !== void 0 && (!Number.isInteger(init.displayHeight) || init.displayHeight <= 0)) {
+          throw new TypeError("init.displayHeight, when provided, must be a positive integer.");
+        }
+        if (init.displayWidth !== void 0 !== (init.displayHeight !== void 0)) {
+          throw new TypeError(
+            "init.displayWidth and init.displayHeight must be either both provided or both omitted."
+          );
+        }
         this._data = toUint8Array(data).slice();
         this._layout = init.layout ?? createDefaultPlaneLayout(init.format, init.codedWidth, init.codedHeight);
         this.format = init.format;
-        this.codedWidth = init.codedWidth;
-        this.codedHeight = init.codedHeight;
         this.rotation = init.rotation ?? 0;
         this.timestamp = init.timestamp;
         this.duration = init.duration ?? 0;
         this.colorSpace = new VideoSampleColorSpace(init.colorSpace);
+        this.visibleRect = {
+          left: init.visibleRect?.left ?? 0,
+          top: init.visibleRect?.top ?? 0,
+          width: init.visibleRect?.width ?? init.codedWidth,
+          height: init.visibleRect?.height ?? init.codedHeight
+        };
+        if (init.displayWidth !== void 0) {
+          this.squarePixelWidth = this.rotation % 180 === 0 ? init.displayWidth : init.displayHeight;
+          this.squarePixelHeight = this.rotation % 180 === 0 ? init.displayHeight : init.displayWidth;
+        } else {
+          this.squarePixelWidth = this.codedWidth;
+          this.squarePixelHeight = this.codedHeight;
+        }
       } else if (typeof VideoFrame !== "undefined" && data instanceof VideoFrame) {
         if (init?.rotation !== void 0 && ![0, 90, 180, 270].includes(init.rotation)) {
           throw new TypeError("init.rotation, when provided, must be 0, 90, 180, or 270.");
@@ -4737,12 +4849,21 @@ var Mediabunny = (() => {
         if (init?.duration !== void 0 && (!Number.isFinite(init.duration) || init.duration < 0)) {
           throw new TypeError("init.duration, when provided, must be a non-negative number.");
         }
+        if (init?.visibleRect !== void 0) {
+          validateRectangle(init.visibleRect, "init.visibleRect");
+        }
         this._data = data;
         this._layout = null;
         this.format = data.format;
-        this.codedWidth = data.displayWidth;
-        this.codedHeight = data.displayHeight;
+        this.visibleRect = {
+          left: data.visibleRect?.x ?? 0,
+          top: data.visibleRect?.y ?? 0,
+          width: data.visibleRect?.width ?? data.codedWidth,
+          height: data.visibleRect?.height ?? data.codedHeight
+        };
         this.rotation = init?.rotation ?? 0;
+        this.squarePixelWidth = data.displayWidth;
+        this.squarePixelHeight = data.displayHeight;
         this.timestamp = init?.timestamp ?? data.timestamp / 1e6;
         this.duration = init?.duration ?? (data.duration ?? 0) / 1e6;
         this.colorSpace = new VideoSampleColorSpace(data.colorSpace);
@@ -4795,8 +4916,9 @@ var Mediabunny = (() => {
         this._data = canvas;
         this._layout = null;
         this.format = "RGBX";
-        this.codedWidth = width;
-        this.codedHeight = height;
+        this.visibleRect = { left: 0, top: 0, width, height };
+        this.squarePixelWidth = width;
+        this.squarePixelHeight = height;
         this.rotation = init.rotation ?? 0;
         this.timestamp = init.timestamp;
         this.duration = init.duration ?? 0;
@@ -4809,15 +4931,27 @@ var Mediabunny = (() => {
       } else {
         throw new TypeError("Invalid data type: Must be a BufferSource or CanvasImageSource.");
       }
+      this.pixelAspectRatio = simplifyRational({
+        num: this.squarePixelWidth * this.codedHeight,
+        den: this.squarePixelHeight * this.codedWidth
+      });
       finalizationRegistry?.register(this, { type: "video", data: this._data }, this);
     }
-    /** The width of the frame in pixels after rotation. */
+    /** The width of the frame in pixels. */
+    get codedWidth() {
+      return this.visibleRect.width;
+    }
+    /** The height of the frame in pixels. */
+    get codedHeight() {
+      return this.visibleRect.height;
+    }
+    /** The display width of the frame in pixels, after aspect ratio adjustment and rotation. */
     get displayWidth() {
-      return this.rotation % 180 === 0 ? this.codedWidth : this.codedHeight;
+      return this.rotation % 180 === 0 ? this.squarePixelWidth : this.squarePixelHeight;
     }
-    /** The height of the frame in pixels after rotation. */
+    /** The display height of the frame in pixels, after aspect ratio adjustment and rotation. */
     get displayHeight() {
-      return this.rotation % 180 === 0 ? this.codedHeight : this.codedWidth;
+      return this.rotation % 180 === 0 ? this.squarePixelHeight : this.squarePixelWidth;
     }
     /** The presentation timestamp of the frame in microseconds. */
     get microsecondTimestamp() {
@@ -4856,7 +4990,10 @@ var Mediabunny = (() => {
           timestamp: this.timestamp,
           duration: this.duration,
           colorSpace: this.colorSpace,
-          rotation: this.rotation
+          rotation: this.rotation,
+          visibleRect: this.visibleRect,
+          displayWidth: this.displayWidth,
+          displayHeight: this.displayHeight
         });
       } else {
         return new _VideoSample(this._data, {
@@ -4866,7 +5003,10 @@ var Mediabunny = (() => {
           timestamp: this.timestamp,
           duration: this.duration,
           colorSpace: this.colorSpace,
-          rotation: this.rotation
+          rotation: this.rotation,
+          visibleRect: this.visibleRect,
+          displayWidth: this.displayWidth,
+          displayHeight: this.displayHeight
         });
       }
     }
@@ -5094,7 +5234,7 @@ var Mediabunny = (() => {
       const canvasWidth = context.canvas.width;
       const canvasHeight = context.canvas.height;
       const rotation = options.rotation ?? this.rotation;
-      const [rotatedWidth, rotatedHeight] = rotation % 180 === 0 ? [this.codedWidth, this.codedHeight] : [this.codedHeight, this.codedWidth];
+      const [rotatedWidth, rotatedHeight] = rotation % 180 === 0 ? [this.squarePixelWidth, this.squarePixelHeight] : [this.squarePixelHeight, this.squarePixelWidth];
       if (options.crop) {
         clampCropRectangle(options.crop, rotatedWidth, rotatedHeight);
       }
@@ -5136,18 +5276,18 @@ var Mediabunny = (() => {
       if (rotation === 90) {
         [sx, sy, sWidth, sHeight] = [
           sy,
-          this.codedHeight - sx - sWidth,
+          this.squarePixelHeight - sx - sWidth,
           sHeight,
           sWidth
         ];
       } else if (rotation === 180) {
         [sx, sy] = [
-          this.codedWidth - sx - sWidth,
-          this.codedHeight - sy - sHeight
+          this.squarePixelWidth - sx - sWidth,
+          this.squarePixelHeight - sy - sHeight
         ];
       } else if (rotation === 270) {
         [sx, sy, sWidth, sHeight] = [
-          this.codedWidth - sy - sHeight,
+          this.squarePixelWidth - sy - sHeight,
           sx,
           sHeight,
           sWidth
@@ -5204,6 +5344,32 @@ var Mediabunny = (() => {
   var VideoSampleColorSpace = class {
     /** Creates a new VideoSampleColorSpace. */
     constructor(init) {
+      if (init !== void 0) {
+        if (!init || typeof init !== "object") {
+          throw new TypeError("init.colorSpace, when provided, must be an object.");
+        }
+        const primariesValues = Object.keys(COLOR_PRIMARIES_MAP);
+        if (init.primaries != null && !primariesValues.includes(init.primaries)) {
+          throw new TypeError(
+            `init.colorSpace.primaries, when provided, must be one of ${primariesValues.join(", ")}.`
+          );
+        }
+        const transferValues = Object.keys(TRANSFER_CHARACTERISTICS_MAP);
+        if (init.transfer != null && !transferValues.includes(init.transfer)) {
+          throw new TypeError(
+            `init.colorSpace.transfer, when provided, must be one of ${transferValues.join(", ")}.`
+          );
+        }
+        const matrixValues = Object.keys(MATRIX_COEFFICIENTS_MAP);
+        if (init.matrix != null && !matrixValues.includes(init.matrix)) {
+          throw new TypeError(
+            `init.colorSpace.matrix, when provided, must be one of ${matrixValues.join(", ")}.`
+          );
+        }
+        if (init.fullRange != null && typeof init.fullRange !== "boolean") {
+          throw new TypeError("init.colorSpace.fullRange, when provided, must be a boolean.");
+        }
+      }
       this.primaries = init?.primaries ?? null;
       this.transfer = init?.transfer ?? null;
       this.matrix = init?.matrix ?? null;
@@ -6983,7 +7149,7 @@ var Mediabunny = (() => {
         throw new TypeError("poolSize must be a non-negative integer.");
       }
       const rotation = options.rotation ?? videoTrack.rotation;
-      const [rotatedWidth, rotatedHeight] = rotation % 180 === 0 ? [videoTrack.codedWidth, videoTrack.codedHeight] : [videoTrack.codedHeight, videoTrack.codedWidth];
+      const [rotatedWidth, rotatedHeight] = rotation % 180 === 0 ? [videoTrack.squarePixelWidth, videoTrack.squarePixelHeight] : [videoTrack.squarePixelHeight, videoTrack.squarePixelWidth];
       const crop = options.crop;
       if (crop) {
         clampCropRectangle(crop, rotatedWidth, rotatedHeight);
@@ -7600,6 +7766,10 @@ var Mediabunny = (() => {
     constructor(input, backing) {
       super(input, backing);
       this._backing = backing;
+      this.pixelAspectRatio = simplifyRational({
+        num: this._backing.getSquarePixelWidth() * this._backing.getCodedHeight(),
+        den: this._backing.getSquarePixelHeight() * this._backing.getCodedWidth()
+      });
     }
     get type() {
       return "video";
@@ -7619,15 +7789,23 @@ var Mediabunny = (() => {
     get rotation() {
       return this._backing.getRotation();
     }
-    /** The width in pixels of the track's frames after rotation. */
+    /** The width of the track's frames in square pixels, adjusted for pixel aspect ratio but before rotation. */
+    get squarePixelWidth() {
+      return this._backing.getSquarePixelWidth();
+    }
+    /** The height of the track's frames in square pixels, adjusted for pixel aspect ratio but before rotation. */
+    get squarePixelHeight() {
+      return this._backing.getSquarePixelHeight();
+    }
+    /** The display width of the track's frames in pixels, after aspect ratio adjustment and rotation. */
     get displayWidth() {
       const rotation = this._backing.getRotation();
-      return rotation % 180 === 0 ? this._backing.getCodedWidth() : this._backing.getCodedHeight();
+      return rotation % 180 === 0 ? this.squarePixelWidth : this.squarePixelHeight;
     }
-    /** The height in pixels of the track's frames after rotation. */
+    /** The display height of the track's frames in pixels, after aspect ratio adjustment and rotation. */
     get displayHeight() {
       const rotation = this._backing.getRotation();
-      return rotation % 180 === 0 ? this._backing.getCodedHeight() : this._backing.getCodedWidth();
+      return rotation % 180 === 0 ? this.squarePixelHeight : this.squarePixelWidth;
     }
     /** Returns the color space of the track's samples. */
     getColorSpace() {
@@ -8314,6 +8492,8 @@ var Mediabunny = (() => {
                 type: "video",
                 width: -1,
                 height: -1,
+                squarePixelWidth: -1,
+                squarePixelHeight: -1,
                 codec: null,
                 codecDescription: null,
                 colorSpace: null,
@@ -8385,6 +8565,8 @@ var Mediabunny = (() => {
                 slice.skip(6 * 1 + 2 + 2 + 2 + 3 * 4);
                 track.info.width = readU16Be(slice);
                 track.info.height = readU16Be(slice);
+                track.info.squarePixelWidth = track.info.width;
+                track.info.squarePixelHeight = track.info.height;
                 slice.skip(4 + 4 + 4 + 2 + 32 + 2 + 2);
                 this.readContiguousBoxes(
                   slice.slice(
@@ -8622,6 +8804,23 @@ var Mediabunny = (() => {
           }
           ;
           break;
+        case "pasp":
+          {
+            const track = this.currentTrack;
+            if (!track) {
+              break;
+            }
+            assert(track.info?.type === "video");
+            const num = readU32Be(slice);
+            const den = readU32Be(slice);
+            if (num > den) {
+              track.info.squarePixelWidth = Math.round(track.info.width * num / den);
+            } else {
+              track.info.squarePixelHeight = Math.round(track.info.height * den / num);
+            }
+          }
+          ;
+          break;
         case "wave":
           {
             this.readContiguousBoxes(slice.slice(contentStartPos, boxInfo.contentSize));
@@ -10092,6 +10291,12 @@ var Mediabunny = (() => {
     getCodedHeight() {
       return this.internalTrack.info.height;
     }
+    getSquarePixelWidth() {
+      return this.internalTrack.info.squarePixelWidth;
+    }
+    getSquarePixelHeight() {
+      return this.internalTrack.info.squarePixelHeight;
+    }
     getRotation() {
       return this.internalTrack.rotation;
     }
@@ -10122,6 +10327,8 @@ var Mediabunny = (() => {
           codec: extractVideoCodecString(this.internalTrack.info),
           codedWidth: this.internalTrack.info.width,
           codedHeight: this.internalTrack.info.height,
+          displayAspectWidth: this.internalTrack.info.squarePixelWidth,
+          displayAspectHeight: this.internalTrack.info.squarePixelHeight,
           description: this.internalTrack.info.codecDescription ?? void 0,
           colorSpace: this.internalTrack.info.colorSpace ?? void 0
         };
@@ -11390,6 +11597,21 @@ var Mediabunny = (() => {
               const slashIndex = this.currentTrack.codecId.indexOf("/");
               const codecIdWithoutSuffix = slashIndex === -1 ? this.currentTrack.codecId : this.currentTrack.codecId.slice(0, slashIndex);
               if (this.currentTrack.info.type === "video" && this.currentTrack.info.width !== -1 && this.currentTrack.info.height !== -1) {
+                this.currentTrack.info.squarePixelWidth = this.currentTrack.info.width;
+                this.currentTrack.info.squarePixelHeight = this.currentTrack.info.height;
+                if (this.currentTrack.info.displayWidth !== null && this.currentTrack.info.displayHeight !== null) {
+                  const num = this.currentTrack.info.displayWidth * this.currentTrack.info.height;
+                  const den = this.currentTrack.info.displayHeight * this.currentTrack.info.width;
+                  if (num > den) {
+                    this.currentTrack.info.squarePixelWidth = Math.round(
+                      this.currentTrack.info.width * num / den
+                    );
+                  } else {
+                    this.currentTrack.info.squarePixelHeight = Math.round(
+                      this.currentTrack.info.height * den / num
+                    );
+                  }
+                }
                 if (this.currentTrack.codecId === CODEC_STRING_MAP.avc) {
                   this.currentTrack.info.codec = "avc";
                   this.currentTrack.info.codecDescription = this.currentTrack.codecPrivate;
@@ -11486,6 +11708,11 @@ var Mediabunny = (() => {
                 type: "video",
                 width: -1,
                 height: -1,
+                displayWidth: null,
+                displayHeight: null,
+                displayUnit: null,
+                squarePixelWidth: -1,
+                squarePixelHeight: -1,
                 rotation: 0,
                 codec: null,
                 codecDescription: null,
@@ -11633,6 +11860,27 @@ var Mediabunny = (() => {
           }
           ;
           break;
+        case 21680 /* DisplayWidth */:
+          {
+            if (this.currentTrack?.info?.type !== "video") break;
+            this.currentTrack.info.displayWidth = readUnsignedInt(slice, size);
+          }
+          ;
+          break;
+        case 21690 /* DisplayHeight */:
+          {
+            if (this.currentTrack?.info?.type !== "video") break;
+            this.currentTrack.info.displayHeight = readUnsignedInt(slice, size);
+          }
+          ;
+          break;
+        case 21682 /* DisplayUnit */:
+          {
+            if (this.currentTrack?.info?.type !== "video") break;
+            this.currentTrack.info.displayUnit = readUnsignedInt(slice, size);
+          }
+          ;
+          break;
         case 21440 /* AlphaMode */:
           {
             if (this.currentTrack?.info?.type !== "video") break;
@@ -12609,6 +12857,12 @@ var Mediabunny = (() => {
     getCodedHeight() {
       return this.internalTrack.info.height;
     }
+    getSquarePixelWidth() {
+      return this.internalTrack.info.squarePixelWidth;
+    }
+    getSquarePixelHeight() {
+      return this.internalTrack.info.squarePixelHeight;
+    }
     getRotation() {
       return this.internalTrack.info.rotation;
     }
@@ -12649,6 +12903,8 @@ var Mediabunny = (() => {
           }),
           codedWidth: this.internalTrack.info.width,
           codedHeight: this.internalTrack.info.height,
+          displayAspectWidth: this.internalTrack.info.squarePixelWidth,
+          displayAspectHeight: this.internalTrack.info.squarePixelHeight,
           description: this.internalTrack.info.codecDescription ?? void 0,
           colorSpace: this.internalTrack.info.colorSpace ?? void 0
         };
@@ -15330,6 +15586,8 @@ var Mediabunny = (() => {
                       },
                       width: -1,
                       height: -1,
+                      squarePixelWidth: -1,
+                      squarePixelHeight: -1,
                       reorderSize: -1
                     };
                   }
@@ -15421,6 +15679,17 @@ var Mediabunny = (() => {
                   const spsInfo = parseAvcSps(spsUnit);
                   elementaryStream.info.width = spsInfo.displayWidth;
                   elementaryStream.info.height = spsInfo.displayHeight;
+                  if (spsInfo.pixelAspectRatio.num > spsInfo.pixelAspectRatio.den) {
+                    elementaryStream.info.squarePixelWidth = Math.round(
+                      elementaryStream.info.width * spsInfo.pixelAspectRatio.num / spsInfo.pixelAspectRatio.den
+                    );
+                    elementaryStream.info.squarePixelHeight = elementaryStream.info.height;
+                  } else {
+                    elementaryStream.info.squarePixelWidth = elementaryStream.info.width;
+                    elementaryStream.info.squarePixelHeight = Math.round(
+                      elementaryStream.info.height * spsInfo.pixelAspectRatio.den / spsInfo.pixelAspectRatio.num
+                    );
+                  }
                   elementaryStream.info.colorSpace = {
                     primaries: COLOR_PRIMARIES_MAP_INVERSE[spsInfo.colourPrimaries],
                     transfer: TRANSFER_CHARACTERISTICS_MAP_INVERSE[spsInfo.transferCharacteristics],
@@ -15444,6 +15713,17 @@ var Mediabunny = (() => {
                   const spsInfo = parseHevcSps(spsUnit);
                   elementaryStream.info.width = spsInfo.displayWidth;
                   elementaryStream.info.height = spsInfo.displayHeight;
+                  if (spsInfo.pixelAspectRatio.num > spsInfo.pixelAspectRatio.den) {
+                    elementaryStream.info.squarePixelWidth = Math.round(
+                      elementaryStream.info.width * spsInfo.pixelAspectRatio.num / spsInfo.pixelAspectRatio.den
+                    );
+                    elementaryStream.info.squarePixelHeight = elementaryStream.info.height;
+                  } else {
+                    elementaryStream.info.squarePixelWidth = elementaryStream.info.width;
+                    elementaryStream.info.squarePixelHeight = Math.round(
+                      elementaryStream.info.height * spsInfo.pixelAspectRatio.den / spsInfo.pixelAspectRatio.num
+                    );
+                  }
                   elementaryStream.info.colorSpace = {
                     primaries: COLOR_PRIMARIES_MAP_INVERSE[spsInfo.colourPrimaries],
                     transfer: TRANSFER_CHARACTERISTICS_MAP_INVERSE[spsInfo.transferCharacteristics],
@@ -16196,6 +16476,8 @@ var Mediabunny = (() => {
         }),
         codedWidth: this.elementaryStream.info.width,
         codedHeight: this.elementaryStream.info.height,
+        displayAspectWidth: this.elementaryStream.info.squarePixelWidth,
+        displayAspectHeight: this.elementaryStream.info.squarePixelHeight,
         colorSpace: this.elementaryStream.info.colorSpace
       };
     }
@@ -16208,6 +16490,12 @@ var Mediabunny = (() => {
     getCodedHeight() {
       return this.elementaryStream.info.height;
     }
+    getSquarePixelWidth() {
+      return this.elementaryStream.info.squarePixelWidth;
+    }
+    getSquarePixelHeight() {
+      return this.elementaryStream.info.squarePixelHeight;
+    }
     getRotation() {
       return 0;
     }
@@ -20400,8 +20688,18 @@ var Mediabunny = (() => {
     // Pre-defined
   ], [
     VIDEO_CODEC_TO_CONFIGURATION_BOX[trackData.track.source._codec](trackData),
+    pasp(trackData),
     colorSpaceIsComplete(trackData.info.decoderConfig.colorSpace) ? colr(trackData) : null
   ]);
+  var pasp = (trackData) => {
+    if (trackData.info.pixelAspectRatio.num === trackData.info.pixelAspectRatio.den) {
+      return null;
+    }
+    return box("pasp", [
+      u32(trackData.info.pixelAspectRatio.num),
+      u32(trackData.info.pixelAspectRatio.den)
+    ]);
+  };
   var colr = (trackData) => box("colr", [
     ascii("nclx"),
     // Colour type
@@ -22110,6 +22408,12 @@ var Mediabunny = (() => {
         requiresAnnexBTransformation = true;
       }
       const timescale = computeRationalApproximation(1 / (track.metadata.frameRate ?? 57600), 1e6).denominator;
+      const displayAspectWidth = decoderConfig.displayAspectWidth;
+      const displayAspectHeight = decoderConfig.displayAspectHeight;
+      const pixelAspectRatio = displayAspectWidth === void 0 || displayAspectHeight === void 0 ? { num: 1, den: 1 } : simplifyRational({
+        num: displayAspectWidth * decoderConfig.codedHeight,
+        den: displayAspectHeight * decoderConfig.codedWidth
+      });
       const newTrackData = {
         muxer: this,
         track,
@@ -22117,6 +22421,7 @@ var Mediabunny = (() => {
         info: {
           width: decoderConfig.codedWidth,
           height: decoderConfig.codedHeight,
+          pixelAspectRatio,
           decoderConfig,
           requiresAnnexBTransformation
         },
@@ -23062,10 +23367,15 @@ var Mediabunny = (() => {
         } : null
       ];
       const flippedRotation = rotation ? normalizeRotation(-rotation) : 0;
+      const hasNonSquarePixelAspectRatio = !!trackData.info.aspectRatio && trackData.info.aspectRatio.num * trackData.info.height !== trackData.info.aspectRatio.den * trackData.info.width;
       const colorSpace = trackData.info.decoderConfig.colorSpace;
       const videoElement = { id: 224 /* Video */, data: [
         { id: 176 /* PixelWidth */, data: trackData.info.width },
         { id: 186 /* PixelHeight */, data: trackData.info.height },
+        hasNonSquarePixelAspectRatio ? { id: 21680 /* DisplayWidth */, data: trackData.info.aspectRatio.num } : null,
+        hasNonSquarePixelAspectRatio ? { id: 21690 /* DisplayHeight */, data: trackData.info.aspectRatio.den } : null,
+        hasNonSquarePixelAspectRatio ? { id: 21682 /* DisplayUnit */, data: 3 } : null,
+        // 3 = display aspect ratio
         trackData.info.alphaMode ? { id: 21440 /* AlphaMode */, data: 1 } : null,
         colorSpaceIsComplete(colorSpace) ? {
           id: 21936 /* Colour */,
@@ -23394,12 +23704,19 @@ var Mediabunny = (() => {
       assert(meta.decoderConfig);
       assert(meta.decoderConfig.codedWidth !== void 0);
       assert(meta.decoderConfig.codedHeight !== void 0);
+      const displayAspectWidth = meta.decoderConfig.displayAspectWidth;
+      const displayAspectHeight = meta.decoderConfig.displayAspectHeight;
+      const aspectRatio = displayAspectWidth === void 0 || displayAspectHeight === void 0 ? null : simplifyRational({
+        num: displayAspectWidth,
+        den: displayAspectHeight
+      });
       const newTrackData = {
         track,
         type: "video",
         info: {
           width: meta.decoderConfig.codedWidth,
           height: meta.decoderConfig.codedHeight,
+          aspectRatio,
           decoderConfig: meta.decoderConfig,
           alphaMode: !!packet.sideData.alpha
           // The first packet determines if this track has alpha or not
@@ -25804,6 +26121,8 @@ ${cue.notes ?? ""}`;
       ),
       width: options.width,
       height: options.height,
+      displayWidth: options.squarePixelWidth,
+      displayHeight: options.squarePixelHeight,
       bitrate: resolvedBitrate,
       bitrateMode: options.bitrateMode,
       alpha: options.alpha ?? "discard",
@@ -26424,6 +26743,8 @@ ${cue.notes ?? ""}`;
         const encoderConfig = buildVideoEncoderConfig({
           width: videoSample.codedWidth,
           height: videoSample.codedHeight,
+          squarePixelWidth: videoSample.squarePixelWidth,
+          squarePixelHeight: videoSample.squarePixelHeight,
           ...this.encodingConfig,
           framerate: this.source._connectedTrack?.metadata.frameRate
         });
@@ -28528,8 +28849,9 @@ The @mediabunny/mp3-encoder extension package provides support for encoding MP3.
       }
       let videoSource;
       const totalRotation = normalizeRotation(track.rotation + (trackOptions.rotate ?? 0));
+      let outputTrackRotation = totalRotation;
       const canUseRotationMetadata = this.output.format.supportsVideoRotationMetadata && (trackOptions.allowRotationMetadata ?? true);
-      const [rotatedWidth, rotatedHeight] = totalRotation % 180 === 0 ? [track.codedWidth, track.codedHeight] : [track.codedHeight, track.codedWidth];
+      const [rotatedWidth, rotatedHeight] = totalRotation % 180 === 0 ? [track.squarePixelWidth, track.squarePixelHeight] : [track.squarePixelHeight, track.squarePixelWidth];
       const crop = trackOptions.crop;
       if (crop) {
         clampCropRectangle(crop, rotatedWidth, rotatedHeight);
@@ -28550,11 +28872,10 @@ The @mediabunny/mp3-encoder extension package provides support for encoding MP3.
         height = ceilToMultipleOfTwo(trackOptions.height);
       }
       const firstTimestamp = await track.getFirstTimestamp();
-      const needsTranscode = !!trackOptions.forceTranscode || firstTimestamp < this._startTimestamp || !!trackOptions.frameRate || trackOptions.keyFrameInterval !== void 0 || trackOptions.process !== void 0;
-      let needsRerender = width !== originalWidth || height !== originalHeight || totalRotation !== 0 && (!canUseRotationMetadata || trackOptions.process !== void 0) || !!crop;
-      const alpha = trackOptions.alpha ?? "discard";
       let videoCodecs = this.output.format.getSupportedVideoCodecs();
-      if (!needsTranscode && !trackOptions.bitrate && !needsRerender && videoCodecs.includes(sourceCodec) && (!trackOptions.codec || trackOptions.codec === sourceCodec)) {
+      const needsTranscode = !!trackOptions.forceTranscode || firstTimestamp < this._startTimestamp || !!trackOptions.frameRate || trackOptions.keyFrameInterval !== void 0 || trackOptions.process !== void 0 || trackOptions.bitrate !== void 0 || !videoCodecs.includes(sourceCodec) || trackOptions.codec && trackOptions.codec !== sourceCodec || width !== originalWidth || height !== originalHeight || totalRotation !== 0 && !canUseRotationMetadata || !!crop;
+      const alpha = trackOptions.alpha ?? "discard";
+      if (!needsTranscode) {
         const source = new EncodedVideoPacketSource(sourceCodec);
         videoSource = source;
         this._trackPromises.push((async () => {
@@ -28616,6 +28937,7 @@ The @mediabunny/mp3-encoder extension package provides support for encoding MP3.
         };
         const source = new VideoSampleSource(encodingConfig);
         videoSource = source;
+        let needsRerender = width !== originalWidth || height !== originalHeight || totalRotation !== 0 && (!canUseRotationMetadata || trackOptions.process !== void 0) || !!crop || track.squarePixelWidth !== track.codedWidth || track.squarePixelHeight !== track.codedHeight;
         if (!needsRerender) {
           const tempOutput = new Output({
             format: new Mp4OutputFormat(),
@@ -28656,6 +28978,7 @@ The @mediabunny/mp3-encoder extension package provides support for encoding MP3.
             });
             const iterator = sink.canvases(this._startTimestamp, this._endTimestamp);
             const frameRate = trackOptions.frameRate;
+            outputTrackRotation = 0;
             let lastCanvas = null;
             let lastCanvasTimestamp = null;
             let lastCanvasEndTimestamp = null;
@@ -28777,8 +29100,7 @@ The @mediabunny/mp3-encoder extension package provides support for encoding MP3.
         languageCode: isIso639Dash2LanguageCode(track.languageCode) ? track.languageCode : void 0,
         name: track.name ?? void 0,
         disposition: track.disposition,
-        rotation: needsRerender ? 0 : totalRotation
-        // Rerendering will bake the rotation into the output
+        rotation: outputTrackRotation
       });
       this._addedCounts.video++;
       this._totalTrackCount++;