Feat(MediaSettings): Add audio test

[DorraJaouad]

☑️ Resolves

• Fix System check for call participants #1181

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before	🏡 After

Screencast :

audio-test.webm

🚧 Tasks

• Design review
• Code review

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[DorraJaouad]

Audio Output: Add the "voice message" option on the media settings screen to allow recording and then playing back? Or a simple "bing" sound for testing?

I used something like bing sound for audio output testing. However, I can also add voice recording as a test for the mic.
cc @nextcloud/designers @nickvergessen

[Antreesy]

I don't mind adding a new sound, just feeling that default call waiting fits better here

[marcoambrosini]

Nice @DorraJaouad
I would left-align this new button so that the speaker icon is vertically aligned with the mic and camera icons, and change the test to "Test speakers".

Also, given that we're adding more elements, could we move the "always show dialog" setting in the 3-dot menu next to the button as an action checkbox component?

[nickvergessen]

However, I can also add voice recording as a test for the mic.

Exactly that was the idea, it would basically allow you to test both, mic and speaker

[DorraJaouad]

Exactly that was the idea, it would basically allow you to test both, mic and speaker

Right, but some users want just to test speaker and they don't want to randomly say some words XD . That's why I chose the first option. So add both or only voice recorder ?

[nickvergessen]

So add both or only voice recorder ?

I leave that to design cc @marcoambrosini

As for what to play, any issue with playing an already existing file (less files, more caching, less license issues, etc)

[marcoambrosini]

@DorraJaouad @nickvergessen would it be possible to have a third entry with speaker selection similar to Jitsi? Or at least showing which is the current speaker?

[DorraJaouad]

sinkId can show the audio output being used but read only and it is not supported on Safari.

Otherwise, selectAudioOutput allows user to select audio ouput device but it is only supported on Firefox.

[Antreesy]

Or at least showing which is the current speaker?

navigator.mediaDevices.enumerateDevices() can list available output devices. Though we couldn't identify, which is being used by the browser (at best it shows Default). https://developer.mozilla.org/en-US/docs/Web/API/AudioContext is currently not implemented widely, so there's nothing to do atm.

navigator.mediaDevices.enumerateDevices().then((devices) => {
      devices.forEach((device) => {
        console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
      });
    })

[marcoambrosini]

I think that this will suffice for now. I'll open an issue for improvements once this is in