在Chrome中通过getUserMedia请求扬声器流时出现OverconstrainedError

Question

请考虑以下代码:

navigator.mediaDevices.getUserMedia({audio: true}).then(function() {
navigator.mediaDevices.enumerateDevices().then((devices) => {
devices.forEach(function(device1, k1) {
if (device1.kind == 'audiooutput' && device1.deviceId == 'default') {
const speakersGroupId = device1.groupId;
devices.forEach(function(device2, k2) {
if (device2.groupId == speakersGroupId && ['default', 'communications'].includes(device2.deviceId) === false) {
const speakersId = device2.deviceId;
const constraints = {
audio: {
deviceId: {
exact: speakersId
}
}
};
console.log('Requesting stream for deviceId '+speakersId);
navigator.mediaDevices.getUserMedia(constraints).then((stream) => { // **this always fails**
console.log(stream);
});
}
});
}
});
});
});

代码通过第一个getUserMedia请求权限，然后枚举所有设备，选择默认音频输出，然后尝试为该输出获取流。

但是在获取音频流时总是抛出错误:OverconstrainedError { constraint: "deviceId", message: "", name: "OverconstrainedError" }。

我在Chrome中无能为力(不关心其他浏览器，测试了Chrome 108和109测试版)，以使此工作

我在这里看到一个报告说它有效，但不适合我。

请告诉我我做错了什么，或者如果有另一种方法获得不涉及chrome的扬声器流。tabCapture或chrome.desktopCapture.

Chrome MV3扩展方式欢迎，不只是HTML5。

Answer 1

.getUserMedia()用于获取输入流。所以，当你告诉它使用扬声器设备时，它无法遵守。gUM的错误报告是，嗯，令人困惑(礼貌地说)。

使用输出设备，使用element.setSinkId(deviceId)。制作音频或视频元素，然后设置其接收器id。这是MDN的例子;它创建了一个音频元素。您也可以使用预先存在的音频或视频元素。

const devices = await navigator.mediaDevices.enumerateDevices()
const audioDevice = devices.find((device) => device.kind === 'audiooutput')
const audio = document.createElement('audio')
await audio.setSinkId(audioDevice.deviceId)
console.log(`Audio is being played on ${audio.sinkId}`)