ngx-scanner

ngx-scanner copied to clipboard

Describe the bug The camera on iPad Air does not open in full screen.

To Reproduce Steps to reproduce the behavior:

Open the application on an iPad Air. Navigate to the camera feature. Observe that the camera view does not fill the entire screen. Expected behavior The camera should open in full screen on the iPad Air.

Screenshots

<div class="scanner-container" *ngIf="isCameraReady">
  <zxing-scanner
    [previewFitMode]="'cover'"
    [autofocusEnabled]="autofocusEnabled"
    #scanner
    (scanSuccess)="handleQrCodeResult($event)"
  ></zxing-scanner>
  <div class="top-bar">
    <button class="close-button" (click)="close()" data-testid="closeScanner">×</button>
    <div class="header-text">SCAN</div>
  </div>
  <div class="scan-area">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
  </div>
</div>

html, body, .scanner-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.scanner-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    touch-action: none;
}

::ng-deep zxing-scanner, ::ng-deep ngx-scanner {
    width: 100% !important;
    height: 100% !important;
}

::ng-deep zxing-scanner video, ::ng-deep ngx-scanner video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.scan-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vw;
    max-width: 80vh;
    max-height: 80vh;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
}

.corner {
    position: absolute;
    width: 25vw;
    height: 25vw;
    max-width: 25vh;
    max-height: 25vh;
    border: 6px solid white;
    box-sizing: border-box;
}

.top-bar, .bottom-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #eef8e8;
    color: black;
}

.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.header-text {
    font-size: 18px;
    font-weight: bold;
}

.footer-text {
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}

.card-icons {
    display: flex;
    justify-content: center;
}

.card-icons img {
    height: 20px;
    margin: 0 5px;
}

.top-left {
    top: -6px;
    left: -6px;
    border-right: none;
    border-bottom: none;
}

.top-right {
    top: -6px;
    right: -6px;
    border-left: none;
    border-bottom: none;
}

.bottom-left {
    bottom: -6px;
    left: -6px;
    border-right: none;
    border-top: none;
}

.bottom-right {
    bottom: -6px;
    right: -6px;
    border-left: none;
    border-top: none;
}

.close-button {
    position: absolute;
    left: 2vw;
    background-color: #ffffff00;
    background-color: white;
    border: none;
    cursor: pointer;
    font-size: 4vmin;
    padding: 2vmin;
    line-height: 1;
    z-index: 1001;
    transition: opacity 0.3s ease;
}

.close-button:hover {
    opacity: 0.8;
}

@media (min-width: 1024px) {
    .close-button {
        font-size: 48px;
        padding: 10px;
    }
}

@media (min-aspect-ratio: 1/1) {
    .scan-area {
        width: 80vh;
        height: 80vh;
    }

    .corner {
        width: 25vh;
        height: 25vh;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape),
(min-width: 1366px) and (max-width: 1024px) and (orientation: portrait) {
    .scan-area {
        width: 70vh;
        height: 70vh;
    }

    .corner {
        width: 20vh;
        height: 20vh;
    }

    ::ng-deep zxing-scanner, ::ng-deep ngx-scanner {
        width: 100%;
        height: 100%;
    }

    ::ng-deep zxing-scanner video, ::ng-deep ngx-scanner video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape),
(min-width: 1024px) and (max-width: 768px) and (orientation: portrait) {
    .scan-area {
        width: 75vh;
        height: 75vh;
    }

    .corner {
        width: 22vh;
        height: 22vh;
    }

    ::ng-deep zxing-scanner, ::ng-deep ngx-scanner {
        width: 100%;
        height: 100%;
    }

    ::ng-deep zxing-scanner video, ::ng-deep ngx-scanner video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

@media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (-webkit-min-device-pixel-ratio: 2) {
    .scanner-container {
        width: 100% !important;
        height: 100% !important;
    }

    .scan-area {
        width: 80vw;
        height: 80vw;
    }

    .corner {
        width: 20vw;
        height: 20vw;
    }

    ::ng-deep zxing-scanner video, ::ng-deep ngx-scanner video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

Device: iPad Air OS: iOS 17.2 Additional context The camera view issue seems to be specific to iPad Air running iOS 17.2. Other devices might not be affected.