MediaStreamRecorder 使用教程

2026-01-19 11:46:18作者：乔或婵

Cross browser audio/video/screen recording. It supports Chrome, Firefox, Opera and Microsoft Edge. It even works on Android browsers. It follows latest MediaRecorder API standards and provides similar APIs.

项目地址：https://gitcode.com/gh_mirrors/me/MediaStreamRecorder

1、项目介绍

MediaStreamRecorder 是一个跨浏览器的音频/视频/屏幕录制库，支持 Chrome、Firefox、Opera 和 Microsoft Edge 浏览器，甚至在 Android 浏览器上也能正常工作。它遵循最新的 MediaRecorder API 标准，并提供了类似的 API。

2、项目快速启动

安装

首先，通过 npm 安装 MediaStreamRecorder：

npm install mediasourcerecorder

快速启动代码

以下是一个简单的示例，展示如何使用 MediaStreamRecorder 录制音频和视频：

<!DOCTYPE html>
<html>
<head>
    <title>MediaStreamRecorder 示例</title>
</head>
<body>
    <button onclick="startRecording()">开始录制</button>
    <button onclick="stopRecording()">停止录制</button>
    <video id="video" controls></video>

    <script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"></script>
    <script>
        let mediaRecorder;
        let stream;

        async function startRecording() {
            const constraints = { audio: true, video: true };
            stream = await navigator.mediaDevices.getUserMedia(constraints);
            const videoElement = document.getElementById('video');
            videoElement.srcObject = stream;
            videoElement.play();

            mediaRecorder = new MediaStreamRecorder(stream);
            mediaRecorder.mimeType = 'video/webm';
            mediaRecorder.ondataavailable = function(blob) {
                const url = URL.createObjectURL(blob);
                videoElement.src = url;
            };
            mediaRecorder.start(3000);
        }

        function stopRecording() {
            mediaRecorder.stop();
            stream.getTracks().forEach(track => track.stop());
        }
    </script>
</body>
</html>

3、应用案例和最佳实践

应用案例

在线教育平台：录制教师授课视频，供学生回放学习。
视频会议系统：录制会议过程，用于后续审查或存档。
屏幕录制工具：录制屏幕操作，用于制作教程或演示。

最佳实践

设置合适的录制时长：根据需求设置 mediaRecorder.start(3000) 中的时间间隔，以平衡录制质量和存储空间。
处理录制错误：在 onMediaError 函数中处理可能的错误，确保用户体验。
优化视频质量：根据设备性能和网络状况，调整视频编码参数，以获得最佳录制效果。

4、典型生态项目

MediaStreamRecorder 可以与其他 WebRTC 项目结合使用，例如：

RecordRTC：一个功能强大的录制库，支持多种录制格式和选项。
OpenTok：一个视频通信平台，可以与 MediaStreamRecorder 结合实现视频录制和通信。
WebRTC 实验：一系列 WebRTC 相关的实验和示例，可以作为学习和参考。

通过结合这些生态项目，可以进一步扩展 MediaStreamRecorder 的功能和应用场景。

MediaStreamRecorder