JavaScript 获得 Audio.setSinkId 的权限

Question

我正在尝试在 chrome 应用中的 Audio-Element 处更改 sinkId。

代码：

var audio = new Audio();
audio.setSinkId("communications");

我会收到这个错误：

DOMException: No permission to use requested device

为了获得许可，我尝试这样做：

navigator.webkitGetUserMedia({
    audio: true
}, (stream) => {
    console.log("stream: ", stream);
}, (error) => {
    console.log("error: ", error);
});

但现在我明白了：

error:
NavigatorUserMediaError {name: "InvalidStateError", message: "", constraintName: ""}

不知道是不是

• “音频”不可用（但实际上应该）
• 我需要一个安全的连接（但如何在 chrome 应用中获得这个连接？）

Answer 1

现在有一个mediacapture-output WG，他们确实为MediaDevices 接口定义了一个扩展，该接口添加了一个处理内部权限请求的selectAudioOutput() 方法。
此方法将返回一个 deviceInfo 对象，您可以从中提取您将传递给 HTMLMediaElement.setSinkId() 的 deviceId。

const deviceInfo = await navigator.mediaDevices.selectAudioOuput();
audio_elem.setSinkId(deviceInfo.deviceId);

另请注意，关于将此 setSinkId 方法重命名为 setAudioOutput 的讨论非常活跃，因此当浏览器开始实现所有这些时，它可能会再次更改。

Firefox 93 开始在 media.setsinkid.enabled 标志下公开此方法。

---

---

或者应该有一个Permissions.request() 方法，它应该接受一个PermissionDescriptor 对象，该对象本身应该支持一个PermissionName 值"speaker-selection"。

这样我们就可以了

 await navigator.permissions.request( { name: "speaker-selection" } );
 const all_devices = await navigator.mediaDevices.enumerateDevices();
 const audio_outs = all_devices.filter( ({ kind }) => kind === "audiooutput" );
 // ...
 audioElem.setSinkId( audio_outs[ n ].deviceId );

---

---

但截至 2021 年 8 月的今天，似乎仍然没有浏览器支持这一点。

Chrome（目前唯一支持MediaElement.setSinkId()）确实在chrome://flags/#enable-experimental-web-platform-features 下公开了Permission.request() 方法，但它们仍然不支持PermissionName "speaker-selection"。

因此，我们仍然需要请求"microphone" 的不太理想的解决方法。

(async () => {
  const query = await navigator.permissions.query( { name: "microphone" } );
  switch( query.state ) {
    case "denied": throw new Error('denied');
    case "prompt":
      await queryUserMedia();
      await getListOfDevices();
      break;
    case "granted": await getListOfDevices();
  }
  function queryUserMedia() {
    return navigator.mediaDevices.getUserMedia( { audio: true } );
  }
  async function getListOfDevices() {
    const all_devs = await navigator.mediaDevices.enumerateDevices();
    const audioouts = all_devs.filter( ({ kind }) => kind === "audiooutput" );
    const options = audioouts.map( ( dev, index ) => {
      const name = dev.label || ('audio out ' + index );
      return new Option( name , dev.deviceId );
    } );
    sel.append.apply( sel, options );
    sel.onchange = e => aud.setSinkId( sel.value );
  }

})().catch( console.error );

As a fiddle since Stack-Snippets iframes won't allow for the use of the microphone.

---

Ps：请注意，如果/当浏览器支持规范定义的 API 时，它甚至会从 be possible 到 run this code on non-secure contexts。