zhichen-edu
/
zc_saas_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
							<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var i=1,gentry=null,w=null;
var hl=null,le=null,de=null,ie=null;
var unv=true;
var bUpdated=false; //用于兼容可能提前注入导致DOM未解析完更新的问题
// H5 plus事件处理
function plusReady(){
	// 获取摄像头目录对象
	plus.io.resolveLocalFileSystemURL('_doc/', function(entry){
		entry.getDirectory('camera', {create:true}, function(dir){
			gentry = dir;
			updateHistory();
		}, function(e){
			outSet('Get directory "camera" failed: '+e.message);
		} );
	}, function(e){
		outSet('Resolve "_doc/" failed: '+e.message);
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 监听DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function(){
	// 获取DOM元素对象
	hl=document.getElementById('history');
	le=document.getElementById('empty');
	de=document.getElementById('display');
	if(ie=document.getElementById('index')){
		ie.onchange=indexChanged;
	}
	// 判断是否支持video标签
	unv=!document.createElement('video').canPlayType;
	updateHistory();
},false );
function changeIndex(){
	outSet('选择摄像头：');
	ie.focus();
}
function indexChanged(){
	de.innerText = ie.options[ie.selectedIndex].innerText;
	i = parseInt(ie.value);
	outLine(de.innerText);
}
// 拍照
function getImage(){
	outSet('开始拍照：');
	var cmr = plus.camera.getCamera();
	cmr.captureImage(function(p){
		outLine('成功：'+p);
		plus.io.resolveLocalFileSystemURL(p, function(entry){
			createItem(entry);
		}, function(e){
			outLine('读取拍照文件错误：'+e.message);
		});
	}, function(e){
		outLine('失败：'+e.message);
	}, {filename:'_doc/camera/',index:1});
}
// 录像
function getVideo(){
	outSet('开始录像：');
	var cmr = plus.camera.getCamera();
	cmr.startVideoCapture(function(p){
		outLine('成功：'+p);
		plus.io.resolveLocalFileSystemURL(p, function(entry){
			createItem(entry);
		}, function(e){
			outLine('读取录像文件错误：'+e.message);
		} );
	}, function(e){
		outLine('失败：'+e.message);
	}, {filename:'_doc/camera/',index:i});
}
// 显示文件
function displayFile(li){
	if(w){
		outLine('重复点击！');
		return;
	}
	if(!li || !li.entry){
		ouSet('无效的媒体文件');
		return;
	}
	var name = li.entry.name;
	var suffix = name.substr(name.lastIndexOf('.'));
	var url = '';
	if(suffix=='.mov' || suffix=='.3gp' || suffix=='.mp4' || suffix=='.avi'){
		//if(unv){plus.runtime.openFile('_doc/camera/'+name);return;}
		url = '/plus/camera_video.html';
	} else {
		url = '/plus/camera_image.html';
	}
	w=plus.webview.create(url,url,{hardwareAccelerated:true,scrollIndicator:'none',scalable:true,bounce:'all'});
	w.addEventListener('loaded', function(){
		w.evalJS('loadMedia("'+li.entry.toLocalURL()+'")');
		//w.evalJS('loadMedia("'+'http://localhost:13131/_doc/camera/'+name+'")');
	}, false );
	w.addEventListener('close', function(){
		w = null;
	}, false);
	w.show('pop-in');
}

// 添加播放项
function createItem(entry){
	var li = document.createElement('li');
	li.className = 'ditem';
	li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
	li.setAttribute('onclick', 'displayFile(this)' );
	hl.insertBefore( li, le.nextSibling );
	li.querySelector('.aname').innerText = entry.name;
	li.querySelector('.ainf').innerText = '...';
	li.entry = entry;
	updateInformation(li);
	// 设置空项不可见
	le.style.display = 'none';
}
// 获取录音文件信息
function updateInformation(li){
	if(!li || !li.entry){
		return;
	}
	var entry = li.entry;
	entry.getMetadata(function(metadata){
		li.querySelector('.ainf').innerText = dateToStr(metadata.modificationTime);
	}, function(e){
		outLine('获取文件"'+entry.name+'"信息失败：'+e.message);
	} );
}
// 获取录音历史列表
function updateHistory(){
	if(bUpdated||!gentry||!document.body){//兼容可能提前注入导致DOM未解析完更新的问题
		return;
	}
  	var reader = gentry.createReader();
  	reader.readEntries(function(entries){
  		for(var i in entries){
  			if(entries[i].isFile){
  				createItem(entries[i]);
  			}
  		}
  	}, function(e){
  		outLine('读取录音列表失败：'+e.message);
  	});
  	bUpdated = true;
}
// 清除历史记录
function cleanHistory(){
	hl.innerHTML = '<li id="empty" class="ditem-empty">无历史记录</li>';
	le = document.getElementById('empty');
	// 删除音频文件
	outSet('清空拍照录像历史记录：');
	gentry.removeRecursively(function(){
		// Success
		outLine('成功！');
	}, function(e){
		outLine('失败：'+e.message);
	});
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
.aname {
	font-size: 16px;
}
.ainf {
	font-size: 12px;
}
.iplay {
	display: block;
	background: no-repeat right center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAD9UlEQVR4nO2b3XETMRRGDwzvoYOkg5hRAVkqiKmAdIA7wHSQVECoALsC1gXciV0BTge4gvCwgnHk9d/+WF8m97ztxrlXs8fS1Urym6enJxwd3uZugPMcFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAx3uVuwDGY2XtgCBTAALjc8tEFMAdKYBJC+HOK9nXBm5dwUM7MCmAEXDcMMQVuQwhlV23qC2khZjYAboGrjkLOgFEIYd5RvM6RrSFmdgs80J0MYqyHGFsSuR4S60TJ9vrwCEziZ+YhhGXy/xdU9aWgqjfnW+IsgEKtvkgJiUPUPfUyZsD42DoQ68+Y+p62AG6UhjAZITt6xopq3L9vGf+Gqh6dJX+S6ilKNaRkU8YCGLSVARBjDGLMdS5jbgkkhMQiWyejSGtEG2KsghopKoU++5AV68ZDcrvXYWTH8Pghdz1R6CHpN3MFDPsc02PsYcy1qy0nJ6uQOANKZz+jfcOUmd3H6W1jYo5RcvsqtikbuXtI+kBmBxbwz8DczMZtksdcsz1tOinZhMRxPF2bGh8R4gz4amZLMxu2aEqa8zq2LQs5e0j6EB8bLv6dAz/NrGwyjMWcj3vadjJyCimS60nLeFfAbzO7bfANT3MXLdvSmJxCBsl12VHcL8AyvpkfSpo7bdvJyCkkfQfocv5/Bnw3s/mBs6Y097aFzd7JPcv6T5dv5GtcAr/2TZN7yt0IGSE908k0+RS8FiEvhhd1yKEFUw5YAVBApoe0XQrZwgL4GEIY7pLRU+5G5OwhC57PZgbAsqPYK6rdxUMXC9Npbro8fzJy9pB0qll0FPcOuDhCRl3ubEvwOYWUyXXb5YoZ1X7GqMHSfZq7bNmWxuQUki5XnDdc+n4EPoUQiiabSzFnejKl7TJOY7IJid/iaXJ7fESIFfCNas+9zQNMc05zHnjIPctKx/mrA9egflCJGLd5eDFXukGWdddQYU+95PlDWVE97GXPeS+oivf6saBZCKHoM+8+cvcQ2NyhOwMmfW4SxdgTNs9oZd0tBAEhsRDfJbcvgbIPKTtOnNzlPnECAkPWP8xsTv3ZrJ1v2UfmuKDqGRt5QgjZ9kDWyd5D1iioP1U4P3KzqZYYY5v0om38rpDpIeCHrUFMCPjPEeSE/COetf3SU/i7EEL2GVUdSjXkGfGBfWDzIFsb/q93dRizU2R7yDr+o09R/GfRzsmRrSGvFRcihgsRw4WI4ULEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMf4CVuqCm+17t3sAAAAASUVORK5CYII=);
	background-size: 50px 44px;
	-ms-touch-action: auto;
}
		</style>
	</head>
	<body>
		<br/>
		<div class="button" onclick="getImage()">拍照</div>
		<div class="button" onclick="getVideo()">录像</div>
		<br/>
		<!-- History list -->
		<ul id="history" class="dlist" style="text-align:left;">
			<li id="empty" class="ditem-empty">无历史记录</li>
		</ul>
		<br/>
		<div class="button button-waring" onclick="cleanHistory()">清空历史记录</div>
		<br/>
		<div id="outpos"/>
		<div id="output">
Camera管理摄像头设备，可用于拍摄照片、录制视频文件。
		</div>
	</body>
</html>