MDN文檔 - getUserMedia介紹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>camera</title>
</head>
<body>
<div id="contentHolder">
<video id="video" autoplay></video>
<img id="imgXX"/>
</div>
<button id="btn_snap" onclick="takePhoto()">拍照</button>
</body>
<script>
let width = height = video.width = video.height = 400;
const constraints = {
video: {
width,
height
}
}
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
video.srcObject = stream;
video.onloadedmetadata = () => video.play();
})
// 拍照，這裡借助canvas把video的一幀轉換成圖檔
function takePhoto() {
let canvas = document.createElement('canvas');
canvas.width = canvas.height = 400;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, width, height);
document.getElementById('imgXX').src = canvas.toDataURL('image/png');
}
</script>
</html> ![JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)