React-Webcam录制视频缺失元数据问题咨询（含代码）

核心原因 #

浏览器原生MediaRecorder生成的视频文件（尤其是MP4格式）常出现元数据不全的情况，这是因为部分浏览器实现未在录制结束后完整写入容器元数据，或是WebM/MP4容器规范要求的字段未被正确填充。

解决方案 #

1. 从原媒体流提取基础元数据，上传时附带 #

直接从摄像头流的视频轨道中提取分辨率、帧率等信息，上传时将这些数据作为额外参数发给后端，后端可利用这些信息补全视频元数据，或在业务逻辑中直接使用。

修改sendCapture函数，添加元数据提取逻辑：

const sendCapture = () => {
    if (recordedChunks.length) {
        // 从视频轨道提取元数据
        const videoTrack = webcamRef.current.stream.getVideoTracks()[0];
        const { width, height } = videoTrack.getSettings();
        const frameRate = videoTrack.getSettings().frameRate;
        
        const blob = new Blob(recordedChunks, {
            type: "video/webm"
        });
        
        const filename = `Question${props.question}.webm`;
        const file = new File(recordedChunks, filename, { type: 'video/webm' });

        const data = new FormData();
        data.append('file', file);
        // 附加元数据
        data.append('metadata', JSON.stringify({
            width,
            height,
            frameRate,
            // 定时录制场景直接用设定时长
            duration: props.time?.[props.question-1] || 0
        }));

        axios.post("http://localhost:3001/upload", data)
        .then(res => {
            console.log(res.statusText);
        })
        setRecordedChunks([]);
    }
}

2. 确保MediaRecorder正确停止，触发完整元数据写入 #

元数据缺失可能是因为MediaRecorder未被正确停止，需确保stop()方法被调用，且在stop事件触发后再处理文件，保证所有数据块生成完成。

修改handleStartCaptureClick函数：

const handleStartCaptureClick = useCallback(() => {
    setRecordedChunks([]);
    setCapturing(true);
    
    mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
        mimeType: "video/webm"
    });

    mediaRecorderRef.current.addEventListener(
        "dataavailable",
        handleDataAvailable
    );

    // 监听stop事件，确保录制完成后再处理后续逻辑
    mediaRecorderRef.current.addEventListener("stop", () => {
        setCaptured(true);
        // 可在此处触发sendCapture，保证数据块完整
        // sendCapture();
    });

    mediaRecorderRef.current.start();

    // 简化条件判断，避免冗余校验
    if(props.time?.[props.question-1]) {
        setTimeout(() => {
            if(mediaRecorderRef.current?.state !== 'inactive') {
                mediaRecorderRef.current.stop();
            }
        }, props.time[props.question-1] * 1000);
    }
    
}, [props.time, props.question, setCapturing]);

3. 针对MP4格式：用ffmpeg.wasm补全元数据 #

若必须使用MP4格式，可在浏览器端用ffmpeg.wasm对录制后的Blob进行转码，生成元数据完整的标准MP4文件。

首先安装依赖：

npm install @ffmpeg/ffmpeg @ffmpeg/core

然后修改sendCapture函数为异步逻辑：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

const sendCapture = async () => {
    if (recordedChunks.length && !ffmpeg.isLoaded()) {
        await ffmpeg.load();
    }

    if (recordedChunks.length) {
        const blob = new Blob(recordedChunks, { type: "video/mp4" });
        const inputName = "input.mp4";
        const outputName = "output.mp4";

        // 将录制的Blob写入ffmpeg虚拟文件系统
        ffmpeg.FS('writeFile', inputName, await fetchFile(blob));

        // 转码并修复容器元数据
        await ffmpeg.run('-i', inputName, '-c', 'copy', outputName);

        // 读取处理后的文件
        const processedData = ffmpeg.FS('readFile', outputName);
        const processedBlob = new Blob([processedData.buffer], { type: 'video/mp4' });
        const file = new File([processedBlob], `Question${props.question}.mp4`, { type: 'video/mp4' });

        // 上传处理后的文件
        const formData = new FormData();
        formData.append('file', file);
        axios.post("http://localhost:3001/upload", formData)
        .then(res => console.log(res.statusText))
        .finally(() => {
            // 清理虚拟文件系统中的临时文件
            ffmpeg.FS('unlink', inputName);
            ffmpeg.FS('unlink', outputName);
            setRecordedChunks([]);
        });
    }
}

4. 后端补全元数据 #

若前端处理繁琐，可将原始文件上传至后端，用FFmpeg命令行工具重新封装容器，自动补全缺失元数据。示例命令：

# 针对WebM格式
ffmpeg -i input.webm -c copy output.webm

# 针对MP4格式
ffmpeg -i input.mp4 -c copy output.mp4

注意事项 #

• WebM格式对元数据的支持比MP4更稳定，优先推荐使用WebM格式，再通过后端工具修复元数据
• 不同浏览器的MediaRecorder实现存在差异，测试时需覆盖Chrome、Firefox、Edge等主流浏览器

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