@wemap/camera 12.10.6 → 12.10.8-alpha.2

package/dist/src/QrCodeScanner.d.ts

@@ -0,0 +1,24 @@
+import { default as EventEmitter } from 'events';
+import { default as Camera } from './Camera.js';
+declare interface QrCodeScanner {
+    on(event: 'scan', listener: (result: string) => void): this;
+    off(event: 'scan', listener: (result: string) => void): this;
+}
+declare class QrCodeScanner extends EventEmitter {
+    _height?: number;
+    _width?: number;
+    _camera: Camera;
+    _videoElement: HTMLVideoElement;
+    _canvas: HTMLCanvasElement;
+    _ctx: CanvasRenderingContext2D;
+    _intervalTime: number | null;
+    _intervalTick?: number;
+    _isStarted: boolean;
+    constructor(camera: Camera);
+    start(intervalTime?: number): void;
+    stop(): void;
+    _tryStart(): void;
+    _stop(): void;
+    _onFrame(): void;
+}
+export default QrCodeScanner;

package/dist/src/SharedCameras.d.ts

@@ -0,0 +1,21 @@
+import { default as EventEmitter } from 'events';
+import { default as Camera } from './Camera.js';
+declare interface SharedCameras {
+    on(event: 'added', listener: (obj: CameraContainer) => void): this;
+    on(event: 'removed', listener: (obj: {
+        camera: Camera;
+    }) => void): this;
+}
+type CameraContainer = {
+    container: HTMLElement;
+    camera: Camera;
+};
+declare class SharedCameras extends EventEmitter {
+    _list: CameraContainer[];
+    _add(camera: Camera, container: HTMLElement): void;
+    _remove(camera: Camera): void;
+    get list(): CameraContainer[];
+    getCameraByContainer(container: HTMLElement): Camera | null;
+}
+declare const _default: SharedCameras;
+export default _default;

package/dist/vite.config.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    build: {
+        minify: string;
+        lib: {
+            entry: string;
+            name: string;
+            formats: string[];
+            fileName: (format: string) => "index.mjs" | "index.js";
+        };
+        sourcemap: boolean;
+    };
+    plugins: import('vite').Plugin[];
+    optimizeDeps: {
+        esbuildOptions: {
+            jsx: string;
+        };
+    };
+};
+export default _default;

package/package.json

@@ -5,14 +5,14 @@
     ],
     "description": "Wemap Camera utils package",
     "main": "dist/index.js",
-    "types": "index.ts",
+    "types": "./dist/index.d.ts",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/wemap/wemap-modules-js.git",
         "directory": "packages/camera"
     },
     "name": "@wemap/camera",
-    "version": "12.10.6",
+    "version": "12.10.8-alpha.2",
     "bugs": {
         "url": "https://github.com/wemap/wemap-modules-js/issues"
     },
@@ -29,17 +29,20 @@
     "license": "ISC",
     "dependencies": {
         "@types/events": "^3.0.0",
-        "@wemap/logger": "^12.10.0",
+        "@wemap/logger": "^12.10.8-alpha.2",
         "events": "^3.3.0",
         "qr-scanner": "^1.4.2"
     },
     "type": "module",
+    "files": [
+        "dist"
+    ],
     "exports": {
         ".": {
-            "types": "./index.ts",
+            "types": "./dist/index.d.ts",
             "import": "./dist/index.mjs",
             "require": "./dist/index.js"
         }
     },
-    "gitHead": "dbedc4948fc6e9f26a93e266a2fcb71abb4cc764"
+    "gitHead": "76c13880fb0d409c142cfc464dd48abc298ae58e"
 }

package/src/Camera.ts

