相机组件

camera 组件是 Uniapp 中用于在页面内嵌入相机功能的组件，适用于需要在特定区域显示摄像头预览的场景。与点击后全屏打开的相机不同，camera 组件可以直接在页面中显示摄像头画面，并支持拍照、扫码等功能。

1. 什么是 camera 组件？

camera 组件用于在页面中直接嵌入摄像头视图，用户可以在页面中实时预览摄像头画面，并通过编程方式控制拍照、扫码等操作。该组件适合应用在拍照识别、扫码验证等场景中。

使用场景

• 拍照上传：在页面内展示相机，用户可以直接拍照并上传照片。
• 扫码功能：集成扫码功能，用户可以直接在相机区域扫码，并获取扫码结果。
• 身份证或银行卡扫描：结合 OCR 功能，使用 camera 组件进行文档或证件识别。
• AR 应用：在相机视图上叠加 AR 内容，实现增强现实效果。

2. camera 组件的常用属性

camera 组件提供了多种属性，用于控制相机的设备、分辨率、闪光灯、帧数据等。下表列出了常用属性的详细说明及使用示例。

属性名	类型	默认值	说明	平台差异说明
mode	String	normal	应用模式，有效值为 normal（相机模式），scanCode（扫码模式）	无
device-position	String	back	前置或后置摄像头，值为 front、back	无
flash	String	auto	闪光灯状态，值为 auto、on、off、torch	无
resolution	String	medium	相机分辨率，值为 low、medium、high	部分平台支持
frame-size	String	medium	指定期望的相机帧数据尺寸，值为 small、medium、large	部分平台支持
@error	EventHandle	无	当相机发生错误时触发，例如用户不允许使用摄像头时	无
@initdone	EventHandle	无	当相机初始化完成时触发，返回相机的最大缩放值 maxZoom	部分平台支持
@scancode	EventHandle	无	在扫码识别成功时触发，仅在 mode="scanCode" 时生效	部分平台支持

2.1 应用模式 mode

• 说明：设置相机的工作模式，包括 normal（相机模式）和 scanCode（扫码模式）。
• 类型：String
• 默认值：normal

<template>
  <view>
    <!-- 普通相机模式 -->
    <camera mode="normal" device-position="back" style="width: 100%; height: 300px;" />
  </view>
</template>

2.2 设备位置 device-position

• 说明：控制相机使用前置还是后置摄像头，front 为前置，back 为后置。
• 类型：String
• 默认值：back

<template>
  <view>
    <!-- 使用前置摄像头 -->
    <camera device-position="front" style="width: 100%; height: 300px;" />
  </view>
</template>

2.3 闪光灯控制 flash

• 说明：设置相机闪光灯的状态，可选择自动、开启、关闭或手电筒模式。
• 类型：String
• 默认值：auto

<template>
  <view>
    <!-- 闪光灯手电筒模式 -->
    <camera flash="torch" style="width: 100%; height: 300px;" />
  </view>
</template>

2.4 分辨率设置 resolution

• 说明：控制相机的分辨率，支持 low、medium、high 三种分辨率，具体效果因设备而异。
• 类型：String
• 默认值：medium

<template>
  <view>
    <!-- 高分辨率模式 -->
    <camera resolution="high" style="width: 100%; height: 300px;" />
  </view>
</template>

2.5 拍照功能

• 说明：通过 camera 组件内的 createCameraContext() 方法，可以调用拍照功能并获取拍摄的照片。

<template>
  <view>
    <camera device-position="back" flash="off" @error="handleError" style="width: 100%; height: 300px;" />
    <button type="primary" @click="takePhoto">拍照</button>
    <view>拍摄结果预览</view>
    <image mode="widthFix" :src="photoSrc" />
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 存储拍摄的图片路径
const photoSrc = ref('');

// 拍照方法
const takePhoto = () => {
  const ctx = uni.createCameraContext();
  ctx.takePhoto({
    quality: 'high',
    success: (res) => {
      // 将拍摄的照片路径赋值给 photoSrc
      photoSrc.value = res.tempImagePath;
    },
    fail: (err) => {
      console.log('拍照失败', err);
    },
  });
};

// 处理相机错误
const handleError = (e) => {
  console.log('相机错误', e.detail);
};
</script>

<style scoped>
/* 相机视图 */
camera {
  border: 1px solid #ccc;
}

/* 预览图片 */
image {
  margin-top: 20px;
  width: 100%;
  height: auto;
}
</style>

2.6 扫码功能 mode="scanCode"

• 说明：通过设置 mode 为 scanCode，可以启用扫码功能。扫码成功后，会触发 @scancode 事件，返回扫码结果。

<template>
  <view>
    <camera mode="scanCode" device-position="back" @scancode="onScanCode" style="width: 100%; height: 300px;" />
  </view>
</template>

<script setup>
const onScanCode = (event) => {
  console.log('扫码成功，结果为:', event.detail);
};
</script>

3. 拍照与扫码功能

以下案例展示了如何使用 camera 组件，实现拍照与扫码功能。通过组合属性和事件，可以灵活控制相机的使用场景。

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

    <!-- 扫码模式 -->
    <camera mode="scanCode" device-position="back" @scancode="onScanCode" style="width: 100%; height: 300px;" />

    <!-- 拍摄的照片预览 -->
    <view>预览</view>
    <image mode="widthFix" :src="photoSrc" />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const photoSrc = ref('');

// 拍照方法
const takePhoto = () => {
  const ctx = uni.createCameraContext();
  ctx.takePhoto({
    quality: 'high',
    success: (res) => {
      photoSrc.value = res.tempImagePath;
    },
  });
};

// 扫码成功事件
const onScanCode = (event) => {
  console.log('扫码成功，结果为:', event.detail);
};

// 相机错误处理
const handleError = (e) => {
  console.log('相机错误', e.detail);
};
</script>

<style scoped>
camera {
  margin-bottom: 20px;
}
image {
  margin-top: 10px;
  width: 100%;
  height: auto;
}
</style>