uniapp中如何使用navigator.mediaDevices.getUserMedia调用摄像头

在uniapp中如何调用navigator.mediaDevices.getUserMedia来访问设备摄像头？我在H5端测试时遇到权限被拒绝的问题，但在普通网页中同样的代码可以正常工作。是不是uniapp对Web API的支持有特殊限制？需要配置什么额外参数或权限吗？

2 回复

在uniapp中，直接使用navigator.mediaDevices.getUserMedia可能不兼容。建议使用uni.createCameraContext()创建相机上下文，通过startRecord等方法操作摄像头。或者使用<camera>组件实现摄像头功能。


在 UniApp 中，navigator.mediaDevices.getUserMedia 无法直接使用，因为 UniApp 运行在非标准浏览器环境（如小程序或 App）。以下是解决方案：

1. H5 环境

在 H5 页面中，可以直接使用标准 Web API：

// 检查兼容性
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(stream => {
      const video = document.getElementById('video');
      video.srcObject = stream;
    })
    .catch(error => console.error('摄像头访问失败:', error));
}

2. 小程序环境

使用 uni.chooseVideo 或 uni.createCameraContext：

// 选择视频（包含摄像头）
uni.chooseVideo({
  sourceType: ['camera'],
  success: res => console.log('视频路径:', res.tempFilePath)
});

// 或使用相机组件
// 在模板中：<camera device-position="back"></camera>

3. App 环境（含 NVUE）

使用 plus.camera 或 uni.createCameraContext：

// 使用 HTML5+ API
const camera = plus.camera.getCamera();
camera.captureImage(path => {
  console.log('照片路径:', path);
});

// 或使用 uni API（同小程序）
uni.createCameraContext().takePhoto({
  success: res => console.log('照片临时路径:', res.tempImagePath)
});

注意事项：

  • 权限配置：在 App 中需在 manifest.json 配置摄像头权限。
  • 平台差异：不同平台 API 和组件支持度不同，需做好条件编译。

根据你的目标平台选择对应方法即可实现摄像头调用。

回到顶部