@octane-xplat/camera 0.7.0

package/src/CameraView.ios.tsrx

@@ -0,0 +1,73 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useCallback, useEffect, useRef } from 'octane'
+import type { CameraViewProps } from './props'
+import { cameraHardwarePresent, ensureCameraPermission } from './camera-permission.mobile'
+import { startCameraPreview } from './camera-session.ios'
+import { applyEscapeProps, layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from './layout-child'
+import { cx } from './cx.mobile'
+
+/** Live iOS preview backed by AVFoundation. */
+export function CameraView(props: CameraViewProps) @{
+	const host = useRef<any>(null)
+	const active = props.active !== false
+	const facing = props.facing ?? 'back'
+	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 (!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])
+
+	useEffect(() => {
+		const view = host.current
+		if (!view) return
+		applyEscapeProps(view.ios ?? view.nativeViewProtected, props)
+		props.bind?.({ native: view.ios ?? view.nativeViewProtected })
+	}, [props.bind, props.ios])
+
+	<gridlayout
+		ref={bindHost}
+		id={props.id}
+		rows="*"
+		columns="*"
+		className={cx('vx-stack', '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.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,100 @@
+import { useEffect, useRef } from 'octane'
+import type { CameraViewProps } from './props'
+import { applyEscapeProps, layoutChildProps } from './layout-child.web'
+
+/** Live web preview backed by getUserMedia. */
+export function CameraView(props: CameraViewProps) @{
+	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
+		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])
+
+	<div
+		id={props.id}
+		className={['vx-stack', '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) => {
+					video.current = element
+					if (!element) return
+					applyEscapeProps(element, props)
+					props.bind?.({ native: element })
+				}}
+				muted={true}
+				autoplay={true}
+				playsInline={true}
+				style={{
+					display: 'block',
+					width: '100%',
+					height: '100%',
+					objectFit: 'cover',
+					transform: facing === 'front' ? 'scaleX(-1)' : undefined,
+				}}
+				onPlaying={() => {
+					if (readyFired.current) return
+					readyFired.current = true
+					props.onReady?.()
+				}}
+			/>
+		}
+	</div>
+}

package/src/camera-permission.mobile.ts

@@ -0,0 +1,66 @@
+import { Application, isAndroid, isIOS } from '@nativescript/core'
+
+let requestCode = 7719
+
+export function cameraHardwarePresent(): boolean {
+	if (isIOS) {return typeof (globalThis as any).AVCaptureDevice !== 'undefined'}
+	if (!isAndroid) {return false}
+	try {
+		const context = Application.android?.context ?? Application.android?.startActivity
+		return context?.packageManager?.hasSystemFeature('android.hardware.camera.any') !== false
+	} catch {
+		return true
+	}
+}
+
+export async function ensureCameraPermission(): Promise<boolean> {
+	try {
+		if (isIOS) {
+			const av = (globalThis as any).AVCaptureDevice
+			const mediaType = (globalThis as any).AVMediaTypeVideo ?? 'vide'
+			const status = av?.authorizationStatusForMediaType?.(mediaType)
+			if (status === 3) {return true}
+			if (status === 1 || status === 2) {return false}
+			return await new Promise<boolean>((resolve) =>
+				av.requestAccessForMediaTypeCompletionHandler(mediaType, resolve),
+			)
+		}
+
+		if (isAndroid) {
+			const permission = 'android.permission.CAMERA'
+			const activity = Application.android.foregroundActivity ?? Application.android.startActivity
+			if (
+				activity?.checkSelfPermission?.(permission) ===
+				android.content.pm.PackageManager.PERMISSION_GRANTED
+			) {return true}
+
+			if (!activity) {return false}
+			return await new Promise<boolean>((resolve) => {
+				const currentRequest = requestCode++
+				const onResult = (args: any) => {
+					if (args.requestCode !== currentRequest) {return}
+					Application.android.off(
+						Application.android.activityRequestPermissionsEvent,
+						onResult,
+					)
+
+					resolve(
+						args.grantResults?.[0] ===
+							android.content.pm.PackageManager.PERMISSION_GRANTED,
+					)
+				}
+
+				Application.android.on(
+					Application.android.activityRequestPermissionsEvent,
+					onResult,
+				)
+
+				activity.requestPermissions([permission], currentRequest)
+			})
+		}
+	} catch {
+		return false
+	}
+
+	return false
+}

package/src/camera-session.ios.ts

