1

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.

mawcam
  • 11
  • 3

1 Answers1

0

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'
  }
}
Dirk V
  • 1,373
  • 12
  • 24
  • I've tried that, what I got is an object of MediaStream like this `{ active: true, id: "I71BK8NPReSNL45o4AuwRlJc43IDC1tmG4M4", onactive: null, onaddtrack: null, oninactive: null, onremovetrack: null }` But that's not the type the SWRTC.Video component media prop receives. – mawcam Sep 18 '20 at 20:45
  • The type of the library component it's this: `interface Media { ...; hark?: Hark; height?: number; id: string; inputDetected?: false | true; inputLost?: number; kind: audio | video; lastSpokeAt?: Date; loaded?: false | true; localDisabled: boolean; owner?: string; profile?: low | medium | high; remoteDisabled: boolean; renderMirrored: boolean; replaces?: string; roomAddress?: string; screenCapture: boolean; shared?: false | true; source: local | remote; speaking: boolean; stream: MediaStream; track: MediaStreamTrack; utilityStream?: MediaStream; volume: number; width?: number; }` – mawcam Sep 18 '20 at 20:51