Using WebRTC, MUX and Matrix to deliver the best CommCon yet

    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.

    ‌Talk Pages

    The CommCon website includes a page for each talk of the conference, with the embedded YouTube video (we used this project) and a brief description. Thanks to the fact that the video was live edited by the video engineer from our AV partner, we were able to make the recording available immediately after the talk went live. So if anyone missed one of those early-morning or late-night talks (depending on their time zone), they could just navigate to that talk's page and catch up before the next session – no weeks long wait to watch the bit you've missed. This isn't new for us – we've always live streamed to YouTube for this very reason, immediate content availability – and we believe that, going forward, this will be crucial for any live event, whether it's virtual or hybrid.

    More engagement during the conference: Matrix chat

    We created several Matrix chat rooms for the conference, including rooms dedicated to our Platinum and Gold sponsors for people to get directly in touch with them. However, our General room was definitely the busiest one. Here, we had people commenting live on the talks, asking questions during the live Q&A, or simply having a chat between sessions. We embedded a read-only chat window for this room in the Live page of the website, so that anyone following the conference could also keep an eye on the discussion – without even needing a Matrix account!

    We used a project called riot-embedded which we'd used last year too, and although the end result worked quite well, our process was a bit of a hack. In the future we're looking at implementing Hydrogen, which should make things much simpler.

    Sponsors

    There would be no CommCon without sponsors! We wanted to give the viewers direct access to all of them right from the Live page, through sponsor cards. They provide a link to each sponsor's website and Twitter account and, for Platinum and Gold sponsors, they give access to their dedicated page in the CommCon website. Here users find information about the company, a brief introduction video, and links to the company's website, social media, jobs board and to the dedicated Matrix chat room.

    We believe that providing a direct connection between participants and sponsors is key to a successful conference and we'd like to expand on this even further in the future – we definitely improved on what we offered last year so let's see how we can do that again.

    Conclusion

    We're very proud of CommCon 2021 and are grateful to everyone who made it happen, and especially our sponsors, the speakers and all the viewers. It was truly a global event with live participants from all over the world, and we've had great feedback on how the event was run and delivered through the CommCon website. Dan wrote a retrospective on the event and it's coming out very soon, so look out for that.

    We definitely want to do more and better this year. We're already cooking up some ideas for CommCon 2022, so keep an eye on this space!

    Marco Vidonis

    Marco Vidonis

    Web Developer with a background in Process Engineering. You can reach me at [email protected]