调用本地摄像头

最新推荐文章于 2024-08-29 18:13:19 发布

哎呦喂O_o嗨

最新推荐文章于 2024-08-29 18:13:19 发布

阅读量397

点赞数

分类专栏：前端文章标签：本地摄像头

本文链接：https://blog.csdn.net/weixin_42402326/article/details/103250188

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.调用本地摄像头

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>直播</title>
</head>
<body>
<!-- 调用本地摄像头 -->  
	<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">打开摄像头</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">快照</button>
		
	</div>

	<script>
   	 拍摄快照的元素
      var canvasPreview = document.getElementById('canvasPreview');
      var canvasUpload = document.getElementById('canvasUpload');
      var contextPreview = canvasPreview.getContext('2d');
      var contextUpload = canvasUpload.getContext('2d');




      //#################### 视频开始 #######################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(); // 如果此方法不存在，则将执行catch。
              } catch (e) {
                  _streamCopy.getVideoTracks()[0].stop(); // 然后停止流的第一个视频轨道
              }
          }
          
          var constraints = {
              audio:false,
              video: {
                  optional: [
                      {
                          sourceId: videoSelect.value
                      }
                  ]
              }
          };
          
          navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
      }


      function gotStream(stream) {
          _streamCopy = stream; // 使流可用于控制台
          videoElement.srcObject = stream;
      }


      function handleError(error) {
          alert(error.name + ": " + error.message);
      }


      //######################## 视频结束 #################




      // 进入摄像机！
      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";
      }




       触发拍照
      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);
          });


       触发拍照




      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>
</body>
</html>