javascript: webcam

潘佐
2023-12-01
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="geovindu,Geovin Du,涂聚文">
    <meta name="author" content="geovindu,Geovin Du,涂聚文">
<title>webcam</title>
  <script src="js/modernizr.custom.82437.js"></script>

  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5-els.js"></script>
  <![endif]-->		
	
</head>

<body>
	<div id="screenshot" style="text-align:center;">

  <video class="videostream" autoplay></video>
  <img id="screenshot-img">
  <p><button class="capture-button">Capture video</button>
  <p><button id="screenshot-button" disabled>Take screenshot</button></p>

<canvas style="display:none;"></canvas>
	</div>
 	<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="bootstrap/4.4.1/js/bootstrap.bundle.min.js" ></script>

<script type="text/javascript">
	
function handleError(error) {
  console.error('navigator.getUserMedia error: ', error);
}
const constraints = {video: true};	
	
const captureVideoButton = document.querySelector(
  "#screenshot .capture-button"
);
const screenshotButton = document.querySelector("#screenshot-button");
const img = document.querySelector("#screenshot img");
const video = document.querySelector("#screenshot video");

const canvas = document.createElement("canvas");

captureVideoButton.onclick = function () {
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(handleSuccess)
    .catch(handleError);
};

screenshotButton.onclick = video.onclick = function () {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext("2d").drawImage(video, 0, 0);
  // Other browsers will fall back to image/png
  img.src = canvas.toDataURL("image/webp");
};

function handleSuccess(stream) {
  screenshotButton.disabled = false;
  video.srcObject = stream;
}
</script>
</body>
</html>
from: https://www.html5rocks.com/en/tutorials/getusermedia/intro/
javascript: webcam

相关阅读

相关文章

相关问答
