这次给大家带来H5的video标签操作摄像头，H5的video标签操作摄像头注意事项有哪些，下面就是实战案例，一起来看一下。
详解HTML5 使用video标签实现选择摄像头功能
1. html
// jquery reference // //
2. javascript
//// 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"; });
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
django控件及传参使用详解
jquery实现全选反选单选
jQuery插件FusionCharts绘制饼状图
以上就是H5的video标签操作摄像头的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546031.html
微信扫一扫 
支付宝扫一扫 
