138 lines
4.3 KiB
TypeScript
138 lines
4.3 KiB
TypeScript
/**
|
|
* 摄像头工具 (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
|
|
|
|
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)
|
|
},
|
|
{ once: true }
|
|
)
|
|
|
|
// 不手动调 video.play():
|
|
// 1. UTS 把 HTMLVideoElement.play() 类型当 void,链式 .catch 会报 undefined.catch
|
|
// 2. <video autoplay muted playsinline> + srcObject 已让浏览器自动起流
|
|
// 若某些浏览器不自动播放,在用户点击 shutter 等交互中再触发 play()
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
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))
|
|
}
|
|
} |