当前位置: 首页 > news >正文

HTML获取摄像头画面,拍照截图保存

代码:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>拍照功能</title>
<script>
function accessCamera() {
const video = document.getElementById("video");
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then((stream) => {
video.srcObject = stream;
video.play();
})
.catch((error) => {
console.error("无法访问摄像头:", error);
});
}function takePhoto() {
const video = document.getElementById("video");
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataUrl = canvas.toDataURL("image/png");
downloadImage(dataUrl, "photo.png");
}function downloadImage(dataUrl, filename) {
const link = document.createElement("a");
link.href = dataUrl;
link.download = filename;
link.click();
}
</script>
</head>
<body>
<h1>拍照功能</h1>
<button onclick="accessCamera()">启动摄像头</button>
<button onclick="takePhoto()">拍照并保存</button>
<video id="video" width="640" height="480" autoplay></video>
</body>
</html>

  

http://www.wooajung.com/news/35414.html

相关文章:

  • 基于YOLOv8的交通车辆(12种常见车型)实时检测系统识别项目|完整源码数据集+PyQt5界面+完整训练流程+开箱即用!
  • 事倍功半是蠢蛋37 docker部分重启
  • ceph osd reweight-by-utilization 参数解析
  • 52.java语言程序 设计
  • 排查和解决服务器cpu过载的问题
  • C. Not Assigning
  • 基于运维编排实现服务器故障自愈
  • 49.底层逻辑
  • 28-48.雪中捍刀行
  • K8s Pod 多种数据存储方式
  • 14Java基础之抽象类、接口
  • 深入解析:mac电脑安装 nvm 报错如何解决
  • 洛谷 P12078 [OOI 2025] Best Runner 题解
  • 远程git ssh配置1
  • 7月24日总结
  • VIRTUBOX BUG
  • 精通Python PDF裁剪:从入门到专业的三重境界
  • 如何在群晖虚拟机快速部署线上web网站并实现公网访问
  • 向他人分享我的音频
  • - BigBosscyb - 博客园
  • 整体二分
  • 闲来无事
  • - daydreamer_zcxnb - 博客园
  • - Redamancy_Lydic - 博客园
  • - darling331 - 博客园
  • - kintsgi - 博客园
  • TIM外部中断
  • LPC总线设计及其仿真验证
  • Fluent许可证类型
  • 多值依赖