代码:
<!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>