Device selection/test panel

I am implementing jitsi in my application with lib-jitsi-meet API (low level) and the user should first select/test his camera and audio device before he can join a room. It should work like this:

The red part is where the preview video should appear, if i change my video source dropdown. With the lib-jitsi-meet API i can retrieve with the method ‘enumerateDevices(callback)’ a list of mediadeviceInfo objects.

The mediaDeviceInfo objects contains a label, id, kind and group. So now i just need a stream of a specific mediaDeviceInfo, but i didn’t find a solution, how to achieve this?

Check the createLocalTracks function here: lib-jitsi-meet API (low level) · Jitsi Meet Handbook it takes a cameraDeviceId parameter which you can pass.

1 Like

@saghul first of all, thank you for tipp, it was helpful. But know i want to share my experiences with the
JitsiMeetJS.mediaDevices.enumerateDevices(callback) approach.

  1. The first problem that occured that eiter JitsiMeetJS.mediaDevices.enumerateDevices(callback) nor JitsiMeetJS.createLocalTracks() asks for camera/audio permissions with a prompt. I only achieved that with the classis approach navigator.mediaDevices.getUserMedia(constraints)...

  2. Second problem started with iOS (Safari). In our case JitsiMeetJS.mediaDevices.enumerateDevices(callback) was not able to get deviceInfo labels and ids for the front/back cameras.

JitsiMeetJS.createLocalTracks() should have prompted for permissions, since it uses getUserMedia internally.

enumerateDevices will not contain the full information until you grant permissions.