From a044e6e05a1d0ebe4cda451d7d92acb8aba18824 Mon Sep 17 00:00:00 2001
From: allanbrault <allan.brault@gmail.com>
Date: Thu, 13 Oct 2022 10:58:47 +0200
Subject: [PATCH 1/2] Add display: block; to the video element

A video element behave like an inline element, which mean it honours
whitespace around. When in a div with whitespace it adds empty spaces.

ref: https://stackoverflow.com/a/36397260
---
 src/html5-qrcode.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/html5-qrcode.ts b/src/html5-qrcode.ts
index 108bdb7..0680528 100644
--- a/src/html5-qrcode.ts
+++ b/src/html5-qrcode.ts
@@ -1461,6 +1461,7 @@ export class Html5Qrcode {
     private createVideoElement(width: number): HTMLVideoElement {
         const videoElement = document.createElement("video");
         videoElement.style.width = `${width}px`;
+        videoElement.style.display = "block";
         videoElement.muted = true;
         videoElement.setAttribute("muted", "true");
         (<any>videoElement).playsInline = true;

From cf7546d1338b30acf2b3275471e0097b7b17382b Mon Sep 17 00:00:00 2001
From: allanbrault <allan.brault@gmail.com>
Date: Thu, 13 Oct 2022 11:01:11 +0200
Subject: [PATCH 2/2] Update logic to display the qrbox border elements

Using the bottom allow the 4 boxes on the bottom of the qrbox to be
pixel perfect on the bottom of the qrbox area, instead of relying on the
qrbox size that can be with a floating point.
---
 src/html5-qrcode.ts | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/html5-qrcode.ts b/src/html5-qrcode.ts
index 0680528..f902e7c 100644
--- a/src/html5-qrcode.ts
+++ b/src/html5-qrcode.ts
@@ -1563,6 +1563,7 @@ export class Html5Qrcode {
                 /* width= */ largeSize, 
                 /* height= */ smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ 0,
                 /* isLeft= */ true);
             this.insertShaderBorders(
@@ -1570,20 +1571,23 @@ export class Html5Qrcode {
                 /* width= */ largeSize,
                 /* height= */ smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ 0,
                 /* isLeft= */ false);
             this.insertShaderBorders(
                 shadingElement,
                 /* width= */ largeSize,
                 /* height= */ smallSize,
-                /* top= */ qrboxSize.height + smallSize,
+                /* top= */ null,
+                /* bottom= */ -smallSize,
                 /* side= */ 0,
                 /* isLeft= */ true);
             this.insertShaderBorders(
                 shadingElement,
                 /* width= */ largeSize,
                 /* height= */ smallSize,
-                /* top= */ qrboxSize.height + smallSize,
+                /* top= */ null,
+                /* bottom= */ -smallSize,
                 /* side= */ 0,
                 /* isLeft= */ false);
             this.insertShaderBorders(
@@ -1591,13 +1595,15 @@ export class Html5Qrcode {
                 /* width= */ smallSize,
                 /* height= */ largeSize + smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ -smallSize,
                 /* isLeft= */ true);
             this.insertShaderBorders(
                 shadingElement,
                 /* width= */ smallSize,
                 /* height= */ largeSize + smallSize,
-                /* top= */ qrboxSize.height + smallSize - largeSize,
+                /* top= */ null,
+                /* bottom= */ -smallSize,
                 /* side= */ -smallSize,
                 /* isLeft= */ true);
             this.insertShaderBorders(
@@ -1605,13 +1611,15 @@ export class Html5Qrcode {
                 /* width= */ smallSize,
                 /* height= */ largeSize + smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ -smallSize,
                 /* isLeft= */ false);
             this.insertShaderBorders(
                 shadingElement,
                 /* width= */ smallSize,
                 /* height= */ largeSize + smallSize,
-                /* top= */ qrboxSize.height + smallSize - largeSize,
+                /* top= */ null,
+                /* bottom= */ -smallSize,
                 /* side= */ -smallSize,
                 /* isLeft= */ false);
             this.hasBorderShaders = true;
@@ -1623,7 +1631,8 @@ export class Html5Qrcode {
         shaderElem: HTMLDivElement,
         width: number,
         height: number,
-        top: number,
+        top: number|null,
+        bottom: number|null,
         side: number,
         isLeft: boolean) {
         const elem = document.createElement("div");
@@ -1631,7 +1640,12 @@ export class Html5Qrcode {
         elem.style.backgroundColor = Constants.BORDER_SHADER_DEFAULT_COLOR;
         elem.style.width = `${width}px`;
         elem.style.height = `${height}px`;
-        elem.style.top = `${top}px`;
+        if (top !== null) {
+            elem.style.top = `${top}px`;
+        }
+        if (bottom !== null) {
+            elem.style.bottom = `${bottom}px`;
+        }
         if (isLeft) {
           elem.style.left = `${side}px`;
         } else {