1简介

1.1内容简介

Web 控件 V3.0 基于 ActiveX 和 NPAPI 开发，接口封装于 javascript 脚本，以 javascript 接口形式提供用户集成，支持网页上实现预览、回放、云台控制等功能。该控件开发包仅支持 B/S 网页开发，不适用于 C/S 开发。

使用海康威视设备在Web端显示实时视频 https://blog.csdn.net/qq_38289815/article/details/84779753

Web端和移动端接入萤石云平台的视频数据 https://blog.csdn.net/qq_38289815/article/details/92615824

萤石云摄像头Http接口云台控制开发 https://blog.csdn.net/qq_38289815/article/details/94288310

1.2支持设备

Web 控件 V3.0 支持我司多种设备，包括 DVR、NVR、DVS、网络摄像机、网络球机等，设备需要支持PSIA 或 ISAPI 协议。

1.3运行环境

操作系统：Windows XP、Windows7、Windows8、Windows8.1、Windows10

浏览器：IE8~IE11、Chrome31+、Firefox35+，32 位浏览器

IE8~IE11、Chrome31~Chrome44、Firefox35~Firefox51，64 位浏览器

1.4硬件设备

海康威视网络硬盘录像机

萤石云摄像头或海康威视的摄像头

注意：摄像头和网络硬盘录像机要在同一网段，没有硬盘录像机，回放功能就不能使用。

1.5打开硬盘录像机并添加摄像头

(1)连接好硬盘录像机和摄像头，填写账号密码。进入系统主界面右击选择主菜单。

(2)先进入系统配置完成网络配置后，再进入管道管理添加摄像头。

(3)系统配置中的网络配置如下，将自动获取IPv4地址的勾选取消，然后配置IPv4地址、子网掩码和默认网关，跟路由器的配法一样。

(4)完成网络配置后，进入管道管理。一般刚开始配的时候什么都没有，需要点刷新和一键激活。激活后的状态如下。状态下方的图案变成了"播放键"就说明可以查看视频了。

(5)返回主菜单后查看摄像头采集的视频。

2.WEB端视频显示

2.1使用demo.html

打开CN_WEB3.0控件开发包V1.1.0_Win32\demo\cn里的demo.html。效果图如下：

2.2填写登录信息

IP地址是硬盘录像机的IP，端口号80。用户名密码是登录硬盘录像机填写的账号和密码。

确保摄像头和网络硬盘录像机要在同一网段，在完成了前期准备工作后，先Ping一下硬盘录像机的IP，确保不是程序问题导致的无法登录。登录成功的信息反馈如下：

登录成功后，会先后显示获取数字通道成功和获取端口成功。之后还需要点击预览功能里"开始预览"按钮查看视频。码流类型都选择主码流。

2.3根据自身需求进行裁剪

可能遇到的问题：(1)这个Demo会提示安装codebase文件夹中的WebComponentsKit.exe，安装完后可能反复提示安装，此时建议重启电脑。

(2)使用IE浏览器时需要允许插件运行，可能还需要配置，将ActiveX控件和插件里的内容设置为启用或者提示。搜狗浏览器也行，但是要使用兼容模式，就是把网址后面的"闪电"点一下，它就会变成IE的图标，就成转换成兼容模式了。

(3)cn文件夹下的demo.js中有不懂的，可以查看doc文件夹中有开发编程指南。

开发包链接：https://download.csdn.net/download/qq_38289815/11240596

海康威视Web端视频开发相关推荐

python 录制web视频_Python django框架 web端视频加密的实例详解
视频加密流程图: 后端获取保利威的视频播放授权token,提供接口api给前端参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play ...
移动端视频开发通过什么方式实现直播？十分钟带你快速了解
原文链接:https://www.jianshu.com/p/92b71382724f 本专栏专注分享大型Bat面试知识,后续会持续更新,喜欢的话麻烦点击一个关注现在的移动端的音视频这些在近段时间非 ...
海康威视 web端开发经验（二）
上篇博客介绍了海康威视sdk以及web端的开发,成功预览.还没有成功的朋友可以去看一下上一篇文章关于海康威视sdk与海康威视web的史上最精细的教程 (一) 但都是单个摄像头,心里总有个疑问,俩个摄 ...
web端刷卡器_新品推荐：WEB端免开发IC卡读卡器
新品推荐:WEB端免开发IC卡读卡器为了解决IC卡读写器做WEB集成开发过程中的麻烦,建和诚达推出了一款网页版专业IC卡读卡器-WEB读卡器,可免除WEB开发使用IC卡读写器的麻烦,实现免驱动.免开 ...
基于FFmpeg和Wasm的Web端视频截帧方案
作者 | 小萱导读基于实际业务需求,介绍了自定义Wasm截帧方案的实现原理和实现方案.解决传统的基于canvas的截帧方案所存在的问题,更高效灵活的实现截帧能力. 全文10103字,预计阅读时间2 ...
java开发调用海康威视摄像头的web端页面开发心得
最近在开发过程中需要用到海康威视的摄像头在web端展示在各种百度之后发现网上很难找到一个简便,可靠的教程在摸索着完成项目之后 ,决定写一篇攻略造福有需求的小伙伴言归正传首先需 ...
珍稀干货！阿里 Web 音视频开发趟坑指南
作者 | 阿里文娱前端技术专家归影责编 | 夕颜出品 | CSDN(ID:CSDNnews) 这不是一篇基于MSE开发Web播放器的入门文章,而是围绕Web播放器开发遇到的常见问题与解决方案,毕 ...
web td不对齐_珍稀干货！阿里 Web 音视频开发趟坑指南
作者 | 阿里文娱前端技术专家归影责编 | 夕颜出品 | CSDN(ID:CSDNnews) 这不是一篇基于MSE开发Web播放器的入门文章,而是围绕Web播放器开发遇到的常见问题与解决方案,毕 ...
腾讯云点播视频存储(Web端视频上传)
官方文档前言所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...

海康威视Web端视频开发

1简介