H5的video标签操作摄像头

这次给大家带来H5的video标签操作摄像头，H5的video标签操作摄像头注意事项有哪些，下面就是实战案例，一起来看一下。

详解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>     <p 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>     </p>

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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

django控件及传参使用详解

jquery实现全选反选单选

jQuery插件FusionCharts绘制饼状图

以上就是H5的video标签操作摄像头的详细内容，更多内容请关注技术你好其它相关文章！