How to select audioOutput with OpenTok

Question

I am building a simple WebRTC app with OpenTok. I need to be able to select camera, audio input and audio output. Currently that doesn\'t s

Answer 1

Disclosure, I'm an employee at TokBox :). OpenTok does not currently provide a way to specify the audio output device. This is still an experimental API and only works in Chrome. When the API is standardised and has wider browser support we will make it easier.

In the meantime, it's pretty easy to do this using native WebRTC. There is a good sample for this at https://webrtc.github.io/samples/src/content/devices/multi/ the source code can be found at https://github.com/webrtc/samples/blob/gh-pages/src/content/devices/multi/js/main.js

In summary you use the enumerateDevices method as you found. Then you use the setSinkId() method on the video element https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId

You can get access to the videoElement by listening to the videoElementCreated event on the subscriber like so:

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

So, The answer gave by @Adam Ullman is not valid anymore since there is a separate audio element created alongside the video element preventing us to use the setSinkId method of the video element.

I found a solution consisting in finding the audio element from the video one and using its own setSinkId. Code:

  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);
      }
    }
  };