vue中使用webVideoCtrl播放海康插件
程序员文章站
2022-07-06 09:39:20
...
最近公司有个监控视频的项目要用到webVideoCtrl插件来播放视频，研究了两天终于搞定。只需要传IP、用户名、密码、端口号即可播放，插件可在网上搜索下载。
新建文件夹来存放webVideoCtrl插件，然后在index.html中引进，如图：
这样就把所需的插件引进去了，我们可以愉快的写代码了。注意要安装WebComponents.exe。
贴出完整代码，子组件
<template>
<div class="video-player">
<div id="divPlugin" class="divPlugin"></div>
<!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
</div> -->
<!-- <div class="down" v-else>
<a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
</div> -->
</div>
</template>
<script>
export default {
name: 'videoPlayer',
props: {
//从父组件传来的数据，IP、用户名、密码、端口号
companyVideoData:{
type:Object
},
//分屏
videoType:Number
},
data(){
return {
plugin:true ,
iWidth: "100%",
iHeight: "100%",
webVideo: {},
iStreamType: 1,
iProtocol: 1,
bZeroChannel: false,
xmlDocData:{},
g_iWndIndex:0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
videoNum:''
};
},
created(){
},
mounted(){
this.videoInitPlugin();
},
destroyed(){
},
methods: {
videoInitPlugin(){
var iRet = WebVideoCtrl.I_CheckPluginInstall();
if (iRet === -1) {
alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
return;
}
this.initPlugin()
},
//插件初始化
initPlugin () {
var that = this;
WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
bWndFull: true,//是否支持单窗口双击全屏，默I_CheckPluginInstall
iWndowType: 2,
bDebugMode:true,
cbSelWnd: function (xmlDoc) {
},
});
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// 检查插件是否最新
// if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
// alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
// // return;
// }
this.clickLogin(this.companyVideoData)
},
clickLogin(data) {
var that = this;
WebVideoCtrl.I_Login(data.IP, 1, data.Port, data.Username, data.Password, {
success: function (xmlDoc) {
console.log("开始预览");//不能删除
that.getChannelInfo();
},
error: function () {
console.log("login error");
}
});
},
//获取通道
getChannelInfo(){
var that = this;
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(this.szIP, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("VideoInputChannel");
nAnalogChannel = oChannels.length;
// console.log("获取模拟通道成功！")
},
error: function () {
// console.log("获取模拟通道失败！"+WebVideoCtrl.I_GetLastError())
}
});
// 数字通道
WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
that.initPlay()
that.$emit('func',oChannels)//获取数字通道传给父组件
},
error: function () {
WebVideoCtrl.I_GetLastError()
// console.log("获取数字通道失败！"+WebVideoCtrl.I_GetLastError())
}
});
// 零通道
WebVideoCtrl.I_GetZeroChannelInfo(this.szIP, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("ZeroVideoChannel");
},
error: function () {
// console.log("获取零通道失败！"+WebVideoCtrl.I_GetLastError())
}
});
},
//初始化视频，为了让用户进来就可以看到视频播放
initPlay(){
let szIP = this.companyVideoData.IP;//ip地址
var iStreamType = 1;
//循环16次是因为插件分屏最大为4x4（可以根据情况而定）
for(let i = 0;i<16;i++){
var iChannelID = parseInt(i+1, 10);
WebVideoCtrl.I_StartRealPlay(szIP, {
iStreamType: iStreamType,
iChannelID: iChannelID,
iWndIndex:i
});
}
},
// 点击查看具体哪个监控
startRealPlay(oChannels) {
let that = this;
let szIP = this.companyVideoData.IP;//ip地址
let iChannelID = oChannels;//播放通道号
var iStreamType = 1;
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
if (oWndInfo != null) {// 已经在播放了，先停止
WebVideoCtrl.I_Stop();
}
WebVideoCtrl.I_StartRealPlay(szIP, {
iStreamType: iStreamType,
iChannelID: iChannelID,
});
},
},
//因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
watch:{
companyVideoData:{
handler(val,oldval) {
if(oldval){
for(let i = 0;i<16;i++){
WebVideoCtrl.I_Stop(i);//停止正在播放的页面
}
this.$emit('func',"")
WebVideoCtrl.I_Logout(oldval.IP)
this.clickLogin(this.companyVideoData)
}
},
immediate:true,//关键
deep:true
},
videoType:{
handler(val,oldval) {
if(oldval){
WebVideoCtrl.I_ChangeWndNum(this.videoType);//分屏
this.initPlay()
}
},
immediate:true,//关键
deep:true
}
}
};
</script>
<style scoped>
.video-player{
width: 100%;
height: 100%;
}
.divPlugin{
width: 100%;
height: 100%;
color:red;
/* display: flex; */
justify-content: center;
align-items: center;
font-size: 18px;
}
.down{
width: 100%;
height: 100%;
color:red;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
.down a{
color:red;
}
</style>父组件部分代码如下：
接收子组件传来的数据
func(data){//取得监控视频的数据
var nAnalogChannel = 0;
var nn = [];
if(data){
$.each(data, function (i) {
var id = parseInt($(this).find("id").eq(0).text(), 10),
name = $(this).find("name").eq(0).text(),
online = $(this).find("online").eq(0).text();
if ("false" == online) {// 过滤禁用的数字通道
return true;
}
if ("" == name) {
name = "IPCamera " + ((id - nAnalogChannel) <= 9 ? "0" + (id - nAnalogChannel) : (id - nAnalogChannel));
}
for(let i = 0;i<1;i++){
var obj = {
id:id,
name:name
};
nn.push(obj)
}
});
}
this.listVideo = nn;//这是列表，id就是监控的通道号，传给子组件就可播放
},代码我没怎么优化，希望大佬可以指点指点哪些地方可以改进。写的不好还请见谅，欢迎一起交流，共同进步。