第8章 自定义配置

在本章中,我们将深入了解RecordRTC的各种配置选项,学习如何根据项目需求进行灵活定制。

8.1 基本配置选项

RecordRTC提供了丰富的配置选项来满足不同需求:

基本配置选项

// RecordRTC基本配置选项
var options = {
    // 录制类型
    type: 'video', // 'audio', 'video', 'screen', 'gif', 'canvas'
    
    // MIME类型
    mimeType: 'video/webm',
    
    // 视频配置
    video: {
        width: 1280,
        height: 720
    },
    
    // Canvas配置
    canvas: {
        width: 1280,
        height: 720
    },
    
    // 音频配置
    numberOfAudioChannels: 2,
    sampleRate: 44100,
    
    // 其他配置
    disableLogs: false,           // 禁用日志
    timeSlice: 1000,             // 时间切片(毫秒)
    ondataavailable: function() { // 数据可用回调
        // 处理数据块
    }
};

var recorder = RecordRTC(mediaStream, options);

8.2 视频录制配置

针对视频录制的详细配置选项:

视频录制配置

// 视频录制详细配置
var videoOptions = {
    type: 'video',
    mimeType: 'video/webm;codecs=vp9',
    
    // 视频轨道配置
    video: {
        width: { min: 640, ideal: 1280, max: 1920 },
        height: { min: 480, ideal: 720, max: 1080 },
        frameRate: { min: 15, ideal: 30, max: 60 },
        aspectRatio: 16/9,
        facingMode: 'user' // 'user' 前置, 'environment' 后置
    },
    
    // Canvas配置
    canvas: {
        width: 1280,
        height: 720,
        // Canvas绘制选项
        disableWebAssembly: false,
        useWham: false
    },
    
    // 编码配置
    bitrate: 1024 * 1024, // 1Mbps
    quality: 0.8,         // 0.0 - 1.0
    
    // 其他选项
    previewStream: function(stream) {
        // 预览流回调
        console.log('预览流已准备');
    }
};

8.3 音频录制配置

针对音频录制的详细配置选项:

音频录制配置

// 音频录制详细配置
var audioOptions = {
    type: 'audio',
    mimeType: 'audio/wav',
    
    // 音频轨道配置
    numberOfAudioChannels: 2,  // 1:单声道, 2:立体声
    sampleRate: 44100,         // 采样率 Hz
    bufferSize: 4096,          // 缓冲区大小
    
    // 音频处理配置
    disableLogs: false,
    recorderType: StereoAudioRecorder, // 录制器类型
    
    // 高级配置
    desiredSampRate: 16000,    // 期望采样率
    webAudioAPI: true,         // 使用Web Audio API
    
    // 回调函数
    onAudioProcessStarted: function() {
        console.log('音频处理已开始');
    }
};

8.4 屏幕录制配置

针对屏幕录制的特殊配置选项:

屏幕录制配置

// 屏幕录制配置
var screenOptions = {
    type: 'video',
    mimeType: 'video/webm',
    
    // 屏幕共享配置
    video: {
        width: { ideal: 1920 },
        height: { ideal: 1080 },
        frameRate: { ideal: 30 }
    },
    
    // Canvas配置
    canvas: {
        width: 1920,
        height: 1080
    },
    
    // 时间切片
    timeSlice: 1000, // 每秒生成一个数据块
    
    // 数据处理回调
    ondataavailable: function(blob) {
        // 处理实时数据块
        console.log('屏幕录制数据块:', blob.size);
        
        // 可以实时上传或处理
        // uploadChunk(blob);
    },
    
    // 录制器类型
    recorderType: MediaStreamRecorder
};

8.5 自定义录制器类型

可以选择不同的录制器类型来满足特定需求:

录制器类型选择

// 不同的录制器类型
var recorderTypes = {
    // 媒体流录制器(默认)
    mediaStream: {
        recorderType: MediaStreamRecorder
    },
    
    // 音频上下文录制器
    audioContext: {
        recorderType: StereoAudioRecorder
    },
    
    // GIF录制器
    gif: {
        type: 'gif',
        recorderType: GifRecorder,
        quality: 10,
        frameRate: 200
    },
    
    // Canvas录制器
    canvas: {
        recorderType: CanvasRecorder
    },
    
    // Wham录制器
    wham: {
        recorderType: WhamRecorder
    }
};

// 根据需求选择录制器
var options = {
    type: 'video',
    recorderType: MediaStreamRecorder, // 选择录制器类型
    mimeType: 'video/webm'
};

8.6 动态配置调整

在录制过程中动态调整配置:

动态配置调整

// 动态配置管理器
class DynamicConfigManager {
    constructor(stream) {
        this.stream = stream;
        this.recorder = null;
        this.currentConfig = {};
    }
    
    // 初始化录制器
    init(config) {
        this.currentConfig = Object.assign({}, config);
        this.recorder = RecordRTC(this.stream, this.currentConfig);
    }
    
    // 动态调整视频质量
    adjustVideoQuality(width, height, bitrate) {
        // 停止当前录制
        if (this.recorder && this.recorder.getState() === 'recording') {
            this.recorder.stopRecording(() => {
                // 保存当前录制数据
                const currentBlob = this.recorder.getBlob();
                
                // 更新配置
                this.currentConfig.video = {
                    width: width,
                    height: height
                };
                this.currentConfig.bitrate = bitrate;
                
                // 重新初始化录制器
                this.recorder = RecordRTC(this.stream, this.currentConfig);
                
                // 继续录制
                this.recorder.startRecording();
                
                // 处理之前录制的数据
                this.handlePreviousRecording(currentBlob);
            });
        }
    }
    
    // 动态调整音频设置
    adjustAudioSettings(channels, sampleRate) {
        this.currentConfig.numberOfAudioChannels = channels;
        this.currentConfig.sampleRate = sampleRate;
        
        // 重新初始化录制器
        this.recorder = RecordRTC(this.stream, this.currentConfig);
    }
    
    // 处理之前的录制数据
    handlePreviousRecording(blob) {
        // 可以保存或上传之前的录制数据
        console.log('处理之前的录制数据:', blob.size);
    }
}