海康威视取流失败5b_海康威视WEB3.0开发整理

集成海康威视Web3.0系统。主要是嵌入视频监控到公司能管系统.

海康威视web开发核心包

链接: https:// pan.baidu.com/s/1WP3hvI fC510NMf7Tk6Cp2w 提取码: xtqz

---

整个项目从一无所知到完整实现项目需求，大概花了一周时间。所以说，技术这玩意。你一段时间不整，基本上都还给夫子了。

---

长话短说，网上那些简单的通过配置资源路径在浏览器中访问视频文件资源很多，该处我就不列举了。

实现web端监控视频核心文件如下：
webVideoCtrl.js[网盘资源中有]
jquery-1.7.1.min.js[网盘资源中有]（如项目中有则可以省略）
自定义JS[如下图]
CSS[网盘资源中有，但我自己增加了点内容，在下方能找到]

---

注意：

浏览器仅支持： IE6~IE11、 Chrome30~40.2、 Firefox3.5+、 Safari5.0.2+，目前仅支持 32 位浏览器。别问我为啥，人家就这么规定的。木得办法。

PS：推荐调试使用360浏览器，代理设置--设置成代理IE 。起码比IE好用不是么。

---

1 自定义JS文件，项目因为使用AngularJS,如不需要可以直接把project中代码复制自定义。

project.controller("init",function($scope, $http, dataService, chartValue) {
    
	
	var g_iWndIndex = 0;
	var ip = '链接目标IP，必须公网', port = '端口', username = '用户名', password = '密码';
	var IPaddress = [];
	$(function () {
    
		Initialization_method();
		login_method();
	});	
	
	/** 登录按钮对应方法-初始化时自动调用 */
	function login_method(){
    
		var szIP = ip, szPort = port, szUsername = username, szPassword = password;
		if ("" == szIP || "" == szPort) {
    
			return;
		}
		var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
    
			success: function (xmlDoc) {
    
				setTimeout(function () {
    
					showTree_method();
				}, 100);
			}
		});
	}	

	/** 获取通道,默认生成2X2的视屏监控界面,生成属性结构 */
	function showTree_method(){
    
		console.log("==树形结构==");
		WebVideoCtrl.I_GetDigitalChannelInfo(ip, {
    
	        async: false,
	        success: function (xmlDoc) {
    
	            var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
	            $.each(oChannels, function (i) {
    
	                var id = $(this).find("id").eq(0).text(),
	                    name = $(this).find("name").eq(0).text(),
	                    online = $(this).find("online").eq(0).text()
	                    ipAddress = $(this).find("ipAddress").eq(0).text();
	                if ("false" == online) {
     
	                    return true;
	                }
	                if ("" == name) {
    
	                    name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
	                }
	                var arr = {
    
	                    "id": id,
	                    "title": ipAddress,
	                    "name":name,
	                    "type":1
	                };
	                IPaddress.push(arr);
	            });
	        }
	    });	
		
		// 展示通道树形结构 -这个是把通道列表改成树形结构样式
		showVideoTree("electric",false,"_reading",false,false,null,null,IPaddress);
	}
	
	// 停止方法
	$scope.stopRealPlay = function(){
    
		// 获取通道树结构选中数据
		$scope.chnnels = selectedTree();				
		$scope.idsList = [];   
		for (var i = 0; i