@ganwei-web/ganwei-pc-cli 6.2.1 → 6.2.3

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/components/QrcodeStream.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="qrcode-stream-wrapper">
+    <!--
+    Note, the following DOM elements are not styled with z-index.
+    If z-index is not defined, elements are stacked in the order they appear in the DOM.
+    The first element is at the very bottom and subsequent elements are added on top.
+    -->
+    <video
+      ref="video"
+      :class="{ 'qrcode-stream-camera--hidden': !shouldScan }"
+      class="qrcode-stream-camera"
+      autoplay
+      muted
+      playsinline
+    ></video>
+
+    <canvas
+      ref="pauseFrame"
+      v-show="!shouldScan"
+      class="qrcode-stream-camera"
+    ></canvas>
+
+    <canvas ref="trackingLayer" class="qrcode-stream-overlay"></canvas>
+
+    <div class="qrcode-stream-overlay">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Camera from '../misc/camera.js';
+import { keepScanning } from '../misc/scanner.js';
+import CommonAPI from '../mixins/CommonAPI.vue';
+
+export default {
+    name: 'qrcode-stream',
+
+    mixins: [CommonAPI],
+
+    props: {
+        camera: {
+            type: String,
+            default: 'auto',
+
+            validator (camera) {
+                return ['auto', 'rear', 'front', 'off'].includes(camera);
+            }
+        },
+
+        torch: {
+            type: Boolean,
+            default: false
+        },
+
+        track: {
+            type: Function
+        }
+    },
+
+    data () {
+        return {
+            cameraInstance: null,
+            destroyed: false,
+            displayWidth: null,
+            displayHeight: null
+        };
+    },
+
+    computed: {
+        shouldStream () {
+            return this.destroyed === false && this.camera !== 'off';
+        },
+
+        shouldScan () {
+            return this.shouldStream === true && this.cameraInstance !== null;
+        },
+
+        /**
+         * Minimum delay in milliseconds between frames to be scanned. Don't scan
+         * so often when visual tracking is disabled to improve performance.
+         */
+        scanInterval () {
+            if (this.track === undefined) {
+                return 500;
+            }
+            return 40; // ~ 25fps
+
+        }
+    },
+
+    watch: {
+        shouldStream (shouldStream) {
+            if (!shouldStream) {
+                const canvas = this.$refs.pauseFrame;
+                const ctx = canvas.getContext('2d');
+                const video = this.$refs.video;
+
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+
+                ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+            }
+        },
+
+        shouldScan (shouldScan) {
+            if (shouldScan) {
+                this.clearCanvas(this.$refs.pauseFrame);
+                this.clearCanvas(this.$refs.trackingLayer);
+                this.startScanning();
+            }
+        },
+
+        torch (val) {
+            this.cameraInstance.switchTorch(val);
+            // this.init();
+        },
+
+        camera () {
+            this.init();
+        }
+    },
+
+    mounted () {
+        this.init();
+    },
+
+    beforeUnmount () {
+        this.beforeResetCamera();
+        this.destroyed = true;
+    },
+
+    methods: {
+        init () {
+            const promise = (async () => {
+
+                this.beforeResetCamera();
+
+                if (this.camera === 'off') {
+                    this.cameraInstance = null;
+
+                    return {
+                        capabilities: {}
+                    };
+                }
+                this.cameraInstance = await Camera(this.$refs.video, {
+                    camera: this.camera,
+                    torch: this.torch
+                });
+
+                const capabilities = this.cameraInstance.getCapabilities();
+
+                // if the component is destroyed before `cameraInstance` resolves a
+                // `beforeDestroy` hook has no chance to clear the remaining camera
+                // stream.
+                if (this.destroyed) {
+                    this.cameraInstance.stop();
+                }
+
+                return {
+                    capabilities
+                };
+
+            })();
+
+            this.$emit('init', promise);
+        },
+
+        startScanning () {
+            const detectHandler = result => {
+                this.onDetect(Promise.resolve(result));
+            };
+
+            keepScanning(this.$refs.video, {
+                detectHandler,
+                locateHandler: this.onLocate,
+                minDelay: this.scanInterval
+            });
+        },
+
+        beforeResetCamera () {
+            if (this.cameraInstance !== null) {
+                this.cameraInstance.stop();
+                this.cameraInstance = null;
+            }
+        },
+
+        onLocate (detectedCodes) {
+            const canvas = this.$refs.trackingLayer;
+            const video = this.$refs.video;
+
+            if (canvas !== undefined) {
+                if (detectedCodes.length > 0 && this.track !== undefined && video !== undefined) {
+
+                    // The visually occupied area of the video element.
+                    // Because the component is responsive and fills the available space,
+                    // this can be more or less than the actual resolution of the camera.
+                    const displayWidth = this.displayWidth = video.offsetWidth;
+                    const displayHeight = this.displayHeight = video.offsetHeight;
+
+                    // The actual resolution of the camera.
+                    // These values are fixed no matter the screen size.
+                    const resolutionWidth = video.videoWidth;
+                    const resolutionHeight = video.videoHeight;
+
+                    // Dimensions of the video element as if there would be no
+                    //   object-fit: cover;
+                    // Thus, the ratio is the same as the cameras resolution but it's
+                    // scaled down to the size of the visually occupied area.
+                    const largerRatio = Math.max(
+                        displayWidth / resolutionWidth,
+                        displayHeight / resolutionHeight
+                    );
+                    const uncutWidth = resolutionWidth * largerRatio;
+                    const uncutHeight = resolutionHeight * largerRatio;
+
+                    const xScalar = uncutWidth / resolutionWidth;
+                    const yScalar = uncutHeight / resolutionHeight;
+                    const xOffset = (displayWidth - uncutWidth) / 2;
+                    const yOffset = (displayHeight - uncutHeight) / 2;
+
+                    const scale = ({ x, y }) => {
+                        return {
+                            x: Math.floor(x * xScalar),
+                            y: Math.floor(y * yScalar)
+                        };
+                    }
+
+                    const translate = ({ x, y }) => {
+                        return {
+                            x: Math.floor(x + xOffset),
+                            y: Math.floor(y + yOffset)
+                        };
+                    }
+
+                    const adjustedCodes = detectedCodes.map(detectedCode => {
+                        const { boundingBox, cornerPoints } = detectedCode
+
+                        const { x, y } = translate(scale({
+                            x: boundingBox.x,
+                            y: boundingBox.y
+                        }))
+                        const { x: width, y: height } = scale({
+                            x: boundingBox.width,
+                            y: boundingBox.height
+                        })
+
+                        return {
+                            ...detectedCode,
+                            cornerPoints: cornerPoints.map(point => translate(scale(point))),
+                            boundingBox: DOMRectReadOnly.fromRect({ x, y, width, height })
+                        }
+                    })
+
+                    canvas.width = video.offsetWidth;
+                    canvas.height = video.offsetHeight;
+
+                    const ctx = canvas.getContext('2d');
+
+                    this.track(adjustedCodes, ctx);
+                } else {
+                    this.clearCanvas(canvas);
+                }
+            }
+        },
+
+        // repaintTrackingLayer (video, canvas) {
+        //     const ctx = canvas.getContext('2d');
+
+        //     window.requestAnimationFrame(() => {
+        //         canvas.width = this.displayWidth;
+        //         canvas.height = this.displayHeight;
+
+        //         // this.trackRepaintFunction(coordinatesAdjusted, ctx);
+        //     });
+        // },
+
+        clearCanvas (canvas) {
+            const ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+
+    }
+};
+</script>
+
+<style lang="css" scoped>
+.qrcode-stream-wrapper {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.qrcode-stream-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+}
+
+.qrcode-stream-camera {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* When a camera stream is loaded, we assign the stream to the `video`
+ * element via `video.srcObject`. At this point the element used to be
+ * hidden with `v-show="false"` aka. `display: none`. We do that because
+ * at this point the videos dimensions are not known yet. We have to
+ * wait for the `loadeddata` event first. Only after that event we
+ * display the video element. Otherwise the elements size awkwardly flickers.
+ *
+ * However, it appears in iOS 15 all iOS browsers won't properly render
+ * the video element if the `video.srcObject` was assigned *while* the
+ * element was hidden with `display: none`. Using `visibility: hidden`
+ * instead seems to have fixed the problem though.
+ */
+.qrcode-stream-camera--hidden {
+    position: absolute;
+    visibility: hidden;
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/index.js

@@ -0,0 +1,32 @@
+import QrcodeCapture from './components/QrcodeCapture.vue';
+import QrcodeDropZone from './components/QrcodeDropZone.vue';
+import QrcodeStream from './components/QrcodeStream.vue';
+
+// Install the components
+export function install(Vue) {
+  Vue.component('qrcode-stream', QrcodeStream);
+  Vue.component('qrcode-capture', QrcodeCapture);
+  Vue.component('qrcode-drop-zone', QrcodeDropZone);
+}
+
+// Expose the components
+export { QrcodeCapture, QrcodeDropZone, QrcodeStream };
+
+/* -- Plugin definition & Auto-install -- */
+/* You shouldn't have to modify the code below */
+
+// Plugin
+const plugin = { install };
+
+export default plugin;
+
+// Auto-install
+let GlobalVue = null;
+if (typeof window !== 'undefined') {
+  GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+  GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+  GlobalVue.use(plugin);
+}

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/misc/camera.js

@@ -0,0 +1,153 @@
+import { eventOn } from 'callforth';
+
+import { InsecureContextError, StreamApiNotSupportedError } from './errors.js';
+// import shimGetUserMedia from './shimGetUserMedia';
+const doubleQuest = (a, b) => {
+    return (a !== null && a !== undefined) ? a : b;
+}
+class Camera {
+    constructor(videoEl, stream) {
+        this.videoEl = videoEl;
+        this.stream = stream;
+    }
+
+    stop () {
+        this.videoEl.srcObject = null;
+
+        this.stream.getTracks().forEach(track => {
+            this.stream.removeTrack(track);
+            track.stop();
+        });
+    }
+
+    getCapabilities () {
+        const [track] = this.stream.getVideoTracks();
+
+        // Firefox does not yet support getCapabilities as of August 2020
+        let cap = (track && track.getCapabilities && track.getCapabilities())
+        return doubleQuest(cap, {});
+    }
+
+    switchTorch (val) {
+        const [track] = this.stream.getVideoTracks();
+        let cap = (track && track.getCapabilities && track.getCapabilities())
+        if (cap.torch) {
+            track.applyConstraints({ advanced: [{ torch: val }] });
+        } else {
+            console.warn('device does not support torch capability');
+        }
+    }
+}
+
+// Modern phones often have multipe front/rear cameras.
+// Sometimes special purpose cameras like the wide-angle camera are picked
+// by default. Those are not optimal for scanning QR codes but standard
+// media constraints don't allow us to specify which camera we want exactly.
+const narrowDownFacingMode = async camera => {
+
+    // Filter some devices, known to be bad choices.
+    const deviceBlackList = ['OBS Virtual Camera', 'OBS-Camera'];
+
+    const devices = (await navigator.mediaDevices.enumerateDevices())
+        .filter(({ kind }) => kind === 'videoinput')
+        .filter(({ label }) => !deviceBlackList.includes(label))
+        .filter(({ label }) => !label.includes('infrared'));
+
+    if (devices.length > 2) {
+
+        // Explicitly picking the first entry in the list of all videoinput
+        // devices for as the default front camera and the last entry as the default
+        // rear camera seems to be a good heuristic on some devices.
+        const frontCamera = devices[0];
+        const rearCamera = devices[devices.length - 1];
+
+        switch (camera) {
+            case 'auto':
+                return { deviceId: { exact: rearCamera.deviceId } };
+            case 'rear':
+                return { deviceId: { exact: rearCamera.deviceId } };
+            case 'front':
+                return { deviceId: { exact: frontCamera.deviceId } };
+            default:
+                return undefined;
+        }
+    } else {
+        switch (camera) {
+            case 'auto':
+                return { facingMode: { ideal: 'environment' } };
+            case 'rear':
+                return { facingMode: { exact: 'environment' } };
+            case 'front':
+                return { facingMode: { exact: 'user' } };
+            default:
+                return undefined;
+        }
+    }
+};
+
+export default async function (videoEl, { camera, torch }) {
+
+    // At least in Chrome `navigator.mediaDevices` is undefined when the page is
+    // loaded using HTTP rather than HTTPS. Thus `STREAM_API_NOT_SUPPORTED` is
+    // initialized with `false` although the API might actually be supported.
+    // So although `getUserMedia` already should have a built-in mechanism to
+    // detect insecure context (by throwing `NotAllowedError`), we have to do a
+    // manual check before even calling `getUserMedia`.
+    if (window.isSecureContext !== true) {
+        throw new InsecureContextError();
+    }
+
+    if ((navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) === undefined) {
+        throw new StreamApiNotSupportedError();
+    }
+
+    // This is a browser API only shim. It patches the global window object which
+    // is not available during SSR. So we lazily apply this shim at runtime.
+    // await shimGetUserMedia();
+    const constraints = {
+        audio: false,
+        video: {
+            width: { min: 360, ideal: 900, max: 1920 },
+            height: { min: 240, ideal: 450, max: 1080 },
+
+            ...(await narrowDownFacingMode(camera))
+        }
+    };
+    console.time('new Camera');
+    console.time('getUserMedia');
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    console.timeEnd('getUserMedia');
+
+    if (videoEl.srcObject !== undefined) {
+        videoEl.srcObject = stream;
+    } else if (videoEl.mozSrcObject !== undefined) {
+        videoEl.mozSrcObject = stream;
+    } else if (window.URL.createObjectURL) {
+        videoEl.src = window.URL.createObjectURL(stream);
+    } else if (window.webkitURL) {
+        videoEl.src = window.webkitURL.createObjectURL(stream);
+    } else {
+        videoEl.src = stream;
+    }
+
+    await eventOn(videoEl, 'loadeddata');
+
+    // According to: https://oberhofer.co/mediastreamtrack-and-its-capabilities/#queryingcapabilities
+    // On some devices, getCapabilities only returns a non-empty object after
+    // some delay. There is no appropriate event so we have to add a constant timeout
+    // await timeout(500);
+
+    if (torch) {
+        const [track] = stream.getVideoTracks();
+        const capabilities = track.getCapabilities();
+
+        if (capabilities.torch) {
+            track.applyConstraints({ advanced: [{ torch: true }] });
+        } else {
+            console.warn('device does not support torch capability');
+        }
+    }
+    console.timeEnd('new Camera');
+
+    return new Camera(videoEl, stream);
+}

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/misc/errors.js

@@ -0,0 +1,25 @@
+export class DropImageFetchError extends Error {
+  constructor() {
+    super("can't process cross-origin image");
+
+    this.name = "DropImageFetchError";
+  }
+}
+
+export class StreamApiNotSupportedError extends Error {
+  constructor() {
+    super("this browser has no Stream API support");
+
+    this.name = "StreamApiNotSupportedError";
+  }
+}
+
+export class InsecureContextError extends Error {
+  constructor() {
+    super(
+      "camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP."
+    );
+
+    this.name = "InsecureContextError";
+  }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/misc/scanner.js

@@ -0,0 +1,114 @@
+/* eslint-disable no-undef */
+import { eventOn } from 'callforth';
+
+import { DropImageFetchError } from './errors.js';
+
+const doubleQuest = (a, b) => {
+    return (a !== null && a !== undefined) ? a : b;
+}
+
+const adaptOldFormat = detectedCodes => {
+    if (detectedCodes.length > 0) {
+        const [firstCode] = detectedCodes;
+
+        const [
+            topLeftCorner,
+            topRightCorner,
+            bottomRightCorner,
+            bottomLeftCorner
+        ] = firstCode.cornerPoints
+
+        return {
+            content: firstCode.rawValue,
+            location: {
+                topLeftCorner,
+                topRightCorner,
+                bottomRightCorner,
+                bottomLeftCorner,
+
+                // not supported by native API:
+                topLeftFinderPattern: {},
+                topRightFinderPattern: {},
+                bottomLeftFinderPattern: {}
+            },
+            imageData: null
+        }
+    }
+    return {
+        content: null,
+        location: null,
+        imageData: null
+    }
+
+}
+
+/**
+ * Continuously extracts frames from camera stream and tries to read
+ * potentially pictured QR codes.
+ */
+export const keepScanning = (videoElement, options) => {
+    const barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] });
+
+    const { detectHandler, locateHandler, minDelay } = options;
+
+    const processFrame = state => async timeNow => {
+        if (videoElement.readyState > 1) {
+            const { lastScanned, contentBefore, locationBefore } = state
+
+            if (timeNow - lastScanned >= minDelay) {
+                const detectedCodes = await barcodeDetector.detect(videoElement);
+                const { content, location, imageData } = adaptOldFormat(detectedCodes)
+
+                if (content !== null && content !== contentBefore) {
+                    detectHandler({ content, location, imageData });
+                }
+
+                if (location !== null || locationBefore !== null) {
+                    locateHandler(detectedCodes);
+                }
+
+                window.requestAnimationFrame(processFrame({
+                    lastScanned: timeNow,
+                    contentBefore: doubleQuest(content, contentBefore),
+                    locationBefore: location
+                }))
+            } else {
+                window.requestAnimationFrame(processFrame(state))
+            }
+        }
+    };
+
+    processFrame({
+        contentBefore: null,
+        locationBefore: null,
+        lastScanned: performance.now()
+    })();
+};
+
+const imageElementFromUrl = async url => {
+    if (url.startsWith('http') && url.includes(location.host) === false) {
+        throw new DropImageFetchError();
+    }
+
+    const image = document.createElement('img');
+    image.src = url;
+
+    await eventOn(image, 'load');
+
+    return image;
+}
+
+export const processFile = async file => {
+    const barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] })
+    const detectedCodes = await barcodeDetector.detect(file)
+
+    return adaptOldFormat(detectedCodes)
+}
+
+export const processUrl = async url => {
+    const barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] })
+    const image = await imageElementFromUrl(url);
+    const detectedCodes = await barcodeDetector.detect(image)
+
+    return adaptOldFormat(detectedCodes)
+}

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/misc/shimGetUserMedia.js

