详解HTML5 使用video标签实现选择摄像头功能

详解HTML5使用video标签实现选择摄像头功能1.html//jqueryreference//<scriptsrc="http://ajax.googleapis.co

详解HTML5 使用video标签实现选择摄像头功能

1. html

// jquery reference 
// <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
// 
 
 
 <input type="hidden" name="imgValue" id="imgValue" /> 
 <button id="btnOpen1" class="btn btn-default" type="button" >Open WebCam</button> 
 <select id="videoSource" ></select> 
 
 
 <div id="vdoOne" style="display:none"> 
 <video id="video" style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video> 
 <canvas id="canvasPreview" style="margin-top:15px;" width="300" height="224"></canvas> 
 <canvas id="canvasUpload" style="display:none;" width='300' height='224'></canvas> 
 <button id="snap" class="btn btn-default" type="button">Snap Photo</button> 
 </div> 


 

2. javascript

<script> 
 
 
//// Elements for taking the snapshot 
 var canvasPreview = document.getElementById('canvasPreview'); 
 var canvasUpload = document.getElementById('canvasUpload'); 
 var contextPreview = canvasPreview.getContext('2d'); 
 var contextUpload = canvasUpload.getContext('2d'); 
 
 
 
 
 //#################### Video Source #######################3 
 var videoElement = document.querySelector('video'); 
 var videoSelect = document.querySelector('select#videoSource'); 
 
 
 navigator.mediaDevices.enumerateDevices() 
 .then(gotDevices).then(getStream).catch(handleError); 
 
 
 videoSelect.onchange = getStream; 
 
 
 
 
 function gotDevices(deviceInfos) { 
 for (var i = 0; i < deviceInfos.length; ++i) { 
 var deviceInfo = deviceInfos[i]; 
 var option = document.createElement('option'); 
 option.value = deviceInfo.deviceId; 
 if (deviceInfo.kind === 'videoinput') { 
 option.text = deviceInfo.label || 
 'camera ' + 
 (videoSelect.length + 1); 
 videoSelect.appendChild(option); 
 } else { 
 console.log('Found ome other kind of source/device: ', deviceInfo); 
 } 
 } 
 } 
 
 
 var _streamCopy = null; 
 function getStream() { 
 if (_streamCopy != null) { 
 try { 
 _streamCopy.stop(); // if this method doesn't exist, the catch will be executed. 
 } catch (e) { 
 _streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream 
 } 
 } 
 
 var constraints = { 
 audio:false, 
 video: { 
 optional: [ 
 { 
 sourceId: videoSelect.value 
 } 
 ] 
 } 
 }; 
 
 navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError); 
 } 
 
 
 function gotStream(stream) { 
 _streamCopy = stream; // make stream available to console 
 videoElement.srcObject = stream; 
 } 
 
 
 function handleError(error) { 
 alert(error.name + ": " + error.message); 
 } 
 
 
 //######################## End Video Source ################# 
 
 
 
 
 // Get access to the camera! 
 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
 navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { 
 videoElement.src = window.URL.createObjectURL(stream); 
 videoElement.play(); 
 
 
 }); 
 } else { 
 document.getElementById("pnlVideo1").style.display = "none"; 
 } 
 
 
 
 
 //// Trigger photo take 
 document.getElementById("snap").addEventListener("click", 
 function() { 
 contextPreview.drawImage(videoElement, 0, 0, 300, 224); 
 contextUpload.drawImage(videoElement, 0, 0, 300, 224); 
 document.getElementById("video").style.display = "none"; 
 document.getElementById("snap").style.display = "none"; 
 document.getElementById("canvasPreview").style.display = "block"; 
 
 
 var image = document.getElementById("canvasUpload").toDataURL("image/jpeg"); 
 image = image.replace('data:image/jpeg;base64,', ''); 
 $("#imgValue").val(image); 
 
 alert("image value :" + image); 
 }); 
 
 
 //// Trigger photo take 
 
 
 
 
 document.getElementById("btnOpen1").addEventListener("click", 
 function() { 
 document.getElementById("vdoOne").style.display = "block"; 
 document.getElementById("video").style.display = "block"; 
 document.getElementById("snap").style.display = "block"; 
 document.getElementById("canvasPreview").style.display = "none"; 
 }); 
 
</script> 

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！