海康摄像头 web3.3版本

我集合了各类文档弄的，有一点瑕疵，下面是vue2代码，填好ip地址、端口和密码就行，前端简单实现没有自己的后端。就是在刷新页面后摄像头就没了，这个问题我没有解决，也请各位大佬指点一下。

<template>

    <div id="divPlugin" class="plugin" style="display: block"></div>

</template>

  <script>

export default {

    data() {

        return {

            szIP: "", //IP地址

            szPort: "", //HTTP端口号

            szUsername: "admin", //用户名

            szPassword: "", //密码

        };

    },

    mounted() {

        this.initS();

    },

    methods: {

        initS() {

            console.log("走了");

            // 初始化插件参数及插入插件

            WebVideoCtrl.I_InitPlugin({

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

                iWndowType: 1,

                cbInitPluginComplete: function () {

                    WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(

                        () => {

                            // 检查插件是否最新

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

                                if (bFlag) {

                                    alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");

                                }

                            });

                        },

                        () => {

                            alert(

                                "插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"

                            );

                        }

                    );

                },

            });

            setTimeout(() => {

                this.clickLogin();

            }, 1000);

        },

        // 登录

        clickLogin() {

            let that = this;

            var szIP = this.szIP,

                szPort = this.szPort,

                szUsername = this.szUsername,

                szPassword = this.szPassword;

            setTimeout(() => {

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

                    success: function (xmlDoc) {

                        that.getDevicePort();

                    },

                    error: function (status, xmlDoc) {

                        console.log("登录失败", status, xmlDoc);

                    },

                });

            });

        },

        // 获取端口

        getDevicePort() {

            var szDeviceIdentify = this.szIP;

            if (null == szDeviceIdentify) {

                return;

            }

            WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then(

                (oPort) => {

                    this.getChannelInfo();

                    console.log(" 获取端口成功！");

                },

                (oError) => {

                    var szInfo = "获取端口失败！";

                    showOPInfo(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);

                }

            );

        },

        // 获取通道

        getChannelInfo() {

            let that = this;

            const szDeviceIdentify = this.szIP,

            $channelSelect = $("#channels").empty();

            if (null == szDeviceIdentify) {

                return;

            }

            // 模拟通道

            WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {

                success: function (xmlDoc) {

                    console.log(" 获取模拟通道成功！");

                    that.clickStartRealPlay();

                },

                error: function (oError) {

                    showOPInfo(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);

                },

            });

        },

        // 开始预览

        clickStartRealPlay(iStreamType) {

            var oWndInfo = WebVideoCtrl.I_GetWindowStatus(),

                szDeviceIdentify = this.szIP,

                // iRtspPort = parseInt(this.szPort, 10),

                iChannelID = 1,

                bZeroChannel = false,

                szInfo = "";

            if ("undefined" === typeof iStreamType) {

                iStreamType = 1;

            }

            // console.log(szDeviceIdentify)

            // if (null == szDeviceIdentify) {

            //     return;

            // }

            console.log(iStreamType, iChannelID, bZeroChannel);

            var startRealPlay = function () {

                WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {

                    iStreamType: iStreamType,

                    iChannelID: iChannelID,

                    bZeroChannel: bZeroChannel,

                    success: function () {

                        szInfo = "开始预览成功！";

                        console.log("开始预览成功！");

                        // showOPInfo(szDeviceIdentify + " " + szInfo);

                    },

                    error: function (oError) {

                        console.log("开始预览失败！");

                        // showOPInfo(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg);

                    },

                });

            };

            startRealPlay();

            console.log(oWndInfo != null);

            if (oWndInfo != null) {

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

                WebVideoCtrl.I_Stop({

                    success: function () {

                        startRealPlay();

                    },

                });

            } else {

                startRealPlay();

            }

        },

        // 停止预览

        clickStopRealPlay() {

            WebVideoCtrl.I_Stop({

                success: function () {

                    console.log("停止预览成功！");

                },

                error: function (oError) {

                    console.log(" 停止预览失败！");

                },

            });

        },

    },

    destroyed() {

        WebVideoCtrl: I_Logout(this.szIP);

        WebVideoCtrl: I_DestroyPlugin();

    },

};

</script>

  <style lang="scss" scoped>

#divPlugin {

    position: absolute;

    top: 35px;

    width: calc(35vw - 60px);

    height: calc(30vh - 100px);

    display: block;

}

</style>

 在public下的html里放jquery-1.7.1.min.js   jsVideoPlugin-1.0.0.min.js   webVideoCtrl.js文件

 在html文件中引入