Rive Live

This project is used during our Rive livestreams as a fun way for viewers to remotely interact with us. These apps make it possible to trigger interactive Rive animations that overlay on the streamer’s video feed.

The project is divided into three parts:

• A macOS client application used by the streamer to configure and overlay animations
• A website where viewers can remotely trigger interactions for specific streamers
• The web server responsible for handling communication between the web and macOS app.

See this video for an overview of the application, as well as instructions to configure your streaming setup: https://www.youtube.com/watch?v=1Nilq-avNc4

You can create a variety of different applications with Rive for livestreams or broadcasts. This project can serve as a starting point and you're free to use it.

Development

Considerations: You could also make use of our macOS runtime, Web runtime or Flutter runtime to create a similar application. All you need to do is:

• Configure the application in such a way that you can trigger a Rive animation to play. This can be remotely, through some API, or by pressing a button or shortcut.
• Make the application window transparent (or make use of a Chroma key and set a color to key out).
• Setup your stream as demonstrated in the video.

Flutter is used for the web and macOS app in this sample, and Dart Frog is used for the web server. This project makes use of the Rive Flutter runtime to play back Rive animations. See our runtime documentation for information on how to integrate Rive for various platforms/runtimes.

This sample uses the flutter_acrylic package to make the window transparent. Adding Windows support should be possible.

Project Structure

The macOS and Web apps are located in the apps folder, the web server in the network folder, and shared Dart code lives in the packages directory.

Running Locally

ℹ️ At least Flutter v3.10 and Dart v3 is required. Run: flutter channel stable and flutter upgrade.

Steps to run the applications and server locally:

1. Make sure you have Flutter installed and working.
2. Install/Update Dart Frog: dart pub global activate dart_frog_cli
3. Clone this repository: git clone https://github.com/rive-app/rive_live
4. cd rive_live
5. Get dependencies: make get_all
6. Run everything locally: make run_local_all

This may take a while, especially the first time. Wait until the macOS app and web app is launched.

If you need to run the apps separately, or from a unique terminal, take a look at the Makefile for additional commands. Examples:

• Run web server: make run_local_web_server
• Run macOS app: make run_local_overlay_app
• Run web app make run_local_web_app

Build and Deploy

1. Build the web server: cd network && dart_frog build
2. See the Dart Frog deploy documentation for instructions and deploy to your preferred provider
3. Create a config.json (project root) and add the deployed URL

{
    "BASE_URL": "wss://YOUR-URL"
}

1. To run locally using deployed URL: make run_prod_web_app and make run_prod_overlay_app
2. To build: make build_overlay_app and make build_web_app
3. Distribute/Host the macOS and web app.

All of the commands live in the Makefile if you want to run them directly. For convenience you can also run make clean_and_build_all.

Local Storage

The Rive Live overlay app makes use of Isar to persist the configured Rive animation data. This package requires code generation when updating the storage models:

• apps/rive_overlay_app/lib/models/animations_data.dart