npm - @wemap/camera - Versions diffs - 3.2.5 → 3.2.8 - Mend

@wemap/camera 3.2.5 → 3.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/debug/dist/index.html +2 -1
package/debug/dist/qr-code-scanner.html +115 -0
package/index.js +6 -1
package/package.json +3 -3
package/src/Camera.js +25 -13
package/src/QrCodeScanner.js +149 -0
package/src/SharedCameras.js +57 -0
package/src/CameraLogger.js +0 -120

package/debug/dist/index.html CHANGED Viewed

@@ -9,7 +9,8 @@
 <body>
     <a href="./simple.html">Simple</a><br />
-    <a href="./camera-logger.html">Camera-logger</a>
+    <a href="./camera-logger.html">Camera-logger</a><br />
+    <a href="./qr-code-scanner.html">QR Code Scanner</a>
 </body>
 </html>

package/debug/dist/qr-code-scanner.html ADDED Viewed

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Camera</title>
+    <script src="/js/camera-lib.js"></script>
+    <style type="text/css">
+        html,
+        body {
+            height: 100%;
+            margin: 0px;
+        }
+        #camera-container {
+            width: 100%;
+            height: 100%;
+        }
+        #controls {
+            position: absolute;
+            bottom: 0;
+            z-index: 2;
+            margin: 5px;
+        }
+        #controls>div {
+            background: #ffffffaa;
+            padding-left: 10px;
+            padding-right: 10px;
+            min-width: 100px;
+            display: inline-block;
+        }
+        #scan-result {
+            position: absolute;
+            border: 1px solid black;
+            background: white;
+            top: 0;
+            width: 150px;
+            left: 50%;
+            transform: translate(-50%, 0%);
+            z-index: 2;
+            text-align: center;
+            line-height: 30px;
+            vertical-align: middle;
+        }
+    </style>
+</head>
+<body>
+    <div id="camera-container"></div>
+    <div id="scan-result">Waiting</div>
+    <div id="controls">
+        <div id="camera-handler">
+            <div class="title">Camera</div>
+            <button id="start-camera">Start</button>
+            <button id="stop-camera" disabled>Stop</button>
+        </div>
+        <div id="qrcode-handler">
+            <div class="title">Scanner</div>
+            <button id="start-scanner">Start</button>
+            <button id="stop-scanner" disabled>Stop</button>
+        </div>
+    </div>
+    <script>
+        /* global Camera, QrCodeScanner */
+        const cameraContainer = document.getElementById('camera-container');
+        const scanResultContainer = document.getElementById('scan-result');
+        const startCameraButton = document.getElementById('start-camera');
+        const stopCameraButton = document.getElementById('stop-camera');
+        const startScannerButton = document.getElementById('start-scanner');
+        const stopScannerButton = document.getElementById('stop-scanner');
+        const camera = new Camera(cameraContainer);
+        const qrCodeScanner = new QrCodeScanner(camera);
+        qrCodeScanner.on('scan', str => (scanResultContainer.innerHTML = str));
+        startCameraButton.addEventListener('click', () => {
+            camera.start();
+            startCameraButton.disabled = true;
+            stopCameraButton.disabled = false;
+        });
+        stopCameraButton.addEventListener('click', () => {
+            camera.stop();
+            startCameraButton.disabled = false;
+            stopCameraButton.disabled = true;
+        });
+        startScannerButton.addEventListener('click', () => {
+            qrCodeScanner.start();
+            startScannerButton.disabled = true;
+            stopScannerButton.disabled = false;
+        });
+        stopScannerButton.addEventListener('click', () => {
+            qrCodeScanner.stop();
+            startScannerButton.disabled = false;
+            stopScannerButton.disabled = true;
+            scanResultContainer.innerHTML = 'Waiting';
+        });
+    </script>
+</body>
+</html>

package/index.js CHANGED Viewed

