当前位置:Gxlcms > html代码 > H5的video标签操作摄像头

H5的video标签操作摄像头

时间:2021-07-01 10:21:17 帮助过:174人阅读

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

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

1. html

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

2. javascript

  1. <script>
  2. //// Elements for taking the snapshot
  3. var canvasPreview = document.getElementById('canvasPreview');
  4. var canvasUpload = document.getElementById('canvasUpload');
  5. var contextPreview = canvasPreview.getContext('2d');
  6. var contextUpload = canvasUpload.getContext('2d');
  7. //#################### Video Source #######################3
  8. var videoElement = document.querySelector('video');
  9. var videoSelect = document.querySelector('select#videoSource');
  10. navigator.mediaDevices.enumerateDevices()
  11. .then(gotDevices).then(getStream).catch(handleError);
  12. videoSelect.onchange = getStream;
  13. function gotDevices(deviceInfos) {
  14. for (var i = 0; i < deviceInfos.length; ++i) {
  15. var deviceInfo = deviceInfos[i];
  16. var option = document.createElement('option');
  17. option.value = deviceInfo.deviceId;
  18. if (deviceInfo.kind === 'videoinput') {
  19. option.text = deviceInfo.label ||
  20. 'camera ' +
  21. (videoSelect.length + 1);
  22. videoSelect.appendChild(option);
  23. } else {
  24. console.log('Found ome other kind of source/device: ', deviceInfo);
  25. }
  26. }
  27. }
  28. var _streamCopy = null;
  29. function getStream() {
  30. if (_streamCopy != null) {
  31. try {
  32. _streamCopy.stop(); // if this method doesn't exist, the catch will be executed.
  33. } catch (e) {
  34. _streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream
  35. }
  36. }
  37. var constraints = {
  38. audio:false,
  39. video: {
  40. optional: [
  41. {
  42. sourceId: videoSelect.value
  43. }
  44. ]
  45. }
  46. };
  47. navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
  48. }
  49. function gotStream(stream) {
  50. _streamCopy = stream; // make stream available to console
  51. videoElement.srcObject = stream;
  52. }
  53. function handleError(error) {
  54. alert(error.name + ": " + error.message);
  55. }
  56. //######################## End Video Source #################
  57. // Get access to the camera!
  58. if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  59. navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
  60. videoElement.src = window.URL.createObjectURL(stream);
  61. videoElement.play();
  62. });
  63. } else {
  64. document.getElementById("pnlVideo1").style.display = "none";
  65. }
  66. //// Trigger photo take
  67. document.getElementById("snap").addEventListener("click",
  68. function() {
  69. contextPreview.drawImage(videoElement, 0, 0, 300, 224);
  70. contextUpload.drawImage(videoElement, 0, 0, 300, 224);
  71. document.getElementById("video").style.display = "none";
  72. document.getElementById("snap").style.display = "none";
  73. document.getElementById("canvasPreview").style.display = "block";
  74. var image = document.getElementById("canvasUpload").toDataURL("image/jpeg");
  75. image = image.replace('data:image/jpeg;base64,', '');
  76. $("#imgValue").val(image);
  77. alert("image value :" + image);
  78. });
  79. //// Trigger photo take
  80. document.getElementById("btnOpen1").addEventListener("click",
  81. function() {
  82. document.getElementById("vdoOne").style.display = "block";
  83. document.getElementById("video").style.display = "block";
  84. document.getElementById("snap").style.display = "block";
  85. document.getElementById("canvasPreview").style.display = "none";
  86. });
  87. </script>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

django控件及传参使用详解

jquery实现全选反选单选

jQuery插件FusionCharts绘制饼状图

以上就是H5的video标签操作摄像头的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行