React Simple WebRTC Choose Devices

Question

I'm working on a video conference app in react + typescript using Simple WebRTC and I want to implement a view to let the user choose their audio input, output and also video device.

I noticed that the library handles their own store that has devices and media fields. Also the library have a component to display the available devices for audio and video but I don't see any action to change the media in the store because that's what the SWRTC.Video component (what I use to show the video screen) receives to show the video and also the audio.

What I have is the deviceId on the <select> change but I need the media from the deviceId to pass it as a prop to the SWRTC.Video component. I've been reading the docs at https://docs.simplewebrtc.com/ but I don't see any action that support that also they have few examples so If anyone have worked on something similar before maybe could help me.

Answer 1

user navigator.mediaDevices.enumerateDevices() to get all devices. Every device has a field deviceId. When you request you stream with navigator.mediaDevices.getUserMedia(opts) you can add the option deviceId to the options to get your selected device.

example opts :

const opts = {
  audio: {
    deviceId: 'someID'
  }
}