npm - @wemap/camera - Versions diffs - 3.2.3 - Mend

@wemap/camera 3.2.3

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 (7) hide show

package/debug/dist/camera-logger.html +79 -0
package/debug/dist/index.html +15 -0
package/debug/dist/simple.html +109 -0
package/index.js +3 -0
package/package.json +31 -0
package/src/Camera.js +220 -0
package/src/CameraLogger.js +78 -0

package/debug/dist/camera-logger.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!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 {
+            height: 100%;
+        }
+        body {
+            height: 100%;
+            margin: 0px;
+        }
+        #camera-container {
+            width: 100%;
+            height: 100%;
+        }
+        #logger {
+            background: #ffffffaa;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            z-index: 2;
+            margin: 5px;
+            padding-left: 10px;
+            padding-right: 10px;
+            min-width: 100px;
+        }
+    </style>
+</head>
+<body>
+    <div id="camera-container"></div>
+    <div id="logger">
+        <div class="title">Logger</div>
+        <button id="start">Start</button>
+        <button id="stop" disabled>Stop</button>
+    </div>
+    <script>
+        /* global Camera */
+        const cameraContainer = document.getElementById('camera-container');
+        const camera = new Camera(cameraContainer);
+        const SERVER_URL = 'https://localhost:9002';
+        const startButton = document.getElementById('start');
+        const stopButton = document.getElementById('stop');
+        startButton.addEventListener('click', () => {
+            document.dispatchEvent(new CustomEvent('providers.logger.start', {detail: {
+                serverUrl: SERVER_URL,
+                logsSize: 300
+            }}));
+            camera.start();
+            startButton.disabled = true;
+            stopButton.disabled = false;
+        });
+        stopButton.addEventListener('click', () => {
+            document.dispatchEvent(new Event('providers.logger.stop'));
+            camera.stop();
+            startButton.disabled = false;
+            stopButton.disabled = true;
+        });
+    </script>
+</body>
+</html>

package/debug/dist/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <title>Camera debug</title>
+</head>
+<body>
+    <a href="./simple.html">Simple</a><br />
+    <a href="./camera-logger.html">Camera-logger</a>
+</body>
+</html>

package/debug/dist/simple.html ADDED Viewed

@@ -0,0 +1,109 @@
+<!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 {
+            height: 100%;
+        }
+        body {
+            height: 100%;
+            margin: 0px;
+        }
+        #camera-container {
+            background-color: red;
+        }
+        #css-switcher {
+            position: absolute;
+            top: 0px;
+        }
+        #camera-toggle {
+            position: absolute;
+            top: 30px;
+        }
+        #fov-container {
+            position: absolute;
+            bottom: 0px;
+            margin: 5px;
+            background-color: white;
+        }
+        #camera-container.classic {
+            width: 800px;
+            height: 600px;
+        }
+        #camera-container.full {
+            width: 100%;
+            height: 100%;
+        }
+        #camera-container.wide {
+            width: 800px;
+            height: 200px;
+        }
+        #camera-container.slim {
+            width: 200px;
+            height: 600px;
+        }
+    </style>
+</head>
+<body>
+    <div id="camera-container" class="classic"></div>
+    <button id="css-switcher">Switch Camera size</button>
+    <button id="camera-toggle">Start</button>
+    <div id="fov-container"></div>
+    <script>
+        /* global Camera */
+        const cameraContainer = document.getElementById('camera-container');
+        const cameraToggle = document.getElementById('camera-toggle');
+        const fovContainer = document.getElementById('fov-container');
+        const camera = new Camera(cameraContainer);
+        camera.on('fov.changed', ({
+            vertical, horizontal
+        }) => (fovContainer.innerHTML = `FOV: ${vertical.toFixed(2)}, ${horizontal.toFixed(2)}`));
+        const format = ['classic', 'full', 'wide', 'slim'];
+        document.getElementById('css-switcher').addEventListener('click', () => {
+            cameraContainer.className = format[(format.indexOf(cameraContainer.className) + 1) % format.length];
+            camera.notifyContainerSizeChanged();
+        });
+        cameraToggle.addEventListener('click', () => {
+            cameraToggle.disabled = true;
+            if (cameraToggle.innerHTML === 'Start') {
+                camera.start().then(() => {
+                    cameraToggle.disabled = false;
+                });
+                cameraToggle.innerHTML = 'Stop';
+            } else {
+                camera.stop().then(() => {
+                    cameraToggle.disabled = false;
+                });
+                fovContainer.innerHTML = '';
+                cameraToggle.innerHTML = 'Start';
+            }
+        });
+    </script>
+</body>
+</html>

package/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import Camera from './src/Camera.js';
+export { Camera };

package/package.json ADDED Viewed

@@ -0,0 +1,31 @@
+{
+    "author": "Wemap",
+    "contributors": [
+        "Thibaud Michel <thibaud@getwemap.com>"
+    ],
+    "description": "Wemap Camera utils package",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/wemap/wemap-modules-js.git",
+        "directory": "packages/camera"
+    },
+    "name": "@wemap/camera",
+    "version": "3.2.3",
+    "bugs": {
+        "url": "https://github.com/wemap/wemap-modules-js/issues"
+    },
+    "homepage": "https://github.com/wemap/wemap-modules-js#readme",
+    "keywords": [
+        "utils",
+        "camera",
+        "wemap"
+    ],
+    "license": "ISC",
+    "dependencies": {
+        "@wemap/navigation-logger": "^3.2.3",
+        "events": "^3.1.0"
+    },
+    "type": "module",
+    "gitHead": "f7075f59fc3227c7f4cb7f1fa8cc69b98705364e"
+}

