It's been now a month since CommCon 2021 ended. If you missed any of it, or you'd simply like to revisit some of the great content we had this year, you can catch up on any of the talks on the CommCon Talks page or on YouTube!
We're already thinking ahead about what CommCon 2022 might look like, but for now we'd like to look back at some of the things that we think worked really well in our 2021 edition.
Our live stream was joined by viewers from 38 countries and all continents (except Antarctica...), making CommCon a truly global conference. In terms of views, CommCon 2021 was a big success for us. Our YouTube channel registered 2,475 views during CommCon week: A drop in YouTube's ocean of influencers, but not a bad result for our industry-specific RTC conference. We even had a handful of viewers watching the live stream on their smart TVs (the best way to view the 4k content)!
Almost 2/3 of our live views were through the CommCon website, which makes us very proud and encourages us to do even better in the future. When we set out to building the Live page of the website, we wanted to provide a single place where participants could get the most from the event. It was the go-to place to take part to the conference, a virtual Conference Hall where speakers would give their talks, people could have a chat, and with a direct access to the sponsors' booths.
We used Vercel's virtual event starter kit as a template. Our Live page was modelled after one of the template's Stage pages, and modified to our needs. We then plugged in our video streams, added toggles to change the stream source, embedded a Matrix chat room and added sponsor cards. Let's have a look at how we made this work.
Live Stream
The event was live streamed through 3 services: MUX and Millicast for the CommCon website, and YouTube. Why did we choose two streaming services for our Live page? Both offer some advantages, and ultimately we wanted to provide different options to let people compare them directly.
MUX was a platinum sponsor and they provide a superb product for streamers. They offer both Video On-Demand (VOD) and live streaming via HLS, and there's an option for low-latency streaming, which we used. Their VOD solution is also great and we used it to play sponsor videos during the live streaming interludes.
Millicast is a platform that provides WebRTC streaming. We really wanted our WebRTC conference to be streamed via WebRTC and showcase its sub-second latency. It also allowed us to leverage the Subspace network. Subspace, another platinum sponsor, provide an optimised TURN network that allows the stream to leave the public internet as soon as possible and to reach its destination more quickly, avoiding congestion. Subspace was enabled by default on our WebRTC live stream, but we added a toggle to disable it to let our viewers experiment with it.
As a result, we provided 3 different streaming options in our Live page: HLS via MUX, WebRTC via traditional routes and WebRTC on the Subspace TURN network. Each option could be quickly selected during the live stream.
Video element
We implemented two separate React components: a MUX player and a Millicast player. Although both services provide at least one JavaScript player, we decided to simply wrap our own components around a <video> tag with the necessary libraries. This turned out to generate the least conflicts with our Typescript-based Next.js project.
A toggle was used to display either component. When the Millicast player was selected, we also displayed the Subspace toggle to tell the stream which network to use. During the breaks between sessions, only the MUX player was available, as it was used to play the pre-recorded sponsor videos that we stored as assets in MUX.
How did the Live page know when to play the live stream and when the VOD assets? We used MUX webhooks triggered at the beginning and end of the live stream: The webhook was consumed by a Firebase cloud function that updated a Firestore entry. The Live page on the CommCon website would simply look up the updated data on Firestore to determine whether to display the live stream or the pre-recorded sponsor videos. Automatically updating the player with the right stream was key for how CommCon was scheduled, with 1-hour blocks scattered across the day (or night, depending on your time zone) and breaks in between.
Live Q&A
Although talks were pre-recorded (with some exceptions), they were all followed by a live Q&A session, where Dan was joined by the speaker(s) to answer the questions asked by the audience in the Matrix chat. This was powered by Broadcaster.VC, which allowed our AV team to pull in our speakers' video and screenshare as NDI streams for live editing and streaming (Dan gave a talk on how this works – so meta!). This made for a seamless (most of the time) transition between recorded talks and live interviews.
