Daily use cases: Building a real-time video fitness class app with Daily

This is part one in our fitness use case series on how to build a custom Daily fitness app using Daily's WebRTC APIs.

At Daily, we’re always trying to create more content that demonstrates to developers how to build video and audio apps that have the exact feature set they want (or whichever features their product manager requested 😉).

From a technical standpoint, it often doesn’t matter what the exact use case is for the app. For example, if you need to record your video calls, starting a recording technically works the same whether it’s a teacher instructing a history class, or a team holding a post-mortem.

Lately, though, we’ve noticed there are groups of features that seem to come up more and more for specific use cases. One such use case is online fitness classes, where there is one instructor and many students watching (and hopefully working out, too!)

To help support our fitness friends run their virtual work out classes, we’re introducing our latest series on building an online fitness app. This series will be a little different than previous series we’ve done; since a lot of the basic functionality is covered in existing series, we’ll be putting all those resources together for you so you know exactly where to look!

To help go beyond just a reading list, we’ll also be taking our open-source fitness demo app and will show you how to expand it with some popular remote fitness app features we keep hearing about. In most cases, they’re fairly straightforward to add, so we’ll show you exactly what code you need to make the fitness app work(out) for you. 💪

Daily fitness demo app: Features and to-dos

To help get you started, Daily engineers have built a demo app specifically for the fitness use case. We’ve added a bunch of handy features that are useful for any online fitness class to help maximize your viewer count and stay connected.

The fitness demo app currently:

• Hosts live fitness classes with real-time video
• Creates public or private classes, depending on whether you want to allow anyone to join, or prefer to have students request to join

• Displays a list of existing classes that can be joined if you don’t want to create one yourself
• Allows participants to join a class as an instructor or student. We’ll show you both views!
• Records live classes
• Lets the class instructor (meeting owner) live stream to increase the number of participants who can join
• Keeps track of who is in the call with a list of students in the sidebar
• Avoids disruptions by allowing instructors to mute all students with one click
• Lets your students ask questions with the custom chat sidebar, featuring emoji reactions
• Sets your class up into three stages: a pre-class room (lobby) for the early birds, a live class room while the class is in progress, and a post-class room for those who like to hang around
• Keeps your eye on the time with in-class timers, so you know when to wrap things up
• Toggles between letting students interact and having a more focused view by using custom grid and “active speaker” (instructor-focused) layouts

As you can see, the fitness demo app already covers a ton of functionality. We hope this demo code helps give a good sense of how to build a large, multi-feature custom Daily fitness app.

Can I get a fitness (app)? Expanding our fitness app even more

As is often the case with demo apps, they cover the general functionality but don’t always include the specific little details that make your app unique. To help mitigate this, we’ve gathered a list of feature requests we’ve heard specific to online fitness apps to help enhance the at-home workout experience. We’ll be showing you how to add them to our virtual fitness demo app over the next few weeks.

These additional fitness app features include:

• Making the instructor’s life easier by triggering a few changes automatically when they join and start the class
  • Muting students so the class can begin without disruption
  • Starting the class recording so the instructor doesn’t have to worry about pressing the “Record” button
  • Getting everyone’s attention by switching to active speaker mode for the students only (the instructor can still have a grid view of the students)
• Only recording the instructor’s video – if you’re offering the playback video for purchase later, you probably don’t need to include your students in their sweatier moments
• Setting up an “incognito” mode where students and instructors can see each other but students can’t see each other
• And more related to class music and scheduling

We’ll be writing quick posts with code samples on each of these topics to help get your full feature list covered.

In the meantime…

To get a head start on building your own online fitness app, check out our open source examples repo on GitHub to test out our existing fitness demo app.

You can also check out our existing tutorials on building custom Daily apps in a variety of front-end frameworks:

• Learn how to handle large calls without compromising performance with this large meetings series (Next.js)
• Highlight the active speaker on a video call (Next.js)
• Add recording to a custom video chat app (Next.js)
• Build a call lobby to control meeting access (Next.js)
• Build a real time video chat app with Next.js and Daily
• Build video and audio-only apps with React Native
• Build a custom video call app with SvelteKit with this Svelte series
• Build a video call overlay app with Electron and Daily with this Electron and plain JavaScript series
• Build a custom video chat app with Daily and Vue.js

In our next fitness app series post, we’ll look at how to implement our “mute all students” feature, and how to trigger it automatically when the instructor joins. Until then, keep an eye on our Twitter for updates!