Merge pull request #526 from 'dbuezas/fix/rotation-and-digital-ptz'

AlexxIT · Aug 24, 2023 · 9f9ca41 · 9f9ca41
2 parents 616aa6b + ed3dd66
commit 9f9ca41
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/custom_components/webrtc/www/digital-ptz.js b/custom_components/webrtc/www/digital-ptz.js
@@ -13,7 +13,7 @@ const DEFAULT_OPTIONS = {
   persist: true,
 };
 export class DigitalPTZ {
-  constructor(containerEl, videoEl, options) {
+  constructor(containerEl, transformEl, videoEl, options) {
     this.offHandles = [];
     this.recomputeRects = () => {
       this.transform.updateRects(this.videoEl, this.containerEl);
@@ -23,14 +23,15 @@ export class DigitalPTZ {
     this.render = (transition = false) => {
       if (transition) {
         // transition is used to animate dbl click zoom
-        this.videoEl.style.transition = "transform 200ms";
+        this.transformEl.style.transition = "transform 200ms";
         setTimeout(() => {
-          this.videoEl.style.transition = "";
+          this.transformEl.style.transition = "";
         }, 200);
       }
-      this.videoEl.style.transform = this.transform.render();
+      this.transformEl.style.transform = this.transform.render();
     };
     this.containerEl = containerEl;
+    this.transformEl = transformEl;
     this.videoEl = videoEl;
     this.options = Object.assign({}, DEFAULT_OPTIONS, options);
     this.transform = new Transform({
@@ -206,6 +207,25 @@ function startMouseDragPan(params) {
 /** Transform */
 const PERSIST_KEY_PREFIX = "webrtc-digital-ptc:";
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function getTransformedDimensions(video) {
+  const { videoWidth, videoHeight } = video;
+  if (!videoHeight || !videoWidth) return undefined;
+  var transform = window.getComputedStyle(video).getPropertyValue("transform");
+  const match = transform.match(/matrix\((.+)\)/);
+  if (!match || !match[1]) return { videoWidth, videoHeight }; // the video isn't transformed
+  const matrix = new DOMMatrix(match[1].split(", ").map(Number));
+  const points = [
+    new DOMPoint(0, 0),
+    new DOMPoint(videoWidth, 0),
+    new DOMPoint(0, videoHeight),
+    new DOMPoint(videoWidth, videoHeight),
+  ].map((point) => point.matrixTransform(matrix));
+  const minX = Math.min(...points.map((point) => point.x));
+  const maxX = Math.max(...points.map((point) => point.x));
+  const minY = Math.min(...points.map((point) => point.y));
+  const maxY = Math.max(...points.map((point) => point.y));
+  return { videoWidth: maxX - minX, videoHeight: maxY - minY };
+}
 class Transform {
   constructor(settings) {
     this.scale = 1;
@@ -253,7 +273,8 @@ class Transform {
       return;
     }
     this.containerRect = containerRect;
-    if (!videoEl.videoWidth) {
+    const transformed = getTransformedDimensions(videoEl);
+    if (!transformed) {
       // The video hasn't loaded yet.
       // Once it loads, the videometadata listener will call this function again.
       return;
@@ -263,7 +284,7 @@ class Transform {
     // This needs to be accounted for when panning, the code below keeps track of that.
     const screenAspectRatio =
       this.containerRect.width / this.containerRect.height;
-    const videoAspectRatio = videoEl.videoWidth / videoEl.videoHeight;
+    const videoAspectRatio = transformed.videoWidth / transformed.videoHeight;
     if (videoAspectRatio > screenAspectRatio) {
       // Black bars on the top and bottom
       const videoHeight = this.containerRect.width / videoAspectRatio;

diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js
@@ -212,13 +212,12 @@ class WebRTCCamera extends VideoRTC {
                 background-color: black;
                 height: 100%;
                 position: relative; /* important for Safari */
-                overflow: hidden; /* important for zoom-controller */
             }
             .player:active {
                 cursor: move; /* important for zoom-controller */
             }
-            video {
-                transform-origin: 50% 50%; /* important for zoom-controller */
+            .player .ptz-transform {
+                height: 100%;
             }
             .header {
                 position: absolute;
@@ -237,7 +236,9 @@ class WebRTCCamera extends VideoRTC {
             }
         </style>
         <ha-card class="card">
-            <div class="player"></div>
+            <div class="player">
+                <div class="ptz-transform"></div>
+            </div>
             <div class="header">
                 <div class="status"></div>
                 <div class="mode"></div>
@@ -246,8 +247,7 @@ class WebRTCCamera extends VideoRTC {
         `;
 
         this.querySelector = selectors => this.shadowRoot.querySelector(selectors);
-
-        this.querySelector('.player').appendChild(this.video);
+        this.querySelector('.ptz-transform').appendChild(this.video);
 
         const mode = this.querySelector('.mode');
         mode.addEventListener('click', () => this.nextStream(true));
@@ -260,7 +260,8 @@ class WebRTCCamera extends VideoRTC {
         if (this.config.digital_ptz === false) return;
         new DigitalPTZ(
             this.querySelector('.player'),
-            this.querySelector('.player video'),
+            this.querySelector('.player .ptz-transform'),
+            this.video,
             Object.assign({}, this.config.digital_ptz, {persist_key: this.config.url})
         );
     }