三、音频视频采集参数调整

/**
 * 【视频参数调整】
 * width        视频宽度
 * height       视频高度
 * aspectRatio  比例（一般可不设置，只设置宽高即可，可用来获取宽高比）
 * frameRate    帧率（可通过帧率设置码流，帧率越高，码流越大，视频越平滑）
 * facingMode   摄像头（PC会忽略，手机端可区分）
 *              user          前置摄像头
 *              environment   后置摄像头
 *              left          前置左侧摄像头
 *              right         前置右侧摄像头
 * resizeMode   采集画面是否裁剪
 *              none          不裁剪
 */

/**
 * 【音频参数调整】
 * volume            音量调整（范围 0-1.0， 0为静音，1为最大声）
 * sampleRate        采样率 （例 8000）
 * sampleSize        采样大小 （例 16位 2字节）
 * echoCancellation  回音消除 （true/false）
 * autoGainControl   自动增益 （在原有录音的基础上是否增加音量， true/false）
 * noiseSuppression  是否开启降噪功能 （true/false）
 */

/**
 * 【其他参数】
 * latency           延迟大小 （ 延迟小，网络不好的情况下，会卡顿花屏等，好处在于可实时通信，建议200ms）
 *                            ( 延迟大，网络不好的情况下，画面相对更平滑流畅，但即时性较差）
 * channelCount      单/双声道
 * deviceID          多个摄像头或音频输入输出设备时，可进行设备切换（例如切换前后置摄像头）
 * groupID           同一组设备
 */

let videoPlayer = document.querySelector('video#player');

let gotMediaStream = (stream) => {
    // stream 流里面包含 视频轨和音频轨
    videoPlayer.srcObject = stream

    // 如果流获取成功了  说明已经获取到了设备权限
    return navigator.mediaDevices.enumerateDevices()
}

let handleError = (err) => {
    console.log(`getUserMedia errpr:${err}`)
}

// 将获取的设备信息打印出来
let gotDevices = (deviceInfos) => {
    deviceInfos.forEach(e => {
        console.log(`${e.kind}:label=${e.label}:id=${e.deviceId}:groupId=${e.groupId}`)
    });
}

let start = (deviceId) => {
    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        console.log('getUserMedia is not supported!');
    }else {
        // 同时有视频数据和音频数据
        let constrants = {
            video: {
                width: {
                    min: 200,
                    max: 800
                },
                height: 100,
                frameRate: {
                    min: 1,
                    max: 50
                },
                facingMode: 'environment',
                resizeMode: 'none'
            },
            audio: {
                noiseSuppression: true,
                echoCancellation: true
            },
            deviceId: deviceId
        }
        navigator.mediaDevices.getUserMedia(constrants)
        .then(gotMediaStream)
        .then(gotDevices)
        .catch(handleError)
    }
}

start()

// 选择不同设备时触发函数
let onChange = () => {
    // 获取到deviceId
    start(deviceId)
}

其中，宽高设置范围时，会在初始选择最佳宽高显示，不会实时变化

帧数设置范围时，会根据网络实时调整帧数