3rdspace

Presentation Room
Meeting Room
Conversation Tables
Video Lounge

Website

Inspiration

One of the things that I miss most after having worked from home over the last few years, is the relationships built around the watercolor. These are conversations that take place after the weekly team meeting, in the kitchen while grabbing a snack, before a monthly all-hands meeting, or even at the yearly industry conference. These small moments have been lost in the world of online meetings and slack channels.

I started this project with the intent to make online spaces more conducive to natural social interactions. This means speaking with individuals, or small groups of your choosing rather than the whole room at once. I wanted to allow these moments to happen organically rather than explicitly. I gravitated toward using spacial proximity and familiar physical environments to achieve this.

What it does

3rdspace is a highly configurable online space which can take any form. A room can be designed to represent a convention center, meeting room, retail store, classroom, concert hall, or even a neighborhood bar. Participants are represented by small avatars which can stream audio and video. Participants can move freely through the space based on the rules of the layout, interacting with one another, and sharing in digital experiences which have been placed in the space.

Dolby.io Communications APIs with spatial audio allowed me to place each avatar in the audio mix based on their location within the room. This allows smaller group conversations to happen with people nearest each other. It also separates the individual audio feeds based on the participant position, making the audio experience sound much better. The APIs were incredibly easy to integrate, I was able to get audio/video communication up and running rather quickly. The moment I was able to hear audio panning around even in a stereo environment was really exciting.

How we built it

I started by creating a ReactJS application, which was basically a large open space. I used Dolby.io Communications APIs for Audio and Video, PubNub for real-time data. An avatar would consume a 100x100px square, and be allowed to move to neighboring squares. Using the Dolby.io Communications APIs I was able to configure the position of each participant relative to me. I used PubNub to indicate presence and positional state, and the Dolby.io APIs to set those positions within the space.

Next I decided to add elements for sharing video and screen sharing. I used YouTube player and PubNub to ensure that the video playback was mirrored for all participants.

Finally I focused of room representation and design. The room is comprised of spaces, seats, elements, and participants. Each of them is style-able with CSS, allowing for highly designed spaces.

For backend I am using NodeJS and MongoDB. I’m hosting on Heroku.

Challenges we ran into

There is a lot of data, and rendering required of this application. With participant coordinates being delivered frequently to all other participants, I had to improve data management. I introduced Redux, and improved efficiency of rendering to help with this.
Before Dolby's spatial audio API, the audio experience was not great. You could hear everyone in the room, and had no idea where they were in relation to you. Dolby’s spacial audio feature was the answer to this problem, however would not be available until later in the year. I was very excited to finally get the spatial audio beta access, and hear people from the left and right of me. ** Note, the video recording did not pick up the spatial audio mix :( But I assure you that it is there.
Decoding and mixing large numbers of participants was resource intensive. Dolby's server side mixing will be a big help to this issue, at least for audio.

Accomplishments that we're proud of

Just the general experience of walking toward a group of people and hearing their converstation get louder as I approach I find pretty cool. The Dolby.io spatial mix sounds great.
The concept of volume and isolation of a space is something I’m proud of. The isolation property allowed me to support the concept of "walls", where sound could pass through, but at a lower level or not pass through at all. The volume property allowed my to reduce the volume of everyone in a room, allowing a presenter to have full volume while not being drowned out by others in the room.

What we learned

I learned the power of spacial context in cultivating social interaction.
I learned more advanced data management using Redux.

What's next for 3rdSpace.io

Create a room designer. Currently it's a very tedious process to create room. It's like writing HTML and CSS without the ability to cut & paste.
Improve efficiency of rendering to allow for large numbers of participants.
Design a specific use-case, and promote its usage.