guoju0808/ry-h5/utils/camera.ts

/**
 * 摄像头工具 (H5 only)
 *
 * - openCamera(video, facing): 申请摄像头权限并把实时流挂到 <video>
 * - stopCamera(video): 停掉所有轨道
 * - captureFrame(video): 截当前帧为 JPEG Base64
 * - describeCameraError(err): 错误码转中文提示
 */
export type Facing = 'user' | 'environment'

// uni-app H5 runtime (uni-h5.es.js) 看到 <video autoplay> 会抢先调一次 play(),
// 此时 srcObject 还没设,会抛 NotSupportedError 变成 unhandled rejection.
// 模板已不再写 autoplay, 这里再装一个兜底监听, 把漏网的 NotSupportedError /
// AbortError 静默掉, 不污染控制台.
declare global {
	interface Window {
		__cameraRejectionGuard?: boolean
	}
}
if (typeof window !== 'undefined' && !window.__cameraRejectionGuard) {
	window.__cameraRejectionGuard = true
	window.addEventListener('unhandledrejection', (e) => {
		const name = (e?.reason as DOMException)?.name
		if (name === 'NotSupportedError' || name === 'AbortError') {
			e.preventDefault()
		}
	})
}

export async function openCamera(video: HTMLVideoElement, facing: Facing): Promise<void> {
	if (!navigator.mediaDevices?.getUserMedia) {
		throw new Error('当前浏览器不支持摄像头访问,请升级浏览器或使用 Chrome / Safari')
	}

	// 先停掉旧的 stream,防止多 stream 冲突
	stopCamera(video)

	const constraints: MediaStreamConstraints = {
		audio: false,
		video: {
			facingMode: { ideal: facing },
			width: { ideal: 1920 },
			height: { ideal: 1080 },
		},
	}

	let stream: MediaStream
	try {
		stream = await navigator.mediaDevices.getUserMedia(constraints)
	} catch (err) {
		// facingMode 不被支持时降级为不指定
		if ((err as DOMException)?.name === 'OverconstrainedError') {
			stream = await navigator.mediaDevices.getUserMedia({
				audio: false,
				video: true,
			})
		} else {
			throw err
		}
	}

	// 三重保险赋值 srcObject:
//   1. 直接赋值 (标准做法)
//   2. 100ms 后若 readyState 仍 0,强制 Object.defineProperty
//   3. 还不行就 src=blobURL (老 API,兼容性最广)
video.srcObject = stream
console.log('[camera] 第1次赋值 srcObject, readyState:', video.readyState, 'isStream:', video.srcObject === stream)

// iOS 必须: 不加 playsinline 会弹原生全屏播放器
video.setAttribute('playsinline', 'true')
// iOS 必须: 不静音黑屏 (否则 iOS 拒绝播放)
video.muted = true

// 源就绪后再 play(): 过早 play() 会因为 video 还没有源抛 NotSupportedError
// ("The element has no supported sources"), 变成未捕获的 Promise 拒绝.
// safePlay 现在做四件事:
//   1. 防御 uni-app H5 包装层让 video.play 返回 undefined 的情况
//   2. 吞掉 NotSupportedError / AbortError (浏览器认为没源时不报)
//   3. readyState < 2 时按 readyState 升级主动重试, 不再只等 loadedmetadata
//   4. 其他错误 warn 后不再重试 (避免噪音)
const safePlay = () => {
	// 防御: uni-app H5 包装层可能让 video.play 不存在或返回 undefined
	if (typeof video.play !== 'function') {
		console.warn('[camera] video.play 不是函数 (可能 uni-app 包装), 跳过')
		return
	}
	let result: unknown
	try {
		result = video.play()
	} catch (e) {
		console.warn('[camera] play() 同步抛错:', (e as Error)?.message)
		return
	}
	if (!result || typeof (result as Promise<void>).catch !== 'function') {
		// play() 没返回 Promise (uni-app 包装层常见), 无错误可处理, 直接放过
		return
	}
	;(result as Promise<void>).catch((e: DOMException) => {
		const name = e?.name
		if (name === 'NotSupportedError' || name === 'AbortError') {
			// 源还没就绪 (readyState 0/1), 起一个轮询, 数据到位再 play
			if (video.readyState < 2) {
				console.log('[camera] 源未就绪, readyState=', video.readyState, ', 等待后重试')
				const start = Date.now()
				const timer = setInterval(() => {
					if (video.readyState >= 2) {
						clearInterval(timer)
						safePlay()
					} else if (Date.now() - start > 3000) {
						clearInterval(timer)
						console.warn('[camera] 等待 readyState>=2 超时, 放弃自动播放')
					}
				}, 100)
			}
		} else {
			console.warn('[camera] play() 失败:', name, e?.message)
		}
	})
}

// 赋值 srcObject 立刻主动 play 一次 (不再只等 loadedmetadata, 避免 uni-app
// 包装或某些浏览器不触发该事件时视频永远不播)
safePlay()

const fallbackTimer = setTimeout(() => {
	if (video.readyState < 1) {
		console.warn('[camera] srcObject 没生效,尝试 Object.defineProperty 强写')
		try {
			Object.defineProperty(video, 'srcObject', {
				value: stream,
				writable: true,
				configurable: true,
			})
			console.log('[camera] defineProperty 后 srcObject isStream:', video.srcObject === stream)
			// 强制赋值后再主动试一次 play
			safePlay()
		} catch (e) {
			console.error('[camera] defineProperty 也失败:', e)
		}
		// 再兜底: src=blobURL
		if (video.readyState < 1) {
			console.warn('[camera] 仍 readyState 0,改用 src=blobURL')
			try {
				video.src = URL.createObjectURL(stream)
				safePlay()
			} catch (e) {
				console.error('[camera] blobURL 兜底失败:', e)
			}
		}
	}
}, 100)

video.addEventListener(
	'loadedmetadata',
	() => {
		clearTimeout(fallbackTimer)
		console.log('[camera] loadedmetadata 触发, readyState:', video.readyState, 'isStream:', video.srcObject === stream)
		// 数据真正就绪后再 play
		safePlay()
	},
	{ once: true }
)

// 兜底: 个别浏览器 loadedmetadata 后 readyState 仍不够, loadeddata 再补一次 play()
video.addEventListener('loadeddata', () => safePlay(), { once: true })

// 若赋值 srcObject 前已就绪 (理论上不会), 立即放
if (video.readyState >= 1) {
	safePlay()
}
}

