使用getDisplayMedia遇DOMException：关联Track无效状态问题求助

原代码 #

function captureScreenshot() {
    if (screenStream) {
        screenStream.getTracks().forEach(track => {
            track.stop();
        });
    }
    navigator.mediaDevices.getDisplayMedia({video: true})
    .then(stream => {
        track = stream.getVideoTracks()[0];
        screenStream = track;
        track.applyConstraints();
        (function(delay, callback){
            var loop = function(){
                callback();
                setTimeout(loop, delay);
            }; loop();
        })(5000, function(){
            imageCapture = new ImageCapture(track);
            imageCapture.grabFrame()
            .then(imageBitmap => {
                const canvas = document.querySelector('#image');
                drawCanvas(canvas, imageBitmap);
            })
            .catch(err => {
                console.error("Error grabbing frame: ", err);
            });
        });
    })
    .catch(err => {
        console.error("Error getting display media: ", err);
    });
}

问题描述 #

点击外部按钮运行代码时，触发错误：DOMException: The associated Track is in an invalid state。将循环定时器间隔改为800ms后，能正常截图一段时间，但最终仍会报错，此时track.muted变为true。希望实现持续循环截图，询问是否可强制设置track.muted=false。

核心说明 #

track.muted是只读属性，由浏览器根据屏幕共享状态自动控制，无法强制设置为false。出现该问题的核心原因包括：屏幕共享被系统/浏览器中断（如切换应用、屏幕锁定、共享源关闭）、代码存在资源泄漏、重复创建ImageCapture实例、未正确处理Track状态变化。

解决方案 #

1. 监听Track状态，自动恢复截图 #

给Track添加mute事件监听，当Track被静音时重新发起屏幕共享，恢复截图流程：

track.addEventListener('mute', () => {
    console.log('Track已静音，重启截图流程');
    captureScreenshot();
});

track.addEventListener('unmute', () => {
    console.log('Track已恢复，继续截图');
});

2. 复用ImageCapture实例，避免资源浪费 #

原代码每次循环都创建新的ImageCapture实例，易导致资源占用过高。改为初始化时创建一次，循环中复用：

navigator.mediaDevices.getDisplayMedia({video: true})
.then(stream => {
    track = stream.getVideoTracks()[0];
    screenStream = stream; // 保存完整Stream而非单个Track，便于资源管理
    const imageCapture = new ImageCapture(track); // 仅创建一次实例

    // 监听状态变化
    track.addEventListener('mute', () => {
        console.log('Track已静音，重启截图');
        captureScreenshot();
    });

    // 循环截图：成功后再触发下一次，避免定时器累积
    const loop = () => {
        imageCapture.grabFrame()
        .then(imageBitmap => {
            const canvas = document.querySelector('#image');
            drawCanvas(canvas, imageBitmap);
            setTimeout(loop, 5000);
        })
        .catch(err => {
            console.error("截图失败: ", err);
            setTimeout(loop, 5000); // 出错后仍尝试下一次
        });
    };

    // 等待约束应用完成后启动循环
    track.applyConstraints()
    .then(() => loop())
    .catch(err => console.error("应用约束失败: ", err));
})

3. 正确管理Stream资源 #

原代码中screenStream保存的是Track，改为保存完整Stream，停止时清空所有Track并释放引用：

if (screenStream) {
    screenStream.getTracks().forEach(track => track.stop());
    screenStream = null; // 清空引用，避免内存泄漏
}

内容的提问来源于stack exchange，提问作者Syed Toheed Gillani