在chrome扩展中使用JS获取屏幕捕获视频的元数据

Question

我已经编写了一个能够捕获屏幕的扩展。它可以工作，但我下载的视频文件没有元数据(00:00/00:00持续时间总是，无法滚动视频(。可能，我错过了将此元数据添加到视频中的某些部分。如何？

(也有人给了我这个链接作为答案，但它几乎和我的方法一样(

UDP：这可能是解决方案。然而，尽管我可以用这种方式定义标签的持续时间，但它对下载的blob不起作用。代码已更新。

我的代码(简化(：

class Grabber {
constructor(obj) {
this.incStream = obj;
this.recordedData = [];
this.mediaRecorder = new MediaRecorder(this.incStream);
this.mediaRecorder.ondataavailable = (event) => {
this.recordedData.push(event.data);
}
}
start() {
this.mediaRecorder.start();
}
stop() {
this.incStream.getTracks().forEach(function(track) {
track.stop();
});
this.mediaRecorder.stop();
setTimeout(() => {
this.createFileFormCurrentRecordedData();
}, 1000);
}

async createFileFormCurrentRecordedData() {
const blob = new Blob( this.recordedData, { type: 'video/mp4' });
//const file = new File( [ blob ], "testScreenGrab.mp4", { type: "video/mp4"} );
let video = document.createElement('video');
video.src = window.URL.createObjectURL(blob);
while(isNaN(video.duration) || video.duration === Infinity) {
video.currentTime = 90000;
await new Promise(r => setTimeout(r, 100));
}
let duration = video.duration;
console.log('Video duration: ' + duration);  
let link  = document.createElement('a');
link.type = "video/mp4";
link.href = video.src;
link.download = 'test.mp4';
link.click();
}
chrome.runtime.onMessage.addListener(
async function(request, sender, sendResponse) {
const captureStream = await navigator.mediaDevices.getDisplayMedia()
const Grb = new Grabber(captureStream);
Grb.start();
}
);

Answer 1

在尝试打开我得到的输出文件时使用您的代码：

该文件与QuickTime Player不兼容。

但我可以使用ffmpeg:获取元数据

• 写入终端：

ffmpeg-i test.mp4-f ffmetadata test.txt

• 输出：

来自"test.mp4"的输入#0、matroska、webm：元数据：编码器：铬持续时间：N/A，开始时间：0.000000，比特率：N/A流#0:0(eng(：视频：h264(基线(，yuv420p(电视，bt709/bt709/iec61966-2-1，渐进(，640x480[SAR 1:1 DAR 4:3]，1k tbr，1k tbn，2k tbc(默认(输出#0，ffmetadata到"test.txt"：