supervision 0.2.2 → 0.2.3

package/dist/index.js

@@ -5106,7 +5106,7 @@ function presentVideoFrame(presented, targets) {
     try {
         at(targets.adoptMediaTime, mediaTime, presented);
         targets.fitMediaScene();
-        targets.uploadFrame(presented.frame);
+        targets.uploadFrame(presented);
         const { boxState, regionState } = drawFramePresentLayers(layers, mediaTime, presented);
         targets.render();
         targets.completePresentation(mediaTime, boxState, regionState);
@@ -13561,8 +13561,8 @@ async function createPixiMediaScene(options) {
         app.ticker.add(drawAnnotationOverlayNow);
         app.ticker.add(tickFocusLayer);
     }
-    const uploadFrameToStagingCanvas = (frame) => {
-        stagingContext.drawImage(frame, 0, 0, mediaWidth, mediaHeight);
+    const uploadFrameToStagingCanvas = (frame, rotation = 0) => {
+        drawPresentedVideoFrame(stagingContext, frame, rotation, mediaWidth, mediaHeight);
         stagingTextureSource?.update();
         stagingTexture?.update();
     };
@@ -13605,14 +13605,14 @@ async function createPixiMediaScene(options) {
             ? measureFramePresentLayers(presentLayers, measureDrawStep)
             : presentLayers,
         render: renderPresent,
-        uploadFrame: (frame) => {
+        uploadFrame: (presented) => {
             if (!collectFrameTimings) {
-                mediaCompositor?.upload(frame);
+                mediaCompositor?.upload(presented.frame, presented.rotation ?? 0);
                 presentedSampleTimestamp = currentMediaTime;
                 return;
             }
             presentMediaUploadMs += measure(() => {
-                mediaCompositor?.upload(frame);
+                mediaCompositor?.upload(presented.frame, presented.rotation ?? 0);
                 presentedSampleTimestamp = currentMediaTime;
             });
         },
@@ -14943,13 +14943,13 @@ function createMediaCompositor(options) {
     const { device } = options;
     let gpuTexture = createFrameTexture(device, options.width, options.height);
     const textureSource = options.attach(gpuTexture);
+    let rotationCanvas;
     return {
         destroy() {
             gpuTexture.destroy();
         },
-        upload(frame) {
-            const width = frame.displayWidth;
-            const height = frame.displayHeight;
+        upload(frame, rotation = 0) {
+            const [width, height] = presentedFrameSize(frame, rotation);
             if (width !== gpuTexture.width || height !== gpuTexture.height) {
                 const replacement = createFrameTexture(device, width, height);
                 const retired = gpuTexture;
@@ -14976,9 +14976,47 @@ function createMediaCompositor(options) {
                 options.onTextureReplaced();
                 retired.destroy();
             }
-            device.queue.copyExternalImageToTexture({ source: frame }, { texture: gpuTexture }, { height, width });
+            device.queue.copyExternalImageToTexture({ source: uploadSource(frame, rotation) }, { texture: gpuTexture }, { height, width });
         },
     };
+    function uploadSource(frame, rotation) {
+        if (rotation === 0)
+            return frame;
+        const [width, height] = presentedFrameSize(frame, rotation);
+        if (!rotationCanvas)
+            rotationCanvas = new OffscreenCanvas(width, height);
+        rotationCanvas.width = width;
+        rotationCanvas.height = height;
+        const context = rotationCanvas.getContext("2d");
+        if (!context) {
+            throw new Error("Unable to create a rotation canvas context.");
+        }
+        drawPresentedVideoFrame(context, frame, rotation, width, height);
+        return rotationCanvas;
+    }
+}
+/**
+ * Draws raw decoded pixels in their display orientation. A `VideoFrame` does
+ * not carry a track display matrix to a canvas or GPU upload, so a pushed
+ * frame has to be transformed before it joins the already-oriented cache path.
+ */
+function drawPresentedVideoFrame(context, frame, rotation, width, height) {
+    if (rotation === 0) {
+        context.drawImage(frame, 0, 0, width, height);
+        return;
+    }
+    context.save();
+    context.translate(width / 2, height / 2);
+    context.rotate((rotation * Math.PI) / 180);
+    const aspectRatioChange = rotation % 180 === 0 ? 1 : width / height;
+    context.scale(1 / aspectRatioChange, aspectRatioChange);
+    context.drawImage(frame, -width / 2, -height / 2, width, height);
+    context.restore();
+}
+function presentedFrameSize(frame, rotation) {
+    return rotation % 180 === 0
+        ? [frame.displayWidth, frame.displayHeight]
+        : [frame.displayHeight, frame.displayWidth];
 }
 /**
  * Whether this device's queue takes a decoded frame as a copy source.