Fix yolo demo for iOS and macOS Safari (#2)

microsoft · Sep 14, 2021 · 6782126 · 6782126
1 parent 9fb9c20
commit 6782126
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/components/common/WebcamModelUI.vue b/src/components/common/WebcamModelUI.vue
@@ -528,12 +528,12 @@ export default class WebcamModelUI extends Vue {
       this.webcamElement,
       beginWidth,
       beginHeight,
-      this.videoOrigWidth,
-      this.videoOrigHeight,
+      size,
+      size,
       0,
       0,
-      this.webcamElement.width,
-      this.webcamElement.height
+      canvas.width,
+      canvas.height
     );
     return context;
   }
@@ -575,6 +575,7 @@ export default class WebcamModelUI extends Vue {
   height: 416px;
   position: relative;
   display: flex;
+  align-items: center;
   justify-content: center;
   overflow: hidden;
   & :nth-child(n + 3) {

diff --git a/src/components/models/Emotion.vue b/src/components/models/Emotion.vue
@@ -122,6 +122,7 @@ export default class Emotion extends Vue {
   ) {
     const rect = document.createElement("div");
     const label = document.createElement("div");
+    rect.style.cssText = `top: 0px;`;
     label.style.cssText = "font-size: 24px";
     label.innerText = text;
     rect.appendChild(label);

diff --git a/src/components/models/Yolo.vue b/src/components/models/Yolo.vue
@@ -126,13 +126,16 @@ export default class Yolo extends Vue {
     text = "",
     color = "red"
   ) {
+    const webcamContainerElement = document.getElementById("webcam-container") as HTMLElement;
+    // Depending on the display size, webcamContainerElement might be smaller than 416x416.
+    const [ox, oy] = [(webcamContainerElement.offsetWidth - 416) / 2, (webcamContainerElement.offsetHeight - 416) / 2];
     const rect = document.createElement("div");
-    rect.style.cssText = `top: ${y}px; left: ${x}px; width: ${w}px; height: ${h}px; border-color: ${color};`;
+    rect.style.cssText = `top: ${y+oy}px; left: ${x+ox}px; width: ${w}px; height: ${h}px; border-color: ${color};`;
     const label = document.createElement("div");
     label.innerText = text;
     rect.appendChild(label);
 
-    (document.getElementById("webcam-container") as HTMLElement).appendChild(
+    webcamContainerElement.appendChild(
       rect
     );
   }