更新记录

1.0.2（2025-09-11）

*

1.0.1（2025-09-09）

*

1.0.0（2025-09-09）

*

查看更多

平台兼容性

uni-app(4.76)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× × × × × - 4.4 × ×
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
× × × × × × × × × × ×

其他

多语言 暗黑模式 宽屏模式
× × √

开发文档

使用方法

    <hk-video-view ref="HCNet" :deviceIp="deviceIp" :devicePort="devicePort" :username="username"
    :password="password" :channel="channel" :autoLogin="true" :showPreview="true"
    @loginSuccess="onLoginSuccess" @loginFailed="onLoginFailed" @previewStart="onPreviewStart"
      :style="{width:'100%',height:palyerHeight}" />

方法 登录

参数 deviceIp :设备IP
    devicePort:端口
    username:账号
    password：密码
    channel：通道
this.$refs.HCNet.login();

登出 this.$refs.HCNet.logout();

预览 this.$refs.HCNet.startPreview();

停止预览 this.$refs.HCNet.stopPreview();

云台控制 this.$refs.HCNet.stopPreview(command,type);

  type： 1 开始， 0停止
 command: 海康PTZ指令码
 HEATER_PWRON 5 接通加热器开关
 AUX_PWRON1 6 接通辅助设备开关
 AUX_PWRON2 7 接通辅助设备开关
 ZOOM_IN 11 焦距变大(倍率变大)
 ZOOM_OUT 12 焦距变小(倍率变小)
 FOCUS_NEAR 13 焦点前调
 FOCUS_FAR 14 焦点后调
 IRIS_OPEN 15 光圈扩大
 IRIS_CLOSE 16 光圈缩小
 TILT_UP 21 云台上仰
 TILT_DOWN 22 云台下俯
 PAN_LEFT 23 云台左转
 PAN_RIGHT 24 云台右转
 UP_LEFT 25 云台上仰和左转
 UP_RIGHT 26 云台上仰和右转
 DOWN_LEFT 27 云台下俯和左转
 DOWN_RIGHT 28 云台下俯和右转
 PAN_AUTO 29 云台左右自动扫描

this.$refs.HCNet.stopPreview(command,type);

示例代码

<template>
    <view class="camerapage">
        <view class="title"><text class="title">摄像头设置</text></view>
        <view class="box">
            <view class="video">

                <hk-video-view ref="HCNet" :deviceIp="deviceIp" :devicePort="devicePort" :username="username"
                    :password="password" :channel="channel" :autoLogin="true" :showPreview="true"
                    @loginSuccess="onLoginSuccess" @loginFailed="onLoginFailed" @previewStart="onPreviewStart"
                      :style="{width:'100%',height:palyerHeight}" />
                <view class="tips" v-if="!connect"><text>设备未连接...</text></view>
            </view>

            <view class="workbench">
                <view class="direction">
                    <view class="item item1" :class="{on:keyindex==1}" @touchstart="press(1)" @touchend="release">
                        <view class="icon">
                            上
                        </view>
                    </view>
                    <view class="item item2" :class="{on:keyindex==2}" @touchstart="press(2)" @touchend="release">
                        <view class="icon">
                            右
                        </view>
                    </view>
                    <view class="item item3" :class="{on:keyindex==3}" @touchstart="press(3)" @touchend="release">
                        <view class="icon">
                            下
                        </view>
                    </view>
                    <view class="item item4" :class="{on:keyindex==4}" @touchstart="press(4)" @touchend="release">
                        <view class="icon">
                            左
                        </view>
                    </view>
                    <view class="after" @click="login">登录</view>
                </view>
                <view class="key">
                    <view case="li">
                        <view class="item" :class="{on:keyindex==5}" @touchstart="press(5)" @touchend="release">
                            <image class="img" :src="`/static/camera/${keyindex==5?11:1}.png`" mode="scaleToFill">
                            </image>
                            <text class="txt" :class="{on:keyindex==5}">调焦 -</text>
                        </view>
                        <view class="item" :class="{on:keyindex==6}" @touchstart="press(6)" @touchend="release">
                            <image class="img" :src="`/static/camera/${keyindex==6?22:2}.png`" mode="scaleToFill">
                            </image>
                            <text class="txt" :class="{on:keyindex==6}">调焦 +</text>
                        </view>
                    </view>
                    <view case="li">
                        <view class="item" :class="{on:keyindex==7}" @touchstart="press(7)" @touchend="release">
                            <image class="img" :src="`/static/camera/${keyindex==7?33:3}.png`" mode="scaleToFill">
                            </image>
                            <text class="txt" :class="{on:keyindex==7}">聚焦 -</text>
                        </view>
                        <view class="item" :class="{on:keyindex==8}" @touchstart="press(8)" @touchend="release">
                            <image class="img" :src="`/static/camera/${keyindex==8?44:4}.png`" mode="scaleToFill">
                            </image>
                            <text class="txt" :class="{on:keyindex==8}">聚焦 +</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import {
        nextTick
    } from 'vue';

    export default {

        data() {
            return {
                keyindex: "",
                path: '/uni_modules/uni-animation-view/static/lottie.json',
                loop: false,
                autoplay: true,
                action: 'stop',
                hidden: false,
                status: '播放',

                title: 'Hello',
                palyerHeight: "400rpx",
                lUserID: 0,
                lChannel: 0,
                lRealHandle: 0,
                lVoiceComHandle: 0,
                lPlayHandle: 0,
                isFull: false,
                connect: false,
                selectTexts: [],
                selectValues: [],

                // deviceIp: "192.168.1.114",
                deviceIp: "192.168.0.1",
                devicePort: 8000,
                username: "admin",
                password: "renyizhi001",
                channel: 1

            }
        },

        mounted() {
            let _this = this;

            uni.$on("camerashow", (e) => {})
            uni.$on("camerahide", (e) => {

            })
        },

        methods: {
            // 云台控制方法
            startPreview() {
                this.$refs.HCNet.startPreview();
            },
            ptzControl(type) {
                this.$refs.HCNet.ptzControl(type, 0);
                this.$refs.HCNet.ptzControl(type, 1);
            },
            signOut() {
                this.$refs.HCNet.logout();
            },

            stopPreview() {
                this.$refs.HCNet.stopPreview();
            },
            onLoginSuccess(){
                uni.hideLoading()
            },
            onLoginFailed(){
                uni.showToast({
                    title:"连接失败",
                    icon:"error"
                })
            },
            login() {
                uni.showLoading({
                    title:"链接中"
                })
                this.$refs.HCNet.login();
            },

            onButtonClick() {
                uni.showToast({
                    title: "点击了hello view"
                })
            },
            press(index) {
                this.keyindex = index;
                this.$refs.HCNet.ptzControl(this.getkey(), 0);
            },
            getkey() {
                let _dwPTZCommand = 0;
                let index = this.keyindex;
                switch (index) {
                    case 1:
                        _dwPTZCommand = 21
                        break;
                    case 2:
                        _dwPTZCommand = 24
                        break;
                    case 3:
                        _dwPTZCommand = 22
                        break;
                    case 4:
                        _dwPTZCommand = 23
                        break;
                    case 5:
                        _dwPTZCommand = 12
                        break;
                    case 6:
                        _dwPTZCommand = 11
                        break;
                    case 7:
                        _dwPTZCommand = 13
                        break;
                    case 8:
                        _dwPTZCommand = 14
                        break;
                    default:

                }
                return _dwPTZCommand
            },
            release() {
                this.$refs.HCNet.ptzControl(this.getkey(), 1);
                this.keyindex = "";
            }
        }
    }
