海康摄像头web3.3前端实现

 上篇我发布了一篇文章，有一个刷新页面摄像头就消失的bug，这个代码就是我改过以后得。

直接就放到组件里就行。要是不出来的话，可能是你们插件有问题。可以重新安装一次插件。

<template>

    <div class="chart-box" ref="chartBox">

        <div class="chart-body" ref="divPlugin" id="divPlugin"></div>

    </div>

</template>

<script>

// import chartTitle from "./chartTitle.vue";

export default {

    // components: { chartTitle },

    data() {

        return {

            szIP: "", //摄像头ip地址

            szPort: "", //摄像头端口

            szUsername: "admin", //摄像头登录用户名

            szPassword: "", //摄像头登录密码

            szDeviceIdentify: this.szIP + "_" + this.szPort, //摄像头变量,不知道干啥的

        };

    },

    created() {},

    mounted() {

        this.initHkCtrl();

    },

    beforeDestroy() {

        this.destoryVideo();

    },

    methods: {

        //初始化海康海康摄像头,初始化完成后再登录及后续操作

        initHkCtrl() {

            WebVideoCtrl.I_InitPlugin({

                bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持

                iWndowType: 1,

                cbInitPluginComplete: () => {

                    //插件初始化完成回调

                    WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(

                        () => {

                            WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {

                                this.hkLogin();

                            });

                        },

                        () => {

                            alert("插件初始化失败");

                        }

                    );

                },

            });

        },

        //海康摄像头登录方法

        hkLogin() {

            console.log("调用登录方法");

            WebVideoCtrl.I_Login(this.szIP, 1, this.szPort, this.szUsername, this.szPassword, {

                timeout: 5000,

                success: () => {

                    console.log("登录成功");

                    setTimeout(() => {

                        this.getDevicePort();

                    }, 10);

                },

                error: ({ errorCode }) => {

                    console.log("oError: ", errorCode);

                    if (2001 === errorCode) {

                        console.log("已登录过");

                    } else {

                        console.log("登录失败");

                    }

                },

            });

        },

        //获取海康摄像头端口

        getDevicePort() {

            console.log("开始获取摄像头端口");

            WebVideoCtrl.I_GetDevicePort(this.szIP).then(({ iDevicePort, iHttpPort, iRtspPort }) => {

                this.startRealPlay();

            });

        },

        //打开海康摄像头监控画面

        startRealPlay() {

            const oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);

            const _this = this;

            function play() {

                WebVideoCtrl.I_StartRealPlay(_this.szIP, {

                    iStreamType: 1,

                    iChannelID: 1,

                    bZeroChannel: false,

                    success: function () {

                        console.log("预览成功");

                    },

                    error: function () {

                        console.log("预览失败");

                    },

                });

            }

            if (oWndInfo != null) {

                // 已经在播放了，先停止

                WebVideoCtrl.I_Stop({

                    success: function () {

                        play();

                    },

                });

            } else {

                play();

            }

        },

        //海康摄像头销毁方法 --解决vue切换路由后摄像头画面存在问题

        destoryVideo() {

            WebVideoCtrl.I_DestroyPlugin()

                .then(() => {

                    console.log("then");

                })

                .catch((err) => {

                    console.log("catch: ", err);

                });

        },

    },

};

</script>

<style lang="scss" scoped>

.chart-box {

    width: 100%;

    height: 100%;

}

.chart-body {

    position: absolute;

    top: 35px;

    z-index: -11;

    width: calc(35vw - 60px);

    height: calc(30vh - 100px);

}

</style>

 在public文件下新建一个hk文件，把这三个文件放进去，在html中引入。

 

 在public文件下引入这两个，那个jsVideoPlugin那个文件不用引入。