如何使用HTML5将使用网络摄像头拍摄的jpg图像/视频保存在本地硬盘中

Question

这个问题看起来很简单，但由于我缺乏HTML和Javascript的知识，我找不到合适的解决方案。

任务只是设计一个网页，其中按钮将激活网络摄像头并在本地硬盘驱动器中存储静止图像或视频（最好）。 暂时不需要上传/下载。

经过一些尝试，我可以使用getusermedia（）api激活网络摄像头并在浏览器窗口中渲染视频，但无法保存。 这就是我的代码。

if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

那么关于如何在硬盘中保存静止图像或视频的任何想法都以同样的方式捕获？

Answer 1

首先，不推荐使用navigator.getUserMedia API，现在应该使用navigator.mediaDevices.getUserMedia方法。

然后，为了拍摄静止图像，您确实可以使用可以绘制视频元素的画布。

 const vid = document.querySelector('video'); navigator.mediaDevices.getUserMedia({video: true}) // request cam .then(stream => { vid.srcObject = stream; // don't use createObjectURL(MediaStream) return vid.play(); // returns a Promise }) .then(()=>{ // enable the button const btn = document.querySelector('button'); btn.disabled = false; btn.onclick = e => { takeASnap() .then(download); }; }) .catch(e=>console.log('please use the fiddle instead')); function takeASnap(){ const canvas = document.createElement('canvas'); // create a canvas const ctx = canvas.getContext('2d'); // get its context canvas.width = vid.videoWidth; // set its size to the one of the video canvas.height = vid.videoHeight; ctx.drawImage(vid, 0,0); // the video return new Promise((res, rej)=>{ canvas.toBlob(res, 'image/jpeg'); // request a Blob from the canvas }); } function download(blob){ // uses the <a download> to download a Blob let a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'screenshot.jpg'; document.body.appendChild(a); a.click(); } 

 <button>take a snapshot</button> <video id="vid"></video> 

作为一个小提琴 ，Stacksnippets可能会阻止gUM请求......

要保存为视频，您可以使用[MediaRecorder API]（ https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorderà ，它允许您将MediaStream保存为webm：

 const vid = document.querySelector('video'); navigator.mediaDevices.getUserMedia({video: true}) // request cam .then(stream => { vid.srcObject = stream; // don't use createObjectURL(MediaStream) return vid.play(); // returns a Promise }) .then(()=>{ // enable the button const btn = document.querySelector('button'); btn.disabled = false; btn.onclick = startRecording; }) .catch(e=>console.log('please use the fiddle instead')); function startRecording(){ // switch button's behavior const btn = this; btn.textContent = 'stop recording'; btn.onclick = stopRecording; const chunks = []; // here we will save all video data const rec = new MediaRecorder(vid.srcObject); // this event contains our data rec.ondataavailable = e => chunks.push(e.data); // when done, concatenate our chunks in a single Blob rec.onstop = e => download(new Blob(chunks)); rec.start(); function stopRecording(){ rec.stop(); // switch button's behavior btn.textContent = 'start recording'; btn.onclick = startRecording; } } function download(blob){ // uses the <a download> to download a Blob let a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'recorded.webm'; document.body.appendChild(a); a.click(); } 

 <button disabled>start recording</button> <video></video> 

而作为一个小提琴

---

笔记：

MediaRecorder API仍然是一个非常新的API，并且[一小部分浏览器实现中仍然存在一些错误。

Answer 2

你做了什么是一个好的开始。 您现在可以将网络摄像头图片“绘制”到画布中 ，然后根据画布信息创建图像 。 然后，您可以使用一些技巧来阻止浏览器显示图像并让它下载它 。