?上篇我發(fā)布了一篇文章，有一個刷新頁面攝像頭就消失的bug，這個代碼就是我改過以后得。

直接就放到組件里就行。要是不出來的話，可能是你們插件有問題?？梢灾匦掳惭b一次插件。

<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: {

? ? ? ? //初始化?？岛？禂z像頭,初始化完成后再登錄及后續(xù)操作

? ? ? ? initHkCtrl() {

? ? ? ? ? ? WebVideoCtrl.I_InitPlugin({

? ? ? ? ? ? ? ? bWndFull: true, //是否支持單窗口雙擊全屏，默認(rèn)支持 true:支持 false:不支持

? ? ? ? ? ? ? ? iWndowType: 1,

? ? ? ? ? ? ? ? cbInitPluginComplete: () => {

? ? ? ? ? ? ? ? ? ? //插件初始化完成回調(diào)

? ? ? ? ? ? ? ? ? ? WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(

? ? ? ? ? ? ? ? ? ? ? ? () => {

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.hkLogin();

? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? ? () => {

? ? ? ? ? ? ? ? ? ? ? ? ? ? alert("插件初始化失敗");

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? );

? ? ? ? ? ? ? ? },

? ? ? ? ? ? });

? ? ? ? },

? ? ? ? //?？禂z像頭登錄方法

? ? ? ? hkLogin() {

? ? ? ? ? ? console.log("調(diào)用登錄方法");

? ? ? ? ? ? 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();

? ? ? ? ? ? });

? ? ? ? },

? ? ? ? //打開?？禂z像頭監(jiān)控畫面

? ? ? ? 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("預(yù)覽成功");

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? error: function () {

? ? ? ? ? ? ? ? ? ? ? ? console.log("預(yù)覽失敗");

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? });

? ? ? ? ? ? }

? ? ? ? ? ? if (oWndInfo != null) {

? ? ? ? ? ? ? ? // 已經(jīng)在播放了，先停止

? ? ? ? ? ? ? ? WebVideoCtrl.I_Stop({

? ? ? ? ? ? ? ? ? ? success: function () {

? ? ? ? ? ? ? ? ? ? ? ? play();

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? });

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? play();

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? //?？禂z像頭銷毀方法 --解決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文件，把這三個文件放進(jìn)去，在html中引入。

?

?在public文件下引入這兩個，那個jsVideoPlugin那個文件不用引入。文章來源地址http://www.zghlxwxcb.cn/news/detail-828486.html

到了這里，關(guān)于?？禂z像頭web3.3前端實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！