uniapp leven系列原生插件

Appearance

leven2026-04-29
1394
7.2m

使用方法 ​

安卓USB双摄像头原生插件集成了双UVC摄像头预览拍照和录像，也可以使用单摄像头拍照、录像切换摄像头等操作

联系作者 ​

关注微信公众号可联系作者

插件地址 ​

https://ext.dcloud.net.cn/plugin?id=18828

权限 ​

  1. android.permission.CAMERA
  2. android.hardware.camera
  3. android.hardware.camera.autofocus
  4. android.permission.WRITE_EXTERNAL_STORAGE
  5. android.permission.READ_EXTERNAL_STORAGE
  6. android.hardware.usb.host

示例文件下载 ​

百度网盘
下载地址：https://pan.baidu.com/s/1nmwZCTvY43t-74MoXQZJpw
提取码：efif

双摄像头 ​

插件使用 ​

在使用插件的地方引入以下代码：

vue
<leven-uvcMultiCamera ref="refLevenUvcMultiCamera" style="flex:1; height: 300px; margin-bottom: 20px;" :config="config" @onAttach="onAttach"
        @onDeviceOpen="onDeviceOpen" @onCameraOpen="onCameraOpen" @onCameraClose="onCameraClose" @onDeviceClose="onDeviceClose" @onDetach="onDetach"
        @onCancel="onCancel">
      </leven-uvcMultiCamera>

页面内容 ​

