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();
})
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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
2021-10-30 Python | 百度POI获取