UniApp实战：5分钟搞定H5和小程序的摄像头调用与视频流显示（附完整代码）

UniApp跨端摄像头开发实战：从权限适配到性能优化的全链路指南

在移动互联网时代，摄像头功能已成为各类应用的基础配置。无论是社交平台的实时视频分享、在线教育的远程互动，还是电商平台的AR试穿，都离不开稳定可靠的摄像头调用能力。UniApp作为跨端开发的利器，理论上可以"一次编写，多端运行"，但实际开发中，不同平台对摄像头API的实现差异常常让开发者头疼不已。

1. 跨端摄像头开发的核心挑战与解决方案

1.1 平台API差异与统一封装

H5与小程序平台在摄像头调用上存在显著差异。H5使用标准的Web APInavigator.mediaDevices.getUserMedia，而微信小程序则采用特有的wx.createCameraContext。这种差异直接导致了代码无法直接复用。

推荐解决方案：创建统一的摄像头服务模块

// utils/cameraService.js export default { async startCamera(options = {}) { // #ifdef H5 return this._startH5Camera(options) // #endif // #ifdef MP-WEIXIN return this._startMiniProgramCamera(options) // #endif }, async _startH5Camera(options) { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: options.facingMode || 'user', width: { ideal: options.width || 1280 }, height: { ideal: options.height || 720 } } }) return { stream, type: 'H5' } } catch (error) { throw new Error(`H5摄像头启动失败: ${error.message}`) } }, async _startMiniProgramCamera(options) { return new Promise((resolve) => { const ctx = wx.createCameraContext() ctx.start({ success: () => resolve({ ctx, type: 'MP' }), fail: (err) => { throw new Error(`小程序摄像头启动失败: ${err.errMsg}`) } }) }) } }

1.2 权限处理的平台差异

权限获取是摄像头开发的第一道门槛，各平台的处理方式大不相同：

最佳实践：

• H5端：捕获NotAllowedError并引导用户手动开启权限
• 小程序端：在onLoad阶段检查getSetting，未授权时提前引导

1.3 摄像头参数的多端适配

不同设备对摄像头参数的支持程度不一，需要做好兼容处理：

const getOptimalConstraints = (targetWidth, targetHeight) => { return { width: { min: 640, ideal: targetWidth, max: 1920 }, height: { min: 480, ideal: targetHeight, max: 1080 }, frameRate: { ideal: 30, min: 15 } } }

2. 性能优化与用户体验提升

2.1 视频流渲染优化

视频渲染是性能消耗大户，特别是在低端设备上：

关键优化点：

• 使用requestAnimationFrame进行节流渲染
• 根据设备性能动态调整分辨率
• 实现渐进式加载策略

// 设备性能分级策略 const getPerformanceLevel = () => { const memory = navigator.deviceMemory || 4 const cores = navigator.hardwareConcurrency || 4 return memory < 2 || cores < 2 ? 'low' : 'high' } const renderStrategy = { low: { resolution: { width: 640, height: 480 }, frameRate: 15 }, high: { resolution: { width: 1280, height: 720 }, frameRate: 30 } }

2.2 内存管理与资源释放

不当的资源释放会导致内存泄漏，特别是在单页应用中：

// 组件卸载时的清理逻辑 beforeUnmount() { if (this.cameraHandler) { this.cameraHandler.getTracks().forEach(track => { track.stop() track.enabled = false }) this.cameraHandler = null } // 小程序端特殊处理 // #ifdef MP-WEIXIN if (this.cameraContext) { this.cameraContext.stop() this.cameraContext = null } // #endif }

2.3 用户引导与错误处理

良好的用户体验需要完善的错误处理和用户引导：

常见错误场景处理表：

3. 高级功能实现

3.1 多摄像头切换策略

现代设备通常配备前后多个摄像头，流畅切换是基本需求：

async switchCamera() { // 获取所有视频设备 const devices = await navigator.mediaDevices.enumerateDevices() const videoDevices = devices.filter(d => d.kind === 'videoinput') if (videoDevices.length < 2) { this.showToast('未检测到多个摄像头') return } // 计算下一个摄像头索引 this.currentDeviceIndex = (this.currentDeviceIndex + 1) % videoDevices.length // 重新初始化摄像头 await this.reinitializeCamera( videoDevices[this.currentDeviceIndex].deviceId ) }

3.2 视频帧捕获与处理

获取视频帧是实现AR、人脸识别等功能的基础：

// 创建离屏Canvas捕获帧 const captureFrame = (videoElement, format = 'image/jpeg', quality = 0.92) => { const canvas = document.createElement('canvas') canvas.width = videoElement.videoWidth canvas.height = videoElement.videoHeight const ctx = canvas.getContext('2d') ctx.drawImage(videoElement, 0, 0) return canvas.toDataURL(format, quality) }

3.3 实时滤镜与特效

基于WebGL实现实时视频滤镜：

// 创建视频纹理 const createVideoTexture = (gl, video) => { const texture = gl.createTexture() gl.bindTexture(gl.TEXTURE_2D, texture) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) return texture } // 更新视频帧 const updateVideoTexture = (gl, texture, video) => { gl.bindTexture(gl.TEXTURE_2D, texture) gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video) }

4. 调试技巧与常见问题排查

4.1 跨平台调试方法

不同平台需要采用不同的调试策略：

H5端调试技巧：

• 使用Chrome设备模式模拟移动环境
• 通过chrome://media-internals检查媒体流状态
• 使用getUserMedia的advanced参数调试设备能力

小程序调试技巧：

• 利用微信开发者工具的"真机调试"功能
• 监控wx.onCameraFrame回调频率
• 检查基础库版本兼容性

4.2 典型问题解决方案

问题1：H5端在iOS上视频元素黑屏

解决方案：

• 确保<video>元素添加了playsinline属性
• 检查是否设置了muted属性（iOS要求自动播放的视频必须静音）
• 确认页面是通过用户交互触发摄像头启动

问题2：小程序端摄像头画面变形

解决方案：

// 根据设备宽高比调整样式 const adjustVideoStyle = () => { const { windowWidth, windowHeight } = wx.getSystemInfoSync() const aspectRatio = this.videoWidth / this.videoHeight const screenRatio = windowWidth / windowHeight if (aspectRatio > screenRatio) { this.videoStyle = `width: 100%; height: ${windowWidth / aspectRatio}px` } else { this.videoStyle = `width: ${windowHeight * aspectRatio}px; height: 100%` } }

问题3：Android设备上帧率不稳定

优化策略：

• 降低分辨率要求
• 使用torch模式保持对焦稳定
• 避免频繁的GC操作

const constraints = { video: { width: { ideal: 960 }, height: { ideal: 720 }, frameRate: { ideal: 24 }, // Android特有优化参数 advanced: [ { torch: true }, { focusMode: 'continuous' } ] } }