问题看似简单，但我找不到合适的解决方案
因为我缺乏 HTML 和 Javascript 知识。
任务只是设计一个网页，其中的按钮将激活网络摄像头并将静态图像或视频（最好）存储在本地硬盘驱动器中。暂时不需要上传/下载。
经过一番尝试，我可以使用 getusermedia() api 激活网络摄像头并在浏览器窗口中渲染视频，但无法保存它。这就是我的代码的样子。
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
那么，关于如何将以相同方式捕获的静态图像或视频保存在硬盘驱动器中，有什么想法吗？
首先，navigator.getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMediaAPI 已被弃用，您现在应该使用navigator.mediaDevices.getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia method.
然后要拍摄静态图像，您确实可以使用画布，它可以draw https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage视频元素。
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>
作为小提琴 https://jsfiddle.net/pnrew67t/因为 Stacksnippets 可能会阻止 gUM 请求...
要另存为视频，您可以使用 [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorderà https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder%C3%A0，这将允许您将 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>
And as a fiddle https://jsfiddle.net/pnrew67t/1
Notes:
MediaRecorder API 仍然是一个相当新的 API，[一小部分浏览器实现中仍然存在一些错误。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
