摄像头访问

本章将详细介绍如何通过videojs-record访问和使用摄像头设备，包括设备枚举、摄像头切换、权限管理等。

6.1 设备访问权限

在访问摄像头之前，需要获得用户的授权：

请求摄像头权限

// 初始化播放器时会自动请求权限
var player = videojs('myVideo', {
    controls: true,
    width: 640,
    height: 480,
    plugins: {
        record: {
            audio: true,
            video: true
        }
    }
});

// 监听设备错误事件
player.on('deviceError', function() {
    console.log('设备错误:', player.deviceErrorCode);
    
    // 常见错误代码：
    // NotAllowedError: 用户拒绝了权限请求
    // NotFoundError: 没有找到摄像头设备
    // NotReadableError: 摄像头被其他应用占用
    // OverconstrainedError: 摄像头不支持请求的约束条件
});

// 监听设备就绪事件
player.on('deviceReady', function() {
    console.log('设备已就绪，可以开始录制');
});

6.2 设备枚举

可以获取系统中所有可用的媒体设备：

枚举媒体设备

// 获取所有媒体设备
player.record().getDevice().then(function(devices) {
    console.log('所有媒体设备:', devices);
    
    // 分类设备
    var videoDevices = [];
    var audioDevices = [];
    
    devices.forEach(function(device) {
        switch(device.kind) {
            case 'videoinput':
                videoDevices.push(device);
                break;
            case 'audioinput':
                audioDevices.push(device);
                break;
        }
    });
    
    console.log('视频设备:', videoDevices);
    console.log('音频设备:', audioDevices);
    
    // 显示设备选择界面
    showDeviceSelection(videoDevices, audioDevices);
});

// 显示设备选择界面
function showDeviceSelection(videoDevices, audioDevices) {
    // 创建视频设备选择下拉框
    var videoSelect = document.getElementById('videoDeviceSelect');
    videoDevices.forEach(function(device, index) {
        var option = document.createElement('option');
        option.value = device.deviceId;
        option.text = device.label || '摄像头 ' + (index + 1);
        videoSelect.appendChild(option);
    });
    
    // 创建音频设备选择下拉框
    var audioSelect = document.getElementById('audioDeviceSelect');
    audioDevices.forEach(function(device, index) {
        var option = document.createElement('option');
        option.value = device.deviceId;
        option.text = device.label || '麦克风 ' + (index + 1);
        audioSelect.appendChild(option);
    });
}

6.3 摄像头切换

可以在不同摄像头之间进行切换：

切换摄像头设备

// 切换到指定的摄像头设备
function switchVideoDevice(deviceId) {
    player.record().setVideoInput(deviceId).then(function() {
        console.log('摄像头切换成功');
    }).catch(function(error) {
        console.error('摄像头切换失败:', error);
    });
}

// 切换到前置摄像头
function switchToFrontCamera() {
    player.record().setVideoInput({
        facingMode: 'user'
    });
}

// 切换到后置摄像头
function switchToBackCamera() {
    player.record().setVideoInput({
        facingMode: 'environment'
    });
}

// HTML界面示例
/*
<select id="videoDeviceSelect" onchange="switchVideoDevice(this.value)">
    <option value="">选择摄像头...</option>
</select>
<button onclick="switchToFrontCamera()">前置摄像头</button>
<button onclick="switchToBackCamera()">后置摄像头</button>
*/

6.4 摄像头约束条件

可以设置摄像头的约束条件来满足特定需求：

摄像头约束配置

// 基本约束条件
var basicConstraints = {
    video: {
        width: 1280,
        height: 720,
        frameRate: 30
    }
};

// 高级约束条件
var advancedConstraints = {
    video: {
        // 精确宽度
        width: { exact: 1920 },
        // 最小高度
        height: { min: 1080 },
        // 理想帧率
        frameRate: { ideal: 30 },
        // 前置摄像头
        facingMode: 'user',
        // 特定设备
        // deviceId: 'specific-device-id'
    }
};

// 灵活约束条件
var flexibleConstraints = {
    video: {
        // 宽度范围
        width: { min: 640, ideal: 1280, max: 1920 },
        // 高度范围
        height: { min: 480, ideal: 720, max: 1080 },
        // 帧率范围
        frameRate: { min: 15, ideal: 30, max: 60 }
    }
};

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

6.5 设备状态管理

管理设备的状态和生命周期：

设备状态控制

// 检查设备状态
function checkDeviceStatus() {
    console.log('是否正在录制:', player.record().isRecording());
    console.log('是否已暂停:', player.record().isPaused());
    console.log('设备是否就绪:', player.record().isDeviceReady());
}

// 重新加载设备
function reloadDevice() {
    player.record().loadDevice().then(function() {
        console.log('设备重新加载成功');
    }).catch(function(error) {
        console.error('设备重新加载失败:', error);
    });
}

// 停止所有设备
function stopAllDevices() {
    player.record().stopDevice();
}

// 监听设备状态变化
player.on('deviceReady', function() {
    console.log('设备已就绪');
    updateDeviceStatus('就绪');
});

player.on('deviceError', function() {
    console.log('设备错误');
    updateDeviceStatus('错误');
});

player.on('startRecord', function() {
    updateDeviceStatus('录制中');
});

player.on('stopRecord', function() {
    updateDeviceStatus('已停止');
});

function updateDeviceStatus(status) {
    document.getElementById('deviceStatus').textContent = status;
}

提示：在移动设备上，摄像头访问可能受到更多限制。建议在用户交互（如点击按钮）后才请求摄像头权限，以提高成功率。