Firefox中MediaStreamTrack.getCapabilities()的替代方案求助

问题背景 #

Firefox浏览器不支持MediaStreamTrack.prototype.getCapabilities() API，调用时会报错提示“getCapabilities() is not a function”。除IE外，仅Firefox存在该兼容问题，目前相关公开资料较少，需寻找替代方案获取设备能力。

浏览器支持情况：

原报错代码示例：

// 原示例代码（Firefox中会报错）
async function getDeviceCapabilites(constraints) {
    navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        let track = stream.getAudioTracks()[0];
        let cap = track.getCapabilities();    // Firefox中报错：'getCapabilites() is not a function'
        console.log("Device Capabilities: ", cap);
    });
}

getDeviceCapabilities({audio: true, video: false});

替代方案 #

由于Firefox不支持直接调用getCapabilities()，可以结合navigator.mediaDevices.getSupportedConstraints()获取浏览器支持的约束项，再通过试探性应用约束的方式，间接推断设备的能力范围。

实现步骤 #

1. 调用getSupportedConstraints()获取当前浏览器支持的媒体约束列表，明确可调整的参数；
2. 通过getUserMedia()获取媒体流后，对支持的约束项尝试设置不同值，结合applyConstraints()的返回结果判断设备是否支持该能力；
3. 收集所有可成功应用的约束值，以此作为设备能力的参考。

示例代码 #

async function getDeviceCapabilitiesFirefox(constraints) {
    try {
        // 获取浏览器支持的约束项
        const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const track = stream.getAudioTracks()[0];
        
        const deviceCapabilities = {};

        // 测试音量范围（可根据需求扩展其他约束）
        if (supportedConstraints.volume) {
            const testVolumes = [0, 0.3, 0.7, 1];
            const validVolumes = [];
            for (const vol of testVolumes) {
                try {
                    await track.applyConstraints({ volume: vol });
                    validVolumes.push(vol);
                } catch (e) {
                    // 不支持该音量值，跳过
                }
            }
            if (validVolumes.length > 0) {
                deviceCapabilities.volume = { 
                    min: Math.min(...validVolumes), 
                    max: Math.max(...validVolumes) 
                };
            }
        }

        // 测试回声消除支持情况
        if (supportedConstraints.echoCancellation) {
            try {
                await track.applyConstraints({ echoCancellation: true });
                deviceCapabilities.echoCancellation = { supported: true };
            } catch (e) {
                deviceCapabilities.echoCancellation = { supported: false };
            }
        }

        console.log("Firefox下推断的设备能力: ", deviceCapabilities);
        // 释放媒体流资源
        track.stop();
        return deviceCapabilities;
    } catch (err) {
        console.error("获取设备能力失败: ", err);
        return null;
    }
}

// 调用示例
getDeviceCapabilitiesFirefox({audio: true, video: false});

注意事项 #

• 该方案通过试探性应用约束推断能力，无法像getCapabilities()直接返回完整的能力范围，但可覆盖大部分业务场景需求；
• 按需选择测试的约束项，避免不必要的性能消耗；
• 测试完成后及时释放媒体流资源，避免设备占用。

内容的提问来源于stack exchange，提问作者Hazmatron