ryanrolds / club

Web RTC video conferencing service.

Club

WebRTC video chat application written in JS and Go.

Todos

• [DONE] Propagate "leaves" and update client to remove peers/videos that left
• See if there are audio options that can be implemented - #10
• Create grid UI using Material UI - #1
  • Add mute buttons for self and other users
  • Add video off button for self
  • Add leave button and join button
• Implement multiple rooms
• Implement join password for rooms
• Decide if we should switch WebSocket and server interactions to channels
• Create UI for providing room ID and password (if passworded room)
• Get ICE Server(s) from env var
• Get ICE Servers (STUN/TURN) from successful join response (don't store in client)

Setup

Requires Go 1.14+ and Node 12+.

make install

Running

Each service can be started seperately with make run in the frontend and golang directories. Otherwise, from the root both services can be started using Docker Compose:

make run

For extra debugging information use make run-debug in the service's directory.

Open http://localhost:3000 for React Client and http://localhost:3001 for the signaling server and examples.

club's Issues

Replace Logrus with Zap and adjust ENV=local output format

Logrus has recently been put into maintenance mode. Replace Logrus with Zap. When the ENV env var is local, output more human-readable (non-JSON) logs to STDOUT. When non-local, output JSON.

If possible, colorize the more human-readable output (ConsoleEncoder). Also try to include function, filename, and line number in the output (currently being outputted with Logrus).

In the React/frontend app implement the karaoke view

Websocket Server Rejecting Traffic from Localhost:3000

I currently get the following error when attempting to connect to localhost:3001/room:

club_1 | {"file":"server.go:29","func":"ServeHTTP","level":"error","msg":"problem upgrading to websockets: websocket: request origin not allowed by Upgrader.CheckOrigin","time":"2020-05-26T06:33:33Z"}

This is when I'm on localhost:3000 for frontend.

Steps to reproduce:

• Fresh Repo
• Hard Code localhost:3001/room into examples for singaling ws
• make run in main directory
• Once build is complete, you'll notice the error logged in your console.

I'm kinda brain dumping since its the end of the night.

Propagate join and leave messages from groups to room

Update Group to send join and leave messages from Event Bus. Update Group to relay Answers and ICECandidate to the correct Peer.

Support gracefully shutting down signalling server

Handle SIGINT/SIGTERM and gracefully shutdown the service quickly.

The shutdown process must:

• Send shutdown messages to websocket peers and close web sockets connections.
• Grafecaully shutdown the HTTP server.
• Write a shutdown completed message to logs.

Write CONTRIBUTING.md

• Include the link to Discord.
• Encourage people to talk with us in discord before submitting PRs.
• Outline how to start the services from the root as well as how to start them in each of the subdirs.
• Include instructions on how to run tests and linters from root and subdirs.
• Master on the main repo is assumed to be stable at all times
• Everyone works in branches (on a fork or not - personal preference thing)
• PRs that are not ready to review are kept in the "Draft" state (it is possible to switch a non-draft to a draft - there is a button under the review list in the PR).
• PRs that are not in a Draft state read ready to be reviewed
• At least one review is required to merge, but large PRs or PRs making arch changes should consider getting at least 2 reviewers
• All PRs should include reasonable test coverage is the changes are setup for tests
• Linting must pass
• Once approved by reviewer(s), the author merges to master(edited)
• Work should have a related ticket, which holds the conversation about the work

Initial view should be connecting followed by joining

The initial view of the app should be a single color with a centered text "Loading..." and maybe an animated loading image. Once the Redux state has connected=true then change the text to "Joining...". Once the joined room event is received, switch to the room view.

Add Make Install:Clean Script

We need a way to clean up the env before running install. This should remove node modules and whatever go cleanup needs to be done to restore it to a clean slate.

Create demo in `static/examples` that allows sharing of screen w/ audio

Goal: Create a concise example that shares a screen/application w/ audio. Determine if it's possible to share audio without sharing a screen. Preferably we could share audio from a specific application.

Copy static/example/local.html and make a new example HTML file for sharing. Expand the new HTML file to support sharing a screen and audio.

Examples of screen and audio sharing:

• https://www.webrtc-experiment.com/demos/screen-and-video-from-single-peer.html
• https://stackoverflow.com/questions/19382444/is-it-possible-broadcast-audio-with-screensharing-with-webrtc

Test, debug, and better understand Safari limitations

Investigate, correct, and document Safari limitations. After adding the Event Target shim in #27, I'm seeing a black video box if I open multiple tabs to http://localhost:3001/ in multiple tabs in Safari.

We need to better understand Safari's media device, Web RTC, and Web Audio limitations.

Once we a better understanding of the limits we can decide how much support we can offer at this time.

Create Event Bus for distributing message between Room and groups

Create an Event Bus and interface for consumers to implement. Update Room and Groups to implement the consumer interface. When setting up Rooms and groups bind as consumers. Ensure Room and Groups have reference to Event bus for publishing messages. Event Bus should give consumers a channel and consumers should consumer channel messages in a loop.

Add CI to Frontend Makefile

Define and get feedback on KJ user story

The KJ user story at https://ryanolds.invisionapp.com/freehand/Club-UI-wireframe-pRcN8AczK?v=Hke6bxk5AxtHMnISD960OQ%3D%3D&linkshare=urlcopied is just a stub. Talk with the team in Discord and build out the KJ user story.

What does the KJ see when they first access the room?
How do they manage and advance the queue?
What do they see when they advance the queue?
Should the KJ and singer have a 1-on-1 before being broadcasted to everyone in the room?
What audio controls do they need to improve audio quality?
What controls should we provide to the KJ so they can handle a "singer" ranting about 5G/fluoride?

If you need access to InVision send @ryanrolds your email address.

Go Origin Checking

The websocket implementation (Gorilla) in Go is safe defaulting where the origin is being sent from the client when viewing from Chrome as file:// which does not match the host request header. The CheckOrigin function stub can be found here

It's currently returning true (allowing all Origin headers).

It would be good to allow localhost:* or any origins in a list supplied by env var.

Before showing the room view get the user's name/handle

Before showing the room view, show a view asking for the user's name/handle. Store the name in the Redux state. Create a new message that sends the name to the signaling server. The signaling server should add the name to WebSocketPeer struct for that peer. The signaling server shouldn't allow users without a name set to join a room.

Stand up React App

Update signaling server and client to display server named defined in config on top bar in client

Show room view and join buttons for groups in joined room message

Setup React SPA with Material UI

Extend signaling service to let users join groups in the room

Add the notion of groups to the Room struct. When a user sends a join event, allow them to specify a group ID. Add the user to the group and only dispatch the joins and leave events to members of that group. If a group is not specified, add them to a catch-all default group.

Expand Room to support modules

Add a method to Room to register modules during start. Store the modules in a new map in the Room struct. When an instance of the module is registered the Room logic should call a method on the module and pass the room to it so the module can do whatever prep it needs (like add itself to the groups). Make sure to define any interfaces and create any counterfeiter mocks needed to test.

Create config struct that main uses to configure server, rooms, groups, and future modules

Using cleanenv create a new configuration struct that gets env vars, room, group, and module configuration details.

We only need to work around port, log level, and group id & limit for the time being. The group details should be array of key+value pairs in the yaml file. The yaml file will be the bases for future configuration details.

Setup and configure Travis CI to lint and compile

The Room view look nice and show joinable groups in grid

In the React/frontend app implement the group view

In the React/frontend app implement the bar view

Implement the first view in the "Joining Club story". Create handlers for clicking a seat, but don't worry about actually joining the room. We just want to get the UI in place. Once the signaling server supports groups we will wire up the join and leave logic. This view should be the home/first view of the React app.

Update Group <-> Peer communication to use channel

Update the messaging between groups and peers to use channels.

Update MemberList component display local and remote peers in a grid.

Make the Group view better. Start by making the video/peers shown by the MemberList component form a grid. Make sure the grid display things a pretty way and that the grid can accommodate 25 people (5x5). The grid should resize and try to keep the dimensions a square with the last being the odd row with fewer when necessary. When showing less than 4 people try to display in a single row.

Create static/example for transforming inbound/outbound audio streams

Copy static/example/local.html and create a proof-of-concept prototype that demonstrates transforming inbound/outbound audios stream with Web Audio API. Reading Basic concepts behind Web Audio API is recommended.

Create 1-3 basic controls that change the transform(s) in real-time.