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'

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(): <video autoplay> 只在元素首次加载时触发一次, 而 srcObject 是
// 异步挂上的, 此时视频还没源, 浏览器不会自动重放 → 黑屏 + 播放按钮.
// 静音 + playsinline 下, 现代浏览器默认放行静音自动播放, 直接 play() 起流.
video.play()

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)
		} 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)
			} 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(), 兜底个别浏览器首次 play() 因无数据被打断
		video.play()
	},
	{ once: true }
)
}

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 数组的竖直条带 [y0, y1) 做可分离高斯模糊, 返回新数组 (不修改原数组).
 * 水平卷积范围向外扩 radius, 保证条带边界处垂直卷积有正确的邻域上下文.
 */
function gaussianBlurBand(
	data: Uint8ClampedArray,
	width: number,
	height: number,
	y0: number,
	y1: number,
	radius: number
): Uint8ClampedArray {
	const kernel = buildGaussianKernel(radius)
	const r = radius
	const kSize = kernel.length

	const hy0 = Math.max(0, y0 - r)
	const hy1 = Math.min(height, y1 + r)

	// 1) 水平卷积: 读 data, 写 h1 (仅 [hy0, hy1) 行, 其余照抄)
	const h1 = new Uint8ClampedArray(data)
	const row = new Array<number>(width * 4)
	for (let y = hy0; y < hy1; y++) {
		const base = y * width * 4
		for (let x = 0; x < width; x++) {
			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 = base + 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 = x * 4
			row[o] = rr
			row[o + 1] = gg
			row[o + 2] = bb
			row[o + 3] = aa
		}
		for (let i = 0; i < width * 4; i++) h1[base + i] = row[i]
	}

	// 2) 垂直卷积: 读 h1, 写 h2 (仅 [y0, y1) 行, 其余照抄 h1)
	const h2 = new Uint8ClampedArray(h1)
	const band = y1 - y0
	const col = new Array<number>(band * 4)
	for (let x = 0; x < width; x++) {
		for (let yy = 0; yy < band; yy++) {
			const y = y0 + yy
			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 = yy * 4
			col[o] = rr
			col[o + 1] = gg
			col[o + 2] = bb
			col[o + 3] = aa
		}
		for (let yy = 0; yy < band; yy++) {
			const idx = ((y0 + yy) * width + x) * 4
			const o = yy * 4
			h2[idx] = col[o]
			h2[idx + 1] = col[o + 1]
			h2[idx + 2] = col[o + 2]
			h2[idx + 3] = col[o + 3]
		}
	}

	return h2
}

/**
 * 截图并同时生成两张图: 清晰版 + 竖直条带 [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 y0 = Math.max(0, Math.floor(h * start))
	const y1 = Math.min(h, Math.floor(h * end))
	let blurred = sharp
	if (y1 - y0 > 1) {
		const imgData = ctx.getImageData(0, 0, w, h)
		const dst = gaussianBlurBand(imgData.data, w, h, y0, y1, 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))
	}
}