@capgo/camera-preview 7.4.0-beta.9 → 7.4.0

package/dist/esm/web.js

@@ -12,6 +12,72 @@ export class CameraPreviewWeb extends WebPlugin {
         this.currentDeviceId = null;
         this.videoElement = null;
         this.isStarted = false;
+        this.orientationListenerBound = false;
+    }
+    getCurrentOrientation() {
+        var _a, _b;
+        try {
+            const so = screen.orientation;
+            const type = (so === null || so === void 0 ? void 0 : so.type) || (so === null || so === void 0 ? void 0 : so.mozOrientation) || (so === null || so === void 0 ? void 0 : so.msOrientation);
+            if (typeof type === "string") {
+                if (type.includes("portrait-primary"))
+                    return "portrait";
+                if (type.includes("portrait-secondary"))
+                    return "portrait-upside-down";
+                if (type.includes("landscape-primary"))
+                    return "landscape-left";
+                if (type.includes("landscape-secondary"))
+                    return "landscape-right";
+                if (type.includes("landscape"))
+                    return "landscape";
+                if (type.includes("portrait"))
+                    return "portrait";
+            }
+            const angle = window.orientation;
+            if (typeof angle === "number") {
+                if (angle === 0)
+                    return "portrait";
+                if (angle === 180)
+                    return "portrait-upside-down";
+                if (angle === 90)
+                    return "landscape-right";
+                if (angle === -90)
+                    return "landscape-left";
+                if (angle === 270)
+                    return "landscape-left";
+            }
+            if ((_a = window.matchMedia("(orientation: portrait)")) === null || _a === void 0 ? void 0 : _a.matches) {
+                return "portrait";
+            }
+            if ((_b = window.matchMedia("(orientation: landscape)")) === null || _b === void 0 ? void 0 : _b.matches) {
+                return "landscape";
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return "unknown";
+    }
+    ensureOrientationListener() {
+        if (this.orientationListenerBound)
+            return;
+        const emit = () => {
+            this.notifyListeners("orientationChange", {
+                orientation: this.getCurrentOrientation(),
+            });
+        };
+        window.addEventListener("orientationchange", emit);
+        window.addEventListener("resize", emit);
+        this.orientationListenerBound = true;
+    }
+    async getOrientation() {
+        return { orientation: this.getCurrentOrientation() };
+    }
+    getSafeAreaInsets() {
+        throw new Error("Method not implemented.");
+    }
+    async getZoomButtonValues() {
+        throw new Error("getZoomButtonValues not supported under the web platform");
     }
     async getSupportedPictureSizes() {
         throw new Error("getSupportedPictureSizes not supported under the web platform");
@@ -27,6 +93,7 @@ export class CameraPreviewWeb extends WebPlugin {
         this.isStarted = false;
         const parent = document.getElementById((options === null || options === void 0 ? void 0 : options.parent) || "");
         const gridMode = (options === null || options === void 0 ? void 0 : options.gridMode) || "none";
+        const positioning = (options === null || options === void 0 ? void 0 : options.positioning) || "top";
         if (options.position) {
             this.isBackCamera = options.position === "rear";
         }
@@ -34,7 +101,9 @@ export class CameraPreviewWeb extends WebPlugin {
         if (video) {
             video.remove();
         }
-        const container = options.parent ? document.getElementById(options.parent) : document.body;
+        const container = options.parent
+            ? document.getElementById(options.parent)
+            : document.body;
         if (!container) {
             throw new Error("container not found");
         }
@@ -44,45 +113,57 @@ export class CameraPreviewWeb extends WebPlugin {
         this.videoElement.playsInline = true;
         this.videoElement.muted = true;
         this.videoElement.autoplay = true;
+        // Remove objectFit as we'll match camera's native aspect ratio
+        this.videoElement.style.backgroundColor = "transparent";
+        // Reset any default margins that might interfere
+        this.videoElement.style.margin = "0";
+        this.videoElement.style.padding = "0";
         container.appendChild(this.videoElement);
         if (options.toBack) {
             this.videoElement.style.zIndex = "-1";
         }
+        // Default to 4:3 if no aspect ratio or size specified
+        const useDefaultAspectRatio = !options.aspectRatio && !options.width && !options.height;
+        const effectiveAspectRatio = options.aspectRatio || (useDefaultAspectRatio ? "4:3" : null);
         if (options.width) {
             this.videoElement.width = options.width;
+            this.videoElement.style.width = `${options.width}px`;
         }
         if (options.height) {
             this.videoElement.height = options.height;
-        }
-        if (options.x) {
+            this.videoElement.style.height = `${options.height}px`;
+        }
+        // Handle positioning - center if x or y not provided
+        const centerX = options.x === undefined;
+        const centerY = options.y === undefined;
+        // Always set position to absolute for proper positioning
+        this.videoElement.style.position = "absolute";
+        console.log("Initial positioning flags:", {
+            centerX,
+            centerY,
+            x: options.x,
+            y: options.y,
+        });
+        if (options.x !== undefined) {
             this.videoElement.style.left = `${options.x}px`;
         }
+        if (options.y !== undefined) {
+            this.videoElement.style.top = `${options.y}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 {
-            this.videoElement.style.objectFit = 'cover';
-        }
+        // Aspect ratio handling is now done after getting camera stream
+        // Store centering flags for later use
+        const needsCenterX = centerX;
+        const needsCenterY = centerY;
+        console.log("Centering flags stored:", { needsCenterX, needsCenterY });
+        // First get the camera stream with basic constraints
         const constraints = {
             video: {
-                width: { ideal: this.videoElement.width || 640 },
-                height: { ideal: this.videoElement.height || window.innerHeight },
                 facingMode: this.isBackCamera ? "environment" : "user",
             },
         };
@@ -93,16 +174,226 @@ export class CameraPreviewWeb extends WebPlugin {
         if (!this.videoElement) {
             throw new Error("video element not found");
         }
+        // Get the actual camera dimensions from the video track
+        const videoTrack = stream.getVideoTracks()[0];
+        const settings = videoTrack.getSettings();
+        const cameraWidth = settings.width || 640;
+        const cameraHeight = settings.height || 480;
+        const cameraAspectRatio = cameraWidth / cameraHeight;
+        console.log("Camera native dimensions:", {
+            width: cameraWidth,
+            height: cameraHeight,
+            aspectRatio: cameraAspectRatio,
+        });
+        console.log("Container dimensions:", {
+            width: container.offsetWidth,
+            height: container.offsetHeight,
+            id: container.id,
+        });
+        // Now adjust video element size based on camera's native aspect ratio
+        if (!options.width && !options.height && !options.aspectRatio) {
+            // No size specified, fit camera view within container bounds
+            const containerWidth = container.offsetWidth || window.innerWidth;
+            const containerHeight = container.offsetHeight || window.innerHeight;
+            // Calculate dimensions that fit within container while maintaining camera aspect ratio
+            let targetWidth, targetHeight;
+            // Try fitting to container width first
+            targetWidth = containerWidth;
+            targetHeight = targetWidth / cameraAspectRatio;
+            // If height exceeds container, fit to height instead
+            if (targetHeight > containerHeight) {
+                targetHeight = containerHeight;
+                targetWidth = targetHeight * cameraAspectRatio;
+            }
+            console.log("Video element dimensions:", {
+                width: targetWidth,
+                height: targetHeight,
+                container: { width: containerWidth, height: containerHeight },
+            });
+            this.videoElement.width = targetWidth;
+            this.videoElement.height = targetHeight;
+            this.videoElement.style.width = `${targetWidth}px`;
+            this.videoElement.style.height = `${targetHeight}px`;
+            // Center the video element within its parent container
+            if (needsCenterX || options.x === undefined) {
+                const x = Math.round((containerWidth - targetWidth) / 2);
+                this.videoElement.style.left = `${x}px`;
+            }
+            if (needsCenterY || options.y === undefined) {
+                let y;
+                switch (positioning) {
+                    case "top":
+                        y = 0;
+                        break;
+                    case "bottom":
+                        y = window.innerHeight - targetHeight;
+                        break;
+                    case "center":
+                    default:
+                        y = Math.round((window.innerHeight - targetHeight) / 2);
+                        break;
+                }
+                this.videoElement.style.setProperty("top", `${y}px`, "important");
+                // Force a style recalculation
+                this.videoElement.offsetHeight;
+                console.log("Positioning video:", {
+                    positioning,
+                    viewportHeight: window.innerHeight,
+                    targetHeight,
+                    calculatedY: y,
+                    actualTop: this.videoElement.style.top,
+                    position: this.videoElement.style.position,
+                });
+            }
+        }
+        else if (effectiveAspectRatio && !options.width && !options.height) {
+            // Aspect ratio specified but no size
+            const [widthRatio, heightRatio] = effectiveAspectRatio
+                .split(":")
+                .map(Number);
+            const targetRatio = widthRatio / heightRatio;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            let targetWidth, targetHeight;
+            // Try fitting to viewport width first
+            targetWidth = viewportWidth;
+            targetHeight = targetWidth / targetRatio;
+            // If height exceeds viewport, fit to height instead
+            if (targetHeight > viewportHeight) {
+                targetHeight = viewportHeight;
+                targetWidth = targetHeight * targetRatio;
+            }
+            this.videoElement.width = targetWidth;
+            this.videoElement.height = targetHeight;
+            this.videoElement.style.width = `${targetWidth}px`;
+            this.videoElement.style.height = `${targetHeight}px`;
+            // Center the video element within its parent container
+            if (needsCenterX || options.x === undefined) {
+                const parentWidth = container.offsetWidth || viewportWidth;
+                const x = Math.round((parentWidth - targetWidth) / 2);
+                this.videoElement.style.left = `${x}px`;
+            }
+            if (needsCenterY || options.y === undefined) {
+                const parentHeight = container.offsetHeight || viewportHeight;
+                let y;
+                switch (positioning) {
+                    case "top":
+                        y = 0;
+                        break;
+                    case "bottom":
+                        y = parentHeight - targetHeight;
+                        break;
+                    case "center":
+                    default:
+                        y = Math.round((parentHeight - targetHeight) / 2);
+                        break;
+                }
+                this.videoElement.style.top = `${y}px`;
+            }
+        }
         this.videoElement.srcObject = stream;
         if (!this.isBackCamera) {
             this.videoElement.style.transform = "scaleX(-1)";
         }
+        // Set initial zoom level if specified and supported
+        if (options.initialZoomLevel !== undefined &&
+            options.initialZoomLevel !== 1.0) {
+            // videoTrack already declared above
+            if (videoTrack) {
+                const capabilities = videoTrack.getCapabilities();
+                if (capabilities.zoom) {
+                    const zoomLevel = options.initialZoomLevel;
+                    const minZoom = capabilities.zoom.min || 1;
+                    const maxZoom = capabilities.zoom.max || 1;
+                    if (zoomLevel < minZoom || zoomLevel > maxZoom) {
+                        stream.getTracks().forEach((track) => track.stop());
+                        throw new Error(`Initial zoom level ${zoomLevel} is not available. Valid range is ${minZoom} to ${maxZoom}`);
+                    }
+                    try {
+                        await videoTrack.applyConstraints({
+                            advanced: [{ zoom: zoomLevel }],
+                        });
+                    }
+                    catch (error) {
+                        console.warn(`Failed to set initial zoom level: ${error}`);
+                        // Don't throw, just continue without zoom
+                    }
+                }
+            }
+        }
         this.isStarted = true;
+        this.ensureOrientationListener();
+        // Wait for video to be ready and get actual dimensions
+        await new Promise((resolve) => {
+            const videoEl = this.videoElement;
+            if (!videoEl) {
+                throw new Error("video element not found");
+            }
+            if (videoEl.readyState >= 2) {
+                resolve();
+            }
+            else {
+                videoEl.addEventListener("loadeddata", () => resolve(), {
+                    once: true,
+                });
+            }
+        });
+        // Ensure centering is applied after DOM updates
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        console.log("About to re-center, flags:", { needsCenterX, needsCenterY });
+        // Re-apply centering with correct parent dimensions
+        if (needsCenterX) {
+            const parentWidth = container.offsetWidth;
+            const x = Math.round((parentWidth - this.videoElement.offsetWidth) / 2);
+            this.videoElement.style.left = `${x}px`;
+            console.log("Re-centering X:", {
+                parentWidth,
+                videoWidth: this.videoElement.offsetWidth,
+                x,
+            });
+        }
+        if (needsCenterY) {
+            let y;
+            switch (positioning) {
+                case "top":
+                    y = 0;
+                    break;
+                case "bottom":
+                    y = window.innerHeight - this.videoElement.offsetHeight;
+                    break;
+                case "center":
+                default:
+                    y = Math.round((window.innerHeight - this.videoElement.offsetHeight) / 2);
+                    break;
+            }
+            this.videoElement.style.setProperty("top", `${y}px`, "important");
+            console.log("Re-positioning Y:", {
+                positioning,
+                viewportHeight: window.innerHeight,
+                videoHeight: this.videoElement.offsetHeight,
+                y,
+                position: this.videoElement.style.position,
+                top: this.videoElement.style.top,
+            });
+        }
+        // Get the actual rendered dimensions after video is loaded
+        const rect = this.videoElement.getBoundingClientRect();
+        const computedStyle = window.getComputedStyle(this.videoElement);
+        console.log("Final video element state:", {
+            rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+            style: {
+                position: computedStyle.position,
+                left: computedStyle.left,
+                top: computedStyle.top,
+                width: computedStyle.width,
+                height: computedStyle.height,
+            },
+        });
         return {
-            width: this.videoElement.width,
-            height: this.videoElement.height,
-            x: this.videoElement.getBoundingClientRect().x,
-            y: this.videoElement.getBoundingClientRect().y,
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+            x: Math.round(rect.x),
+            y: Math.round(rect.y),
         };
     }
     stopStream(stream) {
@@ -136,14 +427,57 @@ export class CameraPreviewWeb extends WebPlugin {
             if (video && video.videoWidth > 0 && video.videoHeight > 0) {
                 const canvas = document.createElement("canvas");
                 const context = canvas.getContext("2d");
-                canvas.width = video.videoWidth;
-                canvas.height = video.videoHeight;
+                // Calculate capture dimensions
+                let captureWidth = video.videoWidth;
+                let captureHeight = video.videoHeight;
+                let sourceX = 0;
+                let sourceY = 0;
+                // Check for conflicting parameters
+                if (options.aspectRatio && (options.width || options.height)) {
+                    reject(new Error("Cannot set both aspectRatio and size (width/height). Use setPreviewSize after start."));
+                    return;
+                }
+                // Handle aspect ratio if no width/height specified
+                if (!options.width && !options.height && options.aspectRatio) {
+                    const [widthRatio, heightRatio] = options.aspectRatio
+                        .split(":")
+                        .map(Number);
+                    if (widthRatio && heightRatio) {
+                        // For capture in portrait orientation, swap the aspect ratio (16:9 becomes 9:16)
+                        const isPortrait = video.videoHeight > video.videoWidth;
+                        const targetAspectRatio = isPortrait
+                            ? heightRatio / widthRatio
+                            : widthRatio / heightRatio;
+                        const videoAspectRatio = video.videoWidth / video.videoHeight;
+                        if (videoAspectRatio > targetAspectRatio) {
+                            // Video is wider than target - crop sides
+                            captureWidth = video.videoHeight * targetAspectRatio;
+                            captureHeight = video.videoHeight;
+                            sourceX = (video.videoWidth - captureWidth) / 2;
+                        }
+                        else {
+                            // Video is taller than target - crop top/bottom
+                            captureWidth = video.videoWidth;
+                            captureHeight = video.videoWidth / targetAspectRatio;
+                            sourceY = (video.videoHeight - captureHeight) / 2;
+                        }
+                    }
+                }
+                else if (options.width || options.height) {
+                    // If width or height is specified, use them
+                    if (options.width)
+                        captureWidth = options.width;
+                    if (options.height)
+                        captureHeight = options.height;
+                }
+                canvas.width = captureWidth;
+                canvas.height = captureHeight;
                 // flip horizontally back camera isn't used
                 if (!this.isBackCamera) {
-                    context === null || context === void 0 ? void 0 : context.translate(video.videoWidth, 0);
+                    context === null || context === void 0 ? void 0 : context.translate(captureWidth, 0);
                     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);
+                context === null || context === void 0 ? void 0 : context.drawImage(video, sourceX, sourceY, captureWidth, captureHeight, 0, 0, captureWidth, captureHeight);
                 if (options.saveToGallery) {
                     // saveToGallery is not supported on web
                 }
@@ -241,7 +575,7 @@ export class CameraPreviewWeb extends WebPlugin {
             throw new Error("getAvailableDevices not supported under the web platform");
         }
         const devices = await navigator.mediaDevices.enumerateDevices();
-        const videoDevices = devices.filter(device => device.kind === 'videoinput');
+        const videoDevices = devices.filter((device) => device.kind === "videoinput");
         // Group devices by position (front/back)
         const frontDevices = [];
         const backDevices = [];
@@ -251,15 +585,19 @@ export class CameraPreviewWeb extends WebPlugin {
             // Determine device type based on label
             let deviceType = DeviceType.WIDE_ANGLE;
             let baseZoomRatio = 1.0;
-            if (labelLower.includes('ultra') || labelLower.includes('0.5')) {
+            if (labelLower.includes("ultra") || labelLower.includes("0.5")) {
                 deviceType = DeviceType.ULTRA_WIDE;
                 baseZoomRatio = 0.5;
             }
-            else if (labelLower.includes('telephoto') || labelLower.includes('tele') || labelLower.includes('2x') || labelLower.includes('3x')) {
+            else if (labelLower.includes("telephoto") ||
+                labelLower.includes("tele") ||
+                labelLower.includes("2x") ||
+                labelLower.includes("3x")) {
                 deviceType = DeviceType.TELEPHOTO;
                 baseZoomRatio = 2.0;
             }
-            else if (labelLower.includes('depth') || labelLower.includes('truedepth')) {
+            else if (labelLower.includes("depth") ||
+                labelLower.includes("truedepth")) {
                 deviceType = DeviceType.TRUE_DEPTH;
                 baseZoomRatio = 1.0;
             }
@@ -270,10 +608,10 @@ export class CameraPreviewWeb extends WebPlugin {
                 focalLength: 4.25,
                 baseZoomRatio,
                 minZoom: 1.0,
-                maxZoom: 1.0
+                maxZoom: 1.0,
             };
             // Determine position and add to appropriate array
-            if (labelLower.includes('back') || labelLower.includes('rear')) {
+            if (labelLower.includes("back") || labelLower.includes("rear")) {
                 backDevices.push(lensInfo);
             }
             else {
@@ -288,8 +626,8 @@ export class CameraPreviewWeb extends WebPlugin {
                 position: "front",
                 lenses: frontDevices,
                 isLogical: false,
-                minZoom: Math.min(...frontDevices.map(d => d.minZoom)),
-                maxZoom: Math.max(...frontDevices.map(d => d.maxZoom))
+                minZoom: Math.min(...frontDevices.map((d) => d.minZoom)),
+                maxZoom: Math.max(...frontDevices.map((d) => d.maxZoom)),
             });
         }
         if (backDevices.length > 0) {
@@ -299,8 +637,8 @@ export class CameraPreviewWeb extends WebPlugin {
                 position: "rear",
                 lenses: backDevices,
                 isLogical: false,
-                minZoom: Math.min(...backDevices.map(d => d.minZoom)),
-                maxZoom: Math.max(...backDevices.map(d => d.maxZoom))
+                minZoom: Math.min(...backDevices.map((d) => d.minZoom)),
+                maxZoom: Math.max(...backDevices.map((d) => d.maxZoom)),
             });
         }
         return { devices: result };
@@ -325,18 +663,22 @@ export class CameraPreviewWeb extends WebPlugin {
         let baseZoomRatio = 1.0;
         if (this.currentDeviceId) {
             const devices = await navigator.mediaDevices.enumerateDevices();
-            const device = devices.find(d => d.deviceId === this.currentDeviceId);
+            const device = devices.find((d) => d.deviceId === this.currentDeviceId);
             if (device) {
                 const labelLower = device.label.toLowerCase();
-                if (labelLower.includes('ultra') || labelLower.includes('0.5')) {
+                if (labelLower.includes("ultra") || labelLower.includes("0.5")) {
                     deviceType = DeviceType.ULTRA_WIDE;
                     baseZoomRatio = 0.5;
                 }
-                else if (labelLower.includes('telephoto') || labelLower.includes('tele') || labelLower.includes('2x') || labelLower.includes('3x')) {
+                else if (labelLower.includes("telephoto") ||
+                    labelLower.includes("tele") ||
+                    labelLower.includes("2x") ||
+                    labelLower.includes("3x")) {
                     deviceType = DeviceType.TELEPHOTO;
                     baseZoomRatio = 2.0;
                 }
-                else if (labelLower.includes('depth') || labelLower.includes('truedepth')) {
+                else if (labelLower.includes("depth") ||
+                    labelLower.includes("truedepth")) {
                     deviceType = DeviceType.TRUE_DEPTH;
                     baseZoomRatio = 1.0;
                 }
@@ -347,7 +689,7 @@ export class CameraPreviewWeb extends WebPlugin {
             focalLength: 4.25,
             deviceType,
             baseZoomRatio,
-            digitalZoom: currentZoom / baseZoomRatio
+            digitalZoom: currentZoom / baseZoomRatio,
         };
         return {
             min: capabilities.zoom.min || 1,
@@ -371,9 +713,10 @@ export class CameraPreviewWeb extends WebPlugin {
             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));
+        // Note: autoFocus is not supported on web platform
         try {
             await videoTrack.applyConstraints({
-                advanced: [{ zoom: zoomLevel }]
+                advanced: [{ zoom: zoomLevel }],
             });
         }
         catch (error) {
@@ -406,8 +749,11 @@ export class CameraPreviewWeb extends WebPlugin {
         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 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
@@ -435,15 +781,15 @@ export class CameraPreviewWeb extends WebPlugin {
         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 - 3 / 4) < 0.01) {
+                return { aspectRatio: "4:3" };
             }
-            if (Math.abs(ratio - (9 / 16)) < 0.01) {
-                return { aspectRatio: '16:9' };
+            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' };
+        return { aspectRatio: "4:3" };
     }
     async setAspectRatio(options) {
         const video = document.getElementById(DEFAULT_VIDEO_ID);
@@ -451,7 +797,9 @@ export class CameraPreviewWeb extends WebPlugin {
             throw new Error("camera is not running");
         }
         if (options.aspectRatio) {
-            const [widthRatio, heightRatio] = options.aspectRatio.split(':').map(Number);
+            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
@@ -487,22 +835,26 @@ export class CameraPreviewWeb extends WebPlugin {
             video.style.height = `${newHeight}px`;
             video.style.left = `${x}px`;
             video.style.top = `${y}px`;
-            video.style.position = 'absolute';
+            video.style.position = "absolute";
+            const offsetX = newWidth / 8;
+            const offsetY = newHeight / 8;
             return {
                 width: Math.round(newWidth),
                 height: Math.round(newHeight),
-                x: Math.round(x),
-                y: Math.round(y)
+                x: Math.round(x + offsetX),
+                y: Math.round(y + offsetY),
             };
         }
         else {
-            video.style.objectFit = 'cover';
+            video.style.objectFit = "cover";
             const rect = video.getBoundingClientRect();
+            const offsetX = rect.width / 8;
+            const offsetY = rect.height / 8;
             return {
                 width: Math.round(rect.width),
                 height: Math.round(rect.height),
-                x: Math.round(rect.left),
-                y: Math.round(rect.top)
+                x: Math.round(rect.left + offsetX),
+                y: Math.round(rect.top + offsetY),
             };
         }
     }
@@ -554,18 +906,20 @@ export class CameraPreviewWeb extends WebPlugin {
     }
     async getGridMode() {
         // Web implementation - default to none
-        return { gridMode: 'none' };
+        return { gridMode: "none" };
     }
     async getPreviewSize() {
         const video = document.getElementById(DEFAULT_VIDEO_ID);
         if (!video) {
             throw new Error("camera is not running");
         }
+        const offsetX = video.width / 8;
+        const offsetY = video.height / 8;
         return {
-            x: video.offsetLeft,
-            y: video.offsetTop,
+            x: video.offsetLeft + offsetX,
+            y: video.offsetTop + offsetY,
             width: video.width,
-            height: video.height
+            height: video.height,
         };
     }
     async setPreviewSize(options) {
@@ -577,12 +931,56 @@ export class CameraPreviewWeb extends WebPlugin {
         video.style.top = `${options.y}px`;
         video.width = options.width;
         video.height = options.height;
+        const offsetX = options.width / 8;
+        const offsetY = options.height / 8;
         return {
             width: options.width,
             height: options.height,
-            x: options.x,
-            y: options.y
+            x: options.x + offsetX,
+            y: options.y + offsetY,
         };
     }
+    async setFocus(options) {
+        // Reject if values are outside 0-1 range
+        if (options.x < 0 || options.x > 1 || options.y < 0 || options.y > 1) {
+            throw new Error("Focus coordinates must be between 0 and 1");
+        }
+        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();
+        // Check if focusing is supported
+        if (capabilities.focusMode) {
+            try {
+                // Web API supports focus mode settings but not coordinate-based focus
+                // Setting to manual mode allows for coordinate focus if supported
+                await videoTrack.applyConstraints({
+                    advanced: [
+                        {
+                            focusMode: "manual",
+                            focusDistance: 0.5, // Mid-range focus as fallback
+                        },
+                    ],
+                });
+            }
+            catch (error) {
+                console.warn(`setFocus is not fully supported on this device: ${error}. Focus coordinates (${options.x}, ${options.y}) were provided but cannot be applied.`);
+            }
+        }
+        else {
+            console.warn("Focus control is not supported on this device. Focus coordinates were provided but cannot be applied.");
+        }
+    }
+    async deleteFile(_options) {
+        // Mark parameter as intentionally unused to satisfy linter
+        void _options;
+        throw new Error("deleteFile not supported under the web platform");
+    }
 }
 //# sourceMappingURL=web.js.map