海康播放视频Demo
1.Html 部分
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>preview_demo</title> </head> <style>html, body {padding: 0;margin: 0;}.playWnd {float: left;/*width: 1200px; !*播放容器的宽和高设定*!*//*height: 600px;*/margin-left: 10px;margin-right: 10px;border: 1px solid red;}.operate {margin-top: 24px;}.operate::after {content: '';display: block;clear: both;}.module {float: left;width: 340px;/*min-height: 320px;*/margin-left: 16px;margin-right: 16px;padding: 16px 8px;box-sizing: border-box;border: 1px solid #e5e5e5;}.module .item {margin-bottom: 4px;}.module input[type="text"] {box-sizing: border-box;display: inline-block;vertical-align: middle;margin-left: 0;width: 150px;min-height: 20px;}.module .btn {min-width: 80px;min-height: 24px;margin-top: 100px;margin-left: 80px;} </style><body> <!--视频窗口展示--> <div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div> </body> <!--三个必要的js文件引入--> <script src="../js/jquery-1.7.1.min.js"></script> <script src="../js/jsencrypt.min.js"></script> <!-- 用于RSA加密 --> <script src="../js/jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 --> <script src="../js/camera.js"></script><script type="text/javascript">//声明公用变量var initCount = 0;//默认值var width = 1200;var height = 800;var codeStreamFlag;var layout = '2x2';var init_flag = false;//初始化完成标识//页面加载时创建播放实例初始化$(window).load(function () {initPlugin();});function autoHeight() {var h = $(window).height();var w = $(window).width()-40;var h_old = 300;if (h > h_old) {$(".playWnd").css('height', h);$(".playWnd").css('width', w);} else {return false;}}$(function () {width = $(window).width()-40;height = $(window).height();autoHeight()$(window).resize(autoHeight);}) </script> </html>
2.js部分
//3.getCameraSpecil var baseApi = ""; var initCnt = 0;//获取视频轮训 function getCameraSpecil() {var access_token = sessionStorage.getItem("access_token"),tenant_id = sessionStorage.getItem("tenant_id");$.ajax({type: "GET",url: baseApi + "/smc/camera/getCameraSpecilInfoList?areaId=" + "",dataType: "json",headers: {"Authorization": "Bearer " + access_token,"TENANT-ID": tenant_id},async: false,success: function (result) {console.log(result);var data = result.data;var size = data.length;var layout = getLayoutBySize(size);// oWebControl.JS_RequestInterface({// funcName: "setLayout",// argument: "{layout:" + layout + ";}"// }).then(function (oData) {$.each(data, function (i, item) {startPreview(item.cameraIndexCode, i + 1);});// });},error: function () {}}); }// 创建播放实例 初始化插件信息 function initPlugin() {oWebControl = new WebControl({szPluginContainer: "playWnd", // 指定容器idiServicePortStart: 15900, // 指定起止端口号,建议使用该值iServicePortEnd: 15909,szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsidcbConnectSuccess: function () { // 创建WebControl实例成功oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死}).then(function () { // 启动插件服务成功oWebControl.JS_SetWindowControlCallback({ // 设置消息回调cbIntegrationCallBack: cbIntegrationCallBack});oWebControl.JS_CreateWnd("playWnd", width, height).then(function () { //JS_CreateWnd创建视频播放窗口,宽高可设定init(); // 创建播放实例成功后初始化});}, function () { // 启动插件服务失败});},cbConnectError: function () { // 创建WebControl实例失败oWebControl = null;$("#playWnd").html("插件未启动,正在尝试启动,请稍候...");WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数,采用wakeup来启动程序initCount++;if (initCount < 3) {setTimeout(function () {initPlugin();}, 3000)} else {$("#playWnd").html("插件启动失败,请检查插件是否安装!");}},cbConnectClose: function (bNormalClose) {// 异常断开:bNormalClose = false// JS_Disconnect正常断开:bNormalClose = trueconsole.log("cbConnectClose");oWebControl = null;}}); }// 设置窗口控制回调 function setCallbacks() {oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: cbIntegrationCallBack}); }// 推送消息 function cbIntegrationCallBack(oData) {showCBInfo(JSON.stringify(oData.responseMsg)); }//初始化 function init() { // getPubKey(function () { // //1.获取session视频平台配置信息 // //2.init // var result = sessionStorage.getItem("camera_platform"); // var data = JSON.parse(result); // console.log(data) // // 请自行修改以下变量值 // var appkey = data.appKey; //综合安防管理平台提供的appkey,必填 // var secret = setEncrypt(data.appSecret); //综合安防管理平台提供的secret,必填 // var ip = data.ip;//综合安防管理平台IP地址,必填 // var playMode = 0; //初始播放模式:0-预览,1-回放 // var port = data.port; //综合安防管理平台端口,若启用HTTPS协议,默认443 // var snapDir = "D:\\SnapDir"; //抓图存储路径 // var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 // var enableHTTPS = data.enableHttps; //是否启用HTTPS协议与综合安防管理平台交互,是为1,否为0 // var encryptedFields = 'secret'; //加密字段,默认加密领域为secret // var showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示 // var showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示 // var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 // var pubKey = ''; // codeStreamFlag = data.codeStreamFlag; // oWebControl.JS_RequestInterface({ // funcName: "init", // argument: JSON.stringify({ // appkey: appkey, //API网关提供的appkey // secret: secret, // //API网关提供的secret // ip: ip, // //API网关IP地址 // playMode: playMode, //播放模式(决定显示预览还是回放界面) // port: port, //端口 // snapDir: snapDir, //抓图存储路径 // videoDir: videoDir, //紧急录像或录像剪辑存储路径 // layout: layout, //布局 // enableHTTPS: enableHTTPS, //是否启用HTTPS协议 // encryptedFields: encryptedFields, //加密字段 // showToolbar: showToolbar, //是否显示工具栏 // showSmart: showSmart, //是否显示智能信息 // buttonIDs: buttonIDs //自定义工具条按钮 // }) // }).then(function (oData) { // oWebControl.JS_Resize(width, height); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 // }); // });getPubKey(function () {// 请自行修改以下变量值 var appkey = ""; //综合安防管理平台提供的appkey,必填var secret = setEncrypt(""); //综合安防管理平台提供的secret,必填var ip = ""; //综合安防管理平台IP地址,必填var playMode = 0; //初始播放模式:0-预览,1-回放var port = 443; //综合安防管理平台端口,若启用HTTPS协议,默认443var snapDir = "D:\\SnapDir"; //抓图存储路径var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,是为1,否为0var encryptedFields = 'secret'; //加密字段,默认加密领域为secretvar showToolbar = 0; //是否显示工具栏,0-不显示,非0-显示var showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮// 请自行修改以上变量值 // indexcode =oWebControl.JS_RequestInterface({funcName: "init",argument: JSON.stringify({appkey: appkey, //API网关提供的appkeysecret: secret, //API网关提供的secretip: ip, //API网关IP地址playMode: playMode, //播放模式(决定显示预览还是回放界面)port: port, //端口snapDir: snapDir, //抓图存储路径videoDir: videoDir, //紧急录像或录像剪辑存储路径layout: layout, //布局enableHTTPS: enableHTTPS, //是否启用HTTPS协议encryptedFields: encryptedFields, //加密字段showToolbar: showToolbar, //是否显示工具栏showSmart: showSmart, //是否显示智能信息buttonIDs: buttonIDs //自定义工具条按钮})}).then(function (oData) {oWebControl.JS_Resize(width, height); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题});}); }//获取公钥 function getPubKey(callback) {oWebControl.JS_RequestInterface({funcName: "getRSAPubKey",argument: JSON.stringify({keyLength: 1024})}).then(function (oData) {console.log(oData);if (oData.responseMsg.data) {pubKey = oData.responseMsg.data;callback();init_flag = true;getCameraSpecil();}}) }function getLayoutBySize(size) {if (size == 1) {layout = '1x1'}if (size > 1 && size < 5) {layout = '2x2';}if (size > 4 && size < 10) {layout = '3x3';}if (size > 10 && size < 17) {layout = '4x4';}if (size > 17 && size < 26) {layout = '5x5';}}function setLayout(layout) {debuggeralert(layout)oWebControl.JS_RequestInterface({funcName: "setLayout",argument: {layout: layout // 窗口布局}}).then(function (oData) {oWebControl.JS_Resize(width, height); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题});}//RSA加密 function setEncrypt(value) {var encrypt = new JSEncrypt();encrypt.setPublicKey(pubKey);return encrypt.encrypt(value); }// 监听resize事件,使插件窗口尺寸跟随DIV窗口变化 $(window).resize(function () {if (oWebControl != null) {oWebControl.JS_Resize(width, height);setWndCover();} });// 监听滚动条scroll事件,使插件窗口跟随浏览器滚动而移动 $(window).scroll(function () {if (oWebControl != null) {oWebControl.JS_Resize(width, height);setWndCover();} });// 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口 function setWndCover() {var iWidth = $(window).width();var iHeight = $(window).height();var oDivRect = $("#playWnd").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 > width) ? width : iCoverLeft;iCoverTop = (iCoverTop > height) ? height : iCoverTop;iCoverRight = (iCoverRight > width) ? width : iCoverRight;iCoverBottom = (iCoverBottom > height) ? height : iCoverBottom;oWebControl.JS_RepairPartWindow(0, 0, width + 1, height); // 多1个像素点防止还原后边界缺失一个像素条if (iCoverLeft != 0) {oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, height);}if (iCoverTop != 0) {oWebControl.JS_CuttingPartWindow(0, 0, width + 1, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条}if (iCoverRight != 0) {oWebControl.JS_CuttingPartWindow(width - iCoverRight, 0, iCoverRight, height);}if (iCoverBottom != 0) {oWebControl.JS_CuttingPartWindow(0, height - iCoverBottom, width, iCoverBottom);} }//视频预览功能 function startPreview(cameraIndexCode, wndId) {// var cameraIndexCode = cameraIndexCode; //获取输入的监控点编号值,必填// var streamMode = codeStreamFlag; //主子码流标识:0-主码流,1-子码流// var transMode = 1; //传输协议:0-UDP,1-TCP// var gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用// var wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)var streamMode = 1; //主子码流标识:0-主码流,1-子码流var transMode = 1; //传输协议:0-UDP,1-TCPvar gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode: cameraIndexCode, //监控点编号streamMode: streamMode, //主子码流标识transMode: transMode, //传输协议gpuMode: gpuMode, //是否开启GPU硬解wndId: wndId //可指定播放窗口})})}$(window).unload(function () {if (oWebControl != null) {oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题oWebControl.JS_Disconnect().then(function () { // 断开与插件服务连接成功},function () { // 断开与插件服务连接失败});} });
注:剩余所需资源请查看海康平台Demo!!!
海康播放视频Demo相关推荐
- 海康摄像头视频实时监控
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 海康摄像 ...
- 海康三维视频融合监控软件系统免费版,支持移动侦测告警
海康三维视频融合监控软件系统免费版,支持移动侦测告警 一.古老的声音预警 千百年来,人们有养狗看家护院的习惯,并一直延续至今天. 当主人家门口或附近有陌生人的时候,狗会觉察到,开 ...
- Java下载海康历史视频并合并转码
Java下载海康历史视频并合并转码 关于上一篇的升级版(补充一下,需要的小伙伴可能更明白点) 有时间补上,目前一直用的OneNote,很少分享了,也不知道好还是不好... function getNo ...
- C#抓取海康录像机视频方法
说明 通过后台代码抓取海康录像机视频的方法,需要将海康程序中自带的几个dll文件放在程序的根目录下面 dll下载地址https://download.csdn.net/download/chenwei ...
- python3.6 ,pyqt5获取海康录像机视频
python3.6 ,pyqt5获取海康录像机视频 1. python 获取摄像机视频 直接上代码 Channels: 录像机32通道,01主流码 transportmode:multicas多播,u ...
- 利用flask解析海康摄像头视频
利用flask解析海康摄像头视频 利用flask解析海康摄像头和大华摄像头的视频 一.安装依赖包 二.获取海康摄像头视频流 三.将视频流输出到Web页面 四. 创建HTML模板文件 利用flask解析 ...
- 仿抖音上下滑动播放视频 demo+爱心点赞特效
DouyinDemo 项目地址:PangHaHa12138/DouyinDemo 简介:仿抖音上下滑动播放视频 demo+爱心点赞特效 更多:作者 提 Bug 标签: 仿抖音上下滑动播放视频 d ...
- 海康 sdk 视频截取 demo
说下这个demo 的背景 ..... 好了 说完了 直接上重点 .... 这是在网上看到一个 jijl 的朋友的 demo 基础上面开发的,用到了里面的一些东西 .示例 demo 以及 web ...
- 安防视频推流组件EasyRTSPServer对接海康NVR视频正常音频不能正常播放问题解析
背景分析 众所周知,RTSP协议是一个流媒体协议,可以实现直播和点播形式的音频与视频流的播放.RTSP协议定义了多种服务器-客户端之间交互的接口,主要有OPTIONS,DESCRIBE,SETUP,P ...
- 海康监控视频无插件开发3.2版本运行demo
一.海康摄像头跑通web开发的demo注意点 1.首先下载官网的web3.2无插件开发包 1.官网下载 随便注册后登录下载 2.积分下载 2.想要运行demo先要实现在浏览器输入摄像头ip后能够实现预 ...
最新文章
- Red Hat Enterprise Linux 5---system-config-*管理工具
- streambuf ambiguous symbol的问题如何解决
- php mysql 随机字符串函数是,mysql生成随机字符串函数分享
- HTML 元素居中的方法
- jar 、war、ear_在命令行上操作JAR,WAR和EAR
- BZOJ 1662: [Usaco2006 Nov]Round Numbers 圆环数(数位DP+恶心细节)
- 终于有人把赌徒谬误讲明白了
- 判断java String中是否有汉字的方法
- ATHK弄出个有道词典加入生词本的快接键...
- python动画精灵_【python游戏编程之旅】第六篇---pygame中的Sprite(精灵)模块和加载动画...
- TUIO学习笔记2-TUIO C++ Reference Implementation and Demo Application参考实现和Demo程序(图片版,防查重)
- wps word中交叉引用的用法
- 职场心理学-心理学第一天(非原创)
- FCC ES6篇中的解构赋值
- 计算机其它离的360云盘,360云盘资源转到百度云 360云盘搬家教程
- 【高端黑】软件工程师去理发店
- 【HarmonyOS】鸿蒙3.0使用WebView进行链接跳转,告警“hwbr_engine_AwContentsClient: Denied starting an intent without a
- 【python】绘制一朵小红花
- 图像处理历史上最著名的女子——一位花花公子封面女郎
- CMake 入门实战,从实例入手,讲解 CMake 的常见用法,例如aux_source_directory的用法