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>
   </head>
   <body style="margin: 1em;">
   
   <!-- on mobile, unlike on desktop, you usually want to make an
        iframe that takes 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">
       <iframe id="call-frame"
               allow="camera; microphone; autoplay"
               style="width: 100%;
                      height: 100%;
                      border: 0;
                      background-color: grey">
       </iframe>
     </div>
   </div>
   
   <script>
   let startButton = document.getElementById('start-call'),
       callContainer = document.getElementById('call-container'),
       callFrame = document.getElementById('call-frame');
   function startCall(url='https://your-domain.daily.co/a-room') {
     startButton.style.display = 'none';
     callFrame.src = url;
     callContainer.style.display = 'flex';
   }
   function leaveCall() {
     callContainer.style.display = 'none';
     callFrame.src = '';
     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).

You can also use helper methods in our [front-end library](https://github.com/daily-co/daily-js) to create the `iframe`, 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.

   -- CODE language-markup --
   <!-- load the daily-js library in <head> -->
   <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
   
   <!-- don't create your own iframe in the HTML. call the
        window.dailyIframe.createFrame() factory method and
        pass it a parent element for an iframe that it will
        create for you -->
   <script>
   let startButton = document.getElementById('start-call'),
       callContainer = document.getElementById('call-container'),
       callFrame;
   async function startCall(url='https://your-domain.daily.co/hello') {
     startButton.style.display = 'none';
     if (!callFrame) {
       callFrame = window.callFrame = window.DailyIframe
             .createFrame(document.getElementById('inner-container'));
     }
     // join the call
     await callFrame.join({ url });
     // print out to the console information about all the participants
     // in the call
    console.log('participants', callFrame.participants())
     callContainer.style.display = 'flex';
   }
   function leaveCall() {
     callContainer.style.display = 'none';
     callFrame.leave();
     startButton.style.display = 'inline';
   }
   </script>

## 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:

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