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 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.

This means that you always 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, just open a Daily.co meeting link

**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 in an `iframe` within your app UI. Embedding calls lets you use video calls in "single page web apps," or any other situation where you need to completely control the user flow. Additionally, with the help of our [front-end library](https://github.com/daily-co/daily-js) you can completely customize the in-call user interface.

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>
   

To integrate calls into your UI, create an `iframe` and set its `src` to point to 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 inside Android native WebViews. You can open a Daily.co meeting link directly. Or, you can build an embedded, customized, iframe-based UI. All the sample code above will run unmodified inside an Android native WebView.

If you're an experienced Android developer, you've probably used WebViews 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, open in Safari

Testing video call links in X Code (but see note below about simulator limitations)

Daily.co video calls work great in Safari, but Apple doesn't yet allow access to the camera and mic inside WkWebView. So for iOS native apps, you'll need to open video calls in Safari, not in WkWebView.

You can open a call in Safari, then redirect back to your app when the call is over.

Here's Swift code to open a meeting link in Safari:

   -- CODE language-c --
   UIApplication.shared.open(URL(string:
     "https://your-team.daily.co/3NGxfjSTmdq3hWhmqlM5")! as URL,
     options: [:], completionHandler: nil)

To redirect back to your app, you can 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).

To close video call tabs automatically whenever a meeting ends, you can use a [meeting token](https://docs.daily.co/reference#meeting-tokens) with the `close_tab_on_exit` property set to `true`.

If you need to close a tab manually, the javascript `window.close()` method will do the trick.

To redirect back to your app, you can use a [meeting token](https://docs.daily.co/reference#meeting-tokens) with the `redirect_on_meeting_exit` property set to a url. Or you can do the redirect in javascript:

    -- CODE language-js --
    // example redirect to the Apple Maps app
    window.location = 'maps://';
    window.close();

## 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 X Code 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 X Code, 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