<!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/