uni-app 安卓原生摄像头预览拍照 自定义前后置摄像头拍照 - 解解 拍照及打开摄像机问题

在uni-app中实现安卓原生摄像头预览拍照，并自定义前后置摄像头拍照功能，可以通过使用uni-app提供的API结合原生插件来实现。以下是一个基本的代码案例，展示了如何在uni-app中实现这些功能。

首先，确保你的项目已经配置好Android平台，并且已经安装了必要的依赖。

1. 在pages.json中配置页面

确保你有一个页面用于显示摄像头预览和拍照按钮。

{
  "pages": [
    {
      "path": "pages/camera/camera",
      "style": {
        "navigationBarTitleText": "摄像头"
      }
    }
  ]
}

2. 在camera.vue页面中实现功能

<template>
  <view class="container">
    <camera
      :device-position="cameraPosition"
      flash="auto"
      @error="handleError"
      style="width: 100%; height: 100%;"
    ></camera>
    <button @click="switchCamera">切换摄像头</button>
    <button @click="takePhoto">拍照</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraPosition: 'back', // 默认后置摄像头
      tempFilePath: ''
    };
  },
  methods: {
    switchCamera() {
      this.cameraPosition = this.cameraPosition === 'back' ? 'front' : 'back';
    },
    takePhoto() {
      const that = this;
      uni.createCameraContext().takePhoto({
        quality: 'high',
        success: (res) => {
          that.tempFilePath = res.tempImagePath;
          // 这里可以添加保存照片的逻辑
          console.log('拍照成功：', that.tempFilePath);
        },
        fail: (err) => {
          console.error('拍照失败：', err);
        }
      });
    },
    handleError(err) {
      console.error('摄像头错误：', err);
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin: 10px;
}
</style>

3. 注意事项

• 确保在manifest.json中配置了必要的权限，比如camera和writeFiles。
• 在真机调试时，确保Android设备已经授予了应用相机权限。
• 拍照后的图片路径tempFilePath可以用于预览或上传等操作。

以上代码展示了如何在uni-app中通过简单的配置和API调用实现安卓原生摄像头预览、拍照以及前后置摄像头切换功能。根据实际需求，你可以进一步扩展和优化代码，比如添加图片预览、裁剪等功能。