更新记录

1.0.0（2026-05-27）

• 支持 uni-app x 标准模式 UTS 原生相机组件。
  • 支持 Android / iOS / Harmony Next 三端原生预览、拍照、录像。
  • 支持拍照和录像保存到系统相册或应用沙箱，并返回照片/视频路径。
  • 支持前后摄像头切换、默认摄像头配置、自动对焦、双指缩放。
  • 支持闪光灯关闭、开启、自动三种模式，覆盖拍照和录像。
  • 支持拍照、录像、错误、相机就绪等事件回调，便于业务接入。
  • 可高度自定义界面

平台兼容性

uni-app x(4.86)

luanqing-camera-uts

本插件由【上海栾青网络科技】研发推出的标准模式UTS 组件插件，无需打自定义基座，android/ios/鸿蒙三端通用，支持 uni-app x，可自动对焦、手势缩放。小程序视频动态水印我们也有方案，如有需要可以定制开发。

本插件首次上架，同时为了回馈新老用户，原定价168，限时优惠折扣价58，持续到2026年6月15号

从2021年开始进入市场，当时相机原生插件价格高达上千元，我们开发了第一款相机插件以108元的定价，将原生相机插件的价格打了下来，在接下来的5年时间里我们在uni的插件市场上开发和维护了多款相机类插件： Android+IOS的增强版插件 | Android+IOS的基础版插件 | Android低版本系统专用 | UTS兼容版插件 |

组件用途：

• 提供原生相机会话启动能力
• 拍照并通过回调返回照片路径
• 开始/结束录像，并在结束时通过回调返回视频路径
• 支持在预览画面上双指缩放

说明

• Android 使用 Camera2 + ImageReader + MediaRecorder。
• iOS 使用 AVFoundation。
• Harmony Next 使用 CameraKit + AVRecorder + photoAccessHelper + FileKit。
• Android、iOS、Harmony Next 均支持预览画面双指缩放；缩放比例会作用于预览、拍照和录像。
• Android、iOS、Harmony Next 均支持 flashMode 闪光灯配置，可选 off / on / auto，会作用于拍照和录像。
• Android、iOS、Harmony Next 均支持原生水印预览和拍照水印合成，水印样式可通过参数动态切换。
• isSaveToAlbum=true 时，拍照/录像保存到系统相册/媒体库；Android 返回 content:// URI，iOS 返回 ph:// PhotoKit 本地标识，Harmony Next 返回媒体库 URI。
• isSaveToAlbum=false 时，拍照/录像只保存到应用沙箱并返回沙箱绝对路径。

平台支持

组件属性

watermarkConfig 结构

{
  title: "工程记录",
  time: "15:22",
  date: "2026-05-27",
  week: "星期三",
  address: "上海市浦东新区",
  items: [
    { key: "施工单位", value: "栾青科技" },
    { key: "施工区域", value: "A区3号楼" },
    { key: "施工内容", value: "混凝土浇筑" }
  ],
  style: {
    backgroundColor: "#000000",
    backgroundOpacity: 0.72,
    titleColor: "#E53935",
    titleFontSize: 30,
    contentColor: "#FFFFFF",
    contentFontSize: 22
  }
}

说明：

• items 是灵活键值列表，不限制字段名称；每一项按 key：value 渲染。
• time、date、week 不传时，插件端会使用当前时间自动补齐。
• style 不传时使用插件默认样式；颜色建议传 #RRGGBB。
• 四个模块样式由三端原生分别绘制，预览层和拍照合成使用同一套配置。

组件事件

path 的含义取决于 isSaveToAlbum：保存系统相册/媒体库时是平台资源 URI 或标识；保存沙箱时是本地绝对路径。

组件方法

startPreview

启动原生预览。

this.$refs.cameraHelper.startPreview()

stopPreview

停止原生预览。

this.$refs.cameraHelper.stopPreview()

takePhoto

拍照并返回照片路径。

this.$refs.cameraHelper.takePhoto(
  (path) => {
    console.log("照片路径:", path)
  },
  (error) => {
    console.error("拍照失败:", error)
  }
)

startRecord

开始录像。成功回调表示录像真正开始。

this.$refs.cameraHelper.startRecord(
  () => {
    console.log("录像已开始")
  },
  (error) => {
    console.error("开始录像失败:", error)
  }
)

stopRecord

结束录像并返回视频路径。

