SPIRE

Minimalistic Login Screen
Assessment Centre
Tutorial Classroom
Hackathon Society Event
Networking Session at Atlassian

Inspiration

We were so sick of existing online video communication platforms failing to capture the humane attributes of real life conversation. People seem distant, disengaged and separated. What we want in video communication instead are, teachers and students, grandparents and grandchildren, interviewer and interviewee, speakers and listeners, not just isolated floating heads on a screen!

What it does

Welcome to Spire, the voice chat application simulating real-life conversations. Move around our virtual world through our web application where your distance from other people determines exactly how loud you can hear them. Those awkward situations when you're talking over one another in zoom? Sneakily pressing leave meeting when you know everyone can hear the exit sound? GONE with our revolutionary application featuring a comment system, platform for movement and conversing via voice chat and more!

More detail: A faint circle outline will appear surrounded the avatar illustrating the range of their voice. Any other avatar within this circle will have their video appear on a sidebar as well as their audio streamed to the current user. This allows multiple group conversations to happen in the same call with absolute ease. Breakout rooms are clunky and tedious to operate, while Spire allows free roaming in the 2D world to simulate how an actual networking event or a classroom tutorial will operate! With casual backdrops for parties, formal backdrops for networking or interviews, working collision and so much more, Spire has limitless potential to deliver what the world really wants - effective, realistic online communication!

Alternate video demonstration! link

How we built it

The frontend is constructed using ReactJS along with various packages such as: Bootstrap for some upstanding UI Axios for some awesome API calls Socket.IO for some nice networking React Router for some neat navigation WebRTC for some vivacious voice connection

Challenges we ran into

Syncing sound together was very difficult. Designing appropriate front end designs. Implementing a comment section which works live for all clients connected

Accomplishments that we're proud of

Having multiple connections to the server simultaneously and updating each client live was really awesome to achieve. Streaming sound was also very difficult to manage, but in the end client to client audio connections were achieved! Aesthetically pleasing, contextually appropriate backdrop designs ie classrooms, studios, assessment centres. A fully functioning chat/comment section for the call was really awesome to implement as well!

What we learned

Most of the members were quite new to vue and had only basic JS knowledge. As well was this, integrating sound streaming was a great challenge!

What's next for SPIRE

Allowing the host to control their own voice range. Host controlling participant avatar positions for classroom situations Audio equalizer to add room ambiance based on room size