javascript - 如何从 Screen Capture Web API 存储/下载录制文件?
问题描述
我正在使用Screen Capture API并尝试将最终捕获保存到视频文件(WebM、MP4 等)。我有这两个 JavaScript 函数:
async function startCapture() {
try {
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
} catch(err) {
console.error("Error: " + err);
}
}
function stopCapture() {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => track.stop());
videoElem.srcObject = null;
}
开始捕获时,视频可以正常显示,但我不确定如何实际存储其内容。videoElem
是 a Promise
,它解析为 a MediaStream
。tracks
是一个MediaStreamTrack
对象数组。这是我第一次做任何类型的 Web 开发,所以我有点迷茫!
解决方案
async function startRecording() {
stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true
});
recorder = new MediaRecorder(stream);
const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = e => {
const blob = new Blob(chunks, { type: chunks[0].type });
console.log(blob);
stream.getVideoTracks()[0].stop();
filename="yourCustomFileName"
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
};
recorder.start();
}
startRecording(); //Start of the recording
-----------
recorder.stop() // End your recording by emitting this event
这会将您的录音保存为 webm 文件
推荐阅读
- r - 用一个字符分割一个 sf 对象而不删除它在 R 中的几何图形
- javascript - 无法使用 React js 从本地文件夹显示 svg
- r - 如何使用 ggparliament 获得显示每个政党所需颜色的图形?
- powershell - Powershell Construct Date ForEach 多次返回第一个文件的日期
- php - Laravel 应用程序不保存数据且不显示任何错误
- python-3.x - self 指的是超类而不是子类
- r - 如何删除出现不同 NA 的观察行
- python - 遍历文件夹中的所有 txt 文件时出现 Unicode 解码错误
- javascript - Vue watch 意外调用了两次
- android - 如何使用 getResourceAsStream 修复未找到的资源