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>