export function stopCamera(video: HTMLVideoElement): void {
	const obj = video.srcObject as MediaStream | null
	if (obj) {
		obj.getTracks().forEach((t) => t.stop())
		video.srcObject = null
	}
}

export function captureFrame(video: HTMLVideoElement): string {
	const w = video.videoWidth || video.clientWidth
	const h = video.videoHeight || video.clientHeight
	if (!w || !h) {
		throw new Error('视频流尚未就绪,无法截图')
	}
	const canvas = document.createElement('canvas')
	canvas.width = w
	canvas.height = h
	const ctx = canvas.getContext('2d')
	if (!ctx) throw new Error('无法获取 canvas 2D 上下文')
	ctx.drawImage(video, 0, 0, w, h)
	return canvas.toDataURL('image/jpeg', 0.85)
}

/** 生成归一化一维高斯核 (半径 radius) */
function buildGaussianKernel(radius: number): number[] {
	const size = radius * 2 + 1
	const sigma = radius / 2
	const kernel: number[] = new Array(size)
	let sum = 0
	for (let i = 0; i < size; i++) {
		const x = i - radius
		const v = Math.exp(-(x * x) / (2 * sigma * sigma))
		kernel[i] = v
		sum += v
	}
	for (let i = 0; i < size; i++) kernel[i] = kernel[i] / sum
	return kernel
}

/**
 * 对 RGBA 数组的竖直条带 [x0, x1) 做可分离高斯模糊, 返回新数组 (不修改原数组).
 * 条带贯穿全高 (顶边→底边), 只在水平 [x0, x1) 范围内模糊; 其余区域照抄.
 */
