Adding Video Calling to a Remix App Using the Agora Web UIKit

Remix is a full-stack web framework based on React that leverages distributed systems for deployment. What makes Remix special is how it loads data from the server and pre-renders your web pages.

This can be a bit strange when coming from a client-only framework like React. We’ll use the server to generate tokens from our secret credentials and use them in the Agora Web UIKit, a client-side library

Prerequisites

• An Agora developer account (It’s free, sign up here!)
• Node.js LTS
• A high-level understanding of React

Setup

Create a new Remix project

You can find the finished project on GitHub. To follow along here, create your own Remix project. Open a terminal and execute npx create-remix@latest demo. Select the following options to get a basic app template with TypeScript:

❯ npx create-remix@latest demo
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Remix App Server
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes

Enter the project directory by typing cd demo. Install the Agora Web UIKit and token library by executing:

npm i agora-react-uikit agora-access-token

Note:At the time of writing, the current agora-react-uikit release is v1.1.0.

Setting up the Agora credentials

1. Once you have an Agora account, click the Project Management tab in the console.
2. Click the Create button.
3. Enter a name for your project.
4. Select Secured Mode while creating the project.
5. Rename the .env.example file to .env.
6. Copy your App ID and the App Certificate from the Agora project page like so:

APP_ID=c0cXXXXXXXXXXX
CERTIFICATE=c18XXXXXXXXXXX

That’s the setup. You can now execute npm run dev to start the Remix server on localhost:3000

Project Structure

The template structure looks like this:

├── app
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root.tsx
│   └── routes
│       └── index.tsx
├── package.json
├── public
│   ...

Let’s Code

A powerful feature of Remix is nested routes. We’ll create a dynamic route for video calls. You’ll have example.com/channel/<channelName>, where users entering the same <channelName> can communicate with each other. The route generates and hosts the token from our Agora credentials. You can limit access to the /channel route for authenticated users — adding a layer of security.

By using Remix with the Agora Web UIKit, you can go to production in minutes!

Creating the Dynamic Route

To host dynamic video calls on example.com/channel/<yourChannelName>, we’ll create a new file for that route /app/routes/channel/$channel.tsx:

To generate props for the video call component, we’ll create a loader function that generates the RTC and RTM token using the App ID and Certificate from our .env file. We get the route channel name from the params prop. We create a JSON string from this data object to return from the loader function:

Now, let’s create a React component for the channel route. We’ll use a state variable called mounted that is set to true inside a useEffect hook. This lets us render the Videocall component only when the file is being rendered inside a browser. We can get the jsonData using the userLoaderData hook from Remix. We will extract the values from our object and pass them to a component called Videocall. Finally, we’ll return some JSX to render a <Videocall> component that we’ll create next.

The Video Call component

Create a new file /app/components/videocall.client.tsx to create the video call using the Agora Web UIKit:

We’ll access the data props that we passed to this component and pass them to the <AgoraUIKit> component. This component takes care of all the logic for your video call. No other code is needed. You can read more about how you can customize the design and functionality (for example, you can use it for live-streaming) in this blog post.

Navigate to localhost:3000/channel/test to view your video call UI. You can open this address in a separate tab to simulate a video call and test things out.

Conclusion

If you have questions while using this project or the Agora Web UIKit, I invite you to join the Agora Developer Slack community, where you can ask them in the #web-help-me channel.

Feel free to open pull requests for feature requests or create issues to report bugs on GitHub for this Remix demo or for the UIKit. We look forward to your contributions. We also have similar UIKits for Android, iOS, React Native, and Flutter, so be sure to check those out as well.