基本使用 - RecordRTC中文教程

第3章基本使用

在本章中，我们将学习RecordRTC的基本使用方法，包括如何初始化、开始录制、停止录制和保存录制内容。

3.1 初始化RecordRTC

使用RecordRTC的第一步是获取媒体流并初始化录制器：

获取媒体流并初始化

// 获取媒体流
navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then(function(stream) {
    // 初始化RecordRTC
    var recorder = RecordRTC(stream, {
        type: 'video'
    });
    
    // 保存recorder实例供后续使用
    window.recorder = recorder;
}).catch(function(error) {
    console.error('获取媒体流失败:', error);
});

3.2 开始录制

初始化完成后，可以调用startRecording方法开始录制：

开始录制

// 开始录制
function startRecording() {
    if (window.recorder) {
        window.recorder.startRecording();
        console.log('开始录制');
    }
}

3.3 停止录制

录制完成后，调用stopRecording方法停止录制：

停止录制

// 停止录制
function stopRecording() {
    if (window.recorder) {
        window.recorder.stopRecording(function() {
            // 获取录制的blob数据
            var blob = window.recorder.getBlob();
            console.log('录制完成，blob大小:', blob.size);
            
            // 处理录制的数据
            handleRecordedData(blob);
        });
    }
}

3.4 保存录制内容

录制完成后，可以将内容保存为文件或上传到服务器：

保存为文件

// 处理录制的数据
function handleRecordedData(blob) {
    // 方法1: 创建下载链接
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'recording.webm';
    a.click();
    
    // 方法2: 使用RecordRTC的内置方法
    RecordRTC.invokeSaveAsDialog(blob, 'my-recording.webm');
}

3.5 完整示例

以下是一个完整的录制示例：

完整录制示例

<!DOCTYPE html>
<html>
<head>
    <title>RecordRTC示例</title>
</head>
<body>
    <video id="preview" autoplay muted controls style="width: 100%; max-width: 600px;"></video>
    <div style="margin: 20px 0;">
        <button id="startBtn">开始录制</button>
        <button id="stopBtn">停止录制</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/recordrtc@5.6.2/RecordRTC.min.js"></script>
    <script>
        var video = document.getElementById('preview');
        var startBtn = document.getElementById('startBtn');
        var stopBtn = document.getElementById('stopBtn');
        var recorder;

        // 获取媒体流
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then(function(stream) {
            // 显示预览
            video.srcObject = stream;
            
            // 初始化RecordRTC
            recorder = RecordRTC(stream, {
                type: 'video'
            });
            
            // 绑定按钮事件
            startBtn.addEventListener('click', function() {
                recorder.startRecording();
                startBtn.disabled = true;
                stopBtn.disabled = false;
            });
            
            stopBtn.addEventListener('click', function() {
                recorder.stopRecording(function() {
                    var blob = recorder.getBlob();
                    
                    // 创建预览
                    video.srcObject = null;
                    video.src = URL.createObjectURL(blob);
                    
                    // 启用下载
                    var a = document.createElement('a');
                    a.href = URL.createObjectURL(blob);
                    a.download = 'recording.webm';
                    a.textContent = '下载录制文件';
                    document.body.appendChild(a);
                    
                    startBtn.disabled = false;
                    stopBtn.disabled = true;
                });
            });
            
            stopBtn.disabled = true;
        }).catch(function(error) {
            console.error('Error accessing media devices:', error);
        });
    </script>
</body>
</html>

3.6 核心概念

理解以下核心概念有助于更好地使用RecordRTC：

MediaStream：浏览器API提供的媒体流对象，包含音频和/或视频轨道
Blob：录制完成后生成的二进制大对象，可以保存为文件或上传
Recorder Instance：RecordRTC实例，用于控制录制过程
Configuration：录制配置选项，决定录制的格式和质量

第3章 基本使用