<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Camera Capture</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } #preview { margin-top: 20px; max-width: 80%; } button { margin-top: 20px; } </style> </head> <body> <h1>Camera Capture</h1> <button onclick="capturePhoto()">拍照</button> <img id="preview" ref="previewImg" alt="Captured Photo"> <a id="downloadLink" style="display: none;">下载图片</a> <script> var selectedVideoDevice = null; var mediaBlob = null; var mediaBlobUrl = null; var downloadButtonText = '下载图片'; function capturePhoto() { var constraints = { video: { deviceId: selectedVideoDevice ? { exact: selectedVideoDevice } : undefined } }; navigator.mediaDevices.getUserMedia(constraints) .then(stream => { var videoTracks = stream.getVideoTracks(); var videoTrack = videoTracks[0]; var imageCapture = new ImageCapture(videoTrack); return imageCapture.takePhoto(); }) .then(blob => { mediaBlob = blob; mediaBlobUrl = URL.createObjectURL(blob); downloadButtonText = '下载图片'; document.getElementById('preview').src = mediaBlobUrl; var downloadLink = document.getElementById('downloadLink'); downloadLink.href = mediaBlobUrl; downloadLink.download = 'captured_photo.png'; downloadLink.textContent = downloadButtonText; downloadLink.style.display = 'block'; }) .catch(error => { console.error('拍照失败:', error); }); } </script> </body> </html>
网友回复
腾讯混元模型广场里都是混元模型的垂直小模型,如何api调用?
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?