this.$refs.cameraHelper.stopRecord(
  (path) => {
    console.log("视频路径:", path)
  },
  (error) => {
    console.error("结束录像失败:", error)
  }
)

switchCamera

切换前后摄像头。

this.$refs.cameraHelper.switchCamera()

setCameraFacing

切换到指定摄像头方向。可选值为 front / back，传入其它值会按 back 处理。

this.$refs.cameraHelper.setCameraFacing("front")

setWatermarkConfig

动态更新水印配置。

this.$refs.cameraHelper.setWatermarkConfig(
  true,
  "style4",
  {
    title: "工程记录",
    items: [
      { key: "施工单位", value: "栾青科技" },
      { key: "施工内容", value: "混凝土浇筑" }
    ],
    style: {
      backgroundColor: "#000000",
      backgroundOpacity: 0.72,
      titleColor: "#E53935",
      titleFontSize: 30,
      contentColor: "#FFFFFF",
      contentFontSize: 22
    }
  },
  "bottomLeft"
)

使用示例

<template>
  <view class="page">
    <luanqing-camera-uts
      ref="cameraHelper"
      defaultCamera="back"
      :camera="cameraFacing"
      :autoPreview="true"
      :isSaveToAlbum="true"
      flashMode="auto"
      :watermarkEnabled="true"
      watermarkStyle="style4"
      watermarkPosition="bottomLeft"
      :watermarkConfig="watermarkConfig"
      @ready="onReady"
      @photoTaken="onPhotoTaken"
      @videoStart="onVideoStart"
      @videoStop="onVideoStop"
      @recordFail="onRecordFail"
      @error="onCameraError"
    />

    <button @click="startPreview">启动预览</button>
    <button @click="takePhoto">拍照</button>
    <button @click="startRecord">开始录像</button>
    <button @click="stopRecord">结束录像</button>
    <button @click="switchCamera">切换摄像头</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraFacing: "back",
      watermarkConfig: {
        title: "工程记录",
        address: "上海市浦东新区",
        items: [
          { key: "施工单位", value: "栾青科技" },
          { key: "施工区域", value: "A区3号楼" },
          { key: "施工内容", value: "混凝土浇筑" }
        ],
        style: {
          backgroundColor: "#000000",
          backgroundOpacity: 0.72,
          titleColor: "#E53935",
          titleFontSize: 30,
          contentColor: "#FFFFFF",
          contentFontSize: 22
        }
      }
    }
  },
  methods: {
    startPreview() {
      this.$refs.cameraHelper.startPreview()
    },
    takePhoto() {
      this.$refs.cameraHelper.takePhoto((path) => {
        console.log("photo path:", path)
      })
    },
    startRecord() {
      this.$refs.cameraHelper.startRecord(() => {
        console.log("record started")
      })
    },
    stopRecord() {
      this.$refs.cameraHelper.stopRecord((path) => {
        console.log("video path:", path)
      })
    },
    switchCamera() {
      const next = this.cameraFacing == "back" ? "front" : "back"
      this.$refs.cameraHelper.setCameraFacing(next)
      this.cameraFacing = next
    },
    onReady(e) {
      console.log("camera ready:", e.detail)
    },
    onPhotoTaken(e) {
      console.log("photo payload:", e.detail)
    },
    onVideoStart(e) {
      console.log("video start:", e.detail)
    },
    onVideoStop(e) {
      console.log("video stop:", e.detail)
    },
    onRecordFail(e) {
      console.error("record fail:", e.detail)
    },
    onCameraError(e) {
      console.error("camera error:", e.detail)
    }
  }
}
</script>

权限说明

项目侧需要确保具备以下权限描述或权限声明：

• Android: CAMERA、RECORD_AUDIO；isSaveToAlbum=true 且需兼容 Android 9 及以下保存到系统相册时，还需要 WRITE_EXTERNAL_STORAGE。
• iOS: NSCameraUsageDescription、NSMicrophoneUsageDescription；isSaveToAlbum=true 保存到相册时，还需要 NSPhotoLibraryUsageDescription / NSPhotoLibraryAddUsageDescription。
• Harmony Next: ohos.permission.CAMERA、ohos.permission.MICROPHONE；isSaveToAlbum=true 保存到媒体库时，还需要 ohos.permission.WRITE_IMAGEVIDEO。该权限是系统授权，不是每次保存都弹出的相册选择框。

如果你的主工程已经在 manifest.json 或对应平台配置里声明过这些权限，可以直接使用。