Using Daily’s video chat API with Anvil
Tags: python, webdev, programming, tutorial
Published: 2021-08-16 16:58:35

# Adding video calls to your app with a few lines of code

[Daily](https://www.daily.co/)'s API lets you add real time video calls to any app with just a few lines of code. [Anvil](https://anvil.works) makes it easy to build web apps entirely in Python -- no Javascript required. In this post, I'm going to show you how to use them together and show you how to get started with Daily's API.

**We're going to build an app that lets your users join a video call.** You could integrate it with anything -- communication for web based games, video-based collaboration software, or live customer support. (Click here to [see some examples](/learn/examples) of apps you can build with Anvil.)

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r672qnisco7wqgg5o93x.gif" alt="Daily call being started"><figcaption>Daily call being started</figcaption>
</figure>




> Wait -- isn't Daily a JavaScript API? That's right, but with Anvil **you can import Javascript libraries into your Python front end**. How? Read on...

---

## Create a form to join video calls

### Creating an app

Creating web apps with Anvil is simple. We'll create one to get started.

[Log in](/login) to Anvil and click 'New Blank App'. Choose the Material Design theme.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcgffasp5kms9cudr6v5.png" alt="Location of the Create App button"><figcaption>Location of the Create App button</figcaption>
</figure>

---

### Creating a UI

We need a form with a text box to enter the name of our meeting room and buttons to start and stop the call. Our finished form will look something like this:

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzig21hd475u4cfx9sc4.png" alt="Finished call form"><figcaption>Finished call form</figcaption>
</figure>

We construct the form by dragging-and-dropping [components](/docs/client/components). Let's start by dropping a Card into our form. Then drag a [TextBox](https://anvil.works/docs/client/components/basic#textbox) into the Card and, in the properties panel on the right, change the name of the component to `room_name_textbox`.

Underneath the TextBox, drag and drop two [Buttons](https://anvil.works/docs/client/components/basic#button). Change the first Button's name to `start_call_button` and its text to `Start call`. Change the second Button's name to `end_call_button` and its text to `End call`.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziz2gc4gqg4xpxjcj436.gif" alt="Building our call form"><figcaption>Building our call form</figcaption>
</figure>


That's it! Our user interface is finished.

---

## Using the Daily API

### Creating a Daily video call room

We need to create a video call room our Anvil app users can join.

Let's do this by going to [https://dashboard.daily.co/rooms](https://dashboard.daily.co/rooms), clicking `Create room` and giving our room a name.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0o4tiyimjkds47359vmo.gif" alt="Creating a room"><figcaption>Creating a room</figcaption>
</figure>

> For more information on creating rooms, Daily has a useful guide [here](https://docs.daily.co/docs/experiment-in-the-dashboard#step-by-step-guide-create-a-daily-room-url-from-the-dashboard).

---

### Importing the Daily API library

To import Daily's library, navigate to our app's [Native Libraries](https://anvil.works/docs/client/javascript#using-native-javascript-libraries) and add the following line of code:

{% gist https://gist.github.com/ryan-britnell/5a2370c04b2555cdeb2aec526de43349 %}

---

### Starting a call

Anvil lets you import and use JavaScript functions in Python code - handling all the conversion for you. Let's write the code our user interface needs to start a call.

Navigate back to our `Form1` and, at the top of our Form's [Code View](https://anvil.works/docs/editor#code-view), import the [`DailyIframe` class](https://docs.daily.co/reference#the-dailyiframe-class).

{% gist https://gist.github.com/ryan-britnell/ccc3e40eb5add02feba8dcdbfef8513b %}

Then, back in the Form's [Design View](https://anvil.works/docs/editor#design-view), create a click event handler for our `start_call_button`.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oeuntx39cc0xfjog1og.gif" alt="Adding a click event to our 'Start call' button"><figcaption>Adding a click event to our 'Start call' button</figcaption>
</figure>

The `start_call_button_click` function will be called every time the button is clicked. In the function, we'll check if the user has entered a room name and then create an instance of a `DailyIframe` called `call_frame`. Then, we'll call the `DailyIframe`'s [`join()`](https://docs.daily.co/reference#%EF%B8%8F-join) method, passing it our meeting room link plus the `room_name` as a parameter.

*(Replace `'https://your-team.daily.co/'` with your own meeting room link, which you can find in your [Daily dashboard](https://dashboard.daily.co/).)*

{% gist https://gist.github.com/ryan-britnell/7cdf7f9f8bc1edfbfc920302c14dd2be %}

### What if that room doesn't exist?

If the specified room doesn't exist, the `join()` method will throw an exception. We can catch this the usual way, with a [`try`](https://docs.python.org/3/tutorial/errors.html#handling-exceptions) block. Then we'll use Anvil's [`alert()`](https://anvil.works/docs/client/python/alerts-and-notifications) function to pop up a dialog:.

{% gist https://gist.github.com/ryan-britnell/d265029e21cfb101b8f66bacc3ddfa8a %}

That's our start call functionality finished. Let's write the functionality that will end the call.

---

### Ending a call

When the user clicks "End Call", we want to end the call, by calling the `DailyIframe`'s [`leave()`](https://docs.daily.co/reference#%EF%B8%8F-leave) and [`destroy()`](https://docs.daily.co/reference#%EF%B8%8F-destroy) methods.

Like we did with `start_call_button`, create an event handler function for `end_call_button` called `end_call_button_click`. Then call those methods:

{% gist https://gist.github.com/ryan-britnell/0af92ed9ec4b9a132dc89c86051b7a52 %}

Great work! Our app's users can now enter the name of the meeting they want to join, start and end the call all without ever leaving your Anvil app.

---

## That's it!

We've just created a web app with nothing but Python; integrated it with Daily, and had it start a video call with the click of a button. Pretty cool, huh?

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r672qnisco7wqgg5o93x.gif" alt="Daily call being started"><figcaption>Daily call being started</figcaption>
</figure>

### Clone the App

For those of you who want to see the finished source code for this app:

[See the finished app](https://anvil.works/build#clone:PGXAZV7D53UI5FCJ%3d6VO4CP4AGJI4LHMCURXCYN2R)

---

## New to Anvil?

If you're new to Anvil, welcome! [Anvil](https://anvil.works/) is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just **build it all in Python**.

Yes – Python that [runs in the browser](/docs/client/python). Python that [runs on the server](/docs/server). Python that [builds your UI](/docs/client). A [drag-and-drop UI editor](/docs/client/ui). Anvil even has a built-in [Python database](/docs/data-tables), in case you don’t have your own.

Why not have a play with the app builder? **It's free!** Click here to get started:

[Get building](https://anvil.works/build)

---

Want to try a 5 minute tutorial? Try the [Feedback Form tutorial](https://anvil.works/learn/tutorials/feedback-form).