詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能
更新時(shí)間:2017年10月25日 14:27:11 作者:_iorilan
這篇文章主要介紹了詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能的相關(guān)資料,希望通過(guò)本文能幫助到大家,實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下
詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能
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>
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
5種方法告訴你如何使JavaScript 代碼庫(kù)更干凈
J avaScript無(wú)處不在,從PC端到移動(dòng)設(shè)備端,甚至是后端,都在使用JavaSc ript。在本文中,將嘗試一些可用來(lái)使代碼看起來(lái)更簡(jiǎn)潔的實(shí)踐方案,希望能幫助到大家2021-09-09TypeScript新語(yǔ)法之infer?extends示例詳解
這篇文章主要為大家介紹了TypeScript新語(yǔ)法之infer?extends示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序之獲取當(dāng)前位置經(jīng)緯度以及地圖顯示詳解
最近剛開(kāi)始接觸微信小程序,在弄懂其結(jié)構(gòu)以及相關(guān)接口之后,準(zhǔn)備著手實(shí)現(xiàn)一個(gè)小程序,功能包括--獲取用戶當(dāng)前位置的經(jīng)緯度,在地圖上查看位置,通過(guò)地圖獲取不同位置的經(jīng)緯度。2017-05-05Web項(xiàng)目如何配置Eslint過(guò)程詳解
這篇文章主要為大家介紹了Web項(xiàng)目如何配置Eslint過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09微信小程序 wx.request(接口調(diào)用方式)詳解及實(shí)例
這篇文章主要介紹了微信小程序 wx.request(接口調(diào)用方式)詳解及實(shí)例的相關(guān)資料,wx.request請(qǐng)求方式比較簡(jiǎn)單,但是在使用的時(shí)候出現(xiàn)錯(cuò),這里就記錄下,需要的朋友可以參考下2016-11-11