YtIoT/WebRoot/view/videoCam/scripts/videoCam.js

/**
 * 
 */

var baseUrl;
var baseIp;
var videoStore;
var company_code;
var theme;
var maxHeight = 10000;
var maxWidth = 10000;

var close_dev = function(id){
	var query = {
			CMD:3,
			BODY:{
				DEVICE:id,
				ACTION:0
			}
	}
	$.ajax({
		type:'POST',
		url:baseUrl+'cgi-bin/demo.cgi',
		data:'queryJson:'+JSON.stringify(query),
		success:function(result){

		}
	});
}

var open_dev = function(id){
	var query = {
			CMD:3,
			BODY:{
				DEVICE:id,
				ACTION:1
			}
	}
	$.ajax({
		type:'POST',
		url:baseUrl+'cgi-bin/demo.cgi',
		data:'queryJson:'+JSON.stringify(query),
		success:function(result){

		}
	});
}

var chk_cideo = function(){
	var query = {
			CMD:1
	}
	$.ajax({
		type:'POST',
		url:baseUrl+'cgi-bin/demo.cgi',
		data:'queryJson:'+JSON.stringify(query),
		success:function(result){
			var json = eval('(' + result + ')');
			if(json.RESULT.LIST!=undefined){
				if(json.RESULT.LIST.length>0){
					for(var i=0;i<json.RESULT.LIST.length;i++){
						var close_btn = document.getElementById('close_'+json.RESULT.LIST[i].DEVICE);
						var open_btn =  document.getElementById('open_'+json.RESULT.LIST[i].DEVICE);
						if(json.RESULT.LIST[i].LIVEONLINE==true){
							document.getElementById('close_'+json.RESULT.LIST[i].DEVICE).innerHTML = '视频重载';
							document.getElementById('open_'+json.RESULT.LIST[i].DEVICE).disabled = true;
						}else{
							document.getElementById('close_'+json.RESULT.LIST[i].DEVICE).innerHTML = '关闭视频';
							document.getElementById('open_'+json.RESULT.LIST[i].DEVICE).disabled = false;
						}
					}
				}
			}
		}
	});
	setTimeout(chk_cideo,5000);
}