@@ -1,282 +0,0 @@
-import EventEmitter from 'events';
-
-import Logger from '@wemap/logger';
-import SharedCameras from './SharedCameras.js';
-import { calcDisplayedFov } from './CameraUtils.js';
-
-// Helped from https://github.com/jeromeetienne/AR.js/blob/master/three.js/src/threex/threex-artoolkitsource.js
-
-// Camera preview will fill component bounds without transformations.
-// If the component aspect ratio is different from camera aspect ratio,
-//  camera preview is extended then cropped.
-
-type CameraOptions = {
-    width?: number,
-    height?: number,
-    resizeOnWindowChange?: boolean
-};
-
-export type CameraState = 'stopped' | 'starting' | 'started' | 'stopping';
-
-declare interface Camera {
-    on(event: 'starting', listener: () => void): this;
-    on(event: 'started', listener: (obj: ({ videoElement: HTMLVideoElement, stream: MediaStream })) => void): this;
-    on(event: 'stopping', listener: () => void): this;
-    on(event: 'stopped', listener: () => void): this;
-    on(event: 'fov.changed', listener: (obj: ({ vertical: number, horizontal: number })) => void): this;
-    off(event: 'starting', listener: () => void): this;
-    off(event: 'started', listener: (obj: ({ videoElement: HTMLVideoElement, stream: MediaStream })) => void): this;
-    off(event: 'stopping', listener: () => void): this;
-    off(event: 'stopped', listener: () => void): this;
-    off(event: 'fov.changed', listener: (obj: ({ vertical: number, horizontal: number })) => void): this;
-}
-
-
-class Camera extends EventEmitter {
-
-    static DEFAULT_OPTIONS = {
-        width: 1024,
-        height: 768,
-        resizeOnWindowChange: false
-    };
-
-    static GENERIC_HARDWARE_VERTICAL_FOV = 60;
-
-    _userMediaConstraints: MediaStreamConstraints;
-    videoStream: MediaStream | null = null;
-
-    videoContainer: HTMLElement;
-    videoElement: HTMLVideoElement;
-
-    fov: {horizontal: number, vertical: number} | null = null;
-
-    _state: CameraState = 'stopped';
-
-    _hardwareVerticalFov = Camera.GENERIC_HARDWARE_VERTICAL_FOV;
-    _resizeOnWindowChange;
-
-    constructor(container: HTMLElement, options: CameraOptions = {}) {
-        super();
-
-        options = Object.assign({}, Camera.DEFAULT_OPTIONS, options);
-
-        SharedCameras._add(this, container);
-
-        this.videoContainer = container;
-
-        this._resizeOnWindowChange = options.resizeOnWindowChange;
-        this._userMediaConstraints = {
-            audio: false,
-            video: {
-                facingMode: 'environment',
-                width: { ideal: options.width },
-                height: { ideal: options.height },
-                resizeMode: 'none'
-            } as any // For resizeMode
-        };
-
-        this.videoContainer.style.overflow = 'hidden';
-
-        this.videoElement = document.createElement('video');
-        this.videoElement.setAttribute('id', 'wemap-camera');
-        this.videoElement.setAttribute('preload', 'none');
-        this.videoElement.setAttribute('muted', '');
-        this.videoElement.setAttribute('playsinline', '');
-        this.videoContainer.appendChild(this.videoElement);
-    }
-
-    async start(videoMediaConstraints?: MediaTrackConstraints) {
-
-        if (this._state === 'started' || this._state === 'starting') {
-            throw new Error('Camera is already started');
-        }
-
-        if (this._state === 'stopping') {
-            await new Promise(resolve => this.once('stopped', resolve));
-        }
-
-        this._state = 'starting';
-        this.emit('starting');
-
-        await Camera.checkAvailability();
-
-        if (typeof videoMediaConstraints === 'object') {
-            Object.assign(this._userMediaConstraints.video as MediaTrackConstraints,
-                this._userMediaConstraints.video as MediaTrackConstraints, videoMediaConstraints);
-        }
-
-        const stream = await navigator.mediaDevices.getUserMedia(this._userMediaConstraints);
-
-        // Listeners have to be set before srcObject assigment or they can be never called
-        this.videoElement.oncanplaythrough = () => this.videoElement.play();
-        const metadataPr = new Promise(resolve => (this.videoElement.onloadedmetadata = resolve));
-
-        this.videoElement.srcObject = this.videoStream = stream;
-        await metadataPr;
-
-        this._resizeElement();
-        this._computeFov();
-
-        if (this._resizeOnWindowChange) {
-            window.addEventListener('resize', this.notifyContainerSizeChanged);
-        }
-
-        this._state = 'started';
-        const output = {
-            videoElement: this.videoElement,
-            stream
-        };
-
-        this.emit('started', output);
-        return output;
-    }
-
-    async stop() {
-
-        if (this._state === 'stopped') {
-            throw new Error('Camera is already stopped');
-        }
-
-        if (this._state === 'starting') {
-            await new Promise(resolve => this.once('started', resolve));
-        }
-
-        this._state = 'stopping';
-        this.emit('stopping');
-
-        if (this.videoStream) {
-            this.videoStream.getVideoTracks().forEach(track => track.stop());
-        }
-        this.videoStream = null;
-        this.videoElement.srcObject = null;
-
-        if (this._resizeOnWindowChange) {
-            window.removeEventListener('resize', this.notifyContainerSizeChanged);
-        }
-
-        this._state = 'stopped';
-        this.emit('stopped');
-    }
-
-    release() {
-        this.videoContainer.removeChild(this.videoElement);
-        SharedCameras._remove(this);
-    }
-
-    static async checkAvailability(testUserMedia = false) {
-
-        if (!navigator.mediaDevices) {
-            throw new Error('navigator.mediaDevices not present in your browser');
-        }
-
-        if (!navigator.mediaDevices.enumerateDevices) {
-            throw new Error('navigator.mediaDevices.enumerateDevices not present in your browser');
-        }
-
-        if (!navigator.mediaDevices.getUserMedia) {
-            throw new Error('navigator.mediaDevices.getUserMedia not present in your browser');
-        }
-
-        const devices = await navigator.mediaDevices.enumerateDevices();
-        if (!devices.find(device => device.kind === 'videoinput')) {
-            throw new Error('No camera found');
-        }
-
-        if (testUserMedia) {
-            const stream = await navigator.mediaDevices.getUserMedia({
-                audio: false, video: { facingMode: 'environment' }
-            });
-            stream.getVideoTracks().forEach(track => track.stop());
-        }
-    }
-
-    get state() {
-        return this._state;
-    }
-
-    get hardwareVerticalFov() {
-        return this._hardwareVerticalFov;
-    }
-
-    set hardwareVerticalFov(hardwareVerticalFov) {
-        this._hardwareVerticalFov = hardwareVerticalFov;
-        this._computeFov();
-    }
-
-    notifyContainerSizeChanged = () => {
-        this._resizeElement();
-        this._computeFov();
-    }
-
-    _resizeElement = () => {
-
-        if (!this.videoElement) {
-            throw new Error('No video element found');
-        }
-
-        const sourceWidth = this.videoElement.videoWidth;
-        const sourceHeight = this.videoElement.videoHeight;
-
-        const containerWidth = this.videoContainer.offsetWidth;
-        const containerHeight = this.videoContainer.offsetHeight;
-
-        const sourceAspect = sourceWidth / sourceHeight;
-        const screenAspect = containerWidth / containerHeight;
-
-        if (screenAspect < sourceAspect) {
-
-            const newWidth = sourceAspect * containerHeight;
-            this.videoElement.style.width = newWidth + 'px';
-            this.videoElement.style.marginLeft = -(newWidth - containerWidth) / 2 + 'px';
-
-            this.videoElement.style.height = containerHeight + 'px';
-            this.videoElement.style.marginTop = '0px';
-
-        } else {
-
-            const newHeight = 1 / (sourceAspect / containerWidth);
-            this.videoElement.style.height = newHeight + 'px';
-            this.videoElement.style.marginTop = -(newHeight - containerHeight) / 2 + 'px';
-
-            this.videoElement.style.width = containerWidth + 'px';
-            this.videoElement.style.marginLeft = '0px';
-        }
-
-    }
-
-    _computeFov = () => {
-
-        if (['stopping', 'stopped'].includes(this.state)) {
-            return;
-        }
-
-        this.fov = calcDisplayedFov(
-            this.videoContainer,
-            this.videoElement,
-            this._hardwareVerticalFov
-        );
-
-        this.emit('fov.changed', this.fov);
-    }
-
-    get currentImage() {
-
-        if (this._state !== 'started') {
-            Logger.warn('Trying to access image but video is not started');
-            return Promise.resolve(null);
-        }
-
-        const { videoWidth: width, videoHeight: height } = this.videoElement;
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        // context.filter = 'grayscale(100%)';
-
-        canvas.width = width;
-        canvas.height = height;
-
-        context?.drawImage(this.videoElement, 0, 0, width, height);
-        return Promise.resolve(canvas);
-    }
-}
-
-export default Camera;