@@ -0,0 +1,30 @@
+import { shimGetUserMedia as chromeShim } from 'webrtc-adapter/src/js/chrome/getusermedia';
+import { shimGetUserMedia as edgeShim } from 'webrtc-adapter/src/js/edge/getusermedia';
+import { shimGetUserMedia as firefoxShim } from 'webrtc-adapter/src/js/firefox/getusermedia';
+import { shimGetUserMedia as safariShim } from 'webrtc-adapter/src/js/safari/safari_shim';
+import { detectBrowser } from 'webrtc-adapter/src/js/utils';
+
+import { StreamApiNotSupportedError } from './errors';
+import { indempotent } from './util';
+
+export default indempotent(() => {
+  const { browser } = detectBrowser(window);
+
+  switch (browser) {
+    case 'chrome':
+      chromeShim(window);
+
+      break;
+    case 'firefox':
+      firefoxShim(window);
+      break;
+    case 'edge':
+      edgeShim(window);
+      break;
+    case 'safari':
+      safariShim(window);
+      break;
+    default:
+      throw new StreamApiNotSupportedError();
+  }
+});

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/misc/util.js

@@ -0,0 +1,16 @@
+
+export const indempotent = action => {
+  let called = false;
+  let result = undefined;
+
+  return (...args) => {
+    if (called) {
+      return result;
+    }
+    result = action(...args);
+    called = true;
+
+    return result;
+
+  };
+};