@@ -0,0 +1,54 @@
+/** Attach an AVFoundation preview layer to a NativeScript UIView host. */
+export function startCameraPreview(
+	view: any,
+	facing: 'front' | 'back',
+	onReady?: () => void,
+): () => void {
+	const av = globalThis as any
+	const mediaType = av.AVMediaTypeVideo ?? 'vide'
+	const desiredPosition = facing === 'front'
+		? av.AVCaptureDevicePositionFront ?? 2
+		: av.AVCaptureDevicePositionBack ?? 1
+
+	const devices = av.AVCaptureDevice.devicesWithMediaType(mediaType)
+	let device: any = null
+	for (let index = 0; index < devices.count; index++) {
+		const candidate = devices.objectAtIndex(index)
+		if (candidate.position === desiredPosition) {
+			device = candidate
+			break
+		}
+	}
+
+	if (!device) {throw new Error('camera unavailable')}
+
+	const session = av.AVCaptureSession.new()
+	const input = av.AVCaptureDeviceInput.deviceInputWithDeviceError(device)
+	if (!input || !session.canAddInput(input)) {throw new Error('camera input unavailable')}
+	session.addInput(input)
+	const layer = av.AVCaptureVideoPreviewLayer.layerWithSession(session)
+	layer.videoGravity = 'resizeAspectFill'
+	const connection = layer.connection
+	if (connection) {
+		connection.automaticallyAdjustsVideoMirroring = false
+		if (connection.isVideoMirroringSupported) {connection.isVideoMirrored = facing === 'front'}
+	}
+
+	const nativeView = view.ios ?? view.nativeViewProtected
+	if (!nativeView?.layer) {throw new Error('camera preview host unavailable')}
+	nativeView.layer.addSublayer(layer)
+	const updateFrame = () => {
+		layer.frame = nativeView.bounds
+	}
+
+	view.on?.('layoutChanged', updateFrame)
+	updateFrame()
+	session.startRunning()
+	onReady?.()
+
+	return () => {
+		view.off?.('layoutChanged', updateFrame)
+		session.stopRunning()
+		layer.removeFromSuperlayer()
+	}
+}

package/src/cx.mobile.ts

