基于原生javascript
海康
通过引入海康web插件来加载摄像头直播回放等功能。 web插件参考海康官网视频WEB插件开发指南。https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10
~/Content/js/page/jsWebControl-1.0.0.min.js Views\VideoMain\DetailHik.cshtml
初始化web插件
只需要初始化一次，页面注销时需要销毁，所需必要参数：综合安防管理平台appkey、secret、平台端口（分为外网端口和内网端口）
//DetailHik.cshtml第865行 初始化
// 创建WebControl实例与启动插件
function initPlugin(webControlId, haitunData, type, videoObj) {
console.log("创建WebControl实例与启动插件");
var oWebControl = new WebControl({
szPluginContainer: webControlId, //指定容器id
iServicePortStart: 15900, //指定起止端口号，建议使用该值
iServicePortEnd: 15909,
cbConnectSuccess: function () {
// setCallbacks();
//实例创建成功后需要启动服务
oWebControl.JS_StartService("window", {
dllPath: "./VideoPluginConnect.dll"
}).then(function () {
console.log("创建视频播放窗口");
oWebControl.JS_CreateWnd(webControlId, $('#' + webControlId).width(), 300).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
console.log("JS_CreateWnd success");
init(oWebControl, webControlId, haitunData, type, videoObj); //创建播放实例成功后初始化
});
}, function () {
});
},
cbConnectError: function () {
console.log("cbConnectError");
oWebControl = null;
$("#" + webControlId).html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); //程序未启动时执行error函数，采用wakeup来启动程序
initCount++;
if (initCount < 3) {
setTimeout(function () {
initPlugin(webControlId, haitunData, type, videoObj);
}, 3000)
} else {
$("#" + webControlId).html("插件启动失败，请检查插件是否安装！");
}
},
cbConnectClose: function () {
console.log("cbConnectClose");
oWebControl = null;
}
});
}
function init(obj, webControlId, haitunData, type, videoObj) {
console.log("初始化");
getPubKey(obj, function () {
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
var appkey = haitunData.VideoKey; //综合安防管理平台提供的appkey，必填
var secret = setEncrypt(haitunData.VideoSecret); //综合安防管理平台提供的secret，必填
var ip = haitunData.VideoIp; //综合安防管理平台IP地址，必填
var playMode = type; //初始播放模式：0-预览，1-回放
var port = haitunData.VideoPort; //综合安防管理平台端口，若启用HTTPS协议，默认443
var layout = "1x1"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 0; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
//var reconnectTimes = 2; // 重连次数，回放异常情况下有效
//var reconnectTime = 4; // 每次重连的重连间隔 >= reconnectTime
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
obj.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey
secret: secret, //API网关提供的secret
ip: ip, //API网关IP地址
playMode: playMode, //播放模式（决定显示预览还是回放界面）
port: port, //端口
//紧急录像或录像剪辑存储路径
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息
//reconnectTimes：reconnectTimes, //重连次数
//reconnectDuration：reconnectTime //重连间隔
})
}).then(function (oData) {
//var pLeft = $(window.parent.document).find('iframe:visible').offset().left;
//var pTop = $(window.parent.document).find('iframe:visible').offset().top;
//obj.JS_SetDocOffset({
// left: pLeft,
// top: pTop
//});
obj.JS_Resize($('#' + webControlId).width(), 300); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
setWndCover(webControlId, obj);
// 0 预览 1 回放
if (type == 0) {
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
$(window).resize(function () {
if (obj != null) {
//console.log($(window.parent.document).find('iframe:visible').offset().left)
//var pLeft = $(window.parent.document).find('iframe:visible').offset().left;
//var pTop = $(window.parent.document).find('iframe:visible').offset().top;
//obj.JS_SetDocOffset({
// left: pLeft,
// top: pTop
//});
obj.JS_Resize($('#' + webControlId).width(), 300);
setWndCover(webControlId, obj);
}
});
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
$(window).scroll(function () {
if (obj != null) {
obj.JS_Resize($('#' + webControlId).width(), 300);
setWndCover(webControlId, obj);
}
});
startPreview(obj, videoObj);
hikVideoObjList.push(obj);
} else if (type == 1) {
startPlayback(obj, videoObj);
hikVideoBack = obj;
}
});
});
}
//DetailHik.cshtml第1037行 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
function setWndCover(webControlId, obj) {
var iWidth = $(window).width();
var iHeight = $(window).height();
var oDivRect = $("#" + webControlId).get(0).getBoundingClientRect();
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
iCoverTop = (iCoverTop > 300) ? 300 : iCoverTop;
iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
iCoverBottom = (iCoverBottom > 300) ? 300 : iCoverBottom;
obj.JS_RepairPartWindow(0, 0, 1001, 300); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
obj.JS_CuttingPartWindow(0, 0, iCoverLeft, 300);
}
if (iCoverTop != 0) {
obj.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
obj.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 300);
}
if (iCoverBottom != 0) {
obj.JS_CuttingPartWindow(0, 300 - iCoverBottom, 1000, iCoverBottom);
}
}
播放
必要参数：cameraIndexCode摄像头编号、transMode传输协议、streamMode传输协议（回放需要：开始时间戳、结束时间戳）
//DetailHik.cshtml第1102行 直播
function startPreview(obj, videoObj) {
console.log("开始");
console.log(obj);
var cameraIndexCode = videoObj.cameraCode; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
obj.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: wndId //可指定播放窗口
})
})
}
//DetailHik.cshtml第1068行 回放
function startPlayback(obj, videoObj) {
console.log("开始");
console.log(obj);
var cameraIndexCode = videoObj.cameraCode; //获取输入的监控点编号值，必填
var startTimeStamp = new Date(videoObj.startTime.replace('-', '/').replace('-', '/')).getTime(); //回放开始时间戳，必填
var endTimeStamp = new Date(videoObj.endTime.replace('-', '/').replace('-', '/')).getTime(); //回放结束时间戳，必填
//var cameraIndexCode = 'b8757f913561440b838f76d239f67caa'; //获取输入的监控点编号值，必填
//var startTimeStamp = new Date('2020-12-30 00:00:00'.replace('-', '/').replace('-', '/')).getTime(); //回放开始时间戳，必填
//var endTimeStamp = new Date('2020-12-30 23:59:59'.replace('-', '/').replace('-', '/')).getTime(); //回放结束时间戳，必填
var recordLocation = 0; //录像存储位置：0-中心存储，1-设备存储
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
console.log('cameraIndexCode', cameraIndexCode);
console.log('startTimeStamp', startTimeStamp);
console.log('endTimeStamp', endTimeStamp);
console.log('recordLocation', recordLocation);
console.log('transMode', transMode);
console.log('gpuMode', gpuMode);
console.log('wndId', wndId);
obj.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), //录像查询开始时间戳，单位：秒
endTimeStamp: Math.floor(endTimeStamp / 1000).toString(), //录像结束开始时间戳，单位：秒
recordLocation: recordLocation, //录像存储类型：0-中心存储，1-设备存储
transMode: transMode, //传输协议：0-UDP，1-TCP
gpuMode: gpuMode, //是否启用GPU硬解，0-不启用，1-启用
wndId: wndId //可指定播放窗口
})
})
}
销毁
//DetailHik.cshtml第989行 销毁
function destoryHikVideo() {
for (var ih = 0; ih < hikVideoObjList.length; ih++) {
hikVideoObjList[ih].JS_Disconnect().then(function () {
console.log('断开与插件服务连接成功')
hikVideoObjList[ih].JS_DestroyWnd();
}, function () {
console.log('断开与插件服务连接失败')
});
}
hikVideoObjList = [];
}