更新记录

1.0.1（2026-06-27） 下载此版本

修改说明文档

1.0.0（2026-06-27） 下载此版本

初始版本

• 基于 renderjs 的相机预览功能
• 画面旋转（0° / 90° / 180° / 270°），CSS transform 丝滑过渡
• 前置摄像头水平镜像（照镜子效果）
• 前后置摄像头一键切换
• 拍照，支持旋转 + 镜像 + 容器比例 cover 裁切
• 容器显示尺寸可动态设置
• 降级 getUserMedia 约束（约束 #0~#3），提高老设备兼容性
• 权限自动检测与申请（plus.android.checkPermission 复查兜底）
• renderjs 回调逻辑层（notifyError / notifyToast / onPhotoTaken）
• 加载方式：<script src=".../camera-view.js"> 直接引用

平台兼容性

uni-app(3.7.13)

lu-camera-view

基于 renderjs 的相机预览、旋转、切换、拍照插件。支持 APP、H5。

使用方式

1. 模板：相机容器 & 通信绑定

<template>
  <view>
    <!-- 相机渲染容器，id 必须与 index.js 中 document.getElementById 一致 -->
    <view id="camera-container"
          class="camera-box"
          :style="{ width: videoSize.width + 'px', height: videoSize.height + 'px' }"
          :prop="cameraReady"
          :change:prop="cameraRender.onReadyChange"
          :angle="rotateAngle"
          :change:angle="cameraRender.updateRotation"
          :facing="facingMode"
          :change:facing="cameraRender.onFacingChange"
          :capture="captureTrigger"
          :change:capture="cameraRender.onCaptureChange">
    </view>
  </view>
</template>

2. 视图层：引入 renderjs 模块

<script module="cameraRender" lang="renderjs" src="../../uni_modules/lu-camera-view/js_sdk/index.js"></script>

路径中的 ../../ 根据页面文件相对于 uni_modules 的位置调整。 module 属性值 cameraRender 必须与模板中 :change:prop="cameraRender.xxx" 的命名空间一致。

3. 逻辑层：添加配套数据和方法

export default {
  data() {
    return {
      rotateAngle: 0,          // 旋转角度（累加值）
      cameraReady: false,      // 相机权限是否就绪
      facingMode: 'environment', // 摄像头方向
      captureTrigger: 0,       // 拍照触发器
      videoSize: { width: 375, height: 400 }, // 容器显示尺寸
      screenW: 375,            // 屏幕宽度
      screenH: 400,            // 屏幕高度
      previewSrc: '',          // 预览图
      previewVisible: false    // 是否显示预览
    }
  },
  onLoad() {
    // 初始化屏幕尺寸 + 申请权限
    const sys = uni.getSystemInfoSync();
    this.screenW = sys.windowWidth;
    this.screenH = sys.windowHeight - 140;
    this.videoSize = { width: this.screenW, height: this.screenH };
    this.requestCameraPermission();
  },
  onUnload() {
    this.cameraReady = false;
  },
  computed: {
    displayAngle() {
      return this.rotateAngle % 360;
    }
  },
  methods: {
    // 权限申请 - 需 APP/H5 分端处理
    requestCameraPermission() { /* 见下方说明 */ },
    // renderjs 错误回调
    onCameraError(payload) {
      uni.showModal({
        title: payload.title,
        content: payload.content,
        showCancel: false
      });
    },
    // renderjs 轻提示回调
    onCameraToast(title) {
      uni.showToast({ title, icon: 'none' });
    },
    rotate(deg) { this.rotateAngle += deg; },
    switchCamera() {
      this.facingMode = this.facingMode === 'environment' ? 'user' : 'environment';
    },
    setVideoSize(w, h) { this.videoSize = { width: w, height: h }; },
    takePhoto() {
      if (!this.cameraReady) { uni.showToast({ title: '相机未就绪', icon: 'none' }); return; }
      this.captureTrigger++;
    },
    onPhotoTaken(base64) {
      // 自定义处理
    },
    closePreview() {
      this.previewVisible = false;
      setTimeout(() => { this.previewSrc = ''; }, 200);
    }
  }
}

4. 完整示例

参考 pages/index/index.vue。

通信属性对照

API

加载后 renderjs 模块内提供以下方法：

renderjs → 逻辑层回调