<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Camera</title> </head> <body> <video id="camera" width="640" height="480" autoplay></video> <button id="captureBtn">撮影</button> <script> // カメラへのアクセス navigator.mediaDevices.getUserMedia({ video: true }) .then((stream) => { const camera = document.getElementById('camera'); camera.srcObject = stream; }) .catch((error) => { console.error('Error accessing camera:', error); }); // 写真の撮影と保存 const captureBtn = document.getElementById('captureBtn'); captureBtn.addEventListener('click', () => { const camera = document.getElementById('camera'); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = camera.videoWidth; canvas.height = camera.videoHeight; context.drawImage(camera, 0, 0, canvas.width, canvas.height); // キャンバスのデータを画像として保存 const photoDataUrl = canvas.toDataURL('image/png'); const a = document.createElement('a'); a.href = photoDataUrl; a.download = 'captured_photo.png'; a.click(); }); </script></body> </html> これで写真撮影をしているのですが、メールでこのファイルをスマホに送って撮影しても写真が保存されません。なんで保存できないのか教えてもらいたいです。またもっとソースコードを短くできるのであればそれも教えていただきたいです。
0 コメント