@@ -1,3 +1,8 @@
+import { BarcodeFormat } from '@zxing/library';
 import Camera from './src/Camera.js';
+import QrCodeScanner from './src/QrCodeScanner.js';
+import SharedCameras from './src/SharedCameras.js';
-export { Camera };
+export {
+    BarcodeFormat, Camera, QrCodeScanner, SharedCameras
+};

package/package.json CHANGED Viewed

@@ -11,7 +11,7 @@
         "directory": "packages/camera"
     },
     "name": "@wemap/camera",
-    "version": "3.2.5",
+    "version": "3.2.8",
     "bugs": {
         "url": "https://github.com/wemap/wemap-modules-js/issues"
     },
@@ -23,9 +23,9 @@
     ],
     "license": "ISC",
     "dependencies": {
-        "@wemap/navigation-logger": "^3.2.5",
+        "@zxing/library": "^0.17.1",
         "events": "^3.1.0"
     },
     "type": "module",
-    "gitHead": "e90b23e4265edc0073101a70c6300fa54cd3d379"
+    "gitHead": "fb5e61f42479a69332c2e3e6922bd15e4d3ee3f3"
 }

package/src/Camera.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import EventEmitter from 'events';
-import CameraLogger from './CameraLogger.js';
+import SharedCameras from './SharedCameras.js';
 const GENERIC_HARDWARE_VERTICAL_FOV = 60;
