更新记录

1.0.0（2025-12-12）

初代版本提交

平台兼容性

uni-app(4.29)

uni-app x(4.81)

luanqing-uts-camera

基于 UTS 标准模式开发的原生相机组件，支持相机预览、拍照、录像功能。 由上海栾青网络科技有限公司出品

平台支持

• Android: 需要 API 21+ (Android 5.0+)以上
• iOS: 需要 iOS 12.0+以上

平台支持

下期开发计划

1. 支持纯血鸿蒙系统
2. 水印模版功能支持

广告推广

轻语API

提供语音翻译、语音转文字、文字转语音、企业工商信息、逆地理编码、地理编码等丰富的 API 服务。 👉 立即访问 轻语API

水印相机原生插件

高自由度水印配置，支持动态时间水印的纯原生相机插件。 👉 前往 DCloud 插件市场

安装使用

1. 导入组件

将 luanqing-uts-camera 文件夹复制到项目的 uni_modules 目录下。

2. 在页面中使用

<template>
  <view class="page">
    <luanqing-uts-camera
      ref="cameraRef"
      :cameraFacing="cameraFacing"
      :autoPreview="true"
      @ready="onCameraReady"
      @error="onCameraError"
      @photoTaken="onPhotoTaken"
      @videoStart="onVideoStart"
      @videoStop="onVideoStop"
      class="camera"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraFacing: 'back' as string
    }
  },
  methods: {
    onCameraReady() {
      console.log('相机已就绪')
    },
    onCameraError(message: string) {
      console.error('相机错误:', message)
    },
    onPhotoTaken(path: string) {
      console.log('照片已保存:', path)
    },
    onVideoStart() {
      console.log('开始录像')
    },
    onVideoStop(path: string) {
      console.log('录像已保存:', path)
    },
    // 拍照
    takePhoto() {
      const camera = this.$refs['cameraRef'] as ComponentPublicInstance
      camera.$callMethod('takePhoto')
    },
    // 切换摄像头
    switchCamera() {
      this.cameraFacing = this.cameraFacing === 'back' ? 'front' : 'back'
    },
    // 开始录像
    startRecord() {
      const camera = this.$refs['cameraRef'] as ComponentPublicInstance
      camera.$callMethod('startRecord')
    },
    // 停止录像
    stopRecord() {
      const camera = this.$refs['cameraRef'] as ComponentPublicInstance
      camera.$callMethod('stopRecord')
    }
  }
}
</script>

<style>
.page {
  flex: 1;
}
.camera {
  width: 100%;
  height: 500px;
}
</style>

组件属性 (Props)

组件事件 (Events)

组件方法 (Methods)

通过 ref 获取组件实例后，可调用以下方法：

方法调用示例

// 获取组件实例
const camera = this.$refs['cameraRef'] as ComponentPublicInstance

// 拍照
camera.$callMethod('takePhoto')

// 开始录像
camera.$callMethod('startRecord')

// 停止录像
camera.$callMethod('stopRecord')

// 切换摄像头
camera.$callMethod('switchCamera')

// 开始预览
camera.$callMethod('startPreview')

// 停止预览
camera.$callMethod('stopPreview')

权限配置

Android

组件会自动请求以下权限：

• android.permission.CAMERA - 相机权限
• android.permission.RECORD_AUDIO - 录音权限（录像需要）

iOS

需要在 manifest.json 或 Info.plist 中配置以下权限说明：

{
  "app-plus": {
    "distribute": {
      "ios": {
        "privacyDescription": {
          "NSCameraUsageDescription": "需要访问相机进行拍照和录像",
          "NSMicrophoneUsageDescription": "需要访问麦克风进行录像",
          "NSPhotoLibraryAddUsageDescription": "需要保存照片和视频到相册"
        }
      }
    }
  }
}

文件保存路径

Android

• 照片保存路径：/storage/emulated/0/Android/data/[包名]/files/Pictures/LQCamera/IMG_yyyyMMdd_HHmmss.jpg
• 视频保存路径：/storage/emulated/0/Android/data/[包名]/files/Movies/LQCamera/VID_yyyyMMdd_HHmmss.mp4

iOS

• 照片和视频会保存到系统相册
• 事件返回的 path 为相册路径标识

注意事项

1. 相机预览尺寸：组件会自动适配容器尺寸，建议设置明确的宽高。

2. 权限处理：首次使用时会自动请求相机和麦克风权限，如果用户拒绝，会触发 error 事件。

3. 生命周期：

   • 页面 onUnload 时组件会自动释放相机资源
   • 如需手动控制，可调用 stopPreview 方法

4. 录像限制：

   • 录像过程中不能拍照
   • 建议录像时提供明显的录像状态提示

5. 前置摄像头：

   • 部分设备前置摄像头可能不支持某些分辨率
   • 前置摄像头预览画面会自动镜像

开发文档

• UTS 语法
• UTS API 插件
• UTS 标准模式组件
• Hello UTS

更新日志

1.0.0

• 初始版本
• 支持 Android 和 iOS 平台
• 支持相机预览、拍照、录像功能
• 支持前后摄像头切换