使用HTML和XHTML制作海康摄像头实时监控功能

最新推荐文章于 2024-04-24 19:12:36 发布
最新推荐文章于 2024-04-24 19:12:36 发布
阅读量658 收藏 1
点赞数
文章标签： html xhtml 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TdMaster/article/details/133503130
版权
本文详细介绍了如何借助HTML和XHTML，结合jQuery和海康摄像头API，创建一个网页来实现海康摄像头的实时监控功能。通过引入相关库文件，设置显示摄像头画面的区域，编写JavaScript代码初始化并控制摄像头，最终实现监控画面的实时显示。读者可以将提供的代码保存为.html文件并在浏览器中查看效果。
摘要由CSDN通过智能技术生成

在本文中，我们将介绍如何使用HTML和XHTML创建一个基本的网页，以实现海康摄像头的实时监控功能。我们将提供相应的源代码，并逐步解释每个部分的作用和实现方法。

首先，我们需要引入海康摄像头的相关库文件和插件。在标签中添加以下代码：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src
最低0.47元/天 解锁文章
TdMaster
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
海康摄像头视频实时监控
hggugfn的博客
11-10 2580
海康摄像头视频实时监控
web页面完美调用海康摄像头demo，支持预览、抓拍、录像、最重要的是支持云台
06-16
web页面完美调用海康摄像头demo，支持预览、抓拍、录像、最重要的是支持云台、支持云台、支持云台。
HTML+JS 实现监控切屏
qq_22841387的博客
02-25 3129
项目描述 该项目是我在网上看其他博客的时候无意中看到的，看见别人居然能实现这种操作很好奇 项目要求做到 监控网页状态 记录离开次数 离开时间 记录离开页面 实现这个切换页面功能需要用到一个web的APIvisiblitychange visibilitychange - Web API 接口参考 | MDN (mozilla.org) Document.visibilityState - Web API 接口参考 | MDN (mozilla.org) document.addEventListen
物联网平台源码：支持TCP/IP、HTTP、MQTT通讯协议，完善的海康摄像头集成，提供后台服务、传感器解析服务和Web展示
最新发布
DnzwUVZEJ的博客
04-24 522
在物联网平台源码的设计中，传感器解析服务需要支持MQTT通信协议，MQTT是一种轻量级的发布/订阅协议，适用于物联网设备之间的低带宽和不稳定网络环境。系统的后台服务、传感器解析服务和Web展示应具备完善的功能，包括数据采集和控制、报警信息管理和报表导出、自动控制和触发管理，以及历史数据和子账户授权等。在物联网平台源码的设计中，Web展示需要具备多种功能，包括实时数据采集和远程控制、报警信息管理和报表导出、自动控制和触发管理、历史数据和报表导出功能，以及子账户和场景授权管理等。报警信息管理和报表导出；
html调用内网海康威视摄像头
LauEl-的博客
06-01 1399
我的需求很简单就是在html的主页上用iframe加载出摄像头，海康威视的摄像头无法直接调用，必须安装海康提供的web插件包，使用插件的demo是可以调用的，但是单独搞出来又无法使用，所以直接在原来的demo里加入js，使他自行加载以来显示页面，显示出来就可以进行iframe了。html调用内网海康威视摄像头。
网页版视频监控系统完整版
qq_42978535的博客
07-21 7051
一款网页版监控系统，日常学习使用
HTML实现海康摄像头实时监控功能
12-14
最近公司安排做CCFA的一些东西，有一项就是做一个网页播放摄像头的实时监控。网上百度了很久，很多都是直接用vlc插件实现，但是目前主流浏览器都已经不支持vlc插件了，搞了很久也没成功。 网上大多是这么实现的： <object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/
HTML5 实现摄像头实时监控
热门推荐
qq_37753687的博客
04-02 1万+
实现摄像头实时监控有如下两种方法 1.HTML5+VLC实现网络串流进行实时监控，对带宽要求较高。 VLC下载链接：https://www.videolan.org/ 2.VLC安装 选择自己所需要的版本 选取VLC存放位置 3.安装完成 打开VLC ...
基于html技术实现海康&大华交通摄像头车道、区域描绘
weixin_40222497的博客
02-04 2381
基于html技术实现海康&大华交通摄像头车道、区域描绘
使用python+yolov5算法+海康摄像头实时检测是否带安全帽以及危险区域+源码+开发文档说明+训练数据（毕设课设&项目开发
03-25
使用python+yolov5算法+海康摄像头实时检测是否带安全帽以及危险区域+源码+开发文档说明+训练数据，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 使用python+...
基于html技术实现海康&amp;大华交通摄像头车道、区域描绘
02-22
基于html技术实现海康&大华交通摄像头车道、区域描绘 车道描绘 监控区域描绘
web调取海康摄像头
06-01
Web前端调取海康摄像头Demo，亲测可用，已应用于实际项目中，解决一个页面同时调取多路摄像头问题。
大华视频监控Javaweb 的demo html
12-26
大华视频监控HTMLdemo 包括HTML页面和插件 ，下载后运行插件中的reg.bat文件，然后打开HTML即可，需在HTML中配置ip，通道，用户名，密码。暂只支持ie浏览器
监控页面html js css
09-27
监控页面　html js css
c#海康摄像头实时截屏和录像代码
04-03
在C#编程环境中，开发海康摄像头的实时截屏和录像功能主要涉及到计算机视觉和视频流处理技术。这里，我们主要关注的是如何利用WinForm应用和C#来实现这一目标。WinForm是.NET Framework中的一个用户界面框架，适用于...
Unity实现海康摄像头实时播放Demo 内含源码和插件UMP
09-25
在本文中，我们将深入探讨如何使用Unity引擎与海康摄像头集成，实现实时视频流播放。这个Demo项目包含了源码和插件UMP（Unity Media Player），使得开发者能够快速理解和实现这一功能。首先，我们来了解一下Unity和...
HTML网页调用海康摄像头,[FastVideo]Web Html5 无插件方式连接海康摄像头[2]
weixin_39844963的博客
06-04 1667
【实例简介】此程序可以在Web Html通过Url或者 JS的方式调用海康摄像头，不需要在客户机浏览器安装插件。可以安装为服务，为Web提供后台服务。【实例截图】【核心代码】FastVideo├── cef_100_percent.pak├── cef_200_percent.pak├── cef_extensions.pak├── cef.pak├── CefSharp.BrowserSubpr...
html播放监控视频教程,使用javascript实现监控视频播放并打印日志
weixin_29380121的博客
06-07 1123
最近在做一个项目，要求监控视频的播放事件并能够打印LOG日志，经过一番思索，使用javascript实现了此功能，代码如下：HTML:代码如下:Multi Source" controls autoplay>" controls autoplay>" controls autoplay>" controls autoplay>" controls autoplay>"...
java实现海康摄像头实时预览功能
05-26
要实现海康摄像头的实时预览功能，你需要使用海康提供的 SDK 和 API，以下是一个基本的示例代码： ```java import com.sun.jna.NativeLong; import com.sun.jna.Pointer; import com.sun.jna.ptr.ByteByReference; import com.sun.jna.ptr.IntByReference; import com.sun.jna.ptr.NativeLongByReference; import com.sun.jna.ptr.PointerByReference; import com.sun.jna.win32.StdCallLibrary; public class HKCameraPreview { public interface HCNetSDK extends StdCallLibrary { HCNetSDK INSTANCE = (HCNetSDK) Native.loadLibrary("C:\\Program Files (x86)\\hikvision\\HCNetSDK\\HCNetSDK.dll", HCNetSDK.class); // 登录函数 NativeLong NET_DVR_Login_V30(String sDVRIP, short wDVRPort, String sUserName, String sPassword, NET_DVR_DEVICEINFO_V30 lpDeviceInfo); // 预览函数 NativeLong NET_DVR_RealPlay_V40(NativeLong lUserID, NET_DVR_PREVIEWINFO lpPreviewInfo, RealDataCallBack_V30 fRealDataCallBack_V30, Pointer pUser); // 停止预览函数 boolean NET_DVR_StopRealPlay(NativeLong lRealHandle); // 释放 SDK 资源 boolean NET_DVR_Cleanup(); } // 设备信息结构体 public static class NET_DVR_DEVICEINFO_V30 extends Structure { public byte[] sSerialNumber = new byte[48]; public byte byAlarmInPortNum; public byte byAlarmOutPortNum; public byte byDiskNum; public byte byDVRType; public byte byChanNum; public byte byStartChan; public byte byAudioChanNum; public byte byIPChanNum; public byte[] byRes1 = new byte[24]; } // 预览参数结构体 public static class NET_DVR_PREVIEWINFO extends Structure { public NativeLong lChannel; // 预览通道号 public int dwStreamType; // 码流类型：0-主码流，1-子码流，2-码流 3，3-码流 4，4-码流 5，5-码流 6，6-码流 7，7-码流 8，8-码流 9，9-码流 10，10-码流 11，11-码流 12，12-码流 13，13-码流 14，14-码流 15，15-码流 16 public int dwLinkMode; // 连接模式：0- TCP 方式，1- UDP 方式，2- 多播方式，3- RTP 方式，4-RTP/RTSP，5- RTP/HTTP public Pointer hPlayWnd; // 播放窗口的句柄，为 NULL 表示不解码显示 public int bBlocked; // 0- 非阻塞取流，1- 阻塞取流 public int bPassbackRecord; // 0-不启用录像回传，1-启用录像回传 public byte byPreviewMode; // 预览模式：0- 正常预览，1-延迟预览 public byte[] byStreamID = new byte[32]; // 流ID，lChannel为0xffffffff时启用此参数 public byte[] byProtoType = new byte[20]; public int dwDisplayBufNum; // 播放库播放缓冲区最大缓冲帧数 public byte byNPQMode; // NPQ 模式：0- 兼容模式，1- 极简模式（不支持 OSD 和 VCA），2- 增强模式 public byte[] byRes = new byte[215]; } // 实时数据回调函数 public static class RealDataCallBack_V30 implements StdCallCallback { public void invoke(NativeLong lPlayHandle, int dwDataType, ByteByReference pBuffer, int dwBufSize, Pointer pUser) { // 实时数据处理 } } public static void main(String[] args) { HCNetSDK hcNetSDK = HCNetSDK.INSTANCE; NET_DVR_DEVICEINFO_V30 deviceInfo = new NET_DVR_DEVICEINFO_V30(); // 登录设备 NativeLong lUserID = hcNetSDK.NET_DVR_Login_V30("192.168.1.100", (short) 8000, "admin", "password", deviceInfo); if (lUserID.longValue() == -1) { System.out.println("登录失败：" + hcNetSDK.NET_DVR_GetLastError()); return; } // 预览参数 NET_DVR_PREVIEWINFO previewInfo = new NET_DVR_PREVIEWINFO(); previewInfo.lChannel = new NativeLong(1); // 预览通道号 previewInfo.dwStreamType = 0; // 主码流 previewInfo.dwLinkMode = 0; // TCP 方式 previewInfo.hPlayWnd = null; // 不解码显示 previewInfo.bBlocked = 1; // 阻塞取流 previewInfo.bPassbackRecord = 0; // 不启用录像回传 previewInfo.byPreviewMode = 0; // 正常预览 previewInfo.byNPQMode = 0; // 兼容模式 // 启动实时预览 RealDataCallBack_V30 realDataCallBack_V30 = new RealDataCallBack_V30(); NativeLongByReference lRealHandle = new NativeLongByReference(); lRealHandle.setValue(hcNetSDK.NET_DVR_RealPlay_V40(lUserID, previewInfo, realDataCallBack_V30, null)); if (lRealHandle.longValue() == -1) { System.out.println("实时预览失败：" + hcNetSDK.NET_DVR_GetLastError()); hcNetSDK.NET_DVR_Logout(lUserID); hcNetSDK.NET_DVR_Cleanup(); return; } // 等待预览结束 System.out.println("正在预览，按任意键停止..."); try { System.in.read(); } catch (IOException e) { e.printStackTrace(); } // 停止实时预览 if (!hcNetSDK.NET_DVR_StopRealPlay(lRealHandle.getValue())) { System.out.println("停止实时预览失败：" + hcNetSDK.NET_DVR_GetLastError()); } // 注销登录并释放 SDK 资源 if (!hcNetSDK.NET_DVR_Logout(lUserID)) { System.out.println("注销登录失败：" + hcNetSDK.NET_DVR_GetLastError()); } if (!hcNetSDK.NET_DVR_Cleanup()) { System.out.println("释放 SDK 资源失败：" + hcNetSDK.NET_DVR_GetLastError()); } } } ``` 上面的代码中，我们通过 `NET_DVR_Login_V30()` 函数来登录设备，获取到设备的用户 ID，然后通过 `NET_DVR_RealPlay_V40()` 函数启动实时预览，并使用回调函数 `RealDataCallBack_V30` 处理实时数据。最后，我们使用 `NET_DVR_StopRealPlay()` 函数停止实时预览，并使用 `NET_DVR_Logout()` 函数注销登录，最终使用 `NET_DVR_Cleanup()` 函数释放 SDK 资源。 需要注意的是，以上代码仅供参考，实际使用中需要根据海康提供的 SDK 和 API 进行相应的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值