请问uniapp 如何调用前置摄像头

在uniapp中怎么调用设备的前置摄像头？我尝试了camera组件但默认是后置摄像头，文档里没找到切换前置摄像头的参数。需要实现扫码功能，但用户反馈后置摄像头不方便操作。请问应该如何设置才能强制使用前置摄像头？如果是API调用的话，具体的代码示例该怎么写？

2 回复

在uniapp中，使用<camera>组件，设置device-position为front即可调用前置摄像头。示例代码：

<camera device-position="front"></camera>

注意：部分安卓机需手动授权摄像头权限。


在 UniApp 中调用前置摄像头，可以通过 uni.chooseVideo 或 uni.createCameraContext 方法实现。以下是两种方式的示例：

1. 使用 uni.chooseVideo 方法

此方法适用于快速选择视频或拍摄视频，并支持指定摄像头。

uni.chooseVideo({
  sourceType: ['camera'], // 仅使用摄像头
  camera: 'front', // 指定前置摄像头
  success: (res) => {
    console.log('视频临时路径:', res.tempFilePath);
  },
  fail: (err) => {
    console.error('调用失败:', err);
  }
});

2. 使用 uni.createCameraContext 组件

在页面中嵌入 <camera> 组件，并通过上下文控制。

模板代码：

<template>
  <view>
    <camera device-position="front" style="width: 100%; height: 300px;"></camera>
    <button @tap="takePhoto">拍照</button>
  </view>
</template>

脚本代码：

export default {
  methods: {
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          console.log('照片临时路径:', res.tempImagePath);
        },
        fail: (err) => {
          console.error('拍照失败:', err);
        }
      });
    }
  }
}

注意事项：

  • 权限配置：在 manifest.json 中确保已添加摄像头权限（H5 和 App 平台需配置）。
  • 平台差异：device-position 属性在部分平台可能表现不同，建议真机测试。
  • H5 支持：H5 端使用摄像头时需通过 HTTPS 访问，且浏览器需支持相关 API。

选择哪种方式取决于具体需求：快速拍摄用 chooseVideo，自定义界面用 <camera> 组件。

回到顶部