Tracking error on fullscreen

[Skrohk]

Describe the bug The tracking works really well when used in a container in the page but is wrong when used in fullscreen mode : bad location and bad size depending of the screen or device ratio.

To Reproduce

<template>
  <div>
    <div :class="{ fullscreen: this.isFullScreen }">
      <qrcode-stream @decode="onDecode" @init="onInit" :track="paintBoundingBox">
        <div v-if="loading">
          Loading...
        </div>
        <button @click="changeFullScreenMode" class="button" id="fullscreen-button">
          <span class="icon is-small">
            <font-awesome-icon icon="compress" v-if="isFullScreen"/>
            <font-awesome-icon icon="expand" v-else/>
          </span>
        </button>
      </qrcode-stream>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Component,
  Vue,
} from 'vue-property-decorator';

@Component({
  components: {},
})
export default class PayQRCode extends Vue {
  private loading = true;

  private isFullScreen = false;

  private changeFullScreenMode() {
    this.isFullScreen = !this.isFullScreen;
  }

  private onDecode(qrCodeMessage: string) {
    console.log(qrCodeMessage);
    // handle the message here
  }

  private paintBoundingBox(detectedCodes, ctx: CanvasRenderingContext2D) {
    detectedCodes.forEach((detectedCode) => {
      const {
        boundingBox: {
          x,
          y,
          width,
          height,
        },
      } = detectedCode;

      ctx.lineWidth = 2;
      ctx.strokeStyle = '#fffff';
      ctx.strokeRect(x, y, width, height);
    });
  }

  private async onInit(promise: Promise<string>) {
    this.loading = true;
    try {
      await promise;
    } catch (err) {
        console.log(err);
    } finally {
      this.loading = false;
    }
  }
}
</script>

<style>
#fullscreen-button {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 5px;
}

.fullscreen {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
</style>

Screenshots

Desktop (please complete the following information): Chrome v90

[gruhn]

Absolutely, thanks for reporting this. Should be fixed now. Can you confirm?

https://github.com/gruhn/vue-qrcode-reader/releases/tag/v3.0.1

[github-actions[bot]]

This issue has been marked as stale. If there is no further activity it will be closed.