vue
<template>
  <view>
    <uni-card title="双摄像头">
      <leven-uvcMultiCamera ref="refLevenUvcMultiCamera" style="flex:1; height: 300px; margin-bottom: 20px;" :config="config" @onAttach="onAttach"
        @onDeviceOpen="onDeviceOpen" @onCameraOpen="onCameraOpen" @onCameraClose="onCameraClose" @onDeviceClose="onDeviceClose" @onDetach="onDetach"
        @onCancel="onCancel">
      </leven-uvcMultiCamera>
    </uni-card>
    <!-- 按钮 -->
    <view style="margin-bottom: 20px;">
      <button type="primary" @click="close(1)">关闭左侧摄像头</button>
      <button type="primary" @click="close(2)">关闭右侧摄像头</button>
      <button type="primary" @click="close(0)">关闭所有摄像头</button>
      <button type="primary" @click="open(1)">打开左侧摄像头</button>
      <button type="primary" @click="open(2)">打开右侧摄像头</button>
      <button type="primary" @click="open(0)">打开所有摄像头</button>
      <button type="primary" @click="startRecording(1)">左侧摄像头录像</button>
      <button type="primary" @click="startRecording(2)">右侧摄像头录像</button>
      <button type="primary" @click="startRecording(0)">所有摄像头录像</button>
      <button type="primary" @click="stopRecording">停止录像</button>
      <button type="primary" @click="takePicture(1)">左侧摄像头拍照</button>
      <button type="primary" @click="takePicture(2)">右侧摄像头拍照</button>
      <button type="primary" @click="takePicture(0)">所有摄像头拍照</button>
      <button type="primary" @click="logStr = ''">清空日志</button>
    </view>
    <uni-card class="uni-card-box" title="日志">
      <view><text style="font-size: 14px; flex-wrap: wrap;">{{logStr}}</text></view>
    </uni-card>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        logStr: "",
        //预览文件配置
        config: {
          //设置视图的背景颜色，可以为空,如"#ffffff"
          rootBgColor: "#CCCC99",
          //视图的圆角值
          rootRadius: 10,
          //左侧摄像头圆角值
          leftCameraRadius: 10,
          //右侧摄像头圆角值
          rightCameraRadius: 10,
          //右侧摄像头距离左侧摄像头的距离
          rightMarginLeft: 10,
          //视图的内部padding
          rootPadding: [10, 10, 10, 10]
        },
        videopath: {
          leftPath: "",
          rightPath: ""
        },
        dirPath: "/storage/emulated/0/Movies/LevenUvcCamera/"
      }
    },
    methods: {
      //关闭摄像头
      close(type) {
        if (this.$refs.refLevenUvcMultiCamera) {
          this.$refs.refLevenUvcMultiCamera.close({
            type: type
          }, res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //开启摄像头
      open(type) {
        if (this.$refs.refLevenUvcMultiCamera) {
          this.$refs.refLevenUvcMultiCamera.open({
            type: type
          }, res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //开始录像
      startRecording(type) {
        if (this.$refs.refLevenUvcMultiCamera) {
          this.$refs.refLevenUvcMultiCamera.startRecording({
            type: type
          }, res => {
            if (res.code == 0 && res.data && res.data.path) {
              if (res.data.index == 1) {
                this.videopath.leftPath = res.data.path;
              } else if (res.data.index == 2) {
                this.videopath.rightPath = res.data.path;
              }
            }
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //停止录像
      stopRecording() {
        if (this.$refs.refLevenUvcMultiCamera) {
          this.$refs.refLevenUvcMultiCamera.stopRecording(res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //拍照
      takePicture(type) {
        if (this.$refs.refLevenUvcMultiCamera) {
          this.$refs.refLevenUvcMultiCamera.takePicture({
            type: type
          }, res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //加载成功
      onAttach(e) {
        this.writeLog("onAttach:" + JSON.stringify(e))
      },
      //设备打开
      onDeviceOpen(e) {
        this.writeLog("onDeviceOpen:" + JSON.stringify(e))
      },
      //摄像头打开
      onCameraOpen(e) {
        this.writeLog("onCameraOpen:" + JSON.stringify(e))
      },
      //摄像头关闭
      onCameraClose(e) {
        this.writeLog("onCameraClose:" + JSON.stringify(e))
      },
      //设备关闭
      onDeviceClose(e) {
        this.writeLog("onDeviceClose:" + JSON.stringify(e))
      },
      //设备卸载
      onDetach(e) {
        this.writeLog("onDetach:" + JSON.stringify(e))
      },
      //取消设备
      onCancel(e) {
        this.writeLog("onCancel:" + JSON.stringify(e))
      },
      // 写日志
      writeLog(str) {
        console.log(str)
        let logStr = uni.$lv.date.format(null, "yyyy-mm-dd hh:MM:ss") + " " + str + "\n";
        // let logStr = str + "\n";
        this.logStr = logStr + this.logStr;
      }
    }
  }
</script>

<style>

</style>

单摄像头 ​

插件使用 ​

在使用插件的地方引入以下代码：

vue
<leven-uvcCamera ref="refLevenUvcCamera" style="flex:1; height: 300px; margin-bottom: 20px;" :config="config" @onAttach="onAttach"
        @onDeviceOpen="onDeviceOpen" @onCameraOpen="onCameraOpen" @onCameraClose="onCameraClose" @onDeviceClose="onDeviceClose" @onDetach="onDetach"
        @onCancel="onCancel">
      </leven-uvcCamera>

页面内容 ​

vue
<template>
  <view>
    <uni-card title="单摄像头">
      <leven-uvcCamera ref="refLevenUvcCamera" style="flex:1; height: 300px; margin-bottom: 20px;" :config="config" @onAttach="onAttach"
        @onDeviceOpen="onDeviceOpen" @onCameraOpen="onCameraOpen" @onCameraClose="onCameraClose" @onDeviceClose="onDeviceClose" @onDetach="onDetach"
        @onCancel="onCancel">
      </leven-uvcCamera>
      <!-- 按钮 -->
      <view style="margin-bottom: 20px;">
        <button type="primary" @click="close">关闭摄像头</button>
        <button type="primary" @click="open">打开摄像头</button>
        <button type="primary" @click="getDeviceList">获取摄像头列表</button>
        <button type="primary" @click="switchCamera">切换摄像头</button>
        <button type="primary" @click="startRecording">开始录像</button>
        <button type="primary" @click="stopRecording">停止录像</button>
        <button type="primary" @click="takePicture">拍照</button>
        <button type="primary" @click="logStr = ''">清空日志</button>
      </view>
    </uni-card>
    <uni-card class="uni-card-box" title="日志">
      <view><text style="font-size: 14px; flex-wrap: wrap;">{{logStr}}</text></view>
    </uni-card>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        logStr: "",
        //预览文件配置
        config: {
          //视图的圆角值
          radius: 10
        },
        //摄像头列表
        deviceList: [],
        //当前摄像头的索引
        deviceIndex: 0
      }
    },
    methods: {
      //关闭摄像头
      close() {
        if (this.$refs.refLevenUvcCamera) {
          this.$refs.refLevenUvcCamera.close(res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //开启摄像头
      open() {
        if (this.$refs.refLevenUvcCamera) {
          this.$refs.refLevenUvcCamera.open(res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //获取摄像头列表
      getDeviceList() {
        if (this.$refs.refLevenUvcCamera) {
          this.$refs.refLevenUvcCamera.getDeviceList(res => {
            this.writeLog(JSON.stringify(res))
            if (res.code == 0 && res.data && res.data.deviceList && Array.isArray(res.data.deviceList)) {
              this.deviceList = res.data.deviceList;
            }
          })
        }
      },
      //获取摄像头列表
      switchCamera() {
        if (this.$refs.refLevenUvcCamera) {
          if (this.deviceList.length == 0) {
            uni.$lv.func.toast("请先获取摄像头列表");
            return;
          }
          if (this.deviceIndex >= this.deviceList.length) {
            this.deviceIndex = 0;
          } else {
            this.deviceIndex++;
          }
          this.$refs.refLevenUvcCamera.switchCamera({
            //摄像头名称
            deviceName: this.deviceList[this.deviceIndex].deviceName
          }, res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //开始录像
      startRecording(type) {
        if (this.$refs.refLevenUvcCamera) {
          this.$refs.refLevenUvcCamera.startRecording(res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //停止录像
      stopRecording() {
        if (this.$refs.refLevenUvcCamera) {
          this.$refs.refLevenUvcCamera.stopRecording(res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //拍照
      takePicture(type) {
        if (this.$refs.refLevenUvcCamera) {
          this.$refs.refLevenUvcCamera.takePicture(res => {
            this.writeLog(JSON.stringify(res))
          })
        }
      },
      //加载成功
      onAttach(e) {
        this.writeLog("onAttach:" + JSON.stringify(e))
      },
      //设备打开
      onDeviceOpen(e) {
        this.writeLog("onDeviceOpen:" + JSON.stringify(e))
      },
      //摄像头打开
      onCameraOpen(e) {
        this.writeLog("onCameraOpen:" + JSON.stringify(e))
      },
      //摄像头关闭
      onCameraClose(e) {
        this.writeLog("onCameraClose:" + JSON.stringify(e))
      },
      //设备关闭
      onDeviceClose(e) {
        this.writeLog("onDeviceClose:" + JSON.stringify(e))
      },
      //设备卸载
      onDetach(e) {
        this.writeLog("onDetach:" + JSON.stringify(e))
      },
      //取消设备
      onCancel(e) {
        this.writeLog("onCancel:" + JSON.stringify(e))
      },
      // 写日志
      writeLog(str) {
        let logStr = uni.$lv.date.format(null, "yyyy-mm-dd hh:MM:ss") + " " + str + "\n";
        this.logStr = logStr + this.logStr;
      }
    }
  }
</script>

<style>

</style>