Chrome下applyConstraints修改focusMode：Linux有效Windows无效问题

我用以下代码获取摄像头访问权限，检查设备是否支持focusMode能力，若支持则将focusMode从"continuous"改为"manual"。这套代码在Ubuntu 22.04系统的Chrome浏览器中能正常运行，但在Windows 11系统的Chrome浏览器中完全无效，暂未测试其他环境。

class Streamer {
    constructor() {
        this.video = document.createElement("video")
        this.canvas = document.getElementById("canvas")
        this.constraints = { video: { width: { ideal: 1280}, height: { ideal: 720 } } }
    }

    getMedia () {
        navigator.mediaDevices.getUserMedia(this.constraints)
            .then((mediastream) => {
                this.video.srcObject = mediastream
                this.videoTrack = mediastream.getVideoTracks()[0]
                this.capabilities = this.videoTrack.getCapabilities()
                this.settings = this.videoTrack.getSettings()

                console.log("capabilites:\n", this.capabilities)
                if (this.capabilities.focusMode) {
                    this.videoTrack.applyConstraints({advanced:[{focusMode: "manual"}]})
                    console.log("focusMode set to ", this.settings.focusMode)
                }
            })
            .catch ((err) => console.error(err))      
    }
}

排查方向及修复方案 #

1. 异步操作未正确等待

原代码中调用applyConstraints后立即读取settings，但applyConstraints是异步Promise操作，此时设置还未生效，自然读不到修改后的focusMode。同时，video流未加载完成就修改约束也可能导致失败。调整代码，等待视频元数据加载完成，并在约束生效后再读取设置：

class Streamer {
    constructor() {
        this.video = document.createElement("video")
        this.canvas = document.getElementById("canvas")
        this.constraints = { video: { width: { ideal: 1280}, height: { ideal: 720 } } }
    }

    getMedia () {
        navigator.mediaDevices.getUserMedia(this.constraints)
            .then((mediastream) => {
                this.video.srcObject = mediastream;
                // 等待视频元数据加载完成再操作
                this.video.onloadedmetadata = async () => {
                    this.videoTrack = mediastream.getVideoTracks()[0];
                    this.capabilities = this.videoTrack.getCapabilities();
                    
                    console.log("capabilites:\n", this.capabilities);
                    if (this.capabilities.focusMode?.includes("manual")) {
                        try {
                            // 等待约束应用完成
                            await this.videoTrack.applyConstraints({
                                advanced: [{ focusMode: "manual" }]
                            });
                            // 重新获取最新设置
                            this.settings = this.videoTrack.getSettings();
                            console.log("focusMode set to ", this.settings.focusMode);
                        } catch (err) {
                            console.error("应用约束失败:", err);
                        }
                    }
                };
                // 启动视频播放，确保流处于活跃状态
                this.video.play().catch(err => console.error("播放失败:", err));
            })
            .catch ((err) => console.error(err))      
    }
}

2. 提前在getUserMedia中指定约束

如果Windows下Chrome对后续applyConstraints支持不佳，可以尝试在初始请求媒体流时就指定focusMode约束：

this.constraints = {
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        advanced: [{ focusMode: "manual" }]
    }
};

3. 硬件驱动或系统权限限制

部分Windows笔记本的摄像头硬件驱动可能不支持通过Web API修改对焦模式，或者Chrome在Windows平台的API实现存在兼容性差异。可以先在控制台确认this.capabilities.focusMode数组中确实包含"manual"，如果不包含则说明硬件本身不支持；如果包含但设置失败，可尝试更新摄像头驱动或Chrome浏览器版本。

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