第4章 视频录制功能

在本章中，我们将深入了解RecordRTC的视频录制功能，包括配置选项、质量控制和格式选择等。

4.1 视频录制基础

视频录制是RecordRTC的核心功能之一，支持多种配置选项：

基本视频录制配置

// 基本视频录制配置
var options = {
    type: 'video',              // 录制类型
    mimeType: 'video/webm',     // 视频格式
    width: 1280,                // 视频宽度
    height: 720,                // 视频高度
    video: {
        width: 1280,
        height: 720
    },
    canvas: {
        width: 1280,
        height: 720
    }
};

var recorder = RecordRTC(mediaStream, options);

4.2 视频格式选择

RecordRTC支持多种视频格式，可以根据需求选择：

格式 MIME类型 浏览器支持 特点
WebM video/webm Chrome, Firefox 开源格式，质量好，文件较小
MP4 video/mp4 Chrome, Firefox, Safari 兼容性好，广泛支持
GIF image/gif 所有浏览器 适合短动画，文件较大

不同格式的配置

// WebM格式（推荐）
var webmOptions = {
    type: 'video',
    mimeType: 'video/webm;codecs=vp9'
};

// MP4格式
var mp4Options = {
    type: 'video',
    mimeType: 'video/mp4'
};

// GIF格式
var gifOptions = {
    type: 'gif',
    quality: 10,
    frameRate: 200
};

4.3 视频质量控制

可以通过多种方式控制视频录制质量：

质量控制配置

// 高质量录制配置
var highQualityOptions = {
    type: 'video',
    mimeType: 'video/webm;codecs=vp9',
    video: {
        width: 1920,
        height: 1080
    },
    canvas: {
        width: 1920,
        height: 1080
    },
    bitrate: 1024 * 1024 // 1Mbps
};

// 中等质量录制配置
var mediumQualityOptions = {
    type: 'video',
    mimeType: 'video/webm',
    video: {
        width: 1280,
        height: 720
    },
    canvas: {
        width: 1280,
        height: 720
    },
    bitrate: 512 * 1024 // 0.5Mbps
};

// 低质量录制配置（适合移动端）
var lowQualityOptions = {
    type: 'video',
    mimeType: 'video/webm',
    video: {
        width: 640,
        height: 480
    },
    canvas: {
        width: 640,
        height: 480
    },
    bitrate: 256 * 1024 // 0.25Mbps
};

4.4 视频录制高级功能

RecordRTC提供了多种高级视频录制功能：

视频叠加和水印

// 添加水印的录制配置
var watermarkOptions = {
    type: 'video',
    mimeType: 'video/webm',
    // 在canvas上绘制水印
    onVideoProcessStarted: function() {
        var canvas = recorder.canvas;
        var context = canvas.getContext('2d');
        
        // 设置水印样式
        context.fillStyle = 'rgba(255, 255, 255, 0.7)';
        context.font = '20px Arial';
        context.fillText('RecordRTC Demo', 20, 30);
    }
};

4.5 多摄像头支持

可以同时使用多个摄像头进行录制：

多摄像头录制

// 获取多个摄像头的媒体流
async function getMultipleCameras() {
    try {
        // 获取所有视频设备
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        
        // 创建多个媒体流
        const streams = [];
        for (let i = 0; i < Math.min(2, videoDevices.length); i++) {
            const stream = await navigator.mediaDevices.getUserMedia({
                video: {
                    deviceId: videoDevices[i].deviceId
                },
                audio: false
            });
            streams.push(stream);
        }
        
        return streams;
    } catch (error) {
        console.error('获取摄像头失败:', error);
    }
}

4.6 视频处理和优化

录制完成后可以对视频进行处理和优化：

视频处理示例

// 视频处理和优化
function processVideo(blob) {
    // 创建视频元素用于处理
    var video = document.createElement('video');
    video.src = URL.createObjectURL(blob);
    
    video.addEventListener('loadedmetadata', function() {
        // 创建canvas用于处理
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        var ctx = canvas.getContext('2d');
        
        // 绘制视频帧并进行处理
        video.addEventListener('timeupdate', function() {
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            
            // 可以在这里添加滤镜效果
            // 例如：添加灰度效果
            // ctx.filter = 'grayscale(100%)';
            // ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        });
        
        // 播放视频以触发处理
        video.play();
    });
}