@@ -0,0 +1,5 @@
+/** NativeScript's universal driver stringifies className values; normalize
+ * arrays here so they stay space separated. */
+export function cx(...parts: any[]): string {
+	return parts.flat(Infinity).filter(Boolean).join(' ')
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+// Keep this relative import extensionless so the NativeScript resolver picks
+// the iOS or Android component for the current build target.
+export { CameraView } from './CameraView'
+export type { CameraAccessibilityRole, CameraViewHandle, CameraViewProps } from './props'

package/src/index.web.ts

@@ -0,0 +1,2 @@
+export { CameraView } from './CameraView.web.tsrx'
+export type { CameraAccessibilityRole, CameraViewHandle, CameraViewProps } from './props'

package/src/layout-child.ts

@@ -0,0 +1,62 @@
+import type { CameraViewProps } from './props'
+import { isIOS } from '@nativescript/core'
+
+/** NativeScript reads layout fields from a child view during parent layout. */
+export function layoutChildProps(props: CameraViewProps): Record<string, any> {
+	const result: Record<string, any> = {}
+	for (const key of [
+		'row',
+		'col',
+		'rowSpan',
+		'colSpan',
+		'dock',
+		'left',
+		'top',
+		'flexGrow',
+		'flexShrink',
+		'alignSelf',
+		'order',
+	] as const) {
+		if (props[key] !== undefined) {result[key] = props[key]}
+	}
+
+	return result
+}
+
+export function applyEscapeProps(view: any, props: { ios?: any; android?: any }): void {
+	if (!view) {return}
+	const bag = isIOS ? props.ios : props.android
+	if (bag) {Object.assign(view, bag)}
+}
+
+const nativeRoles: Record<string, string> = {
+	button: 'button',
+	link: 'link',
+	search: 'search',
+	image: 'image',
+	heading: 'header',
+	adjustable: 'adjustable',
+	summary: 'summary',
+	text: 'text',
+	none: 'none',
+	progressbar: 'progressBar',
+	checkbox: 'checkbox',
+	switch: 'switch',
+	radio: 'radioButton',
+	spinbutton: 'spinButton',
+	tab: 'button',
+}
+
+export function nativeAccessibilityRole(role?: string): string | undefined {
+	return role ? nativeRoles[role] : undefined
+}
+
+export function nativeAccessibilityState(state?: CameraViewProps['accessibilityState']):
+	| string
+	| undefined {
+	if (state?.disabled) {return 'disabled'}
+	if (state?.selected) {return 'selected'}
+	if (state?.checked === true) {return 'checked'}
+	if (state?.checked === false) {return 'unchecked'}
+	return undefined
+}

package/src/layout-child.web.ts

@@ -0,0 +1,42 @@
+import type { CameraViewProps } from './props'
+
+export function layoutChildProps(props: CameraViewProps, baseStyle: any = props.style) {
+	const style = { ...baseStyle }
+	if (props.row !== undefined) {
+		style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`
+	} else if (props.rowSpan !== undefined) {
+		style.gridRow = `span ${props.rowSpan}`
+	}
+
+	if (props.col !== undefined) {
+		style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`
+	} else if (props.colSpan !== undefined) {
+		style.gridColumn = `span ${props.colSpan}`
+	}
+
+	if (props.left !== undefined) {style.left = props.left}
+	if (props.top !== undefined) {style.top = props.top}
+	if (props.flexGrow !== undefined) {style.flexGrow = props.flexGrow}
+	if (props.flexShrink !== undefined) {style.flexShrink = props.flexShrink}
+	if (props.alignSelf !== undefined) {style.alignSelf = props.alignSelf}
+	if (props.order !== undefined) {style.order = props.order}
+	return { style }
+}
+
+export function applyEscapeProps(element: any, props: { web?: any }): void {
+	if (!element || !props.web) {return}
+	for (const [key, value] of Object.entries(props.web)) {
+		if (key.includes('-')) {
+			if (value == null || value === false) {element.removeAttribute(key)}
+			else {element.setAttribute(key, value === true ? '' : String(value))}
+		} else if (key in element) {
+			try {
+				element[key] = value
+			} catch {
+				element.setAttribute(key, String(value))
+			}
+		} else if (value != null) {
+			element.setAttribute(key, String(value))
+		}
+	}
+}

package/src/props.ts

@@ -0,0 +1,62 @@
+export type CameraAccessibilityRole =
+	| 'button'
+	| 'link'
+	| 'search'
+	| 'image'
+	| 'heading'
+	| 'adjustable'
+	| 'summary'
+	| 'text'
+	| 'none'
+	| 'progressbar'
+	| 'checkbox'
+	| 'switch'
+	| 'radio'
+	| 'spinbutton'
+	| 'tab'
+
+export interface CameraViewHandle {
+	/** The native preview surface (`HTMLVideoElement` on web). */
+	native: any
+}
+
+export interface CameraViewProps {
+	className?: any
+	style?: any
+	id?: string
+	row?: number
+	col?: number
+	rowSpan?: number
+	colSpan?: number
+	dock?: 'left' | 'top' | 'right' | 'bottom'
+	left?: number
+	top?: number
+	flexGrow?: number
+	flexShrink?: number
+	alignSelf?: string
+	order?: number
+	accessible?: boolean
+	accessibilityLabel?: string
+	accessibilityRole?: CameraAccessibilityRole
+	accessibilityHint?: string
+	accessibilityValue?: string
+	accessibilityState?: {
+		disabled?: boolean
+		selected?: boolean
+		checked?: boolean
+	}
+	accessibilityLiveRegion?: 'none' | 'polite' | 'assertive'
+	/** Lens — defaults to the rear camera. */
+	facing?: 'front' | 'back'
+	/** Default true. False releases the preview session. */
+	active?: boolean
+	/** Fires after the preview surface starts. */
+	onReady?: () => void
+	onError?: (error: { message?: string }) => void
+	/** Native preview surface for platform-specific controls. */
+	bind?: (handle: CameraViewHandle) => void
+	/** Platform-specific properties applied to the preview surface. */
+	ios?: Record<string, any>
+	android?: Record<string, any>
+	web?: Record<string, any>
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+import type { UniversalComponent } from 'octane/universal'
+import type { CameraViewProps } from './props'
+
+export declare const CameraView: UniversalComponent<CameraViewProps>
+export type { CameraViewHandle, CameraViewProps, CameraAccessibilityRole } from './props'

package/types/props.d.ts

@@ -0,0 +1,47 @@
+export type CameraAccessibilityRole = 'button' | 'link' | 'search' | 'image' | 'heading' | 'adjustable' | 'summary' | 'text' | 'none' | 'progressbar' | 'checkbox' | 'switch' | 'radio' | 'spinbutton' | 'tab';
+export interface CameraViewHandle {
+    /** The native preview surface (`HTMLVideoElement` on web). */
+    native: any;
+}
+export interface CameraViewProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    row?: number;
+    col?: number;
+    rowSpan?: number;
+    colSpan?: number;
+    dock?: 'left' | 'top' | 'right' | 'bottom';
+    left?: number;
+    top?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    alignSelf?: string;
+    order?: number;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    accessibilityRole?: CameraAccessibilityRole;
+    accessibilityHint?: string;
+    accessibilityValue?: string;
+    accessibilityState?: {
+        disabled?: boolean;
+        selected?: boolean;
+        checked?: boolean;
+    };
+    accessibilityLiveRegion?: 'none' | 'polite' | 'assertive';
+    /** Lens — defaults to the rear camera. */
+    facing?: 'front' | 'back';
+    /** Default true. False releases the preview session. */
+    active?: boolean;
+    /** Fires after the preview surface starts. */
+    onReady?: () => void;
+    onError?: (error: {
+        message?: string;
+    }) => void;
+    /** Native preview surface for platform-specific controls. */
+    bind?: (handle: CameraViewHandle) => void;
+    /** Platform-specific properties applied to the preview surface. */
+    ios?: Record<string, any>;
+    android?: Record<string, any>;
+    web?: Record<string, any>;
+}