package/src/CameraUtils.ts

@@ -1,175 +0,0 @@
-export type IntrinsicParams = [number, number, number, number, number, number, number, number, number];
-export type DistortionsParams = [number, number, number, number, number];
-
-export type Calibration = {
-    intrinsic: IntrinsicParams,
-    distortions?: DistortionsParams
-}
-
-export function convertFov(angle: number, aspectRatio: number) {
-    return 2 * Math.atan(Math.tan((angle / 180 * Math.PI) / 2) * aspectRatio) * 180 / Math.PI;
-}
-
-export function calcDisplayedFov(
-    videoContainer: HTMLElement,
-    videoElement: HTMLVideoElement,
-    hardwareVerticalFov: number
-) {
-
-    const sourceWidth = videoElement.videoWidth;
-    const sourceHeight = videoElement.videoHeight;
-
-    if (!sourceWidth || !sourceHeight) {
-        return null;
-    }
-
-    const containerWidth = videoContainer.offsetWidth;
-    const containerHeight = videoContainer.offsetHeight;
-
-    const sourceAspect = sourceWidth / sourceHeight;
-    const screenAspect = containerWidth / containerHeight;
-
-    let fovV = hardwareVerticalFov;
-    let fovH = convertFov(fovV, sourceAspect);
-
-    if (screenAspect < sourceAspect) {
-        fovH = convertFov(fovV, screenAspect);
-    } else {
-        fovV = convertFov(fovH, 1 / screenAspect);
-    }
-
-    return {
-        vertical: fovV,
-        horizontal: fovH
-    };
-}
-
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
- */
-export function canvasToBase64(canvas: HTMLCanvasElement, type = 'image/png', quality: any = null) {
-    return canvas
-        .toDataURL(type, quality)
-        .substring(('data:' + type + ';base64,').length);
-}
-
-export function base64ToCanvas(base64: string, type = 'image/png') {
-    if (type !== 'image/png') {
-        throw new Error('Only image/png is supported');
-    }
-    const canvas = document.createElement('canvas');
-    const image = new Image();
-    image.src = 'data:image/png;base64,' + base64;
-    canvas.width = image.width;
-    canvas.height = image.height;
-    canvas.getContext('2d')?.drawImage(image, 0, 0);
-    return canvas;
-}
-
-/**
- * Creates a pinhole camera from dimensions and a field of view
- * Distortions are not considered
- *
- * @param {number} width the camera width
- * @param {number} height the camera height
- * @param {number} fovOfWidth the field of view along the width axis in radians
- * @returns {object} the calibration matrix
- */
-export function createCameraCalibrationFromWidthHeightFov(
-    width: number,
-    height: number,
-    fovOfWidth: number
-): Calibration {
-
-    const fovOfHeight = 2 * Math.atan(height * Math.tan(fovOfWidth / 2) / width);
-
-    const fx = width / (2 * Math.tan(0.5 * fovOfWidth));
-    const fy = height / (2 * Math.tan(0.5 * fovOfHeight));
-    const cx = width / 2;
-    const cy = height / 2;
-
-    return {
-        intrinsic: [fx, 0, cx, 0, fy, cy, 0, 0, 1],
-        distortions: [0, 0, 0, 0, 0]
-    };
-}
-
-/**
- * @param {HTMLCanvasElement} imageCanvas
- */
-export function convertToGrayscale(imageCanvas: HTMLCanvasElement) {
-    const ctx = imageCanvas.getContext('2d');
-    if (!ctx) return;
-
-    const imgData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
-    const pixels = imgData.data;
-    for (let i = 0; i < pixels.length; i += 4) {
-
-        const lightness = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
-        pixels[i] = lightness;
-        pixels[i + 1] = lightness;
-        pixels[i + 2] = lightness;
-    }
-    ctx.putImageData(imgData, 0, 0);
-}
-
-/**
- * Reduce image size and keep aspect ratio
- */
-export function reduceImageSize(
-    imageCanvas: HTMLCanvasElement,
-    maxWidth: number,
-    maxHeight?: number
-) {
-
-    let newWidth = imageCanvas.width;
-    let newHeight = imageCanvas.height;
-
-    if (typeof maxHeight !== 'undefined') {
-        if (newWidth > maxWidth) {
-            newHeight *= maxWidth / newWidth;
-            newWidth = maxWidth;
-        }
-
-        if (newHeight > maxHeight) {
-            newWidth *= maxHeight / newHeight;
-            newHeight = maxHeight;
-        }
-    } else {
-        const aspectRatio = imageCanvas.width / imageCanvas.height;
-        if (imageCanvas.width > imageCanvas.height) {
-            if (imageCanvas.width > maxWidth) {
-                newWidth = maxWidth;
-                newHeight = maxWidth / aspectRatio;
-            }
-        } else if (imageCanvas.height > maxWidth) {
-            newHeight = maxWidth;
-            newWidth = maxWidth * aspectRatio;
-        }
-    }
-
-
-    if (newWidth === imageCanvas.width
-        && newHeight === imageCanvas.height) {
-        return imageCanvas;
-    }
-
-    const newCanvas = document.createElement('canvas');
-    const newContext = newCanvas.getContext('2d');
-
-    newCanvas.width = newWidth;
-    newCanvas.height = newHeight;
-    newContext?.drawImage(imageCanvas, 0, 0, newCanvas.width, newCanvas.height);
-
-    return newCanvas;
-}
-
-export function htmlImageToCanvas(image: HTMLImageElement) {
-    const canvas = document.createElement('canvas');
-    canvas.width = image.width;
-    canvas.height = image.height;
-    const context = canvas.getContext('2d');
-    context?.scale(canvas.width / image.width, canvas.height / image.height);
-    context?.drawImage(image, 0, 0);
-    return canvas;
-}

