海康大华宇视监控插件-vue
最近写三家品牌摄像头插件集成，翻阅很多资料，发现资料非常少，只有通过厂家提供的demo进行二次开发。写到宇视插件的时候突然发现宇视的插件也可以播放其他两家摄像头 。Player.js`export default function Player(e) {this.Player = {// clsid: "4E8893A4-8723-427A-81EA-72480BAB4501",applicati
·
最近写三家品牌摄像头插件集成，翻阅很多资料，发现资料非常少，只有通过厂家提供的demo进行二次开发。
写到宇视插件的时候突然发现宇视的插件也可以播放其他两家摄像头 。
要用到宇视的插件：
链接: https://pan.baidu.com/s/1Yz3IqEJbZnJ9xEGZjfPbow 提取码: ur4y
- Player.js
`export default function Player(e) {
this.Player = {
// clsid: "4E8893A4-8723-427A-81EA-72480BAB4501",
application: "npPluginSDK-plugin",
eventname: 'plgnevent',
id: 'sdk_viewer',
/**
* 事件前缀，由于控件目前所有的事件上报都是一个，同时使用第一个参数作为事件类型，而此参数为数字
* 使用数字作为自定义事件名来监听和触发目前看来无法实现，故将事件加上一个前缀
* @type {String}
*/
prefix: '__',
maxWnd: 64,
focusColor: parseInt('ffcc00', 16),
unfocusColor: parseInt('747d7d', 16),
backgColor: parseInt('000000', 16),
isInstalled: false,
init: function (cfg) {
this.eventObj = $('#divPlugin');
/* ie浏览器与非ie浏览器使用不同的方式来加载控件 */
if (undefined !== window.ActiveXObject) {
this.loadActivex(cfg);
} else {
this.loadNpapi(cfg);
}
/* 控件事件监听 */
this.on(cfg);
this.onInit(cfg);
return this;
},
/**
* 加载ActiveX，ie下使用
* @param {[type]} cfg [description]
* @return {[type]} [description]
*/
loadActivex: function (cfg) {
this.eventObj.html("<object classid='clsid:4E8893A4-8723-427A-81EA-72480BAB4501' id='player' class='plugin' height= '1' width = '1'events='true'></object>");
this.obj = document.getElementById('player');
this.parseHostname(cfg);
this.onActivexLoad(cfg);
return this;
},
/**
* 设置控件执行函数参数
* @param {[type]} [description]
* @return {[type]} [description]
*/
setParam: function (param1, param2, param3, param4, param5, param6, param7, param8, param9, param10) {
var paramObj = [param1, param2, param3, param4, param5, param6, param7, param8, param9, param10];
return JSON.stringify(paramObj);
},
/**
* 调用控件函数执行函数
* @param {[type]} [description]
* @return {[type]} [description]
*/
execFunction: function (funcName, param1, param2, param3, param4, param5, param6, param7, param8, param9, param10) {
var param = this.setParam(param1, param2, param3, param4, param5, param6, param7, param8, param9, param10);
/* 这里直接用top.JSON，跨域问题，通过将信任站点的设置放在最后调用来解决*/
var result = $.parseJSON(this.obj.NetSDKExecFun(funcName, param));
if (result.code !== 0) {
return result.code;
}
return result.result;
},
onActivexLoad: function (cfg) {
return this.addActivexBehaviors(cfg);
},
addActivexBehaviors: function (cfg) {
/* 控件初始化 */
try {
if (undefined === this.noCreateWnd) {
this.execFunction("NetSDKCreateWnd", this.maxWnd, this.focusColor, this.unfocusColor, this.backgColor);
}
this.execFunction("NETDEV_Init");
} catch (err) {
// alert(err);
}
if (undefined === this.obj.attachEvent) {
this.attachIE11Event('player', 'NetSDKRUNINFO', 'video.sdk_viewer.trigger(p1, p2, p3, p4);');
} else {
this.obj.attachEvent('NetSDKRUNINFO', (function (_this) {
return function (p1, p2, p3, p4) {
_this.trigger(p1, p2, p3, p4);
};
}(this)));
}
return this;
},
attachIE11Event: function (id, eventname, fn) {
var params = fn.match(/\(\)|\(.+\)/)[0];
var functionName = fn.match(/^([^(\s]+)/)[1];
var handler;
try {
handler = document.createElement("script");
handler.setAttribute("for", id);
} catch (ex) {
handler = document.createElement('<script for="' + id + '">');
}
handler.event = eventname + params;
handler.appendChild(document.createTextNode(functionName + params + ";"));
this.eventObj.get(0).appendChild(handler);
return this;
},
/**
* 加载npapi插件，非ie下使用
* @param {[type]} cfg [description]
* @return {[type]} [description]
*/
loadNpapi: function (cfg) {
this.eventObj.html("<embed type='application/" + this.application + "' id='player' class='plugin' height='100%' width = '100%'/>");
this.obj = document.getElementById('player');
console.log(this.application);
// this.parseHostname(cfg);
// if (undefined === cfg.stPortInfo) {
// return this;
// }
try {
if (undefined === this.noCreateWnd) {
this.execFunction("NetSDKCreateWnd", this.maxWnd, this.focusColor, this.unfocusColor, this.backgColor);
}
this.execFunction("NETDEV_Init", '');
// 非ie浏览器需要设置插件事件上报接口函数
this.obj.NetSDKNPSetEventFunc('video.sdk_viewer.trigger');
} catch (err) {
}
return this;
},
/* 用于Npapi加载信任站点，只在主框架中使用*/
onNpapiLoad: function (cfg) {
return this;
},
parseHostname: function (cfg) {
},
/**
* 控件初始化完成事件处理
* @return {[type]} [description]
*/
onInit: function (cfg) {
return this;
},
unInit: function () {
if (this.obj == "undefined") {
return this;
}
this.beforeUninit();
try {
this.execFunction("NetSDKUninitOCX");
} catch (err) {
}
this.eventObj.hide().get(0).removeChild(this.obj);
delete this.obj;
return this;
},
beforeUninit: function () {
return this;
},
/**
* 触发控件上报事件，提供个naapi使用（npapi无法上报事件但是可以执行js代码）
* @param {[type]} e [description]
* @param {[type]} p2 [description]
* @param {[type]} p3 [description]
* @param {[type]} p4 [description]
* @return {[type]} [description]
*/
trigger: function (p1, p2, p3, p4) {
this.eventObj.trigger(this.eventname, [p1, p2, p3, p4]);
return this;
},
/**
* 事件监听
* @param {[type]} cfg [description]
*/
on: function (cfg) {
var _this = this;
// if (undefined === cfg.events) {
// return this;
// }
var events = function __200(strAlarmInfo) {
//alert(strAlarmInfo);
};
this.eventObj.bind(_this.eventname, function (e, p1, p2, p3, p4) {
if (undefined === events || undefined === events[_this.prefix + p1]) {
return true;
}
events[_this.prefix + p1](p2, p3, p4);
});
return this;
},
/**
* 设置焦点到控件
* @return {[type]} [description]
*/
focus: function () {
try {
this.execFunction("NetSDKActiveWnd");
// this.eventObj.get(0).focus();
} catch (err) {
}
return this;
},
check: function (flag) {
if (Static.ErrorCode.ERR_COMMON_SUCCEED !== flag) {
throw flag;
}
}
};
}
`
webvideo.js
/*
* @Author: your name
* @Date: 2021-06-16 14:20:40
* @LastEditTime: 2021-06-22 14:26:09
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \hkvVideoVue\static\mo.js
*/
/*
* @Author: your name
* @Date: 2021-06-16 13:39:33
* @LastEditTime: 2021-06-19 11:38:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \hello-world\src\components\mo.js
*/
import $ from 'jquery'
import Player from './Player';
/**
*
* @param {*} window
* @param {*} camInfo
* @param {number} winIndex
*/
export default function Monitor(window, camInfo, winIndex) {
this.Player = new Player()
//提示信息对一个的图标
var TIPS_TYPE = {
CONFIRM: 0,
SUCCEED: 1,
FAIL: 2,
LOADING: 3
};
//流播放类型
var videostreamtype = {
live: 0, //实况流
playback: 1 //回放流
};
//流类型
var StreamType = {
LIVE: 0, //实况流
PICTRUE: 1, //抓拍流（jpeg）
MJPEG: 2, //照片流
IMAGE_TYPE_PLATE: 3, //过车图片流
PIC_VIEW: 4 //图片查看
};
//流帧率
var LiveStream = {
LIVE_STREAM_INDEX_MAIN: 0, // 主流
LIVE_STREAM_INDEX_AUX: 1, // 辅流
LIVE_STREAM_INDEX_THIRD: 2 // 第三流
};
//云台相关
var PtzCmd = {
TILTUP: 0x0402, // 向上
TILTDOWN: 0x0404, // 向下
PANRIGHT: 0x0502, // 向右
PANLEFT: 0x0504, // 向左
LEFTUP: 0x0702, // 左上
LEFTDOWN: 0x0704, // 左下
RIGHTUP: 0x0802, // 右上
RIGHTDOWN: 0x0804, // 右下
ALLSTOP: 0x0901 // 全停命令字
};
var PresetCmd = {
SET_PRESET: 0, // 设置预置位
CLE_PRESET: 1, // 清除预置位
GOTO_PRESET: 2 // 转到预置位
};
var Protocal = {
TRANSPROTOCAL_RTPTCP: 1, //TCP
TRANSPROTOCAL_RTPUDP: 2 // UDP
};
var pluginInterfce = {
//局域网登录控件接口
NETDEV_Login: "NETDEV_Login_V30", //登录
NETDEV_QueryVideoChl: "NETDEV_QueryVideoChlDetailListEx", //通道接口查询
//宇视云平台登录控件接口
NETDEV_LoginCloud: "NETDEV_LoginCloud", //云端账号登录
NETDEV_CloudlDevlist: "NETDEV_GetCloudDevList", //云端设备列表获取
NETDEV_CloudDevLogin: "NETDEV_LoginCloudDevice_V30", //云端账号设备登录
//日志控件接口
NETDEV_SetWriteLog: "NETDEV_SetWriteLogFlag"
};
var PlayControl = {
NETDEV_PLAY_CTRL_PLAY: 0, /* 开始播放 Play */
NETDEV_PLAY_CTRL_PAUSE: 1, /* 暂停播放 Pause */
NETDEV_PLAY_CTRL_RESUME: 2, /* 恢复播放 Resume */
NETDEV_PLAY_CTRL_GETPLAYTIME: 3, /* 获取播放进度 Obtain playing time */
NETDEV_PLAY_CTRL_SETPLAYTIME: 4, /* 设置播放进度 Configure playing time */
NETDEV_PLAY_CTRL_GETPLAYSPEED: 5, /* 获取播放速度 Obtain playing speed */
NETDEV_PLAY_CTRL_SETPLAYSPEED: 6, /* 设置播放速度 Configure playing speed */
NETDEV_PLAY_CTRL_SINGLE_FRAME: 7 /* 设置单帧播放 Configure single frame playing speed */
}
//查询所需事件存储类型
var EventType = {
ALL: 0, // 所有的存储
MOTIONDETECTION: 4, // 运动检测事件存储
DIGITALINPUT: 5, // 数字输入事件存储
VIDEOLOSS: 7, // 视频丢失事件存储
INVALID: 0xFF // 无效值
};
var deviceTypestr = {
EVMS: 501, //一体机
NVR: 101, //NVR
IPC: 1 //IPC
};
//视频存储类型
var MediaFileFormat = {
MEDIA_FILE_MP4: 0, // mp4格式的媒体文件
MEDIA_FILE_TS: 1 // TS格式的媒体文件 TS media file */
};
//截图图片类型
var PictureFormat = {
PICTURE_BMP: 0, // 图片格式为bmp格式
PICTURE_JPG: 1 // 图片格式为jpg格式
};
this.parent = window;
/**
* @type {string} plugin container id
*/
this.sContainerID = camInfo.sContainerID || null;
var $container = $('#' + this.sContainerID);
this.$Container = $container.length > 0 ? $container : null;
this.nBrand = camInfo.nBrand; //摄像机厂家：-1未知，0海康，1大华，2宇视
this.nProtocol = camInfo.nProtocol || 1; //摄像机协议： protocol 1：http, 2:https
this.sIp = camInfo.sIp; //摄像机IP： protocol ip
this.nPort = camInfo.nPort; //摄像机端口号： protocol port
this.sUserName = camInfo.sUserName; //登录账号 device username
this.sPassword = camInfo.sPassword; //登录密码 device password
this.sDeviceIdentify = this.sIp + "_" + this.nPort;
this.bIsAutoPlay = camInfo.bIsAutoPlay || true; //
this.nStreamType = camInfo.nStreamType || 1; // stream 1：main stream 2：sub-stream 3：third stream 4：transcode stream
this.nChannelID = camInfo.nChannelID && (camInfo.nChannelID > 32 ? camInfo.nChannelID - 32 : camInfo.nChannelID) || 1; // channel no
this.bZeroChannel = camInfo.bZeroChannel || false; // zero channel
// 全局保存当前选中窗口
this.nWinIndex = camInfo.nWinIndex || 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
/**
* @type {number} 插件安装检查结果(-2: Chrome 浏览器版本过高，不支持 NPAPI -1: 未安装 0: 已安装)
*/
this.nPluginInstallRes = null;
/**
* @type {boolean} 初始化插件参数是否完成（true完成，false失败）
*/
this.bInitPluginComplete = false;
/**
* @type {number} 嵌入播放插件结果(0 成功，-1 失败)
*/
this.nInsertOBJECTPluginRes = -1;
/**
* @type {number} 在网页中写入插件结果(0 成功，-1 失败)
*/
this.nWriteOBJECT_XHTMLRes = -1;
/**
* @type {number} 登录设备结果(0 成功，-1 失败)
*/
this.nLoginRes = -1;
/**
* @type {number} 登出设备结果(0 成功，-1 失败)
*/
this.nLogoutRes = -1;
/**
* 宇视平台插件封装
*/
this.uniview = {
parent_this: this,
recordlivename: 0,
videotypejsonMap: [], //视频类型对象数组
livevideojsonMap: [], //实况流对象数组
playbackvideojsonMap: [], //回放流对象数组
initOcxWindownum: 1, //控件默认开启窗口个数
ocxHeight: "400px", //控件默认高度
ip: '192.168.1.206', //设备IP
port: 80, //端口号
username: 'amdin', //登录账号
password: '123456', //登录密码
protocol: 0, //协议
devicetype: 101, //设备类型
channelList: null,
localchalisttable: null, //局域网通道表格对象
DeviceHandle: null, //登录设备的凭证ID
init: function () {
// 清理SDK并关闭线程
// this.destory_activex();
// 初始化显示窗口页面：设置窗口数量
this.initPage();
// 初始化事件：
// this.initEvent();
this.autoPlay();
},
/**
* 初始化显示窗口页面：设置窗口数量
*/
initPage: function () {
console.log(this.parent_this.sContainerID);
this.parent_this.Player.Player.init()
var retcode = this.parent_this.Player.Player.execFunction("NetSDKSetPlayWndNum", this.initOcxWindownum);
},
/**
* 初始化事件
*/
initEvent: function () {
var _this = this;
//局域网登录,获取输入框中的值，整理成json格式数据传给login方法
$("#locallogin").on("click", function () {
_this.ip = $("#cameraIp").val();
_this.port = Number($("#port").val());
_this.username = $("#localusername").val();
_this.password = $("#localpassword").val();
_this.protocol = Number($("#localprotocol").val());
_this.devicetype = $("#localdeviceType").val();
var loginJsonMap = {
"szIPAddr": 'xxxx',
"dwPort": '80',
"szUserName": 'admin',
"szPassword": 'xxxxx',
"dwLoginProto": '0',
};
var loginJsonstring = JSON.stringify(loginJsonMap);
console.log(loginJsonMap);
_this.login(loginJsonstring);
});
$("#localloginout").on("click", function () {
_this.loginOut()
});
/*******************视频相关事件*********************/
$("#startvideo").on("click", function () {
_this.startVideo();
});
$("#closevideo").on("click", function () {
_this.stopVideo();
//滚动条滑动，避免视频存留一帧
_this.bodyScroll();
});
},
/*************************************** 本地登录 相关 **********************************/
// 局域网登录
login: function (data) {
console.log(data);
var SDKRet = this.parent_this.Player.Player.execFunction(pluginInterfce["NETDEV_Login"], data);
if (-1 == SDKRet) {
console.log('登录失败');
} else {
var result = JSON.parse(SDKRet);
this.DeviceHandle = result.UserID;
// $("#player").css("height", '600px');
console.log("登录成功")
}
},
loginOut: function () {
var SDKRet = top.sdk_viewer.execFunction("NETDEV_Logout", this.DeviceHandle);
if (SDKRet == -1) {
this.msgtipshow($.lang.tip["userlogoutFail"], TIPS_TYPE.FAIL);
return;
} else {
this.DeviceHandle = -1;
this.msgtipshow($.lang.tip["userlogoutSuc"], TIPS_TYPE.SUCCEED);
this.initloginoutbtn();
if (this.localchalisttable) {
this.destoryTable("girdTable");
}
this.loginoutstopvideo();
}
},
//获取通道列表
getChannellist: function () {
var SDKRet;
// 判断设备类型是IPC、NVR还是VMS
// if (this.devicetype == deviceTypestr.IPC || this.devicetype == deviceTypestr.NVR) {
// 判断是否有通道存在
SDKRet = this.parent_this.Player.Player.execFunction(pluginInterfce["NETDEV_QueryVideoChl"], this.DeviceHandle);
if (SDKRet == -1) {
console.log("获取通道失败")
this.msgtipshow($.lang.tip["getlocallistfail"], TIPS_TYPE.FAIL);
return;
} else {
// SDKRet =this.parent_this.Player.Player.execFunction("NETDEV_FindDevChnList", this.DeviceHandle, 0, 0);
console.log("获取通道成功")
// 调用播放接口
// this.getChannellist(SDKRet)
this.startVideo();
}
// }
},
/**
* 登出后停止视频
*/
loginoutstopvideo: function () {
for (var i = 0; i < this.videotypejsonMap.length; i++) {
if (this.videotypejsonMap[i] == null) {
continue;
} else {
if (this.videotypejsonMap[i]["streamtype"] == videostreamtype["live"]) {
this.livevideojsonMap.push(this.videotypejsonMap[i]["screenNum"]);
}
if (this.videotypejsonMap[i]["streamtype"] == videostreamtype["playback"]) {
this.playbackvideojsonMap.push(this.videotypejsonMap[i]["screenNum"]);
}
}
}
if (this.livevideojsonMap.length != 0) {
for (var j = 0; j < this.livevideojsonMap.length; j++) {
this.stoponevideo(this.livevideojsonMap[j]);
}
}
},
/********************************** 本地登录 End ************************************/
//提示信息
msgtipshow: function (msg, icon) {
// MSG.msgbox.show(msg, icon, 3000, 61, "errormsg");
},
/*************************************** 实况相关 Begin **********************************/
//播放视频
//播放视频2
startVideo: function () {
let msg;
let icon;
let channelValue = this.parent_this.nChannelID;
// if (channelValue == "") {
// }
let dataMap = {
dwChannelID: channelValue,
dwStreamType: LiveStream.LIVE_STREAM_INDEX_MAIN,
dwLinkMode: Protocal.TRANSPROTOCAL_RTPTCP,
dwFluency: 0
};
let jsonStr = JSON.stringify(dataMap);
let ResourceId = this.parent_this.Player.Player.execFunction("NetSDKGetFocusWnd");
console.log(ResourceId);
//将窗口与流保存下来
let obj = {
streamtype: videostreamtype.live,
screenNum: ResourceId
};
this.videotypejsonMap[ResourceId] = obj;
console.log(this.videotypejsonMap[ResourceId], 'id');
this.parent_this.Player.Player.execFunction("NETDEV_StopRealPlay", parseInt(ResourceId));
let openretcode = this.parent_this.Player.Player.execFunction("NETDEV_RealPlay", parseInt(ResourceId), this.DeviceHandle, jsonStr);
if (0 != openretcode) {
// msg = $.lang.tip["tipstartvideofail"];
icon = TIPS_TYPE.FAIL;
} else {
// msg = $.lang.tip["tipstartvideosuc"];
icon = TIPS_TYPE.SUCCEED;
}
this.parent_this.Player.Player.execFunction("NETDEV_Enable3DPosition", parseInt(ResourceId), true);
this.parent_this.Player.Player.execFunction("NETDEV_EnableDigitalZoom", parseInt(ResourceId), false);
this.msgtipshow(msg, icon);
},
//关闭视频
stopVideo: function () {
// var msg;
// var icon;
var ResourceId = this.parent_this.Player.Player.execFunction("NetSDKGetFocusWnd");
this.videotypejsonMap[ResourceId] = null;
this.parent_this.Player.Player.execFunction("NETDEV_EnableDigitalZoom", parseInt(ResourceId), false);
this.parent_this.Player.Player.execFunction("NETDEV_Enable3DPosition", parseInt(ResourceId), false);
var retcode = this.parent_this.Player.Player.execFunction("NETDEV_StopRealPlay", parseInt(ResourceId));
// if (0 != retcode) {
// msg = $.lang.tip["tipstopvideofail"];
// icon = TIPS_TYPE.FAIL;
// } else {
// msg = $.lang.tip["tipstopvideosuc"];
// icon = TIPS_TYPE.SUCCEED;
// }
// this.msgtipshow(msg, icon);
},
/******************************* 实况相关 END ***************************/
/**************************停止所有播放流********************/
stoponevideo: function (id) {
this.parent_this.Player.Player.execFunction("NETDEV_StopRealPlay", id);
},
/**************************清理SDK并关闭线程********************/
destory_activex: function () {
if (top.sdk_viewer) {
var ResourceId = this.parent_this.Player.Player.execFunction("NetSDKGetFocusWnd");
this.parent_this.Player.Player.execFunction("NETDEV_StopRealPlay", parseInt(ResourceId));
this.parent_this.Player.Player.execFunction("NETDEV_Cleanup");
delete this.parent_this.Player.Player;
}
},
/*************************** 公用方法 Begin ****************************/
//滚动调滑动一小步，为解决关闭视频最后一帧画面问题
bodyScroll: function () {
var t = $(window).scrollTop();
$('body,html').animate({ 'scrollTop': t - 10 }, 100);
$('body,html').animate({ 'scrollTop': t + 10 }, 100);
},
//清除表格
destoryTable: function (id) {
$.jgrid.gridDestroy("#" + id);
},
// 自动播放
autoPlay: function () {
// 获取摄像机信息
this.protocol = 0; // 协议
this.devicetype = '1'; // 设备类型
// this.channelValue = 1; // 通道号
let loginJsonMap2 = {
"szIPAddr": this.parent_this.sIp,
"dwPort": this.parent_this.nPort,
"szUserName": this.parent_this.sUserName,
"szPassword": this.parent_this.sPassword,
"dwLoginProto": '0',
};
let loginJsonstring2 = JSON.stringify(loginJsonMap2);
// 调用登录接口
this.login(loginJsonstring2);
// 获取通道信息
this.getChannellist();
},
AutoRealPlay: function () {
console.log("播放宇视摄像头");
this.init();
},
Stop: function () {
console.log("停止摄像头视频预览");
this.stopVideo();
// 清理SDK并关闭线程
this.destory_activex();
},
};
// this.CallFun;
this.CallFun = this.uniview;
}
在vue页面使用
```javascript
<template>
<div>
<div id="divPlugin" style="width:500px;height:500px" class="plugin"></div>
</div>
</template>
<script>
import Monitor from '../../webvideo'
export default {
data(){
return{
Monitor:new Monitor(this,{
// div
sContainerID: 'divPlugin',
// 摄像头或者NVR的IP地址
sIp: 'xxxx',
// 端口号
nPort: parseInt(80),
// 通道号
// nChannelID: parseInt(GetUrlParam("chanelNo")),
// 登录用户名
sUserName: 'admin',
// 登录密码
sPassword: 'amdin',
})
}
},
mounted(){
// console.log(this.Monito);
this.Monitor.CallFun.AutoRealPlay();
},
methods:{
}
}
</script>
<style></style>
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)