User gets to select his or her instrument
User joins Music video meeting session with their instrument icon presented
User can screen record their session
Can edit and share their video to social media platforms
Send invitation link for other people to join
Our tech stack
Are you a musician or music is one of your favorite subjects? Are you alone when finding someone to play music with? Don’t worry, Musio will help you find friends from around the globe to share and play music together with. 🔥🔥
What it does
Musio is a video call web app that enables users from around the globe to call each other and together create random awesome fire songs, which builds connections between people who share the same passion: music. With Musio, you not only find new friends from around the world but also learn how to use new instruments, learn about other people’s music philosophy, music culture, and tips to perform. Users can record the online jam session via a single Play button and after the session, they can edit the music video if there are some delays in their internet connection. After editing the final music video, users can upload it to Tiktok and other social media sites. Here is a fun fact, if their music created from Musio sounds super catchy and 🔥🔥, they can become viral on social media. Furthermore, they can even form a band!
How we built it
We built Musio using many technologies.
- Authentication: We build complete authentication using the CockroackDB as a database to store user information.
- Video calling: We used WebRTC for a low latency peer-to-peer video calling connection. We also implemented socket.io to create the room call joining features where multiple users can join at the same time
- Video recording: We used the MediaStream recording API to trigger the screen recording from user browser to record the video Send Invitation: We used Twilio SendGrid to invite people to join the Musio playing session.
- Frontend: We designed the UI/UX using Figma. After getting the final sketch, we used React, HTML, CSS to build the website and create complicated interactive features.
- Backend: We used Express, Node.js, and SQL for cockroachDB to build a server and host it in Heroku.
Challenges we ran into
Since our project was so front-end heavy, some of our members were forced to learn frontend technologies and style the website similar to our Figma, which was quite new to use and difficult. Through these challenges, we were able to pull through by having long hour zoom meeting debugging sessions and then finally have a working product in the end.
Accomplishments that we're proud of
We are extremely proud that we have a working application by the end of the 48 hour period for judges to test!! Regardless of everyone having to work on technologies they have never heard of before, we were able to pull through and deliver an application that is not only visually appealing, but also works to its fullest extent that we expected it to.
What we learned
We learned how WebRTC may be praised for its low latency peer-to-peer connection, but also that it gets very unstable when more people join the video call as it is not connecting to any server. We also learned how to convert Figma frames to HTML and CSS without any annoying plug-ins! More importantly, we learned the most important competency through working as a team: communication. Due to being a virtual hackathon, without our constant communication through discord and zoom meetings, we wouldn’t have been able to accomplish what we have today.
What's next for Musio
We want to add a feature where people who do not have instruments can play the instrument virtually on their computer during their Musio session to get rid of the digital divide between users who have instruments at their hands. We also want to include live audiences and have them be able to add reactions/emotes visible to the video recording(kind of like Twitch) to make the application lively and interactive for viewers watching people play Musio.