全屏可以正常放大播放,但是退出全屏后,海康插件的canvas的宽高都变成0了,没找到原因,请求各位,帮忙解决一下问题
import store from '@/store'
let WebVideo = {
// 全局保存当前选中窗口
//可以不用设置这个变量,有窗口参数的接口中,不用传值,开发包会默认使用当前选择窗口
g_iWndIndex: null,
indexAll:{}, //窗口集合
//插件宽高 (单位px,100%默认撑满插件容器)
szWidth: '100%',
szHeight: '100%',
// 分屏类型 1:1*1 2:2*2 3:3*3
iWndowType: 1,
// ip
szDeviceIdentify:'',
// 登录信息
userInfo:{},
// 初始化插件
init: function (options) {
console.log(options,"options");
return new Promise(function (resolve, reject) {
WebVideo.szDeviceIdentify = options.ip + "_" + options.port;
WebVideo.userInfo = options;
let width = options.width ?? WebVideo.szWidth,
height = options.height ?? WebVideo.szHeight,
iWndowType = options.iWndowType ?? WebVideo.iWndowType;
WebVideoCtrl.I_InitPlugin(width, height,{
//是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
bWndFull: true,
//插件背景颜色 bg,子窗口bg,窗口边框,窗口边框选中
szColorProperty: "plugin-background:#18293c; sub-background:#18293c; sub-border:#18293c; sub-border-select:#0000ff", //2:PS 11:MP4
//分屏
iWndowType: iWndowType,
cbSelWnd: function (xmlDoc) {
WebVideo.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
console.log("xmlDoc",$(xmlDoc).find("SelectWnd"));
},
// 插件初始化完成回调,必带项
cbInitPluginComplete: () => {
WebVideoCtrl.I_InsertOBJECTPlugin(options.domID);
resolve();
}
})
})
},
// 登录
loginOn: function(){
return new Promise(function (resolve, reject) {
let info = WebVideo.userInfo;
if ("" == info.ip || "" == info.port) {
return;
}
var iRet = WebVideoCtrl.I_Login(info.ip, 1, info.port, info.username, info.password, {
success: function (xmlDoc) {
console.log("登陆成功");
setTimeout(function () {
resolve();
}, 10);
},
error: function (status, xmlDoc) {
console.log("登录失败!", status, xmlDoc);
}
});
if (-1 == iRet) {
console.log("已登录过!");
}
})
},
// 退出登录
logout: function(){
// if (null == WebVideo.szDeviceIdentify) {
// return;
// }
var iRet = WebVideoCtrl.I_Logout(WebVideo.szDeviceIdentify);
if (0 == iRet) {
console.log("退出成功!");
} else {
console.log("退出失败!");
}
},
/**
* options={
* iWndIndex-播放窗口(不传默认为0)
* iStreamType 码流类型 1-主码流,2-子码流,默认使用主码流预览
* iChannelID 播放通道号,默认通道 1
* bZeroChannel 是否播放零通道,默认为 false
* iPort RTSP 端口号,可以选择传入,如果不传,开发包会自动判断设备的 RTSP 端口
* }
*/
// 开始预览 设备标识,参数对象
startRealPlay: function(iChannelID,iWndIndex){
WebVideo.indexAll[`video${iWndIndex}`] = WebVideoCtrl.I_GetWindowStatus(iWndIndex);
if (null == WebVideo.szDeviceIdentify) {
return;
}
console.log(iChannelID,iWndIndex,"45454554a");
var startRealPlayVideo = () => {
WebVideoCtrl.I_StartRealPlay(WebVideo.szDeviceIdentify, {
iChannelID: iChannelID,
bZeroChannel: false,
iStreamType: 2,
iWndIndex:iWndIndex,
success: function () {
console.log('预览成功')
},
error: function (status, xmlDoc) {
if (403 === status) {
console.log('设备不支持Websocket取流')
} else {
console.log('预览失败')
}
}
});
};
if (WebVideo.indexAll[`video${iWndIndex}`] != null) {// 已经在播放了,先停止
WebVideoCtrl.I_Stop({
success: function () {
startRealPlayVideo();
}
});
} else {
startRealPlayVideo();
}
},
// 停止预览
stopRealPlay: function(iWndIndex){
// if ( WebVideo.indexAll[`video${iWndIndex}`] != null) {
WebVideoCtrl.I_Stop({
iWndIndex:iWndIndex,
success: function () {
console.log('停止预览成功')
},
error: function () {
console.log('停止预览失败')
}
});
// }
},
// 全屏
clickFullScreens(iWndIndex) {
WebVideoCtrl.I_FullScreen(iWndIndex,true);
},
}
export default WebVideo
<template>
<div class="videoPage full" :class="flag?'active':''" v-if="videoShow">
<div>
<span class="title"> {{ info.deviceName }}</span>
<p class="flex flex-align flex-center pl-6">
<img
src="@/assets/images/homePage/fire/sx1.png"
class="point pr-9"
@click="screenHandler"
/>
<img
src="@/assets/images/homePage/fire/sx2.png"
class="point"
@click="close"
/>
</p>
<div id="divVideo" class="divPlugins" ref="plugin"></div>
</div>
<!-- <div id="app" v-show="false">
<input type="text" v-on:keyup.esc="screenHandler">
</div> -->
</div>
</template>
<script>
import { WebVideo } from "@/api/HKwebVideo/HKwebVideo.js";
import { decrypt } from "@/utils/jsencrypt";
export default {
data() {
return {
videoShow: false,
flag: false,
webRtcServer: null,
webVideo: "",
info:null
};
},
methods: {
open(options) {
this.videoShow = true;
this.info = options;
console.log(this.info);
console.log(options.rtspUrl);
this.$nextTick(() => {
this.initVideoPlay(options);
});
},
close() {
this.videoShow = false;
this.flag = false;
this.stopVideoPlay();
},
// 全屏
screenHandler(){
this.$HK.clickFullScreens(0)
},
initVideoPlay(options) {
let that = this;
let width = this.$refs.plugin.offsetWidth;
let height = this.$refs.plugin.offsetHeight;
let optionInfo = {
width: width,
height: height,
iWndowType: 1,
domID: "divVideo",
ip: options.ipUrl,
port: options.port,
username: options.userName,
password: decrypt(options.password),
};
that.$HK.init(optionInfo).then(() => {
that.$HK.loginOn().then(() => {
that.$HK.startRealPlay(options.deviceChannel,0);
});
});
},
// 停止
stopVideoPlay() {
this.$HK.stopRealPlay(0);
this.$HK.logout();
},
},
// beforeDestroy() {
// if(this.webVideo !== ''){
// this.stopVideoPlay();
// }
// this.webRtcServer.disconnect()
// },
};
</script>
<style lang="scss" scoped>
@function vw($px) {
@return $px/1920 * 100vw;
}
@function vh($px) {
@return $px/1080 * 100vh;
}
.videoPage {
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
position: absolute;
z-index: 999999;
pointer-events: auto;
> div {
// width: 46vw;
// height: 58vh;
position: absolute;
left: 50%;
top: 50%;
padding-top: 38px;
-webkit-transform: translate(-50%);
transform: translate(-50%, -50%);
background: red;
pointer-events: auto;
border: 2px solid rgba(28, 191, 254, 1);
background: linear-gradient(
136deg,
rgba(1, 14, 20, 0.88) 1%,
rgba(0, 29, 54, 0.87) 100%
);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 8px;
.title{
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
color: #fff;
}
> p {
width: 56px;
height: 26px;
position: absolute;
right: 0;
top: 0;
z-index: 9;
background: url('~@/assets/images/homePage/fire/sx-bg.png') no-repeat;
background-size: 100% 100%;
}
> i {
position: absolute;
top: 0;
color: #01bbf5;
}
}
}
.divPlugins{
width: 800px;
height: 450px;
}
.active {
position: fixed;
top: 0;
> div {
width: 100% !important;
height: 100% !important;
}
}
</style>