Add avatarselect/mic/camera/screenshare/chat/participants UI

[vincentfretin]

Add UI with web components in the example:

• mic
• chat
• participants
• avatarselect
• camera
• screenshare

See my comment #28 (comment) and issue networked-aframe/networked-aframe#423

Related issues:

• Mic and chat networked-aframe/naf-valid-avatars#18
• Add participants list networked-aframe/naf-valid-avatars#19
• State "naf:reconnecting" when connection is bad and it reconnects networked-aframe/naf-janus-adapter#67
• Add support for Video Texture Target #16
• Web component for avatar selection networked-aframe/naf-valid-avatars#31

[uhunkler]

I tried the ui-components branch and got the following error in Chrome on a mac:

Networked-Aframe Connecting...
networked-aframe.min.js:1 TypeError: Cannot read properties of undefined (reading 'getUserMedia')
at h.value (networked-aframe.min.js:1:32360)
at networked-aframe.min.js:1:27571
at new Promise ()
at h.value (networked-aframe.min.js:1:27542)
at t.value (networked-aframe.min.js:1:10213)
at n.connect (networked-aframe.min.js:1:74485)
at v.emit (a-node.js:293:10)
at HTMLButtonElement.onclick (playground/:197:36) 'failure to connect'
value @ networked-aframe.min.js:1
value @ networked-aframe.min.js:1
Promise.catch (async)
value @ networked-aframe.min.js:1
value @ networked-aframe.min.js:1
connect @ networked-aframe.min.js:1
emit @ a-node.js:293
onclick @ playground/:197

[vincentfretin]

Did you run

npm install
npm start

and went to http://localhost:8080 ?

[vincentfretin]

I merged #37 already but this is not finished. I'm working a naf-users-button to show the participants in the room. I'll probably rename the naf-nametag-solidjs repo to naf-ui-components, expose the src/components files to be used a ES modules for naf-valid-avatars example. And also create a naf-valid-avatars web component to easily integrate it here.

[uhunkler]

I didn't run »npm install« - I just updated and ran the project. Now after you merged it in the main branch networking runs without issues. Great.

[vincentfretin]

I added the new naf-users-button web component in the example.