@@ -31,16 +31,20 @@ class Camera extends EventEmitter {
     fov = null;
-    _videoPlaying = false;
+    _isStarted = false;
     _hardwareVerticalFov = GENERIC_HARDWARE_VERTICAL_FOV;
     _resizeOnWindowChange;
-    _cameraLogger;
+    /**
+     * @param {Node} container
+     * @param {boolean} resizeOnWindowChange
+     */
     constructor(container, resizeOnWindowChange = false) {
         super();
+        SharedCameras._add(this, container);
         this.videoContainer = container;
         this._resizeOnWindowChange = resizeOnWindowChange;
@@ -52,17 +56,15 @@ class Camera extends EventEmitter {
         this.videoElement.setAttribute('muted', '');
         this.videoElement.setAttribute('playsinline', '');
         this.videoContainer.appendChild(this.videoElement);
-        this._cameraLogger = new CameraLogger();
     }
     async start() {
-        if (this.videoPlaying) {
+        if (this._isStarted) {
             throw new Error('Camera is already started');
         }
-        this.videoPlaying = true;
+        this._isStarted = true;
         await Camera.checkAvailability();
@@ -82,16 +84,19 @@ class Camera extends EventEmitter {
             window.addEventListener('resize', this.notifyContainerSizeChanged);
         }
-        this._cameraLogger.attachStream(this.videoStream);
+        this.emit('start', {
+            videoElement: this.videoElement,
+            stream
+        });
     }
     async stop() {
-        if (!this.videoPlaying) {
+        if (!this._isStarted) {
             throw new Error('Camera is not started yet');
         }
-        this._cameraLogger.detachStream();
+        this.emit('stop');
         if (this.videoStream && this.videoStream.stop) {
             // compatibility with old JS API
@@ -106,7 +111,11 @@ class Camera extends EventEmitter {
         if (this._resizeOnWindowChange) {
             window.removeEventListener('resize', this.notifyContainerSizeChanged);
         }
-        this.videoPlaying = false;
+        this._isStarted = false;
+    }
+    release() {
+        SharedCameras._remove(this);
     }
     static async checkAvailability(testUserMedia = false) {
@@ -138,6 +147,10 @@ class Camera extends EventEmitter {
         }
     }
+    get isStarted() {
+        return this._isStarted;
+    }
     set hardwareVerticalFov(hardwareVerticalFov) {
         this._hardwareVerticalFov = hardwareVerticalFov;
         this._computeFov();
@@ -209,7 +222,6 @@ class Camera extends EventEmitter {
             horizontal: fovH
         };
-        this._cameraLogger.fov = this.fov;
         this.emit('fov.changed', this.fov);
     }

package/src/QrCodeScanner.js ADDED Viewed

@@ -0,0 +1,149 @@
+/* eslint-disable max-statements */
+import EventEmitter from 'events';
+import {
+    MultiFormatReader,
+    BarcodeFormat,
+    DecodeHintType,
+    RGBLuminanceSource,
+    BinaryBitmap,
+    HybridBinarizer
+} from '@zxing/library';
+import Camera from './Camera.js';
+class QrCodeScanner extends EventEmitter {
+    static DEFAULT_FORMATS = [
+        BarcodeFormat.QR_CODE,
+        BarcodeFormat.DATA_MATRIX,
+        BarcodeFormat.CODABAR
+    ];
+    /**
+     * @type {Camera}
+     */
+    _camera;
+    /**
+     * @type {HTMLVideoElement}
+     */
+    _videoElement;
+    /**
+     * @type {HTMLCanvasElement}
+     */
+    _canvas;
+    /**
+     * @type {CanvasRenderingContext2D}
+     */
+    _ctx;
+    /**
+     * @type {MultiFormatReader}
+     */
+    _codeReader;
+    /**
+     * @type {number}
+     */
+    _intervalTime;
+    /**
+     * @type {number}
+     */
+    _intervalTick;
+    /**
+     * @type {boolean}
+     */
+    _isStarted = false;
+    /**
+     * @param {Camera} camera
+     */
+    constructor(camera) {
+        super();
+        this._camera = camera;
+        this._videoElement = camera.videoElement;
+        this._codeReader = new MultiFormatReader();
+        this._canvas = document.createElement('canvas');
+        this._ctx = this._canvas.getContext('2d');
+        this._camera.on('start', () => this._tryStart());
+        this._camera.on('stop', () => this._stop());
+    }
+    start(intervalTime = 500, formats = QrCodeScanner.DEFAULT_FORMATS) {
+        this._intervalTime = intervalTime;
+        if (this._isStarted) {
+            return;
+        }
+        this._isStarted = true;
+        const hints = new Map();
+        hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
+        this._codeReader.setHints(hints);
+        this._tryStart();
+    }
+    stop() {
+        this._isStarted = false;
+        this._stop();
+    }
+    _tryStart() {
+        if (!this._isStarted || !this._camera.isStarted) {
+            return;
+        }
+        this._width = this._videoElement.videoWidth;
+        this._height = this._videoElement.videoHeight;
+        this._canvas.width = this._width;
+        this._canvas.height = this._height;
+        this._luminances = new Uint8Array(this._width * this._height);
+        this._intervalTick = setInterval(() => this._onFrame(), this._intervalTime);
+    }
+    _stop() {
+        clearInterval(this._intervalTick);
+    }
+    _onFrame() {
+        if (!this._width || !this._height) {
+            return;
+        }
+        this._ctx.drawImage(this._videoElement, 0, 0, this._width, this._height);
+        const img = this._ctx.getImageData(0, 0, this._width, this._height);
+        for (let i = 0; i < this._luminances.length; i++) {
+            // eslint-disable-next-line no-bitwise
+            this._luminances[i] = ((img.data[i * 4] + img.data[i * 4 + 1] * 2 + img.data[i * 4 + 2]) / 4) & 0xFF;
+        }
+        const binaryBitmap = new BinaryBitmap(
+            new HybridBinarizer(
+                new RGBLuminanceSource(this._luminances, this._width, this._height)
+            )
+        );
+        try {
+            const result = this._codeReader.decodeWithState(binaryBitmap);
+            this.emit('scan', result.getText());
+        } catch (e) {
+            // do nothing
+        }
+    }
+}
+export default QrCodeScanner;

package/src/SharedCameras.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { EventEmitter } from 'events';
+import Camera from './Camera.js';
+class SharedCameras extends EventEmitter {
+    /**
+     * Singleton pattern.
+     * @returns {SharedCameras}
+     */
+    static get instance() {
+        if (!this._instance) {
+            this._instance = new SharedCameras();
+        }
+        return this._instance;
+    }
+    _list = [];
+    /**
+     * @param {Camera} camera
+     * @param {Node}
+     */
+    _add(camera, container) {
+        const obj = {
+            camera,
+            container
+        };
+        this._list.push(obj);
+        this.emit('added', obj);
+    }
+    /**
+     * @param {Camera} camera
+     */
+    _remove(camera) {
+        this._list = this._list.filter(({ camera: _camera }) => _camera !== camera);
+        this.emit('removed', camera);
+    }
+    get list() {
+        return this._list;
+    }
+    getCameraByContainer(container) {
+        for (const {
+            camera, container: _container
+        } of this._list) {
+            if (container === _container) {
+                return camera;
+            }
+        }
+        return null;
+    }
+}
+export default SharedCameras.instance;

package/src/CameraLogger.js DELETED Viewed

@@ -1,120 +0,0 @@
-import { NavigationLogger } from '@wemap/navigation-logger';
-import { TimeUtils } from '@wemap/utils';
-class CameraLogger {
-    static _videoPart = 0;
-    _videoStream = null;
-    constructor() {
-        NavigationLogger.on('started', () => {
-            CameraLogger._videoPart = 0;
-            if (this._videoStream !== null) {
-                this._start();
-            }
-        });
-        NavigationLogger.on('stopped', () => {
-            this._stop();
-        });
-    }
-    attachStream(videoStream) {
-        this._videoStream = videoStream;
-        if (NavigationLogger.isRecording) {
-            this._start();
-        }
-    }
-    detachStream() {
-        this._videoStream = null;
-        this._stop();
-    }
-    set fov(fov) {
-        this._fov = fov;
-    }
-    _start() {
-        CameraLogger._videoPart++;
-        if (!('MediaRecorder' in window)) {
-            return;
-        }
-        if (this.mediaRecorder) {
-            throw new Error('CameraLogger is already recording');
-        }
-        const options = {
-            mimeType: 'video/webm;codecs=vp8',
-            bitsPerSecond: NavigationLogger.params.videoBitrate
-        };
-        let isFirstChunck = true;
-        const startTime = TimeUtils.preciseTime;
-        // https://stackoverflow.com/questions/56826079/how-to-concat-chunks-of-incoming-binary-into-video-webm-file-node-js
-        this.mediaRecorder = new MediaRecorder(this._videoStream, options);
-        this.mediaRecorder.ondataavailable = event => {
-            if (event.data && event.data.size > 0) {
-                if (isFirstChunck) {
-                    this._sendEvent('video-start', {
-                        // startTime: TimeUtils.preciseTime - NavigationLogger.params.flushInterval,
-                        startTime,
-                        part: CameraLogger._videoPart,
-                        fov: this._fov
-                    });
-                    isFirstChunck = false;
-                }
-                this._sendChunck(CameraLogger._videoPart, event.data);
-            }
-        };
-        this.mediaRecorder.start(NavigationLogger.params.flushInterval);
-    }
-    _stop() {
-        if (!this.mediaRecorder) {
-            return;
-        }
-        this._sendEvent('video-end', {
-            time: TimeUtils.preciseTime,
-            part: CameraLogger._videoPart
-        });
-        this.mediaRecorder.stop();
-        this.mediaRecorder = null;
-    }
-    _sendChunck(videoPart, chunck) {
-        fetch(NavigationLogger.getVideoChunckUrl(videoPart), {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/octet-stream' },
-            body: chunck
-        });
-    }
-    _sendEvent(eventName, data) {
-        fetch(NavigationLogger.getVideoConfigUrl(), {
-            method: 'POST',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                eventName,
-                data
-            })
-        });
-    }
-}
-export default CameraLogger;