function gaussianBlurBand(
	data: Uint8ClampedArray,
	width: number,
	height: number,
	x0: number,
	x1: number,
	radius: number
): Uint8ClampedArray {
	const kernel = buildGaussianKernel(radius)
	const r = radius
	const kSize = kernel.length

	// 1) 水平卷积 (沿 x): 读 data, 写 h1 (仅 [x0, x1) 列, 全高, 其余照抄)
	const h1 = new Uint8ClampedArray(data)
	const col = new Array<number>(height * 4)
	for (let x = x0; x < x1; x++) {
		for (let y = 0; y < height; y++) {
			const base = (y * width + x) * 4
			let rr = 0
			let gg = 0
			let bb = 0
			let aa = 0
			for (let k = 0; k < kSize; k++) {
				let sx = x + k - r
				if (sx < 0) sx = 0
				if (sx >= width) sx = width - 1
				const idx = (y * width + sx) * 4
				const wt = kernel[k]
				rr += data[idx] * wt
				gg += data[idx + 1] * wt
				bb += data[idx + 2] * wt
				aa += data[idx + 3] * wt
			}
			const o = y * 4
			col[o] = rr
			col[o + 1] = gg
			col[o + 2] = bb
			col[o + 3] = aa
		}
		for (let y = 0; y < height; y++) {
			const idx = (y * width + x) * 4
			const o = y * 4
			h1[idx] = col[o]
			h1[idx + 1] = col[o + 1]
			h1[idx + 2] = col[o + 2]
			h1[idx + 3] = col[o + 3]
		}
	}

	// 2) 垂直卷积 (沿 y): 读 h1, 写 h2 (仅 [x0, x1) 列, 全高, 其余照抄 h1)
	const h2 = new Uint8ClampedArray(h1)
	const col2 = new Array<number>(height * 4)
	for (let x = x0; x < x1; x++) {
		for (let y = 0; y < height; y++) {
			let rr = 0
			let gg = 0
			let bb = 0
			let aa = 0
			for (let k = 0; k < kSize; k++) {
				let sy = y + k - r
				if (sy < 0) sy = 0
				if (sy >= height) sy = height - 1
				const idx = (sy * width + x) * 4
				const wt = kernel[k]
				rr += h1[idx] * wt
				gg += h1[idx + 1] * wt
				bb += h1[idx + 2] * wt
				aa += h1[idx + 3] * wt
			}
			const o = y * 4
			col2[o] = rr
			col2[o + 1] = gg
			col2[o + 2] = bb
			col2[o + 3] = aa
		}
		for (let y = 0; y < height; y++) {
			const idx = (y * width + x) * 4
			const o = y * 4
			h2[idx] = col2[o]
			h2[idx + 1] = col2[o + 1]
			h2[idx + 2] = col2[o + 2]
			h2[idx + 3] = col2[o + 3]
		}
	}

	return h2
}

/**
 * 截图并同时生成两张图: 清晰版 + 竖直条带 [start, end] 高斯模糊版 (签到表脱敏用).
 * start/end 是「宽度」比例 (从左到右), 条带贯穿全高 (顶边→底边).
 * 同一帧出两张, 避免两次截图不一致.
 */
export function captureFrameWithBlur(
	video: HTMLVideoElement,
	start: number,
	end: number,
	radius: number
): { sharp: string; blurred: string } {
	const w = video.videoWidth || video.clientWidth
	const h = video.videoHeight || video.clientHeight
	if (!w || !h) {
		throw new Error('视频流尚未就绪,无法截图')
	}
	const canvas = document.createElement('canvas')
	canvas.width = w
	canvas.height = h
	const ctx = canvas.getContext('2d')
	if (!ctx) throw new Error('无法获取 canvas 2D 上下文')
	ctx.drawImage(video, 0, 0, w, h)
	const sharp = canvas.toDataURL('image/jpeg', 0.85)

	const x0 = Math.max(0, Math.floor(w * start))
	const x1 = Math.min(w, Math.floor(w * end))
	let blurred = sharp
	if (x1 - x0 > 1) {
		const imgData = ctx.getImageData(0, 0, w, h)
		const dst = gaussianBlurBand(imgData.data, w, h, x0, x1, radius)
		imgData.data.set(dst)
		ctx.putImageData(imgData, 0, 0)
		blurred = canvas.toDataURL('image/jpeg', 0.85)
	}
	return { sharp, blurred }
}

export function describeCameraError(err: unknown): string {
	const name = (err as DOMException)?.name || ''
	switch (name) {
		case 'NotAllowedError':
		case 'PermissionDeniedError':
			return '请在浏览器设置中允许使用摄像头权限'
		case 'NotFoundError':
		case 'DevicesNotFoundError':
			return '未检测到摄像头设备'
		case 'NotReadableError':
		case 'TrackStartError':
			return '摄像头被其他程序占用,请关闭后重试'
		case 'OverconstrainedError':
		case 'ConstraintNotSatisfiedError':
			return '摄像头参数不支持,已自动降级'
		case 'SecurityError':
			return '请通过 HTTPS 或 localhost 访问以使用摄像头'
		default:
			return '打开摄像头失败:' + ((err as Error)?.message || String(err))
	}
}