HTML5如何使用video标签实现选择摄像头功能

这篇文章主要介绍了HTML5如何使用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>        <div id="vdoOne" >      <video id="video"  width="300" autoplay></video>      <canvas id="canvasPreview"  width="300" height="224"></canvas>      <canvas id="canvasUpload"  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>

感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5如何使用video标签实现选择摄像头功能”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!