var getVideoList = function() {
	var query = {
			company_code:company_code
	}
	$.ajax({
		type:'POST',
        url: baseUrl+"iot/alarm/view/getVideoList",
        data: {
        	queryJson : Ext.JSON.encode(query)
    	 },
    	 success: function(result){
    		 var json = eval('(' + result + ')');
    		 if(json.action=='getVideoList'){
    			 videoStore = json.RESULT;
    			 if(json.company.length>0)
    				 $("#videoCamPanel_title_string").innerHTML=json.company+".视频监控";
    			 else
    				 $("#videoCamPanel_title_string").innerHTML="视频监控";
    			 var videoCams = document.getElementById('Video_Cams');
    			 var table = document.createElement('table');
    			 table.border="0";
    			 table.style="border:0px solid #000; width:1260px; margin:10px auto 5px auto;";
    			 videoCams.appendChild(table);
    			 var tr1,tr2,tr3;
    			 for(var i=0;i<videoStore.length;i++){
    				 if((i%3)==0){
    					 tr1 = document.createElement('tr');
    					 table.appendChild(tr1);
    					 tr2 = document.createElement('tr');
    					 table.appendChild(tr2);
    					 tr3 = document.createElement('tr');
    					 table.appendChild(tr3);
    				 }
    				 var td = document.createElement('td');
    				 td.style='border:0px solid #000; width:420px; height:50px; text-align:center;';
    				 tr1.appendChild(td);
    				 var cam_title = document.createElement('div');
    				 cam_title.id = 'title_'+videoStore[i].device_code;
    				 cam_title.style = 'width:400px; heigh:30px;text-align:center;font-size:24px;font-weight:bold;margin:5px 10px;';
    				 cam_title.innerHTML=videoStore[i].dev_name;
    				 td.appendChild(cam_title);
//    				 var cam_video = document.createElement('div');
//    				 cam_video.style='width:320px; height:240px; background-color:#000;margin-left:40px;';
//    				 cam_video.id='video_'+videoStore[i].device_code;
//    				 td.appendChild(cam_video);
//    				 if(videoStore[i].comm_type==1)
//    				 {
//    					 var video = document.createElement('object');
//						 video.id = 'my2_'+videoStore[i].device_code;
//    					 video.setAttribute('type','application/x-vlc-plugin');
//    					 video.width='320';
//    					 video.height='240';
//    					 video.setAttribute('pluginspage','http://www.videolan.org');
//    					 video.setAttribute('codebase','http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab');
//    					 cam_video.appendChild(video);
//    					 var param1 = document.createElement('param');
//    					 param1.setAttribute('name','controls');
//    					 param1.setAttribute('value','false');
//    					 video.appendChild(param1);
//    					 var param2 = document.createElement('param');
//    					 param2.setAttribute('name','text');
//    					 param2.setAttribute('value','正在加载视频中...');
//    					 video.appendChild(param2);
//    					 var param3 = document.createElement('param');
//    					 param3.setAttribute('name','branding');
//    					 param3.setAttribute('value','false');
//    					 video.appendChild(param3);
//    					 var embed = document.createElement('embed');
//    					 embed.setAttribute('type','application/x-google-vlc-plugin');
//    					 embed.setAttribute('width','320');
//    					 embed.setAttribute('height','240');
//    					 video.appendChild(embed);
//    				 }else
    				 {
    					 var td_v = document.createElement('td');
    					 td_v.style='border:0px solid #000; width:400px; height:240px; text-align:center;';
        				 tr2.appendChild(td_v);
	    				 var video = document.createElement('video');
	    				 video.id = 'my-'+videoStore[i].device_code;
	    				 video.setAttribute('style','margin:0px 10px;')
	    				 video.setAttribute('class','video-js');
	    				 video.setAttribute('preload','auto');
	    				 video.autoplay='autoplay';
	    				 video.controls='controls';
	    				 video.onclick=function(){
	    					 alert('hello');
	    				 }
//	    				 video.playsInline='';
//	    				 video.webkitPlaysinline='';
	    				 video.width='400';
	    				 video.height='300';
	    				 video.setAttribute('data-setup','{}');
	    				 td_v.appendChild(video);
	    				 var source = document.createElement('source');
	    				 source.setAttribute('src','rtmp://47.103.74.123:1935/live/'+videoStore[i].device_code);
	    				 source.setAttribute('type','rtmp/flv');
	    				 video.appendChild(source);
	    				 var embed = document.createElement('embed');
	    				 embed.id = 'openflash_'+videoStore[i].device_code;
	    				 embed.width='300';
	    				 embed.height='70';
	    				 embed.setAttribute('class','openFlash');
	    				 embed.style='position:absolute;top:130px;left:225px;z-Index:9999;dispaly:none;';
	    				 embed.type='application/x-shockwave-flash';
	    				 td_v.appendChild(embed);
    				 }
    				 var td_b = document.createElement('td');
					 td_b.style='border:0px solid #000; width:400px; height:50px; text-align:center;';
    				 tr3.appendChild(td_b);
    				 var subTable = document.createElement('table');
    				 subTable.style="border:0px solid #000;width:320;height:30px;";
    				 subTable.width='100%';
    				 td_b.appendChild(subTable);
    				 var subTr = document.createElement('tr');
    				 subTable.appendChild(subTr);
    				 var subTd = document.createElement('td');
    				 subTd.style='border:0px solid #000;height:50px; text-align:center;padding-top:10px;';
    				 subTd.width='50%';
    				 subTr.appendChild(subTd);
    				 var close_button = document.createElement('button');
    				 close_button.id='close_'+videoStore[i].device_code;
    				 close_button.setAttribute('onclick', 'close_dev("'+videoStore[i].device_code+'");');
    				 close_button.innerHTML='关闭视频';
    				 subTd.appendChild(close_button);
    				 subTd = document.createElement('td');
    				 subTd.style='border:0px solid #000;height:50px; text-align:center;padding-top:10px;';
    				 subTd.width='50%';
    				 subTr.appendChild(subTd);
    				 var open_button = document.createElement('button');
    				 open_button.id='open_'+videoStore[i].device_code;
    				 open_button.setAttribute('onclick','open_dev("'+videoStore[i].device_code+'");');
    				 open_button.innerHTML='打开视频';
    				 subTd.appendChild(open_button);
    			 }
    			var hasFlash = 0;         //是否安装了flash
		        var flashVersion = 0; //flash版本
		        var isIE = /*@cc_on!@*/0;      //是否IE浏览器

		        if (isIE) {
		            var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
		            if (swf) {
		                hasFlash = 1;
		                VSwf = swf.GetVariable("$version");
		                flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
		            }
		        } else {
		            if (navigator.plugins && navigator.plugins.length > 0) {
		                var swf = navigator.plugins["Shockwave Flash"];
		                if (swf) {
		                    hasFlash = 1;
		                    var words = swf.description.split(" ");
		                    for (var i = 0; i < words.length; ++i) {
		                        if (isNaN(parseInt(words[i]))) continue;
		                        flashVersion = parseInt(words[i]);
		                    }
		                }
		            }
		        }
		    	for(var i=0;i<videoStore.length;i++){
		    		if((document.getElementById('openflash_'+videoStore[i].device_code)!=undefined)
		    				&&(document.getElementById('my-'+videoStore[i].device_code)!=undefined)){
		    		    if(hasFlash){
	    		    		document.getElementById('openflash_'+videoStore[i].device_code).style.display='none';
	    		    		videojs('my-'+videoStore[i].device_code).play();
		    		    }
		    		}
		    		else if(document.getElementById('my2_'+videoStore[i].device_code)!=undefined){
		    			var vlc = document.getElementById('my2_'+videoStore[i].device_code);
		    			var options = new Array(":network-caching=300");
		    			var id = vlc.playlist.add(videoStore[i].rtsp_path,"vedio",options);
		    			vlc.playlist.playItem(id);
		    		}
		    	}
		    	$(".openFlashTips").css('display','none');
    		 }
			chk_cideo();
    	 }
	});
}

