@capgo/camera-preview 7.3.12 → 7.4.0-beta.10

package/dist/plugin.js

@@ -1,10 +1,22 @@
 var capacitorCapacitorCameraView = (function (exports, core) {
     'use strict';
 
+    exports.DeviceType = void 0;
+    (function (DeviceType) {
+        DeviceType["ULTRA_WIDE"] = "ultraWide";
+        DeviceType["WIDE_ANGLE"] = "wideAngle";
+        DeviceType["TELEPHOTO"] = "telephoto";
+        DeviceType["TRUE_DEPTH"] = "trueDepth";
+        DeviceType["DUAL"] = "dual";
+        DeviceType["DUAL_WIDE"] = "dualWide";
+        DeviceType["TRIPLE"] = "triple";
+    })(exports.DeviceType || (exports.DeviceType = {}));
+
     const CameraPreview = core.registerPlugin("CameraPreview", {
         web: () => Promise.resolve().then(function () { return web; }).then((m) => new m.CameraPreviewWeb()),
     });
 
+    const DEFAULT_VIDEO_ID = "capgo_video";
     class CameraPreviewWeb extends core.WebPlugin {
         constructor() {
             super();
@@ -13,80 +25,101 @@ var capacitorCapacitorCameraView = (function (exports, core) {
              *  used in capture
              */
             this.isBackCamera = false;
+            this.currentDeviceId = null;
+            this.videoElement = null;
+            this.isStarted = false;
         }
         async getSupportedPictureSizes() {
             throw new Error("getSupportedPictureSizes not supported under the web platform");
         }
         async start(options) {
-            var _a;
-            await navigator.mediaDevices
-                .getUserMedia({
-                audio: !options.disableAudio,
-                video: true,
-            })
-                .then((stream) => {
-                // Stop any existing stream so we can request media with different constraints based on user input
-                stream.getTracks().forEach((track) => track.stop());
-            })
-                .catch((error) => {
-                Promise.reject(error);
-            });
-            const video = document.getElementById("video");
+            if (options.aspectRatio && (options.width || options.height)) {
+                throw new Error("Cannot set both aspectRatio and size (width/height). Use setPreviewSize after start.");
+            }
+            if (this.isStarted) {
+                throw new Error("camera already started");
+            }
+            this.isBackCamera = true;
+            this.isStarted = false;
             const parent = document.getElementById((options === null || options === void 0 ? void 0 : options.parent) || "");
-            if (!video) {
-                const videoElement = document.createElement("video");
-                videoElement.id = "video";
-                videoElement.setAttribute("class", (options === null || options === void 0 ? void 0 : options.className) || "");
-                // Don't flip video feed if camera is rear facing
-                if (options.position !== "rear") {
-                    videoElement.setAttribute("style", "-webkit-transform: scaleX(-1); transform: scaleX(-1);");
-                }
-                const userAgent = navigator.userAgent.toLowerCase();
-                const isSafari = userAgent.includes("safari") && !userAgent.includes("chrome");
-                // Safari on iOS needs to have the autoplay, muted and playsinline attributes set for video.play() to be successful
-                // Without these attributes videoElement.play() will throw a NotAllowedError
-                // https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
-                if (isSafari) {
-                    videoElement.setAttribute("autoplay", "true");
-                    videoElement.setAttribute("muted", "true");
-                    videoElement.setAttribute("playsinline", "true");
-                }
-                parent === null || parent === void 0 ? void 0 : parent.appendChild(videoElement);
-                if ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia) {
-                    const constraints = {
-                        video: {
-                            width: { ideal: options.width },
-                            height: { ideal: options.height },
-                        },
-                    };
-                    if (options.position === "rear") {
-                        constraints.video.facingMode =
-                            "environment";
-                        this.isBackCamera = true;
-                    }
-                    else {
-                        this.isBackCamera = false;
-                    }
-                    const self = this;
-                    await navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
-                        if (document.getElementById("video")) {
-                            // video.src = window.URL.createObjectURL(stream);
-                            videoElement.srcObject = stream;
-                            videoElement.play();
-                            Promise.resolve({});
-                        }
-                        else {
-                            self.stopStream(stream);
-                            Promise.reject(new Error("camera already stopped"));
-                        }
-                    }, (err) => {
-                        Promise.reject(new Error(err));
-                    });
+            const gridMode = (options === null || options === void 0 ? void 0 : options.gridMode) || "none";
+            if (options.position) {
+                this.isBackCamera = options.position === "rear";
+            }
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (video) {
+                video.remove();
+            }
+            const container = options.parent ? document.getElementById(options.parent) : document.body;
+            if (!container) {
+                throw new Error("container not found");
+            }
+            this.videoElement = document.createElement("video");
+            this.videoElement.id = DEFAULT_VIDEO_ID;
+            this.videoElement.className = options.className || "";
+            this.videoElement.playsInline = true;
+            this.videoElement.muted = true;
+            this.videoElement.autoplay = true;
+            container.appendChild(this.videoElement);
+            if (options.toBack) {
+                this.videoElement.style.zIndex = "-1";
+            }
+            if (options.width) {
+                this.videoElement.width = options.width;
+            }
+            if (options.height) {
+                this.videoElement.height = options.height;
+            }
+            if (options.x) {
+                this.videoElement.style.left = `${options.x}px`;
+            }
+            // Create and add grid overlay if needed
+            if (gridMode !== "none") {
+                const gridOverlay = this.createGridOverlay(gridMode);
+                gridOverlay.id = "camera-grid-overlay";
+                parent === null || parent === void 0 ? void 0 : parent.appendChild(gridOverlay);
+            }
+            if (options.y) {
+                this.videoElement.style.top = `${options.y}px`;
+            }
+            if (options.aspectRatio) {
+                const [widthRatio, heightRatio] = options.aspectRatio.split(':').map(Number);
+                const ratio = widthRatio / heightRatio;
+                if (options.width) {
+                    this.videoElement.height = options.width / ratio;
+                }
+                else if (options.height) {
+                    this.videoElement.width = options.height * ratio;
                 }
             }
             else {
-                Promise.reject(new Error("camera already started"));
+                this.videoElement.style.objectFit = 'cover';
+            }
+            const constraints = {
+                video: {
+                    width: { ideal: this.videoElement.width || 640 },
+                    height: { ideal: this.videoElement.height || window.innerHeight },
+                    facingMode: this.isBackCamera ? "environment" : "user",
+                },
+            };
+            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            if (!stream) {
+                throw new Error("could not acquire stream");
+            }
+            if (!this.videoElement) {
+                throw new Error("video element not found");
+            }
+            this.videoElement.srcObject = stream;
+            if (!this.isBackCamera) {
+                this.videoElement.style.transform = "scaleX(-1)";
             }
+            this.isStarted = true;
+            return {
+                width: this.videoElement.width,
+                height: this.videoElement.height,
+                x: this.videoElement.getBoundingClientRect().x,
+                y: this.videoElement.getBoundingClientRect().y,
+            };
         }
         stopStream(stream) {
             if (stream) {
@@ -96,16 +129,20 @@ var capacitorCapacitorCameraView = (function (exports, core) {
             }
         }
         async stop() {
-            const video = document.getElementById("video");
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
             if (video) {
                 video.pause();
                 this.stopStream(video.srcObject);
                 video.remove();
+                this.isStarted = false;
             }
+            // Remove grid overlay if it exists
+            const gridOverlay = document.getElementById("camera-grid-overlay");
+            gridOverlay === null || gridOverlay === void 0 ? void 0 : gridOverlay.remove();
         }
         async capture(options) {
             return new Promise((resolve, reject) => {
-                const video = document.getElementById("video");
+                const video = document.getElementById(DEFAULT_VIDEO_ID);
                 if (!(video === null || video === void 0 ? void 0 : video.srcObject)) {
                     reject(new Error("camera is not running"));
                     return;
@@ -123,6 +160,8 @@ var capacitorCapacitorCameraView = (function (exports, core) {
                         context === null || context === void 0 ? void 0 : context.scale(-1, 1);
                     }
                     context === null || context === void 0 ? void 0 : context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+                    if (options.saveToGallery) ;
+                    if (options.withExifLocation) ;
                     if ((options.format || "jpeg") === "jpeg") {
                         base64EncodedImage = canvas
                             .toDataURL("image/jpeg", (options.quality || 85) / 100.0)
@@ -136,6 +175,7 @@ var capacitorCapacitorCameraView = (function (exports, core) {
                 }
                 resolve({
                     value: base64EncodedImage,
+                    exif: {},
                 });
             });
         }
@@ -159,13 +199,403 @@ var capacitorCapacitorCameraView = (function (exports, core) {
             throw new Error(`setFlashMode not supported under the web platform${_options}`);
         }
         async flip() {
-            throw new Error("flip not supported under the web platform");
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (!(video === null || video === void 0 ? void 0 : video.srcObject)) {
+                throw new Error("camera is not running");
+            }
+            // Stop current stream
+            this.stopStream(video.srcObject);
+            // Toggle camera position
+            this.isBackCamera = !this.isBackCamera;
+            // Get new constraints
+            const constraints = {
+                video: {
+                    facingMode: this.isBackCamera ? "environment" : "user",
+                    width: { ideal: video.videoWidth || 640 },
+                    height: { ideal: video.videoHeight || 480 },
+                },
+            };
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia(constraints);
+                video.srcObject = stream;
+                // Update current device ID from the new stream
+                const videoTrack = stream.getVideoTracks()[0];
+                if (videoTrack) {
+                    this.currentDeviceId = videoTrack.getSettings().deviceId || null;
+                }
+                // Update video transform based on camera
+                if (this.isBackCamera) {
+                    video.style.transform = "none";
+                    video.style.webkitTransform = "none";
+                }
+                else {
+                    video.style.transform = "scaleX(-1)";
+                    video.style.webkitTransform = "scaleX(-1)";
+                }
+                await video.play();
+            }
+            catch (error) {
+                throw new Error(`Failed to flip camera: ${error}`);
+            }
         }
         async setOpacity(_options) {
-            const video = document.getElementById("video");
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
             if (!!video && !!_options.opacity)
                 video.style.setProperty("opacity", _options.opacity.toString());
         }
+        async isRunning() {
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            return { isRunning: !!video && !!video.srcObject };
+        }
+        async getAvailableDevices() {
+            var _a;
+            if (!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.enumerateDevices)) {
+                throw new Error("getAvailableDevices not supported under the web platform");
+            }
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const videoDevices = devices.filter(device => device.kind === 'videoinput');
+            // Group devices by position (front/back)
+            const frontDevices = [];
+            const backDevices = [];
+            videoDevices.forEach((device, index) => {
+                const label = device.label || `Camera ${index + 1}`;
+                const labelLower = label.toLowerCase();
+                // Determine device type based on label
+                let deviceType = exports.DeviceType.WIDE_ANGLE;
+                let baseZoomRatio = 1.0;
+                if (labelLower.includes('ultra') || labelLower.includes('0.5')) {
+                    deviceType = exports.DeviceType.ULTRA_WIDE;
+                    baseZoomRatio = 0.5;
+                }
+                else if (labelLower.includes('telephoto') || labelLower.includes('tele') || labelLower.includes('2x') || labelLower.includes('3x')) {
+                    deviceType = exports.DeviceType.TELEPHOTO;
+                    baseZoomRatio = 2.0;
+                }
+                else if (labelLower.includes('depth') || labelLower.includes('truedepth')) {
+                    deviceType = exports.DeviceType.TRUE_DEPTH;
+                    baseZoomRatio = 1.0;
+                }
+                const lensInfo = {
+                    deviceId: device.deviceId,
+                    label,
+                    deviceType,
+                    focalLength: 4.25,
+                    baseZoomRatio,
+                    minZoom: 1.0,
+                    maxZoom: 1.0
+                };
+                // Determine position and add to appropriate array
+                if (labelLower.includes('back') || labelLower.includes('rear')) {
+                    backDevices.push(lensInfo);
+                }
+                else {
+                    frontDevices.push(lensInfo);
+                }
+            });
+            const result = [];
+            if (frontDevices.length > 0) {
+                result.push({
+                    deviceId: frontDevices[0].deviceId,
+                    label: "Front Camera",
+                    position: "front",
+                    lenses: frontDevices,
+                    isLogical: false,
+                    minZoom: Math.min(...frontDevices.map(d => d.minZoom)),
+                    maxZoom: Math.max(...frontDevices.map(d => d.maxZoom))
+                });
+            }
+            if (backDevices.length > 0) {
+                result.push({
+                    deviceId: backDevices[0].deviceId,
+                    label: "Back Camera",
+                    position: "rear",
+                    lenses: backDevices,
+                    isLogical: false,
+                    minZoom: Math.min(...backDevices.map(d => d.minZoom)),
+                    maxZoom: Math.max(...backDevices.map(d => d.maxZoom))
+                });
+            }
+            return { devices: result };
+        }
+        async getZoom() {
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (!(video === null || video === void 0 ? void 0 : video.srcObject)) {
+                throw new Error("camera is not running");
+            }
+            const stream = video.srcObject;
+            const videoTrack = stream.getVideoTracks()[0];
+            if (!videoTrack) {
+                throw new Error("no video track found");
+            }
+            const capabilities = videoTrack.getCapabilities();
+            const settings = videoTrack.getSettings();
+            if (!capabilities.zoom) {
+                throw new Error("zoom not supported by this device");
+            }
+            // Get current device info to determine lens type
+            let deviceType = exports.DeviceType.WIDE_ANGLE;
+            let baseZoomRatio = 1.0;
+            if (this.currentDeviceId) {
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                const device = devices.find(d => d.deviceId === this.currentDeviceId);
+                if (device) {
+                    const labelLower = device.label.toLowerCase();
+                    if (labelLower.includes('ultra') || labelLower.includes('0.5')) {
+                        deviceType = exports.DeviceType.ULTRA_WIDE;
+                        baseZoomRatio = 0.5;
+                    }
+                    else if (labelLower.includes('telephoto') || labelLower.includes('tele') || labelLower.includes('2x') || labelLower.includes('3x')) {
+                        deviceType = exports.DeviceType.TELEPHOTO;
+                        baseZoomRatio = 2.0;
+                    }
+                    else if (labelLower.includes('depth') || labelLower.includes('truedepth')) {
+                        deviceType = exports.DeviceType.TRUE_DEPTH;
+                        baseZoomRatio = 1.0;
+                    }
+                }
+            }
+            const currentZoom = settings.zoom || 1;
+            const lensInfo = {
+                focalLength: 4.25,
+                deviceType,
+                baseZoomRatio,
+                digitalZoom: currentZoom / baseZoomRatio
+            };
+            return {
+                min: capabilities.zoom.min || 1,
+                max: capabilities.zoom.max || 1,
+                current: currentZoom,
+                lens: lensInfo,
+            };
+        }
+        async setZoom(options) {
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (!(video === null || video === void 0 ? void 0 : video.srcObject)) {
+                throw new Error("camera is not running");
+            }
+            const stream = video.srcObject;
+            const videoTrack = stream.getVideoTracks()[0];
+            if (!videoTrack) {
+                throw new Error("no video track found");
+            }
+            const capabilities = videoTrack.getCapabilities();
+            if (!capabilities.zoom) {
+                throw new Error("zoom not supported by this device");
+            }
+            const zoomLevel = Math.max(capabilities.zoom.min || 1, Math.min(capabilities.zoom.max || 1, options.level));
+            try {
+                await videoTrack.applyConstraints({
+                    advanced: [{ zoom: zoomLevel }]
+                });
+            }
+            catch (error) {
+                throw new Error(`Failed to set zoom: ${error}`);
+            }
+        }
+        async getFlashMode() {
+            throw new Error("getFlashMode not supported under the web platform");
+        }
+        async getDeviceId() {
+            return { deviceId: this.currentDeviceId || "" };
+        }
+        async setDeviceId(options) {
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (!(video === null || video === void 0 ? void 0 : video.srcObject)) {
+                throw new Error("camera is not running");
+            }
+            // Stop current stream
+            this.stopStream(video.srcObject);
+            // Update current device ID
+            this.currentDeviceId = options.deviceId;
+            // Get new constraints with specific device ID
+            const constraints = {
+                video: {
+                    deviceId: { exact: options.deviceId },
+                    width: { ideal: video.videoWidth || 640 },
+                    height: { ideal: video.videoHeight || 480 },
+                },
+            };
+            try {
+                // Try to determine camera position from device
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                const device = devices.find(d => d.deviceId === options.deviceId);
+                this.isBackCamera = (device === null || device === void 0 ? void 0 : device.label.toLowerCase().includes('back')) || (device === null || device === void 0 ? void 0 : device.label.toLowerCase().includes('rear')) || false;
+                const stream = await navigator.mediaDevices.getUserMedia(constraints);
+                video.srcObject = stream;
+                // Update video transform based on camera
+                if (this.isBackCamera) {
+                    video.style.transform = "none";
+                    video.style.webkitTransform = "none";
+                }
+                else {
+                    video.style.transform = "scaleX(-1)";
+                    video.style.webkitTransform = "scaleX(-1)";
+                }
+                await video.play();
+            }
+            catch (error) {
+                throw new Error(`Failed to swap to device ${options.deviceId}: ${error}`);
+            }
+        }
+        async getAspectRatio() {
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (!video) {
+                throw new Error("camera is not running");
+            }
+            const width = video.offsetWidth;
+            const height = video.offsetHeight;
+            if (width && height) {
+                const ratio = width / height;
+                // Check for portrait camera ratios: 4:3 -> 3:4, 16:9 -> 9:16
+                if (Math.abs(ratio - (3 / 4)) < 0.01) {
+                    return { aspectRatio: '4:3' };
+                }
+                if (Math.abs(ratio - (9 / 16)) < 0.01) {
+                    return { aspectRatio: '16:9' };
+                }
+            }
+            // Default to 4:3 if no specific aspect ratio is matched
+            return { aspectRatio: '4:3' };
+        }
+        async setAspectRatio(options) {
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (!video) {
+                throw new Error("camera is not running");
+            }
+            if (options.aspectRatio) {
+                const [widthRatio, heightRatio] = options.aspectRatio.split(':').map(Number);
+                // For camera, use portrait orientation: 4:3 becomes 3:4, 16:9 becomes 9:16
+                const ratio = heightRatio / widthRatio;
+                // Get current position and size
+                const rect = video.getBoundingClientRect();
+                const currentWidth = rect.width;
+                const currentHeight = rect.height;
+                const currentRatio = currentWidth / currentHeight;
+                let newWidth;
+                let newHeight;
+                if (currentRatio > ratio) {
+                    // Width is larger, fit by height and center horizontally
+                    newWidth = currentHeight * ratio;
+                    newHeight = currentHeight;
+                }
+                else {
+                    // Height is larger, fit by width and center vertically
+                    newWidth = currentWidth;
+                    newHeight = currentWidth / ratio;
+                }
+                // Calculate position
+                let x, y;
+                if (options.x !== undefined && options.y !== undefined) {
+                    // Use provided coordinates, ensuring they stay within screen boundaries
+                    x = Math.max(0, Math.min(options.x, window.innerWidth - newWidth));
+                    y = Math.max(0, Math.min(options.y, window.innerHeight - newHeight));
+                }
+                else {
+                    // Auto-center the view
+                    x = (window.innerWidth - newWidth) / 2;
+                    y = (window.innerHeight - newHeight) / 2;
+                }
+                video.style.width = `${newWidth}px`;
+                video.style.height = `${newHeight}px`;
+                video.style.left = `${x}px`;
+                video.style.top = `${y}px`;
+                video.style.position = 'absolute';
+                return {
+                    width: Math.round(newWidth),
+                    height: Math.round(newHeight),
+                    x: Math.round(x),
+                    y: Math.round(y)
+                };
+            }
+            else {
+                video.style.objectFit = 'cover';
+                const rect = video.getBoundingClientRect();
+                return {
+                    width: Math.round(rect.width),
+                    height: Math.round(rect.height),
+                    x: Math.round(rect.left),
+                    y: Math.round(rect.top)
+                };
+            }
+        }
+        createGridOverlay(gridMode) {
+            const overlay = document.createElement("div");
+            overlay.style.position = "absolute";
+            overlay.style.top = "0";
+            overlay.style.left = "0";
+            overlay.style.width = "100%";
+            overlay.style.height = "100%";
+            overlay.style.pointerEvents = "none";
+            overlay.style.zIndex = "10";
+            const divisions = gridMode === "3x3" ? 3 : 4;
+            // Create SVG for grid lines
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.style.width = "100%";
+            svg.style.height = "100%";
+            svg.style.position = "absolute";
+            svg.style.top = "0";
+            svg.style.left = "0";
+            // Create grid lines
+            for (let i = 1; i < divisions; i++) {
+                // Vertical lines
+                const verticalLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                verticalLine.setAttribute("x1", `${(i / divisions) * 100}%`);
+                verticalLine.setAttribute("y1", "0%");
+                verticalLine.setAttribute("x2", `${(i / divisions) * 100}%`);
+                verticalLine.setAttribute("y2", "100%");
+                verticalLine.setAttribute("stroke", "rgba(255, 255, 255, 0.5)");
+                verticalLine.setAttribute("stroke-width", "1");
+                svg.appendChild(verticalLine);
+                // Horizontal lines
+                const horizontalLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                horizontalLine.setAttribute("x1", "0%");
+                horizontalLine.setAttribute("y1", `${(i / divisions) * 100}%`);
+                horizontalLine.setAttribute("x2", "100%");
+                horizontalLine.setAttribute("y2", `${(i / divisions) * 100}%`);
+                horizontalLine.setAttribute("stroke", "rgba(255, 255, 255, 0.5)");
+                horizontalLine.setAttribute("stroke-width", "1");
+                svg.appendChild(horizontalLine);
+            }
+            overlay.appendChild(svg);
+            return overlay;
+        }
+        async setGridMode(options) {
+            // Web implementation of grid mode would need to be implemented
+            // For now, just resolve as a no-op
+            console.warn(`Grid mode '${options.gridMode}' is not yet implemented for web platform`);
+        }
+        async getGridMode() {
+            // Web implementation - default to none
+            return { gridMode: 'none' };
+        }
+        async getPreviewSize() {
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (!video) {
+                throw new Error("camera is not running");
+            }
+            return {
+                x: video.offsetLeft,
+                y: video.offsetTop,
+                width: video.width,
+                height: video.height
+            };
+        }
+        async setPreviewSize(options) {
+            const video = document.getElementById(DEFAULT_VIDEO_ID);
+            if (!video) {
+                throw new Error("camera is not running");
+            }
+            video.style.left = `${options.x}px`;
+            video.style.top = `${options.y}px`;
+            video.width = options.width;
+            video.height = options.height;
+            return {
+                width: options.width,
+                height: options.height,
+                x: options.x,
+                y: options.y
+            };
+        }
     }
 
     var web = /*#__PURE__*/Object.freeze({