Chrome扩展中JS录屏视频元数据缺失问题求解

问题背景 #

开发的Chrome屏幕录制扩展功能正常，但下载的视频文件始终显示时长00:00，无法拖动进度条——核心问题是录制生成的MP4文件缺少必要的元数据，导致播放器无法识别视频时长。试过的方案要么思路一致没解决，要么只能给页面内的video标签设置时长，无法解决下载文件的元数据缺失问题。

问题根源 #

MediaRecorder录制生成的Blob片段直接合并后，MP4文件的moov原子（存储视频元数据的关键部分）没有被正确写入。浏览器内的video元素可以通过流式解析获取时长，但下载后的独立文件缺少这部分元数据，播放器无法识别。

解决方案 #

使用mp4box.js库重新封装录制的Blob数据，手动写入完整的元数据。以下是具体修改步骤：

1. 引入mp4box.js #

在扩展的页面中添加mp4box的CDN引入：

<script src="https://unpkg.com/mp4box@0.5.2/dist/mp4box.all.min.js"></script>

2. 修改录制逻辑，重新封装MP4文件 #

修改Grabber类的createFileFormCurrentRecordedData方法，用mp4box处理录制的片段，生成带元数据的MP4文件：

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(track => track.stop());
        this.mediaRecorder.stop();
        setTimeout(() => {
            this.createFileFormCurrentRecordedData();
        }, 1000);
    }
    
    async createFileFormCurrentRecordedData() {
        // 将所有录制的Blob片段合并为ArrayBuffer
        const blob = new Blob(this.recordedData, { type: 'video/mp4' });
        const arrayBuffer = await blob.arrayBuffer();
        
        // 使用mp4box解析并重新封装
        const mp4File = MP4Box.createFile();
        let processedBuffer = [];
        
        mp4File.onError = (e) => console.error('MP4处理错误:', e);
        mp4File.onReady = (info) => {
            // 生成带元数据的MP4文件
            mp4File.flush();
            const finalBlob = new Blob(processedBuffer, { type: 'video/mp4' });
            
            // 触发下载
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(finalBlob);
            link.download = 'test.mp4';
            link.click();
            window.URL.revokeObjectURL(link.href);
        };
        
        // 处理每个数据块
        mp4File.appendBuffer(arrayBuffer);
        mp4File.onSegment = (id, user, buffer) => {
            processedBuffer.push(buffer);
        };
    }
}

chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse) {
    const captureStream = await navigator.mediaDevices.getDisplayMedia();
    const Grb = new Grabber(captureStream);
    Grb.start();
});

关键说明 #

• mp4box会解析录制的MP4片段，重新生成包含完整moov原子的文件，确保播放器能识别时长和进度条。
• 合并Blob后转为ArrayBuffer，是mp4box要求的输入格式。
• 通过onReady事件触发文件生成和下载，确保元数据已正确写入。

替代方案（无第三方库） #

如果不想引入第三方库，可以尝试在录制时指定MediaRecorder的MIME类型为带参数的格式，比如video/mp4;codecs="avc1.42E01E,mp4a.40.2"，但这种方法兼容性较差，不同浏览器支持程度不一，不如mp4box可靠。

内容的提问来源于stack exchange，提问作者Corvus Corax