更新记录

1.0.1(2024-12-10)

1、升级稳定性。 2、新增分辨率设置。 3、新增摄像头旋转。 4、新增demo apk。 4、更新使用方法。

1.0.0(2024-10-18)

新版本上传


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.29,Android:6.0,iOS:不支持,HarmonyNext:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

使用示例

<template>
    <view>
        <view class="camera">
            <laowu-uvccamera v-if="showCamera" class="camera-uvc" @captureSuccess="captureSuccess" @deviceList="getDeviceList"
                ref="laowuCameraUvc" style="width: 360px;height: 265px;" />
            <view class="camera-list">
                <view class="item-camera" @click="openCamera(index as Int)" v-for="(item,index) in cameraList" :key="index">
                    设备:
                    ID: {{item['id']}},
                    name: {{item['name']}},
                    manufacturerName:{{ item['manufacturerName'] }},
                    productName:{{item['productName']}},
                    vendorId:{{item['vendorId']}},
                    productId:{{item['productId']}},
                </view>
            </view>

            <view class="button-list">
                <view class="button-item" @click="capture">
                    拍照
                </view>
                <view class="button-item" @click="getSupportedSizeList">
                    获取支持的分辨率
                </view>
                <view class="button-item" @click="rotateBy">
                    旋转摄像头
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import Size from "com.serenegiant.usb.Size";
    import JSONObject from "org.json.JSONObject";
    type VForObject = {
        index : number,
        id : number,
        name : string,
        manufacturerName : string,
        productName : string,
        version : string,
        serialNumber : string,
        vendorId : number,
        productId : number
    }
    export default {
        data() {
            return {
                showCamera: false,
                cameraList: [] as Array<VForObject>,
                initCamera: false
            }
        },
        onLoad() {
            this.showCamera = true
        },
        methods: {
            // 拍照成功回调
            captureSuccess(e : UTSJSONObject) {
                console.log(e)
            },
            // 获取支持的分辨率
            getSupportedSizeList() {
                if (!this.initCamera) {
                    uni.showToast({
                        title: '请先打开摄像头',
                        icon: 'none'
                    });
                    return;
                }
                let size : MutableList<Size> = (this.$refs['laowuCameraUvc'] as LaowuUvccameraElement).getSupportedSizeList();
                console.log(size)
            },
            // 获取设备列表回调
            getDeviceList(str : string) {
                let list = JSON.parse(str)
                this.cameraList = [];
                for (let i = 0; i < (list as Array).length; i++) {
                    let row = (list[i] as UTSJSONObject)
                    this.cameraList.push({
                        id: row['id'] as number,
                        index: row['index'] as number,
                        name: row['name'] as string,
                        manufacturerName: row['manufacturerName'] as string,
                        productName: row['productName'] as string,
                        version: row['version'] as string,
                        serialNumber: row['serialNumber'] as string,
                        vendorId: row['vendorId'] as number,
                        productId: row['productId'] as number
                    } as VForObject)
                }
            },
            // 旋转摄像头
            rotateBy() {
                if (!this.initCamera) {
                    uni.showToast({
                        title: '请先打开摄像头',
                        icon: 'none'
                    });
                    return;
                }
                (this.$refs['laowuCameraUvc'] as LaowuUvccameraElement).rotateBy(90);
            },
            // 拍照
            capture() {
                if (!this.initCamera) {
                    uni.showToast({
                        title: '请先打开摄像头',
                        icon: 'none'
                    });
                    return;
                }
                (this.$refs['laowuCameraUvc'] as LaowuUvccameraElement).capture();
            },
            // 打开摄像头 摄像头编号
            openCamera(cameraIndex : Int) {
                this.initCamera = true;
                // 第二个参数是分辨率,支持的分辨率可以通过getSupportedSizeList方法获得,
                let _fpsList : Int[] = [30, 15, 10];
                let previewSize : Size = new Size(7, 800, 600, 30, _fpsList);
                (this.$refs['laowuCameraUvc'] as LaowuUvccameraElement).startApp(cameraIndex, previewSize);

            }
        }
    }
</script>

<style>
    .camera {}

    .camera-uvc {
        margin: auto;
    }

    .item-camera {
        width: 80%;
        margin: auto;
        margin-bottom: 20px;
        margin-top: 10px;

    }

    .button-list {
        width: 80%;
        margin: auto;
        margin-bottom: 20px;
        margin-top: 10px;
    }
</style>

演示查看

演示查看

隐私、权限声明

1. 本插件需要申请的系统权限列表:

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

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问