package/src/QrCodeScanner.ts

@@ -1,90 +0,0 @@
-import EventEmitter from 'events';
-import QrScanner from 'qr-scanner';
-
-import Camera from './Camera.js';
-
-declare interface QrCodeScanner {
-    on(event: 'scan', listener: (result: string) => void): this;
-    off(event: 'scan', listener: (result: string) => void): this;
-}
-
-class QrCodeScanner extends EventEmitter {
-    _height?: number;
-    _width?: number;
-    _camera: Camera;
-    _videoElement: HTMLVideoElement;
-    _canvas: HTMLCanvasElement;
-    _ctx: CanvasRenderingContext2D;
-    _intervalTime: number | null = null;
-    _intervalTick?: number;
-    _isStarted = false;
-
-
-    constructor(camera: Camera) {
-        super();
-
-        this._camera = camera;
-        this._videoElement = camera.videoElement;
-
-
-        this._canvas = document.createElement('canvas');
-        this._ctx = this._canvas.getContext('2d') as CanvasRenderingContext2D;
-
-        this._camera.on('started', () => this._tryStart());
-        this._camera.on('stopped', () => this._stop());
-    }
-
-    start(intervalTime = 500) {
-        this._intervalTime = intervalTime;
-
-        if (this._isStarted) {
-            return;
-        }
-        this._isStarted = true;
-
-        this._tryStart();
-    }
-
-    stop() {
-        this._isStarted = false;
-        this._stop();
-    }
-
-    _tryStart() {
-
-        if (!this._isStarted || this._camera.state !== 'started') {
-            return;
-        }
-
-        this._width = this._videoElement.videoWidth;
-        this._height = this._videoElement.videoHeight;
-        this._canvas.width = this._width;
-        this._canvas.height = this._height;
-
-        this._intervalTick = window.setInterval(() => this._onFrame(), this._intervalTime as number);
-    }
-
-    _stop() {
-        clearInterval(this._intervalTick);
-    }
-
-    _onFrame() {
-
-        if (!this._width || !this._height) {
-            return;
-        }
-
-        this._ctx.drawImage(this._videoElement, 0, 0, this._width, this._height);
-        const scanResultPromise = QrScanner.scanImage(this._canvas, {
-            returnDetailedScanResult: true,
-        });
-
-        scanResultPromise.then((result) => {
-            this.emit('scan', result.data);
-        }).catch((e) => {
-            // do nothing
-        });
-    }
-}
-
-export default QrCodeScanner;

package/src/SharedCameras.ts

@@ -1,39 +0,0 @@
-import EventEmitter from 'events';
-
-import Camera from './Camera.js';
-
-declare interface SharedCameras {
-    on(event: 'added', listener: (obj: CameraContainer) => void): this;
-    on(event: 'removed', listener: (obj: { camera: Camera }) => void): this;
-}
-
-type CameraContainer = { container: HTMLElement, camera: Camera };
-
-class SharedCameras extends EventEmitter {
-
-    _list: CameraContainer[] = [];
-
-    _add(camera: Camera, container: HTMLElement) {
-        const obj = {
-            camera,
-            container
-        };
-        this._list.push(obj);
-        this.emit('added', obj);
-    }
-
-    _remove(camera: Camera) {
-        this._list = this._list.filter(({ camera: _camera }) => _camera !== camera);
-        this.emit('removed', { camera });
-    }
-
-    get list() {
-        return this._list;
-    }
-
-    getCameraByContainer(container: HTMLElement) {
-        return this._list.find(obj => obj.container === container)?.camera || null;
-    }
-}
-
-export default new SharedCameras();

package/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig.json"
-}