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

Posted 2023-05-07

【中文标题】如何使用 HTML5 将使用网络摄像头捕获的 jpg 图像/视频保存在本地硬盘驱动器中

【英文标题】：How to save a jpg image/video captured with webcam in the local hard drive with HTML5

【发布时间】：2018-04-03 14:23:33

【问题描述】：

问题看起来很简单，虽然我找不到合适的解决方案 因为我缺乏 html 和 javascript 的知识。

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

经过一些尝试，我可以使用 getusermedia() api 来激活网络摄像头并在浏览器窗口中呈现视频，但无法保存。这就是我的代码的样子。

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


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

那么对于如何将静态图像或视频保存在以相同方式捕获的硬盘驱动器中的任何想法？

【问题讨论】：

保存是指下载？只是试图与网络术语保持一致

见Send imageObject from webcam by ajax to Flask Server

@SergioAlen 下载意味着保存在硬盘中，就像我在使用 python 等进行一些处理后处理图像一样？好的。 （我的主要领域是机器学习，对网络真的不熟悉。只是想把这个东西作为项目的一部分拼接在一起。所以请原谅术语的滥用。）

您可以将视频绘制到<canvas> 元素并使用.toDataURL() 然后将生成的data URL 设置为.href 的值，将download 属性设置为<a> 元素，追加<a> 元素到document.body，单击该元素。

是的，您可以将图像添加到画布然后执行上述建议，看看这个人在这里做了什么：jsfiddle.net/wboykinm/fL0q2uce

【参考方案1】：

首先，navigator.getUserMedia API 已被弃用，您现在应该使用 navigator.mediaDevices.getUserMedia 方法。

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

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>

As a fiddle 因为 Stacksn-ps 可能会阻止 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>

作为a fiddle

---

注意事项：

MediaRecorder API 仍然是一个相当新的 API，并且在 [少量浏览器实现中仍然存在一些错误。

【讨论】：

我见过很多从网络摄像头录制视频/照片的实现，但这是迄今为止最简单和最容易理解的。做得很好！

【参考方案2】：

你所做的是一个好的开始。你现在可以'paint' the webcam picture into a canvas 然后create an image from the canvas information。然后，您可以使用一些技巧来阻止浏览器显示图像并将其发送到download it instead。