@octane-xplat/camera 0.0.0-nightly.g2e22171

package/platforms/macos/src/XplatPhotoCaptureSheet.swift

@@ -0,0 +1,192 @@
+import AppKit
+import AVFoundation
+
+/// App-owned still-photo UI. No microphone input, movie output or Photos writes.
+@objc(XplatPhotoCaptureSheet)
+public final class XplatPhotoCaptureSheet: NSObject, NSWindowDelegate {
+	private let host = XplatCameraHost()
+	private let lifecycle = PhotoCaptureLifecycle()
+	private var sheet: NSWindow?
+	private weak var parent: NSWindow?
+	private var reply: ((String?) -> Void)?
+	private var timeout: DispatchWorkItem?
+	private var closeObserver: NSObjectProtocol?
+	private var preview: NSView?
+	private var captureButton: NSButton?
+	private var statusLabel: NSTextField?
+	private var options: NSDictionary = [:]
+	private var disposed = false
+	var operationTimeout: TimeInterval = 15
+
+	@objc public func permissionStatus() -> NSString { host.permissionStatus("camera") }
+
+	@objc public func present(_ options: NSDictionary, reply: @escaping (String?) -> Void) {
+		guard let parent = NSApp.keyWindow ?? NSApp.mainWindow else { reply(nil); return }
+		presentOnWindow(parent, options: options, reply: reply)
+	}
+
+	// Explicit host window also allows deterministic AppKit lifecycle checks.
+	func presentOnWindow(_ parent: NSWindow, options: NSDictionary, reply: @escaping (String?) -> Void) {
+		guard !disposed, sheet == nil, parent.attachedSheet == nil,
+			!(options["saveToGallery"] as? Bool ?? false)
+		else { reply(nil); return }
+		self.options = options
+		self.reply = reply
+		self.parent = parent
+		let sheet = NSWindow(contentRect: NSRect(x: 0, y: 0, width: 640, height: 480),
+			styleMask: [.titled, .closable], backing: .buffered, defer: false)
+		sheet.title = "Take a photo"
+		sheet.delegate = self
+		let content = NSView(frame: NSRect(x: 0, y: 0, width: 640, height: 480))
+		let preview = NSView(frame: NSRect(x: 16, y: 80, width: 608, height: 384))
+		preview.wantsLayer = true
+		preview.layer?.backgroundColor = NSColor.black.cgColor
+		content.addSubview(preview)
+		let status = NSTextField(labelWithString: "Choose Capture to start the camera.")
+		status.frame = NSRect(x: 16, y: 48, width: 440, height: 22)
+		content.addSubview(status)
+		let cancel = NSButton(title: "Cancel", target: self, action: #selector(cancelPhoto))
+		cancel.keyEquivalent = "\u{1b}"
+		cancel.frame = NSRect(x: 432, y: 12, width: 92, height: 32)
+		content.addSubview(cancel)
+		let capture = NSButton(title: "Capture", target: self, action: #selector(capturePhoto))
+		capture.keyEquivalent = "\r"
+		capture.frame = NSRect(x: 528, y: 12, width: 96, height: 32)
+		content.addSubview(capture)
+		sheet.contentView = content
+		self.sheet = sheet
+		self.preview = preview
+		statusLabel = status
+		captureButton = capture
+		closeObserver = NotificationCenter.default.addObserver(forName: NSWindow.willCloseNotification,
+			object: parent, queue: .main) { [weak self] _ in self?.complete(nil) }
+		parent.beginSheet(sheet) { [weak self] _ in self?.complete(nil) }
+	}
+
+	private func deadline(_ token: Int) {
+		timeout?.cancel()
+		let work = DispatchWorkItem { [weak self] in
+			guard let self, lifecycle.accepts(token) else { return }
+			complete(nil)
+		}
+		timeout = work
+		DispatchQueue.main.asyncAfter(deadline: .now() + operationTimeout, execute: work)
+	}
+
+	@objc private func capturePhoto() {
+		if let token = lifecycle.prepare() {
+			captureButton?.isEnabled = false
+			statusLabel?.stringValue = "Starting camera…"
+			deadline(token)
+			// Authorization happens only after the user presses Capture.
+			host.requestPermission("camera") { [weak self] status in
+				guard let self, lifecycle.accepts(token) else { return }
+				guard status == "granted" else { complete(nil); return }
+				DispatchQueue.global(qos: .userInitiated).async { [self] in
+					let failure = self.host.configure(["photo": true, "audio": false])
+					DispatchQueue.main.async { [self] in
+						guard self.lifecycle.accepts(token) else { return }
+						guard failure == nil, let preview = self.preview else { self.complete(nil); return }
+						self.host.installObserver { [weak self] message in
+							guard let self, lifecycle.accepts(token),
+								let data = message.data(using: .utf8),
+								let event = try? JSONSerialization.jsonObject(with: data) as? [String: Any]
+							else { return }
+							if event["type"] as? String == "previewReady", event["ready"] as? Bool == true,
+								lifecycle.ready(token) {
+								timeout?.cancel()
+								captureButton?.isEnabled = true
+								statusLabel?.stringValue = "Frame your photo, then choose Capture."
+							} else if event["type"] as? String == "interrupted" ||
+								(event["type"] as? String == "availability" && event["available"] as? Bool == false) {
+								complete(nil)
+							}
+						}
+						if self.host.attachPreview(preview) != nil { self.complete(nil) }
+					}
+				}
+			}
+			return
+		}
+		guard let token = lifecycle.capture() else { return }
+		captureButton?.isEnabled = false
+		statusLabel?.stringValue = "Taking photo…"
+		deadline(token)
+		if host.capturePhoto({ [weak self] data in
+			guard let self, lifecycle.accepts(token) else { return }
+			guard let data, let result = persist(data as Data) else { complete(nil); return }
+			complete(result)
+		}) != nil { complete(nil) }
+	}
+
+	private func persist(_ data: Data) -> String? {
+		guard let source = NSBitmapImageRep(data: data) else { return nil }
+		let width = (options["width"] as? NSNumber)?.doubleValue ?? Double(source.pixelsWide)
+		let height = (options["height"] as? NSNumber)?.doubleValue ?? Double(source.pixelsHigh)
+		guard width.isFinite, height.isFinite, width >= 1, height >= 1, width <= 16384, height <= 16384, width * height <= 64_000_000 else { return nil }
+		let keepAspectRatio = options["keepAspectRatio"] as? Bool ?? true
+		let scale = min(width / Double(source.pixelsWide), height / Double(source.pixelsHigh), 1)
+		let size = NSSize(width: keepAspectRatio ? Double(source.pixelsWide) * scale : width,
+			height: keepAspectRatio ? Double(source.pixelsHigh) * scale : height)
+		guard let bitmap = NSBitmapImageRep(bitmapDataPlanes: nil, pixelsWide: Int(size.width),
+			pixelsHigh: Int(size.height), bitsPerSample: 8, samplesPerPixel: 4, hasAlpha: true,
+			isPlanar: false, colorSpaceName: .deviceRGB, bytesPerRow: 0, bitsPerPixel: 0),
+			let context = NSGraphicsContext(bitmapImageRep: bitmap) else { return nil }
+		NSGraphicsContext.saveGraphicsState()
+		NSGraphicsContext.current = context
+		let image = NSImage(size: NSSize(width: source.pixelsWide, height: source.pixelsHigh))
+		image.addRepresentation(source)
+		image.draw(in: NSRect(origin: .zero, size: size))
+		NSGraphicsContext.restoreGraphicsState()
+		guard let jpeg = bitmap.representation(using: .jpeg, properties: [.compressionFactor: 0.9]) else { return nil }
+		let name = "octane-capture-\(UUID().uuidString).jpg"
+		let url = FileManager.default.temporaryDirectory.appendingPathComponent(name)
+		do {
+			let payload: [String: String] = ["name": name, "uri": url.path,
+				"dataUrl": "data:image/jpeg;base64," + jpeg.base64EncodedString()]
+			let message = try JSONSerialization.data(withJSONObject: payload)
+			try jpeg.write(to: url, options: .atomic)
+			return String(data: message, encoding: .utf8)
+		} catch {
+			try? FileManager.default.removeItem(at: url)
+			return nil
+		}
+	}
+
+	@objc private func cancelPhoto() { complete(nil) }
+	public func windowShouldClose(_ sender: NSWindow) -> Bool { complete(nil); return false }
+
+	private func complete(_ result: String?) {
+		guard lifecycle.finish() else { return }
+		let callback = reply
+		reply = nil
+		dispose()
+		callback?(result)
+	}
+
+	@objc public func discard(_ path: String) {
+		let url = URL(fileURLWithPath: path).standardizedFileURL
+		guard url.deletingLastPathComponent() == FileManager.default.temporaryDirectory.standardizedFileURL,
+			url.lastPathComponent.hasPrefix("octane-capture-") else { return }
+		try? FileManager.default.removeItem(at: url)
+	}
+
+	@objc public func dispose() {
+		guard !disposed else { return }
+		disposed = true
+		timeout?.cancel()
+		timeout = nil
+		if let closeObserver { NotificationCenter.default.removeObserver(closeObserver) }
+		closeObserver = nil
+		host.dispose()
+		if let sheet { parent?.endSheet(sheet); sheet.orderOut(nil) }
+		sheet = nil
+		preview = nil
+		captureButton = nil
+		statusLabel = nil
+		// Disposal is also a cancellation, including an external owner teardown.
+		if lifecycle.finish() { let callback = reply; reply = nil; callback?(nil) }
+	}
+
+	deinit { dispose() }
+}

package/src/CameraView.android.tsrx

@@ -0,0 +1,150 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
+import { Application, View } from '@nativescript/core'
+import { registerElement } from '@nativescript-community/octane'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import type { CameraViewProps } from './props'
+import { attachSessionPreview } from './session'
+import { cameraHardwarePresent, ensureCameraPermission } from './camera-permission.mobile'
+import { applyEscapeProps, layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from './layout-child'
+import { observePreviewTap } from './preview-tap'
+import { java } from '@octane-xplat/platform/android'
+
+
+class CameraPreview extends View {
+	createNativeView() {
+		const nativeClass = (globalThis as any).com.octanexplat.camera.CameraPreviewView
+		return new nativeClass(this._context)
+	}
+}
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		camerapreview: Attributes<typeof CameraPreview>
+	}
+}
+
+registerElement('camerapreview', CameraPreview)
+
+/** Live Android preview backed by CameraX. */
+export function CameraView(props: CameraViewProps) @{
+	const host = useRef<any>(null)
+	const active = props.active !== false
+	const facing = props.facing ?? 'back'
+	useImperativeHandle(props.ref, () => ({ native: host.current.android }), []);
+
+	const bindHost = useCallback((view: any) => {
+		host.current = view
+	}, [])
+
+	useEffect(() => {
+		const nativeView = host.current?.android
+		if (!nativeView) return
+		let disposed = false
+		let provider: any
+		let preview: any
+		nativeView.setCameraActive(active)
+		if (!active) return () => nativeView.setCameraActive(false)
+
+		const fail = (message: string) => props.onError?.({ message })
+		if (props.session) {
+			if (props.facing !== undefined) {
+				fail('camera session conflicts with facing')
+				return () => nativeView.setCameraActive(false)
+			}
+
+			try {
+				const detach = attachSessionPreview(props.session, nativeView, {
+					onReady: props.onReady,
+					onError: (issue) => fail(issue.message),
+				})
+
+				return () => { detach(); nativeView.setCameraActive(false) }
+			} catch (error: any) {
+				fail(error?.message ?? 'camera session error')
+				return () => nativeView.setCameraActive(false)
+			}
+		}
+
+		if (!cameraHardwarePresent()) {
+			fail('camera unsupported')
+			return () => nativeView.setCameraActive(false)
+		}
+
+		ensureCameraPermission().then((granted) => {
+			if (disposed) return
+			if (!granted) {
+				fail('camera permission denied')
+				return
+			}
+
+			try {
+				const context = Application.android.context
+				const cameraX = (globalThis as any).androidx.camera
+				const future = cameraX.lifecycle.ProcessCameraProvider.getInstance(context)
+				const executor = (globalThis as any).androidx.core.content.ContextCompat.getMainExecutor(context)
+				future.addListener(
+					new java.lang.Runnable({
+						run() {
+							if (disposed) return
+							try {
+								provider = future.get()
+								const selectorClass = cameraX.core.CameraSelector
+								const lens = facing === 'front'
+									? selectorClass.LENS_FACING_FRONT
+									: selectorClass.LENS_FACING_BACK
+
+								const selector = new selectorClass.Builder().requireLensFacing(lens).build()
+								preview = new cameraX.core.Preview.Builder().build()
+								preview.setSurfaceProvider(nativeView.getSurfaceProvider())
+								provider.bindToLifecycle(nativeView, selector, preview)
+								props.onReady?.()
+							} catch (error: any) {
+								fail(error?.message ?? 'camera error')
+							}
+						},
+					}),
+					executor,
+				)
+			} catch (error: any) {
+				fail(error?.message ?? 'camera error')
+			}
+		})
+
+		return () => {
+			disposed = true
+			nativeView.setCameraActive(false)
+			if (provider && preview) {
+				try {
+					provider.unbind(preview)
+				} catch {}
+			}
+		}
+	}, [active, facing, props.session])
+
+	useEffect(() => {
+		const view = host.current
+		if (!view) return
+		applyEscapeProps(view.android, props)
+	}, [props.ref, props.android])
+
+	useEffect(() => observePreviewTap(host.current, props.onTap), [props.onTap])
+
+	<gridlayout
+		id={props.id}
+		rows="*"
+		columns="*"
+		className={['vx-layers', 'vx-cameraview', props.className]}
+		style={{ backgroundColor: '#000', ...props.style }}
+		{...layoutChildProps(props)}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+	>
+		<camerapreview ref={bindHost} row={0} col={0} />
+	</gridlayout>
+}

package/src/CameraView.ios.tsrx

@@ -0,0 +1,102 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
+import type { CameraViewProps } from './props'
+import { cameraHardwarePresent, ensureCameraPermission } from './camera-permission.mobile'
+import { startCameraPreview } from './camera-session.ios'
+import { attachSessionPreview } from './session'
+import { applyEscapeProps, layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from './layout-child'
+import { observePreviewTap } from './preview-tap'
+
+/** Live iOS preview backed by AVFoundation. With `session`, the preview
+ *  attaches to the session-owned AVCaptureSession so movie recording can
+ *  share it; without one the view owns its session as before. */
+export function CameraView(props: CameraViewProps) @{
+	const host = useRef<any>(null)
+	const active = props.active !== false
+	const facing = props.facing ?? 'back'
+	useImperativeHandle(props.ref, () => ({ native: host.current.ios ?? host.current.nativeViewProtected }), []);
+
+	const bindHost = useCallback((view: any) => {
+		host.current = view
+	}, [])
+
+	useEffect(() => {
+		const view = host.current
+		if (!view || !active) return
+		let disposed = false
+		let stopPreview: (() => void) | undefined
+		const fail = (message: string) => props.onError?.({ message })
+
+		if (props.session) {
+			if (props.facing !== undefined) {
+				fail('camera session conflicts with facing')
+				return
+			}
+
+			try {
+				const detach = attachSessionPreview(props.session, view, {
+					onReady: () => {
+						if (!disposed) props.onReady?.()
+					},
+				})
+
+				return () => {
+					disposed = true
+					detach()
+				}
+			} catch (error: any) {
+				fail(error?.message ?? 'camera session error')
+				return
+			}
+		}
+
+		if (!cameraHardwarePresent()) {
+			fail('camera unsupported')
+			return
+		}
+
+		ensureCameraPermission().then((granted) => {
+			if (disposed) return
+			if (!granted) {
+				fail('camera permission denied')
+				return
+			}
+
+			try {
+				stopPreview = startCameraPreview(view, facing, props.onReady)
+			} catch (error: any) {
+				fail(error?.message ?? 'camera error')
+			}
+		})
+
+		return () => {
+			disposed = true
+			stopPreview?.()
+		}
+	}, [active, facing, props.session])
+
+	useEffect(() => {
+		const view = host.current
+		if (!view) return
+		applyEscapeProps(view.ios ?? view.nativeViewProtected, props)
+	}, [props.ref, props.ios])
+
+	useEffect(() => observePreviewTap(host.current, props.onTap), [props.onTap])
+
+	<gridlayout
+		ref={bindHost}
+		id={props.id}
+		rows="*"
+		columns="*"
+		className={['vx-layers', 'vx-cameraview', props.className]}
+		style={{ backgroundColor: '#000', ...props.style }}
+		{...layoutChildProps(props)}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+	/>
+}

package/src/CameraView.macos.tsrx

@@ -0,0 +1,95 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
+import type { CameraViewProps } from './props'
+import { cameraHardwarePresent, ensureCameraPermission, startCameraPreview } from './camera-session.macos'
+import { attachSessionPreview } from './session'
+import { layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from './layout-child'
+import { observePreviewTap } from './preview-tap'
+
+/** Live AppKit preview backed by AVFoundation. With `session`, the preview
+ *  attaches to the session-owned AVCaptureSession so movie recording can
+ *  share it; without one the view owns its session as before. */
+export function CameraView(props: CameraViewProps) @{
+	const host = useRef<any>(null)
+	const active = props.active !== false
+	const facing = props.facing ?? 'back'
+	useImperativeHandle(props.ref, () => ({ native: host.current }), [])
+
+	const bindHost = useCallback((view: any) => {
+		host.current = view
+	}, [])
+
+	useEffect(() => {
+		const view = host.current
+		if (!view || !active) return
+		let disposed = false
+		let stopPreview: (() => void) | undefined
+		const fail = (message: string) => props.onError?.({ message })
+
+		if (props.session) {
+			if (props.facing !== undefined) {
+				fail('camera session conflicts with facing')
+				return
+			}
+
+			try {
+				const detach = attachSessionPreview(props.session, view, {
+					onReady: () => {
+						if (!disposed) props.onReady?.()
+					},
+				})
+
+				return () => {
+					disposed = true
+					detach()
+				}
+			} catch (error: any) {
+				fail(error?.message ?? 'camera session error')
+				return
+			}
+		}
+
+		if (!cameraHardwarePresent()) {
+			fail('camera unsupported')
+			return
+		}
+
+		ensureCameraPermission().then((granted) => {
+			if (disposed) return
+			if (!granted) {
+				fail('camera permission denied')
+				return
+			}
+
+			try {
+				stopPreview = startCameraPreview(view, facing, props.onReady)
+			} catch (error: any) {
+				fail(error?.message ?? 'camera error')
+			}
+		})
+
+		return () => {
+			disposed = true
+			stopPreview?.()
+		}
+	}, [active, facing, props.session])
+
+	useEffect(() => observePreviewTap(host.current, props.onTap), [props.onTap])
+
+	<gridlayout
+		ref={bindHost}
+		id={props.id}
+		rows="*"
+		columns="*"
+		className={['vx-layers', 'vx-cameraview', props.className]}
+		style={{ backgroundColor: '#000000', ...props.style }}
+		{...layoutChildProps(props)}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+	/>
+}

package/src/CameraView.mobile.ts

@@ -0,0 +1,6 @@
+import type { UniversalComponent } from 'octane/universal'
+import type { CameraViewProps } from './props'
+
+/** TypeScript fallback; the NativeScript resolver selects the .ios/.android
+ * implementation first at runtime. */
+export declare const CameraView: UniversalComponent<CameraViewProps>

package/src/CameraView.web.tsrx

@@ -0,0 +1,132 @@
+import { useImperativeHandle, useEffect, useRef } from 'octane'
+import type { CameraViewProps } from './props'
+import { attachSessionPreview } from './session'
+import { applyEscapeProps, layoutChildProps } from './layout-child.web'
+
+/** Live web preview backed by getUserMedia. */
+export function CameraView(props: CameraViewProps) @{
+	const hostRef = useRef<any>(null);
+	const video = useRef<HTMLVideoElement | null>(null)
+	const facing = props.facing ?? 'back'
+	const active = props.active !== false
+	const readyFired = useRef(false)
+
+	useEffect(() => {
+		const element = video.current
+		if (!element || !active) return
+		if (props.session) {
+			if (props.facing !== undefined) {
+				props.onError?.({ message: 'camera session conflicts with facing' })
+				return
+			}
+
+			try {
+				return attachSessionPreview(props.session, element, {
+					onReady: props.onReady,
+					onError: (issue) => props.onError?.({ message: issue.message }),
+				})
+			} catch (error: any) {
+				props.onError?.({ message: error?.message ?? 'camera session error' })
+				return
+			}
+		}
+
+		const mediaDevices = navigator.mediaDevices
+		if (!mediaDevices?.getUserMedia) {
+			props.onError?.({ message: 'camera unsupported' })
+			return
+		}
+
+		let stream: MediaStream | null = null
+		let disposed = false
+		readyFired.current = false
+		mediaDevices
+			.getUserMedia({
+				video: { facingMode: facing === 'front' ? 'user' : 'environment' },
+				audio: false,
+			})
+			.then((nextStream) => {
+				if (disposed) {
+					for (const track of nextStream.getTracks()) track.stop()
+					return
+				}
+
+				stream = nextStream
+				element.srcObject = nextStream
+				element.play()?.catch(() => {})
+			})
+			.catch((error: any) => {
+				props.onError?.({
+					message:
+						error?.name === 'NotAllowedError'
+							? 'camera permission denied'
+							: String(error?.name ?? error ?? 'camera error'),
+				})
+			})
+
+		return () => {
+			disposed = true
+			element.srcObject = null
+			if (stream) for (const track of stream.getTracks()) track.stop()
+		}
+	}, [active, facing, props.session])
+
+	useImperativeHandle(props.ref, () => ({ native: hostRef.current }), undefined);
+
+	<div
+		id={props.id}
+		className={['vx-layers', 'vx-cameraview', props.className]}
+		{...layoutChildProps(props, {
+			position: 'relative',
+			overflow: 'hidden',
+			backgroundColor: '#000',
+			...props.style,
+		})}
+		role={props.accessibilityRole}
+		aria-label={props.accessibilityLabel}
+		aria-hidden={props.accessible === false ? true : undefined}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled}
+		aria-selected={props.accessibilityState?.selected}
+		aria-checked={props.accessibilityState?.checked}
+		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
+	>
+		@if (active) {
+			<video
+				ref={(element: HTMLVideoElement | null) => {
+				hostRef.current = element;
+					video.current = element
+					if (!element) return
+					applyEscapeProps(element, props)
+				}}
+				muted={true}
+				autoplay={true}
+				playsInline={true}
+				onClick={(event: MouseEvent) => {
+					const onTap = props.onTap
+					const target = event.currentTarget as HTMLElement | null
+					if (!onTap || !target) return
+					const rect = target.getBoundingClientRect()
+					if (!(rect.width > 0) || !(rect.height > 0)) return
+					onTap({
+						x: Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)),
+						y: Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height)),
+					})
+				}}
+				style={{
+					display: 'block',
+					width: '100%',
+					height: '100%',
+					objectFit: 'cover',
+					transform: facing === 'front' ? 'scaleX(-1)' : undefined,
+				}}
+				onPlaying={() => {
+					if (props.session || readyFired.current) return
+					readyFired.current = true
+					props.onReady?.()
+				}}
+			/>
+		}
+	</div>
+}