屏幕录制功能

本章将详细介绍如何使用videojs-record实现屏幕录制功能，包括屏幕捕获、音频录制、屏幕共享等高级特性。

7.1 屏幕录制配置

启用屏幕录制功能需要特殊的配置：

基本屏幕录制配置

// 启用屏幕录制
var player = videojs('myVideo', {
    controls: true,
    width: 800,
    height: 600,
    plugins: {
        record: {
            // 启用屏幕录制
            screen: true,
            // 可选：同时录制系统音频
            audio: true,
            // 设置最大录制时长
            maxLength: 600 // 10分钟
        }
    }
});

// 监听屏幕录制事件
player.on('startRecord', function() {
    console.log('开始屏幕录制');
});

player.on('finishRecord', function() {
    console.log('屏幕录制完成');
    // 处理录制的数据
    var data = player.recordedData;
});

7.2 屏幕录制约束

可以设置屏幕录制的约束条件：

屏幕录制约束配置

// 屏幕录制约束条件
var screenConstraints = {
    screen: {
        // 设置视频宽度
        width: { min: 640, ideal: 1280, max: 1920 },
        // 设置视频高度
        height: { min: 480, ideal: 720, max: 1080 },
        // 设置帧率
        frameRate: { min: 15, ideal: 30, max: 60 },
        // 是否显示鼠标指针
        displaySurface: 'monitor',
        // 是否显示窗口边框
        logicalSurface: true
    }
};

// 初始化播放器
var player = videojs('myVideo', {
    controls: true,
    plugins: {
        record: screenConstraints
    }
});

7.3 屏幕和音频录制

可以同时录制屏幕和系统音频：

屏幕和音频录制配置

// 同时录制屏幕和音频
var screenWithAudioConfig = {
    screen: true,
    audio: {
        // 录制系统音频
        autoGainControl: false,
        echoCancellation: false,
        noiseSuppression: false
    }
};

// 初始化播放器
var player = videojs('myVideo', {
    controls: true,
    plugins: {
        record: screenWithAudioConfig
    }
});

// 注意：录制系统音频需要用户在屏幕共享对话框中选择"共享音频"

7.4 屏幕录制控制

屏幕录制的特殊控制方法：

屏幕录制控制

// 开始屏幕录制
function startScreenRecording() {
    player.record().start();
}

// 停止屏幕录制
function stopScreenRecording() {
    player.record().stop();
}

// 暂停屏幕录制
function pauseScreenRecording() {
    player.record().pause();
}

// 恢复屏幕录制
function resumeScreenRecording() {
    player.record().resume();
}

// 检查是否支持屏幕录制
function checkScreenRecordingSupport() {
    if (player.record().isScreenSupported()) {
        console.log('支持屏幕录制');
        return true;
    } else {
        console.log('不支持屏幕录制');
        return false;
    }
}

// 获取屏幕录制状态
function getScreenRecordingStatus() {
    console.log('是否正在录制屏幕:', player.record().isRecording());
    console.log('是否已暂停:', player.record().isPaused());
}

7.5 屏幕录制事件处理

处理屏幕录制特有的事件：

屏幕录制事件

// 监听屏幕共享事件
player.on('startScreenShare', function() {
    console.log('开始屏幕共享');
});

player.on('stopScreenShare', function() {
    console.log('停止屏幕共享');
});

// 监听屏幕录制错误
player.on('screenError', function(event, error) {
    console.error('屏幕录制错误:', error);
    
    // 常见错误：
    // PermissionDeniedError: 用户拒绝了屏幕共享权限
    // NotSupportedError: 浏览器不支持屏幕录制
    // InvalidStateError: 状态错误
});

// 监听屏幕录制完成
player.on('finishRecord', function() {
    console.log('屏幕录制完成');
    
    // 获取录制的数据
    var recordedData = player.recordedData;
    
    // 屏幕录制数据包含：
    // recordedData.video - 屏幕录制视频
    // recordedData.audio - 系统音频（如果录制了音频）
    
    // 处理录制的数据
    handleRecordedScreenData(recordedData);
});

// 处理录制的屏幕数据
function handleRecordedScreenData(data) {
    // 创建视频URL
    var videoUrl = URL.createObjectURL(data.video);
    
    // 在新窗口中播放
    window.open(videoUrl, '_blank');
    
    // 下载录制的视频
    var downloadLink = document.createElement('a');
    downloadLink.href = videoUrl;
    downloadLink.download = 'screen-recording.webm';
    downloadLink.click();
    
    // 记得释放URL对象
    setTimeout(function() {
        URL.revokeObjectURL(videoUrl);
    }, 1000);
}

7.6 屏幕录制最佳实践

屏幕录制的最佳实践和注意事项：

屏幕录制最佳实践

// 完整的屏幕录制实现
class ScreenRecorder {
    constructor(videoElementId) {
        this.player = null;
        this.videoElementId = videoElementId;
        this.init();
    }
    
    init() {
        this.player = videojs(this.videoElementId, {
            controls: true,
            width: 800,
            height: 600,
            plugins: {
                record: {
                    screen: true,
                    audio: true,
                    maxLength: 1800, // 30分钟
                    debug: true
                }
            }
        });
        
        this.setupEventListeners();
    }
    
    setupEventListeners() {
        // 设备就绪
        this.player.on('deviceReady', () => {
            console.log('屏幕录制设备就绪');
            this.updateStatus('设备就绪，可以开始录制');
        });
        
        // 开始录制
        this.player.on('startRecord', () => {
            console.log('开始屏幕录制');
            this.updateStatus('正在录制...');
        });
        
        // 录制完成
        this.player.on('finishRecord', () => {
            console.log('屏幕录制完成');
            this.updateStatus('录制完成');
            this.handleRecordedData();
        });
        
        // 录制错误
        this.player.on('deviceError', (event, error) => {
            console.error('屏幕录制错误:', error);
            this.updateStatus('录制错误: ' + error.name);
        });
    }
    
    startRecording() {
        if (this.player) {
            this.player.record().start();
        }
    }
    
    stopRecording() {
        if (this.player) {
            this.player.record().stop();
        }
    }
    
    handleRecordedData() {
        const data = this.player.recordedData;
        if (data && data.video) {
            // 创建下载链接
            const videoUrl = URL.createObjectURL(data.video);
            const downloadLink = document.createElement('a');
            downloadLink.href = videoUrl;
            downloadLink.download = `screen-recording-${Date.now()}.webm`;
            downloadLink.click();
            
            // 清理资源
            setTimeout(() => {
                URL.revokeObjectURL(videoUrl);
            }, 1000);
        }
    }
    
    updateStatus(message) {
        const statusElement = document.getElementById('recordingStatus');
        if (statusElement) {
            statusElement.textContent = message;
        }
    }
}

// 使用示例
// const recorder = new ScreenRecorder('myVideo');

提示：屏幕录制功能在不同浏览器中的支持情况可能不同。建议在使用前检查浏览器兼容性，并为用户提供清晰的操作指导。