如何使用OpenTok选择audioOutput

Question

我正在使用OpenTok构建一个简单的WebRTC应用程序。我需要能够选择相机，音频输入和音频输出。目前，这似乎不太可能。

见opentok-hardware-setup

https://github.com/opentok/opentok-hardware-setup.js/issues/18

我在我的index.html文件和opentok-hardware-setup.js中加载OpenTok。

所有看起来都很棒，我可以选择麦克风和相机，但不是扬声器，也就是audiooutput。

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

从控制台，我试过

OT.getDevices((err, devices) => { console.debug(devices)});

并观察到你无法得到audioOutput

(4) [{…}, {…}, {…}, {…}]
0: {deviceId: "default", label: "Default - Built-in Microphone", kind: "audioInput"}
1: {deviceId: "b183634b059298f3692aa7e5871e6a463127701e21e320742c48bda99acdf925", label: "Built-in Microphone", kind: "audioInput"}
2: {deviceId: "4b441035a4db3c858c65c30eabe043ae1967407b3cc934ccfb332f0f6e33a029", label: "Built-in Output", kind: "audioInput"}
3: {deviceId: "05415e116b36584f848faeef039cd06e5290dde2e55db6895c19c8be3b880d91", label: "FaceTime HD Camera", kind: "videoInput"}
length
:4 __proto__:Array(0)

而你可以使用navigator.mediaDevices.enumerateDevices()获得它们

有什么指针吗？

Answer 1

披露，我是TokBox的员工:)。 OpenTok目前不提供指定音频输出设备的方法。这仍然是一个实验性API，仅适用于Chrome。当API标准化并具有更广泛的浏览器支持时，我们将使其更容易。

与此同时，使用原生WebRTC很容易做到这一点。在https://webrtc.github.io/samples/src/content/devices/multi/有一个很好的样本，源代码可以在https://github.com/webrtc/samples/blob/gh-pages/src/content/devices/multi/js/main.js找到

总之，您可以使用找到的enumerateDevices方法。然后在视频元素setSinkId()上使用https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId方法

您可以通过收听订阅者上的videoElement事件来访问videoElementCreated，如下所示：

subscriber.on('videoElementCreated', (event) => {
  if (typeof event.element.sinkId !== 'undefined') {
    event.element.setSinkId(deviceId)
    .then(() => {
      console.log('successfully set the audio output device');
    })
    .catch((err) => {
      console.error('Failed to set the audio output device ', err);
    });
  } else {
    console.warn('device does not support setting the audio output');
  }
});

Answer 2

因此，@ Adam Ullman给出的答案不再有效，因为在视频元素旁边创建了一个单独的音频元素，阻止我们使用视频元素的setSinkId方法。

我找到了一个解决方案，包括从视频中查找音频元素并使用自己的setSinkId。码：

  const subscriber_videoElementCreated = async event => {
    const videoElem = event.element;
    const audioElem = Array.from(videoElem.parentNode.childNodes).find(child => child.tagName === 'AUDIO');
    if (typeof audioElem.sinkId !== 'undefined') {
      try {
        await audioElem.setSinkId(deviceId);
      } catch (err) {
        console.log('Could not update speaker ', err);
      }
    }
  };