Office Talk

Inspiration

With most of the world in a new remote work age due to this pandemic I thought of building a virtual office to give the users a real experience of them being in their offices.

What it does

User can sign up and create a office or join a existing one. Once they get into the office they can create multiple types of rooms. The available types of rooms are,

Workspace
Personal Room
Auditorium
Conference Room
Water Cooler

Workspace

Workspace is an attempt at creating a virtual office room experience where people get together to work together rather than just to have a conference hall.

It is a infinite canvas where users can add their workstation anywhere in the room.

If the user’s video is ON it will be shown in place of their workstation.

Users can talk with all user’s logged into a workspace.

Spatial Audio integration mapping to near real-world distance gives the ambient experience of a real office room.

Users can coordinate and move their workstation together to give a real working together feel.

User can send text messages and files as well.

Personal Room

Users can create a personal office room for themselves where anyone can hop in and have a conversation.

The room can be locked/unlocked. Other members of the office can only enter a unlocked room.

Multiple members can join the room but once the room’s owner exits the room, the conference ends.

Auditorium (Partially Complete)

Auditorium is an attempt at simulating a room for presentation or talk.

The host of the room can present files or videos or their screen.

The audience first have to select their seats. Switching seats can be done as well.

Three types of views – Seat Selection, Audience and Presentation are available.

Presentation view shows the presentation + host’s video.

Audience view shows all the audiences in the room.

Host can mute/unmute, kick specific audience.

Conference Room (Yet to Start)

Conference simulates meeting happening at a conference room.

Users choose a seat in the table.

No of seats can be configured.

User’s videos will be shown in place of the seat if available.

Anyone can present a file or share their screen.

Spatial Audio with position and direction simulates the real experience of sitting around a table.

Water Cooler (Yet to Start)

A space where users walk around and interact with others near by. A place where users will be just there to have fun, play some simple multiplayer games, watch movies together etc. Spatial Audio with updated position and direction based on user’s movement will give real experience of a 3d space.

Since I started late I am yet start development on some of the room types mentioned above, which I will be completing on coming days

Unfortunately currently I don't have access to web cam so used virtual cam for the demo video. Video used in virtual cam is obtained from pexels, free of copyright issues

Vectors images used in app are bought from Adobe Stock

How we built it

The application is build with React and node.js.

Dolby.io Communication Apis are used for the audio/video communication. For presentation File, Video Presentation and Screen share feature of communications api is used. For real-time updates communication apis' command feature is used. Spatial Audio is implemented in Workspace and will be added in other room types. Spatial Audio distance and direction is mapped to real world distance as much as possible.

Netlify host both the static files and backend. Netlify functions is used as serverless backend. Netlify identity is used for user authentication

File sharing is built with Cloudinary.

Google Firestore is used as a database.

Challenges we ran into

Time was not in my side other than that I was a smooth building experience with all the proper documentations and samples available. Understanding spatial audio and mapping it to real world scenario took some time but finally was able to achieve it.