• #14
• #41

Cooking those features together should be able to change volume according to the distance

What feature?

Instead of requiring initialization steps outside of the User class, include all of this as the constructor parameters.
https://github.com/Amijakan/spatialchatclone/blob/5f6f35c7716401b7749b33013785dfa5c04994f5/client/src/pages/RoomPage.tsx#L49-L53

Need to list up what needs to be done first

• #58
• #59
• #232

Use Youtube API for getting the youtube and place an iframe?

• Reference
• Sync seconds within peers
• Sync play / pause
• Mute can be done by individual users
• Volume by distance
• Remove the video when user leaves
• Owner can move the video around

Sound / Video Input Output

There are two socketio connections to the server per client connection for some reason.

What feature?

Make Join page and room pages look less bland.

Contact Details

Eh

What happened?

A bug happened!

What browsers are you seeing the problem on?

Chrome

Relevant log output

Eh

https://www.sitepoint.com/how-to-use-ssltls-with-node-js/

Something along this line?

The avatar should disappear from screen once the user leaves room.

• Close RTC peer connectors
• Close data channels
• Close media streams

What feature?

Be able to manually change the volume per user.

• Express for the backend
• React for the frontend
• Socketio / Websocket for the chatting / room part

• Separate rendering logic and business logic (move it into importable ts/js files)
• Split business logic into testable functions, each with only one responsibility
• Keep functions pure by using dependency injection (include all variables as parameters) and don't mutate parameters
• Avoid changing external states (side effects), and keep the "surface area" as minimal as possible when necessary

• #14
• #15
• #29

Maybe just send hello world from client to server and another client
with socketio / websocket

Would be cool to record what was talked within the session.
At first, what I had in my mind was for podcast recording.

• Components should be PascalCase
• functions should be camelCase
• variables should be snake_case

RTCDataChannel should connect once upon entering the room. Instead, onopen called twice after the input is selected.

Fix bugs:

• input options not showing up correctly due to not waiting for microphone permission to be accepted
• when a user leaves the room, [object Object] shows instead of the username
• occasional horrible audio quality (due to poor automatic noise cancellation)

https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescription

https://github.com/Amijakan/spatialchatclone/blob/827ea8e287606b30e8fb1f4280fca0d796f0c1af/client/src/RTCPeerConnector.ts#L67

.setRemoteDescription(offerPack.sdp) // set remote description as the sender's

This should work??

What feature?

Pulsate avatar icon when there's voice activity.

Contact Details

No response

What happened?

Expected: RTCDataChannel.onopen should only be called once after the connection is made
What happened: onopen is being called twice for both the caller and answerer

A likely fix:
Only set ondatachannel for the answerer. Currently, createDataChannel is only being invoked by the caller but ondatachannel is being invoked by both.
Reference:
muaz-khan/RTCMultiConnection#33

What browsers are you seeing the problem on?

No response

Relevant log output

Features

• Set user's name
• Set user's status
• Keep it in Context??
• #29

What feature?

• Change style of avatar DOM element
• add user initials on the avatars
• keep track of avatar colors for peer users

yarn overrides the node_modules permission and cant execute yarn add whatevermodule without being in docker container

Change volume part reference
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings

Things to do (Example)

1. Make a list of people in the same room (of their MediaStream)
2. Make a slide bar for each user to adjust volume

Only list audio inputs under the drop down.

Instead of jumping between url's, organize the components onto a single page.

The rooms aren't separated based on url.

Be able to check the microphone input and camera input
with sound bar and video

Mainly happening in client
Keep the functionality though

What feature?

• Generate an authentication key when creating a new room
• Add an authentication process for joining an existing room

Resources that might be useful

• https://blog.mksc.jp/contents/drag-on-react

Things TODO

Sender

1. Add the position data (x, y) via RTCDataChannel to each peer connection
2. Stream the position data

Receiver

1. Update the position of the circle according to the data received

Once the project name / organization name is set, we'll move the project there

• #36

• #26
• #28
• #44

Update the README, comments, and add some documentation in general for readability.

• #18
• #13
• #12
• #108

• ショートカットキーでミュートしたい
• ステータスを変更したい(オンライン、オフライン、離席中とか)
• スクリーンシェアもYoutubeと同じように距離での音声変更したい
• Youtubeプレイリストの再生
• 遮蔽物、防音部屋など。
• #32
• #31