var body_resize = function(){
	maxHeight =  document.documentElement.clientHeight;
	maxWidth = document.documentElement.clientWidth;
	Ext.getCmp('videoCamPanel').setHeight(maxHeight);
	Ext.getCmp('videoCamPanel').setWidth(maxWidth);
}

Ext.onReady(function(){  
	baseIp = document.getElementById('baseIp').value;
	baseUrl = document.getElementById('basePath').value;
	theme = document.getElementById('theme').value;
	company_code = document.getElementById('company_code').value;
	new Ext.create('Ext.panel.Panel',{
		width:'100%',
		height:maxHeight,
		id: 'videoCamPanel',
		tbar:new Ext.create('Ext.toolbar.Toolbar',{
	    	items:[{
		    	html:'<span id="videoCamPanel_title_string" style="color:#ffffff;background-color:rgba(0,0,0,0)">视频监控</span>'
	    	},'->',{
		    	xtype: 'button', 
		    	iconCls:'back_btn',  
				text: '<span style="color:#ffffff;background-color:rgba(0,0,0,0)">返回</span>',
				listeners: {
					click: function(){
						location.href=baseUrl+'view/frontpage/map.jsp?&theme='+theme+'&company_code='+company_code;
					}
				}
		    },'-']
		}),
		html:'<div id="Video_Cams" style="text-align:center;"></div>',
	    renderTo: Ext.getBody()
	});
	getVideoList();
	$(window).resize(function(){
    	body_resize();
    });
	body_resize();
});