当前位置：首页 > uni-app

uniapp 调相机

2026-03-05 03:11:57uni-app

调用相机功能

在uni-app中调用相机功能可以通过使用uni.chooseImage或uni.chooseVideoAPI实现，分别用于拍照和录制视频。以下为具体实现方法：

拍照功能

使用uni.chooseImage方法可以选择或直接调用相机拍照。示例代码如下：

uni.chooseImage({
  count: 1, // 默认选择一张图片
  sourceType: ['camera'], // 仅使用相机
  success: function (res) {
    const tempFilePaths = res.tempFilePaths; // 返回图片临时路径
    console.log('图片路径:', tempFilePaths);
  },
  fail: function (err) {
    console.error('调用相机失败:', err);
  }
});

录制视频

通过uni.chooseVideo方法可以调用相机录制视频：

uni.chooseVideo({
  sourceType: ['camera'], // 仅使用相机
  maxDuration: 30, // 最大录制时长（秒）
  success: function (res) {
    const tempFilePath = res.tempFilePath; // 返回视频临时路径
    console.log('视频路径:', tempFilePath);
  }
});

权限配置

在调用相机前，需确保应用已获取摄像头权限：

Android平台：在manifest.json中配置以下权限：
```
"permission": {
"android.permission.CAMERA": {}
}
```

iOS平台：需在manifest.json中声明使用摄像头，并描述用途：

"ios": {
"privacyDescription": {
  "camera": "用于拍照或录制视频"
}
}

兼容性处理

不同平台对相机调用的支持可能存在差异：

H5端：部分浏览器可能不支持直接调用摄像头，需用户手动选择文件上传。
微信小程序：需在app.json中声明camera权限。

错误处理

建议在调用相机时添加完整的错误处理逻辑，例如用户拒绝授权或设备无摄像头的情况：

uni.chooseImage({
  sourceType: ['camera'],
  fail: function (err) {
    if (err.errMsg.includes('auth deny')) {
      uni.showToast({ title: '请授权使用摄像头', icon: 'none' });
    } else {
      uni.showToast({ title: '摄像头不可用', icon: 'none' });
    }
  }
});

扩展功能

若需自定义相机界面（如添加水印、滤镜），可使用<camera>组件：

<template>
  <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
  <button @click="takePhoto">拍照</button>
</template>

<script>
export default {
  methods: {
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          console.log('照片路径:', res.tempImagePath);
        }
      });
    },
    error(e) {
      console.error('相机错误:', e.detail);
    }
  }
};
</script>

以上方法覆盖了uni-app中调用相机的主要场景，开发者可根据实际需求调整参数或扩展功能。

uniapp 调相机