I just want to ask for switch active device on Roo...
# ask-ai
r
I just want to ask for switch active device on Room, I'm using Angular 19 right now so i have a function to change the video device like this one:
Copy code
onVideoDeviceChange(deviceId: string) {
    console.log("deviceId selected: ", deviceId)
    console.log("Room before: ", this.room.getActiveDevice("videoinput"))
    this.room.switchActiveDevice('videoinput', deviceId);
    console.log("Room after: ", this.room.getActiveDevice("videoinput"))
    this.selectedVideoDeviceId = deviceId;
  }
and this is the output from console log
Copy code
deviceId selected:  ['768ad2c7a53da662cfd8249a9e7e4a23dc52440d0e97d6d78e14849b22717646']
Room before:  ['730fb5a17e61062d816cf29d01f2fc48bb5054a171fb345643bfc196af8244ec']
Room after:  ['730fb5a17e61062d816cf29d01f2fc48bb5054a171fb345643bfc196af8244ec']
I dont know why the active device is not change, it should be changed based on this documentation: https://docs.livekit.io/reference/client-sdk-js/classes/Room.html#switchactivedevice
t
Thanks for reaching out, arahman. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
Hi there! Just to help you understand, the
Room.switchActiveDevice
method updates the active device only for published tracks of the specified kind (like 'videoinput'). If you don’t have any video tracks published at the moment, the change will be saved but won’t take effect until a new track gets published. Here are a few friendly tips to make sure the device switch works smoothly: • First, double-check that your room is connected and that the video track is published. You can easily enable your camera by using
setCameraEnabled(true)
. • Next, make sure the
deviceId
you’re providing matches an available device. You can find this out by using
Room.getLocalDevices('videoinput')
. • Also, keep an eye on the
RoomEvent.ActiveDeviceChanged
event — it’ll let you know when the device switch actually happens. If you’re still running into issues, a helpful step is to re-attach the video track to the media element after switching devices. Sometimes, the video might still show the old device until you do this. Sources: CHANGELOG.md | packages/react/src/hooks/useMediaDeviceSelect.ts
r
I just add RoomEvent.ActiveDeviceChanged, but im not get any callbacks from the function, it means that active device is not changed
t
I’m glad you reached out! When you call
switchActiveDevice
, the
RoomEvent.ActiveDeviceChanged
event should indeed trigger, but there are a few important things to keep in mind: • First, make sure the
deviceId
you’re using is valid and available by checking
Room.getLocalDevices('videoinput')
. • Also, double-check that your event listener is properly attached before you call
switchActiveDevice
. • It’s good to verify whether the video track is published and not muted, because if no track is published, the event might not fire right away. • Lastly, consider the browser and platform you’re on—some, like Safari or iOS, have limitations around device switching. One more tip: take a look at the return value of
switchActiveDevice
to confirm the operation was successful. If you’re still running into trouble, enabling debug logging can be really helpful to see if the
activeDeviceMap
updates and if the event is being emitted internally. I hope this helps you move forward smoothly! Sources: packages/core/src/components/mediaDeviceSelect.ts | examples/demo/demo.ts
r
Copy code
async updateDeviceList() {
    this.videoInputs = await Room.getLocalDevices('videoinput');
    if (!this.selectedVideoDeviceId && this.videoInputs.length > 0) {
      this.selectedVideoDeviceId = this.videoInputs[0].deviceId;
      this.room.switchActiveDevice('videoinput', this.selectedVideoDeviceId);
    }

    this.audioInputs = await Room.getLocalDevices('audioinput');
    if (!this.selectedAudioInputDeviceId && this.audioInputs.length > 0) {
      this.selectedAudioInputDeviceId = this.audioInputs[0].deviceId;
      this.room.switchActiveDevice('audioinput', this.selectedAudioInputDeviceId);
    }

    this.audioOutputs = await Room.getLocalDevices('audiooutput');

    if (!this.selectedAudioOutputDeviceId && this.audioOutputs.length > 0) {
      this.selectedAudioOutputDeviceId = this.audioOutputs[0].deviceId;
      this.room.switchActiveDevice('audiooutput', this.selectedAudioOutputDeviceId);
    }
  }
I pretty sure the device list and selected device id are valid, because i get the list from Room.getLocalDevices('videoinput')
Copy code
this.room.on(RoomEvent.ActiveDeviceChanged, this.onDeviceChangedEvent);
and also this event listener is attached before i called room.switchActiveDevice
t
Hi there! I wanted to share some helpful info about the
RoomEvent.ActiveDeviceChanged
event. Sometimes, it might not trigger if the requested
deviceId
is already active or if there are active tracks of the same kind in the room. Let’s walk through some steps to check and troubleshoot this together: • Try using
room.getActiveDevice('videoinput')
before calling
switchActiveDevice
to see which device is currently active. If the
deviceId
you want matches the current one, the event won’t fire because there’s no change happening. • Take a look at the return value of
switchActiveDevice
. If it doesn’t succeed, the event won’t be emitted, so this is a good indicator. • Make sure the video track isn’t actively published or muted. If a track is active, that might delay the event from triggering right away. • Also, double-check that your SDK version is at least v1.11.2, since earlier versions might not reliably emit this event. If you’re still having trouble, a helpful tip is to listen for
RoomEvent.LocalTrackPublished
as well, since it can signal when tracks get updated with new devices. Sources: CHANGELOG.md