Mobile video chat, for your iOS and Android app

How to add no download video chat to your mobile app or pages with just a few lines of code, with the Daily.co video calling API

Our customers do millions of minutes of video calls each month across our supported platforms: Chrome on Android and Safari on iOS, desktop Chrome, Safari, Edge, and Firefox, and desktop Electron.

When people are getting started using our API, one of the most frequent questions we hear is, "how do I add video calls to my mobile app?" This post is an in-depth answer to that question!

Also, feel free to check out our [API calls demo](https://daily.co/api/demo) from your phone or tablet.

## Nothing to download, no libraries to bundle

Daily.co calls work inside web browsers. Users never need to download anything to join a call. And, as a mobile developer, you don't need to integrate a new library into your app to get started using Daily.co today.

Native mobile libraries for Daily.co calls are on our roadmap, but for now your best bet is to leverage our web offerings. By doing so, you'll have the most up-to-date video calling implementation available on each of our supported platforms, every time you start a video call. We take care of adding support for new platform features, working around bugs, and managing differences between platform versions.

## From web apps, link to or embed a Daily.co call

**If you are developing a mobile web app, you can either:**

1. Open a Daily.co meeting link like you would any other web page. This is an easy way to implement basic video call user flows, and to test that your meeting links are working. Or,

2. Embed the video call directly in your app UI. Embedding calls lets you use video calls in single-page applications (SPAs) or other situations where you need to completely control the user flow. Our [daily-js front-end library](https://github.com/daily-co/daily-js) is the recommended way to do this, as it lets you easily embed a call and customize the in-call experience.

**Opening a Daily.co link directly**

To open a meeting link for testing and prototyping, just make a simple `<a>` tag that points to one of your Daily.co rooms:

   -- CODE language-markup --
    <a href="https://your-domain.daily.co/a-room-you-created">start a video call</a>

**Embedding a Daily.co call in your page**

To integrate calls into your UI, use the `window.DailyIframe` object from the [daily-js](https://github.com/daily-co/daily-js) library to embed and start a call using a Daily.co meeting link. Here's a complete example.

    -- CODE language-markup --
   <html>
     <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>mobile example</title>
       <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
     </head>
     <body style="margin: 1em;">

       <!-- on mobile, unlike on desktop, you usually want to make your call
       frame take up almost all of the page. you'll want
       a "leave call" button on your parent page, but everything
       else you need is provided inside the default iframe Daily.co UI -->

       <button id="start-call" onclick="startCall()">start a video call</button>
       <div id="call-container"
         style="position: fixed;
         top: 1em; left: 1em;
         right: 1em; bottom: 1em;
         display: none;
         flex-direction: column;
         z-index: 1000;">
         <div style="flex: none">
           <button onclick="leaveCall()">Leave Call</button>
         </div>
         <div id="inner-container" style="flex-grow: 1;
           height: 100%;
           min-height: 300px">
         </div>
       </div>

       <script>
         let startButton = document.getElementById('start-call'),=
           callContainer = document.getElementById('call-container'),
         innerContainer = document.getElementById('inner-container'),
           callFrame = window.DailyIframe.createFrame(innerContainer);
         function startCall(url='https://your-domain.daily.co/a-room') {
           startButton.style.display = 'none';
           callFrame.join({ url: url });
           callContainer.style.display = 'flex';
         }
         function leaveCall() {
           callContainer.style.display = 'none';
           callFrame.leave()
           startButton.style.display = 'inline';
         }
       </script>
     </body>
   </html>

Of course, for a real application, you probably want to create rooms programatically, and maybe use [meeting tokens](https://docs.daily.co/reference#meeting-tokens) to manage room access and in-call features.

    -- CODE language-markup --
   <script>
     async function startCall2() {
       let roomInfo = await createNewRoom(),
         token = await getTokenForUser(),
         url = room.url + '?t=' + token;
       startCall(url);
     }
   </script>

For more information on creating and managing rooms, enabling features, and managing meeting access see our [REST API docs](https://docs.daily.co/reference) and [developer blog](https://www.daily.co/blog-developer).

The `createFrame()` method in our [front-end library](https://github.com/daily-co/daily-js) creates an `iframe` to display the video call, plus a javascript wrapper object. The wrapper object is an [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter), and delivers in-call events to the parent page. It also provides functions for controlling the state of the call. The user interface for the call is customizable with css and javascript. See the docs for more options.

## For Android native apps, just open a `WebView`

Daily.co video calls work great from within Android native `WebView`s. Your options here are the same as from a web app: you can either use a Daily.co meeting link directly or build and host your own call page embedding a Daily.co call. A page built with the above sample code will run unmodified inside an Android `WebView`.

If you're an experienced Android developer, you've probably used `WebView`s to display HTML content. Here are the [Android developer docs](https://developer.android.com/guide/webapps/webview).

If you're just getting started with Android development, and want to build a native app experience using web technologies, here's a nice tutorial about [building WebView-based Applications](https://developer.chrome.com/multidevice/webview/gettingstarted).

## For iOS native apps, present an `SFSafariViewController` or open Safari


**From your iOS app, you have two options for starting a Daily.co video call:**

1. Present an `SFSafariViewController` displaying your call page. This is the approach that will make the call feel most "native" to your app, but will only work on iOS 13 and above (WebRTC wasn't supported in `SFSafariViewController` before then).
2. Link to your call page and let Safari open it. This will always work, but is a rougher user experience since it requires opening another app as well as implementing some web code to jump back to your app when the call is over (more on that later).

Note that, in either case, you once again have the option of directly using a Daily.co meeting link or building and hosting a custom call page that embeds a Daily.co call.

**Presenting an `SFSafariViewController`**

The following Swift code runs in a view controller and creates, customizes, and presents an `SFSafariViewController`. Note that customization options are quite limited.

    -- CODE language-swift --
    // callURL is the URL to your call page, whether a Daily.co meeting link or your custom call page
   let callViewController = SFSafariViewController(url: callURL)
   callViewController.dismissButtonStyle = .close
   callViewController.preferredBarTintColor = .orange
   callViewController.preferredControlTintColor = .white
   present(callViewController, animated: true, completion: nil)

**Opening a link in Safari**

Here's Swift code to open your call page in Safari:

    -- CODE language-swift --
    UIApplication.shared.open(callURL)

To redirect back to your app after a call, your call page will either:

1. Close the tab when the call is finished. In most cases, this will return the user back to your app. (The exception is if the user has switched to a different application during the call, then back to the call.) Or,
2. Redirect back to your app using a [Custom URL Scheme](https://developer.apple.com/documentation/uikit/inter-process_communication/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app) or [Universal Links](https://developer.apple.com/documentation/uikit/inter-process_communication/allowing_apps_and_websites_to_link_to_your_content).

If you're using a standard Daily.co meeting link as your call page, you can set properties on your [meeting token](https://docs.daily.co/reference#meeting-tokens) to achieve either of the above:

- Set the `close_tab_on_exit` property to `true` to close the tab automatically when the call is finished.
- Set the `redirect_on_meeting_exit` property to your app's url to redirect back to your app when the call is finished.

If you're using a custom call page, you can:

- Call `window.close()` when the call is finished to close the tab.
- Call `window.location = "mycoolapp://"` when the call is finished to redirect back to your app.

## A note on Daily.co meeting URLs

If you're using a Daily.co basic call (meaning you haven't created the room programmatically using our REST API), then you can append the `autojoin=t` query parameter to the meeting URL to skip the join screen that appears by default, resulting in something like `https://your-domain.daily.co/a-room-you-created?autojoin=t`. This can make the experience a bit more seamless and "native"-feeling for your users.

## Testing on mobile devices

**For complete, working calls, you'll need to test on an actual, physical device, not in a simulator environment.**

Both Android Studio and Xcode have great software simulators for native apps. But the simulators don't have complete support for camera, microphone, and network media streaming features.

Generally, you can test call layouts and, in Xcode, receive audio and video. But you can't turn on your camera and mic, or send audio and video.

**Be particularly wary of the Chrome DevTools Device Mode.** All of the various device settings are broken, in some way, for video call testing! Chrome uses fake user agent strings, limits access to the camera and mic, and disables some UI and network features inside the responsive devices tool. If you want to test small screen sizes on your desktop, just make the standard Chrome window small. **Don't use the DevTools Device Mode.**

## More resources

Here are our [REST API reference docs](https://docs.daily.co/reference), and our [javascript front-end library](https://github.com/daily-co/daily-js).

If you're just getting started with video call API development, here's a [5-minute tutorial](https://www.daily.co/blog/embedded-video-calls-in-5-minutes-with-repl-it-and-daily-co).

And here's a more in-depth look at [creating and managing video call rooms](https://www.daily.co/blog/video-call-api-tutorial-the-rooms-family-of-endpoints), and [configuring rooms to be available only at specific times](https://www.daily.co/blog/video-call-api-tutorial-time-limits-for-rooms-and-meetings).

Recent posts