更新记录

1.0.0（2026-01-07）

• 支持自带摄像头、usb摄像头

平台兼容性

uni-app(4.31)

uni-app x(4.31)

其他

biming-camera

一个基于 CameraX 实现的 Android 原生相机组件。

平台支持

• [x] Android
• [x] nvue、uvue

使用方法

NVUE 示例

<template>
  <view>
    <biming-camera ref="camera" style="width: 100%; height: 300px;"></biming-camera>
    <button @click="handleSwitchCamera">切换摄像头</button>
    <button @click="handleTakePhoto">拍照</button>
    <button @click="handleGetCurrentFrame">获取当前帧</button>
    <image v-if="imageData" :src="imageData" style="width: 100px; height: 150px;"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imageData: ''
      }
    },
    methods: {
      handleSwitchCamera() {
        this.$refs.camera.switchCamera();
      },
      handleTakePhoto() {
        this.$refs.camera.captureImage((base64) => {
          console.log('照片已拍摄, Base64 长度:', base64.length);
          this.imageData = 'data:image/jpeg;base64,' + base64;
        });
      },
      handleGetCurrentFrame() {
        this.$refs.camera.getFrameBase64((base64) => {
          console.log('当前帧已获取, Base64 长度:', base64.length);
          this.imageData = 'data:image/jpeg;base64,' + base64;
        });
      }
    }
  }
</script>

UVUE 示例

<template>
  <view>
    <!-- 放置相机组件 -->
    <biming-camera ref="camera" style="width: 100%; height: 300px;" @error="onCameraError"></biming-camera>

    <!-- 控制按钮 -->
    <button @click="switchCm">切换摄像头</button>
    <button @click="takePhoto">拍照</button>
    <button @click="getFrame">获取预览帧</button>

    <!-- 显示拍摄或截取的图片 -->
    <image v-if="imgSrc != ''" :src="imgSrc" style="width: 100px; height: 150px; margin-top: 10px;"></image>
  </view>
</template>

<script>
import {
  switchCamera,
  captureImage,
  getFrameBase64
} from "@/uni_modules/biming-camera"

export default {
  data() {
    return {
      imgSrc: ''
    }
  },
  methods: {
    onCameraError(e: any) {
      console.error('相机组件出错:', e);
    },
    switchCm() {
      switchCamera();
    },
    takePhoto() {
      captureImage((base64: string) => {
        this.imgSrc = 'data:image/jpeg;base64,' + base64;
      });
    },
    getFrame() {
      getFrameBase64((base64: string) => {
        this.imgSrc = 'data:image/jpeg;base64,' + base64;
      });
    }
  }
}
</script>

Android 权限配置

插件已在 uni_modules/biming-camera/utssdk/app-android/AndroidManifest.xml 中配置所需权限，无需手动添加。

<uses-permission android:name="android.permission.CAMERA" />

API

switchCamera()

切换前后摄像头。

• 调用方式:
  • NVUE: this.$refs.camera.switchCamera()
  • UVUE: import { switchCamera } from "@/uni_modules/biming-camera"; switchCamera();
• 参数: 无
• 返回值: 无

captureImage(callback)

执行拍照操作。照片数据将通过回调函数返回。

• 调用方式:
  • NVUE: this.$refs.camera.captureImage(callback)
  • UVUE: import { captureImage } from "@/uni_modules/biming-camera"; captureImage(callback);
• 参数:
  • callback: (base64: string) => void
  • 拍照成功后的回调函数。
  • base64: 照片的 Base64 字符串 (JPEG 格式)。
• 返回值: 无

getFrameBase64(callback)

获取当前预览视图的快照。

• 调用方式:
  • NVUE: this.$refs.camera.getFrameBase64(callback)
  • UVUE: import { getFrameBase64 } from "@/uni_modules/biming-camera"; getFrameBase64(callback);
• 参数:
  • callback: (base64: string) => void
  • 获取成功后的回调函数。
  • base64: 预览帧图像的 Base64 字符串 (JPEG 格式)。
• 返回值: 无