package/src/Camera.js ADDED Viewed

@@ -0,0 +1,220 @@
+import EventEmitter from 'events';
+import CameraLogger from './CameraLogger.js';
+const GENERIC_HARDWARE_VERTICAL_FOV = 60;
+const parameters = {
+    sourceWidth: 640,
+    sourceHeight: 480
+};
+const userMediaConstraints = {
+    audio: false,
+    video: {
+        facingMode: 'environment',
+        width: { ideal: parameters.sourceWidth },
+        height: { ideal: parameters.sourceHeight }
+    }
+};
+// 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.
+class Camera extends EventEmitter {
+    videoContainer;
+    videoElement;
+    fov = null;
+    _videoPlaying = false;
+    _hardwareVerticalFov = GENERIC_HARDWARE_VERTICAL_FOV;
+    _resizeOnWindowChange;
+    _cameraLogger;
+    constructor(container, resizeOnWindowChange = false) {
+        super();
+        this.videoContainer = container;
+        this._resizeOnWindowChange = resizeOnWindowChange;
+        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);
+        this._cameraLogger = new CameraLogger();
+    }
+    async start() {
+        if (this.videoPlaying) {
+            throw new Error('Camera is already started');
+        }
+        this.videoPlaying = true;
+        await Camera.checkAvailability();
+        const stream = await navigator.mediaDevices.getUserMedia(userMediaConstraints);
+        this.videoElement.srcObject = stream;
+        this.videoElement.oncanplaythrough = () => this.videoElement.play();
+        this.videoStream = stream;
+        await new Promise(resolve => {
+            this.videoElement.onloadedmetadata = resolve;
+        });
+        this._resizeElement();
+        this._computeFov();
+        if (this._resizeOnWindowChange) {
+            window.addEventListener('resize', this.notifyContainerSizeChanged);
+        }
+        this._cameraLogger.attachStream(this.videoStream);
+    }
+    async stop() {
+        if (!this.videoPlaying) {
+            throw new Error('Camera is not started yet');
+        }
+        this._cameraLogger.detachStream();
+        if (this.videoStream && this.videoStream.stop) {
+            // compatibility with old JS API
+            this.videoStream.stop();
+        } else if (this.videoStream) {
+            // new JS API
+            this.videoStream.getVideoTracks().forEach(track => track.stop());
+        }
+        this.videoStream = null;
+        this.videoElement.srcObject = null;
+        if (this._resizeOnWindowChange) {
+            window.removeEventListener('resize', this.notifyContainerSizeChanged);
+        }
+        this.videoPlaying = false;
+    }
+    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(userMediaConstraints);
+            if (stream.stop) {
+                stream.stop();
+            } else {
+                stream.getVideoTracks().forEach(track => track.stop());
+            }
+        }
+    }
+    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 = () => {
+        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;
+        let fovV = this._hardwareVerticalFov;
+        let fovH = Camera.convertFov(fovV, sourceAspect);
+        if (screenAspect < sourceAspect) {
+            fovH = Camera.convertFov(fovV, screenAspect);
+        } else {
+            fovV = Camera.convertFov(fovH, 1 / screenAspect);
+        }
+        this.fov = {
+            vertical: fovV,
+            horizontal: fovH
+        };
+        this.emit('fov.changed', this.fov);
+    }
+    static convertFov(angle, aspectRatio) {
+        return 2 * Math.atan(Math.tan((angle / 180 * Math.PI) / 2) * aspectRatio) * 180 / Math.PI;
+    }
+}
+export default Camera;

package/src/CameraLogger.js ADDED Viewed

@@ -0,0 +1,78 @@
+import { NavigationLogger } from '@wemap/navigation-logger';
+class CameraLogger {
+    _videoStream = null;
+    _loggerParams = null;
+    constructor() {
+        this._loggerParams = NavigationLogger.params;
+        NavigationLogger.on('started', ({ params }) => {
+            this._loggerParams = params;
+            if (this._videoStream !== null) {
+                this._start();
+            }
+        });
+        NavigationLogger.on('stopped', () => {
+            this._loggerParams = null;
+            this._stop();
+        });
+    }
+    attachStream(videoStream) {
+        this._videoStream = videoStream;
+        if (NavigationLogger.isRecording) {
+            this._start();
+        }
+    }
+    detachStream() {
+        this._videoStream = null;
+        this._stop();
+    }
+    _start() {
+        if (!('MediaRecorder' in window)) {
+            return;
+        }
+        if (this.mediaRecorder) {
+            throw new Error('CameraLogger is already recording');
+        }
+        const options = {
+            mimeType: 'video/webm;codecs=vp8',
+            bitsPerSecond: this._loggerParams.videoBitrate
+        };
+        this.videoBlobs = [];
+        // 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) {
+                NavigationLogger.sendVideoChunck(event.data);
+            }
+        };
+        this.mediaRecorder.start(this._loggerParams.flushInterval);
+    }
+    _stop() {
+        if (!this.mediaRecorder) {
+            return;
+        }
+        this.mediaRecorder.stop();
+        this.mediaRecorder = null;
+    }
+}
+export default CameraLogger;