1、使用h5中的input標籤 

<!--相機-->
<input id="fileBtn" type="file" onchange="upload('#fileBtn');" accept="image/*" capture='camera' style="opacity: 0;width:0;/>拍照

<!--攝像頭錄影-->
<input id="video" type="file"  accept="video/*" capture='camera' style="opacity: 0;width:0;"/>錄影

<!--呼叫相簿-->
<input id="ph" type="file" onchange="upload('#ph');" accept="image/*" style="opacity: 0;width:0;"/>從相簿選擇


<!--圖片預覽，用於存放相機拍照或者相簿獲取的圖片-->
<div class="photo">
    <img src="" id="img1"/>
    <img src="" id="img2"/>
    <img src="" id="img3"/>			
</div>


<!--存放視訊base64編碼-->
<input  type="hidden"  id="vid" value=""><!--存放視訊base64編碼，用於傳給後臺上傳儲存-->
 

 (1)、拍照 、獲取相簿圖片並預覽js

function upload(c){
	var $c = document.querySelector(c),
		file = $c.files[0],	 
		reader = new FileReader();
		//reader.readAsDataURL(file);
		// 縮放圖片需要的canvas
		var canvas = document.createElement('canvas');
		var context = canvas.getContext('2d');
		img = new Image();
		img.onload = function() {
			// 圖片原始尺寸
			var originWidth = this.width;
			var originHeight = this.height;
			// 最大尺寸限制，可通過國設定寬高來實現圖片壓縮程度
			var maxWidth = 60,
				maxHeight = 60;
			// 目標尺寸
			var targetWidth = originWidth,
				targetHeight = originHeight;
			if(originWidth > maxWidth || originHeight > maxHeight) {
				if(originWidth / originHeight > maxWidth / maxHeight) {
					// 更寬，按照寬度限定尺寸
					targetWidth = maxWidth;
					targetHeight = Math.round(maxWidth * (originHeight / originWidth));
				} else {
					targetHeight = maxHeight;
					targetWidth = Math.round(maxHeight * (originWidth / originHeight));
				}
			}
			// canvas對圖片進行縮放
			canvas.width = targetWidth;
			canvas.height = targetHeight;
			// 清除畫布
			context.clearRect(0, 0, targetWidth, targetHeight);
			// 圖片壓縮
			context.drawImage(img, 0, 0, targetWidth, targetHeight);
			/*第一個引數是建立的img物件；第二個引數是左上角座標，後面兩個是畫布區域寬高*/
			//壓縮後的圖片base64 url
			/*canvas.toDataURL(mimeType, qualityArgument),mimeType 預設值是'image/jpeg';
			 * qualityArgument表示匯出的圖片質量，只要匯出為jpg和webp格式的時候此引數才有效果，預設值是0.92*/
			var newUrl = canvas.toDataURL('image/jpeg', 0.1);//base64 格式,圖片質量
			var img1 = $("#img1").attr("src");
			var img2 = $("#img2").attr("src");
			var img3 = $("#img3").attr("src");
			if(img1 =="" || img1 == undefined){	
				$("#img1").attr("src",newUrl);
			}else if(img2 ==""){
				$("#img2").attr("src",newUrl);
			} else if(img3 ==""){
				$("#img3").attr("src",newUrl);
			}
　　　　　　　
		};
	reader.onload = function(e) {
		img.src = e.target.result;
	};
	reader.readAsDataURL(file);
}
 

 (1)、呼叫攝像頭錄影並預覽js

<!--錄影-->
//視訊上傳
$("#video").change(function(){	
	$("#video0").remove();//每次呼叫的時候先刪除上一次建立的video標籤
	$("#vid").val("");   //清空存放base64編碼的標籤（用於請求後臺上傳儲存）
	console.log(this.files[0].size);
	var fileSize =(this.files[0].size) / (1024*1024);//轉換成M
	fileSize = fileSize.toFixed(1);//保留小數點後一位
	console.log(fileSize);
	if(fileSize > 30){
	 	alert('上傳視訊不能大於30M');	
	 }else{ 		
		var vde = '<video style="height:80px; width:78px;" id="video0"  autoplay="autoplay" x5-playsinline="" playsinline="" webkit-playsinline=""></video>';					
	 	$(".photo").append(vde);//將建立的video標籤插入div(根據自己程式碼選擇要插入的div)			
		var file = this.files[0];  
		var reader = new FileReader();  			
		reader.onload = function(e) {  
		    $("#video0").attr("src", this.result);//將轉換後的編碼存入src完成預覽  				 
		    var img=this.result;
		    var imgNum = img.split(";base64,");
		    var imgBase=imgNum[1];	
		    $("#vid").val(imgBase);//將轉換後的編碼儲存到input供後臺使用（請求後臺上傳儲存） 
	        };
	    reader.readAsDataURL(file);//呼叫自帶方法進行轉換  
	 }							
}) ;