</script>

<style scoped lang="scss">
    .camerapage {
        padding: 15rpx;
        display: flex;
        flex-direction: column;
        background: #E7E7ED;
        padding-bottom: 25rpx;

        .title {
            text-align: center;
            font-weight: 500;
            font-size: 11rpx;
            color: #666666;
            flex: 1;
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;

            /* 垂直居中 */
            .text {
                text-align: center;
                width: 100%;
            }
        }

        .workbench {
            padding: 15rpx 50rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: row;

            .key {
                flex: 1;
                display: flex;

                flex-wrap: wrap;
                flex-direction: row;
                justify-content: space-around;
                margin-left: 30rpx;

                .item {
                    .li {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                    }

                    flex: 1;
                    margin: 10px 0px;
                    background: linear-gradient(180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
                    box-shadow: 0rpx 0rpx 1rpx 0rpx rgba(0, 0, 0, 0.21);
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    width: 125rpx;
                    padding: 10rpx 15rpx;
                    justify-content: center;
                    border-radius: 100rpx;

                    .txt {
                        font-weight: 500;
                        font-size: 11rpx;
                        color: #223457;

                        &.on {
                            color: #fff;
                        }
                    }

                    &.on {
                        background-image: linear-gradient(to bottom right, #4F8AFF, #4B5EFF);
                        box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.33);

                    }

                    .img {
                        width: 16rpx;
                        height: 16rpx;
                        margin-right: 15rpx;

                    }
                }
            }

            .direction {
                width: 130rpx;
                height: 130rpx;

                background: linear-gradient(180deg, #F4F4F4 0%, #E3E7EE 78%, #DCE0EA 100%);
                border: 1rpx solid #d2d2d2;
                border-radius: 139rpx;
                position: relative;
                overflow: hidden;
                transform: rotate(45deg);
                position: relative;
                z-index: 2;

                .item {
                    width: 65rpx;
                    height: 65rpx;
                    overflow: hidden;
                    position: absolute;
                    transform-origin: 100% 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 100px 0rpx 0rpx 0rpx;

                    &.on {
                        background-image: linear-gradient(to bottom right, #4F8AFF, #4B5EFF);

                        // box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.33);
                        // background: #000;
                    }

                    .icon {
                        transform: rotate(-45deg);
                        // margin-left: 10rpx;
                        // margin-top: 10rpx;
                    }

                    &.item1 {}

                    &.item2 {
                        transform: rotate(90deg);

                    }

                    &.item3 {
                        transform: rotate(180deg);
                    }

                    &.item4 {
                        transform: rotate(-90deg);
                    }

                }

                .after {
                    position: absolute;
                    width: 54rpx;
                    height: 54rpx;
                    top: 38rpx;
                    left: 38rpx;
                    // transform: translate(-50%, -50%);
                    border-radius: 54rpx;
                    z-index: 222;
                    background: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transform: rotate(-45deg);
                    border: 1px solid #eee;
                    box-shadow: inset 0rpx 1rpx 15rpx 0rpx rgba(0, 0, 0, 0.21);
                }

            }
        }

        .box {
            background: #fff;
            border-radius: 8rpx;
            overflow: hidden;
            margin-top: 15rpx;
            position: relative;
            display: flex;
            flex-direction: column;
            z-index: 22;

            ._video_r1 {}

            .video {

                // width: 100%;

                flex: 1;
                height: 400rpx;
                border-radius: 8rpx 8rpx 0 0;
                overflow: hidden;
                position: relative;

                background: #eee;
                justify-content: center;
                flex-direction: column;

                // align-items: center;
                .tips {
                    position: absolute;

                    width: 600rpx;
                    display: flex;
                    align-items: center;
                    text-align: center;

                }
            }

        }
    }
</style>

隐私、权限声明

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

*

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

*

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

*

评论列表 撰写评论 向官方投诉

暂无用户评论。