feat: Scanner

Author: philipbrembeck

src/components/Scanner/scanner.tsx

@@ -29,10 +29,9 @@ class Scanner extends Component<ScannerProps, ScannerState> {
         inputStream: {
           type: "LiveStream",
           constraints: {
-            width,
-            height,
             aspectRatio: { ideal: height / width },
             facingMode: newFacingMode,
+            height: { min: 480, ideal: height, max: 1080 },
           },
         },
         locator: {
@@ -59,34 +58,15 @@ class Scanner extends Component<ScannerProps, ScannerState> {
     );
   };
 
-  updateVideoSize() {
-    const video = document.querySelector("video");
-    if (video) {
-      const aspectRatio = video.videoWidth / video.videoHeight;
-      const windowAspectRatio = window.innerWidth / window.innerHeight;
-
-      if (aspectRatio > windowAspectRatio) {
-        video.style.width = "100%";
-        video.style.height = "auto";
-      } else {
-        video.style.width = "auto";
-        video.style.height = "100%";
-      }
-    }
-  }
-
   componentDidMount() {
     const { facingMode } = this.state;
     console.log(facingMode);
     this.handleClick();
     Quagga.onDetected(this._onDetected);
-    this.updateVideoSize();
-    window.addEventListener("resize", this.updateVideoSize);
   }
 
   componentWillUnmount() {
     Quagga.offDetected(this._onDetected);
-    window.removeEventListener("resize", this.updateVideoSize);
   }
 
   _onDetected = (result: any) => {
@@ -109,9 +89,8 @@ class Scanner extends Component<ScannerProps, ScannerState> {
     const vid: React.CSSProperties = {
       position: "fixed",
       zIndex: 999,
-      left: "50%",
-      top: "50%",
-      transform: "translate(-50%, -50%)",
+      left: 0,
+      top: 0,
     };
 
     return (