RecordRTC - MediaRecorder API 似乎无法记录 mimeType: video/webm答案

【问题标题】：RecordRTC - MediaRecorder API seems unable to record mimeType: video/webmRecordRTC - MediaRecorder API 似乎无法记录 mimeType: video/webm
【发布时间】：2021-09-18 04:01:05
【问题描述】：

我正在使用RecordRTC 进行音频和视频录制。问题是当我尝试先录制音频然后录制视频时。我收到这个错误。 MediaRecorder API seems unable to record mimeType: video/webm。先录制视频后录制音频时没有发生该错误。

这是录音机代码

const startRecord = () => {
    captureCamera(mic => {
        const recordVideo = RecordRTC(mic, {
            type: 'audio',
            recorderType: StereoAudioRecorder,
            mimeType: 'audio/wav'
        });
        recordVideo.mic = mic;
        setTimeout(() => {
            recordVideo.startRecording();
            setRecorder(recordVideo);
        }, 500);
    });
};

const captureCamera = callback => {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
            .getUserMedia({ audio: true })
            .then(mic => {
                callback(mic);
            })
            .catch(error => {
                console.log(error);
            });
    }
};

这是音频的控制台报告。

这是录像机代码

const startRecord = () => {
    captureCamera(camera => {
        video.current.muted = true;
        video.current.volume = 0;
        video.current.srcObject = camera;
        const recordVideo = RecordRTC(camera, {
            type: 'video',
            mimeType: 'video/webm;codecs=vp9',
            recorderType: MediaStreamRecorder
        });
        recordVideo.camera = camera;

        setTimeout(() => {
            recordVideo.startRecording();
            setRecord(recordVideo);
        }, 500);
    });
};

const captureCamera = callback => {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
            .getUserMedia({ audio: true, video: true })
            .then(camera => {
                callback(camera);
            })
            .catch(error => {
                console.log(error);
            });
    }
};

const stopRecord = () => {
    record.stopRecording(stopRecordingCallback);
};

const stopRecordingCallback = () => {
    getSeekableBlob(record.getBlob(), seekableBlob => {
        const blob = new Blob([seekableBlob], { type: 'video/x-matroska;codecs=avc1,opus' });
        const src = URL.createObjectURL(blob);
        console.log('File URL', src);
    });
    record.camera.stop();
    record.destroy();
    setRecord(null);
};

这是视频的控制台报告。

【问题讨论】：

标签： reactjs recorder recordrtc

【解决方案1】：

并非所有浏览器都支持使用 MediaRecorder API 录制到 video/webm。

在最新版本上，Chrome、Firefox 和 Safari 都支持录制 video/webm;codecs=vp8，但您的里程可能会有所不同，因为那是最新版本，而不是最广泛使用的版本。（例如，它不适用于 iOS 上的 WebKit 移动设备）

这是一个有用的支持矩阵：

https://www.webrtc-experiment.com/RecordRTC/simple-demos/isTypeSupported.html

编辑：

您可以使用MediaRecorder.isTypeSupported('video/webm;codec=vp8') 或任何 MIME 类型来确定当前浏览器是否支持给定的编解码器。

【讨论】：