LogoLogo
WherebyStatusCommunity
  • 📹Whereby 101
    • Create Your Video Experience
      • Get started in 3 steps
      • Embedding Whereby in a web app
        • Using Whereby's Web Component & Pre-built UI
          • Script Tags
          • With Low Code
            • Embedding in Squarespace or Wordpress
            • No code video conferencing in Bubble
        • Using Whereby's Browser SDK with React Hooks for a fully custom UI
      • Embedding Whereby in a mobile app
        • Embedding Whereby in iOS
          • Using Whereby's Native iOS SDK
        • Embedding Whereby in Android
          • Using Whereby's Native SDK
        • Using Flutter
        • Using React Native
      • Github SDK Examples
      • Meeting scheduling with Cronofy
    • Generating Room URLs
      • Name prefixes
      • Using “Create a room”
      • Using Postman
    • Customize Your Video Experience
      • During room creation
      • Using Attributes/URL Params
      • Global preferences
      • Branding elements
      • Dial-In
      • File sharing
      • Breakout Groups with Embedded
      • Waiting Rooms
    • User roles & Meeting Permissions
    • FAQ
      • Accessibility
      • Whereby Words
      • Firewall & Security
      • HIPAA compliant setup
      • Allowed Domains & Localhost
      • Whereby Embedded Feature Comparison
  • 🔍Meeting Content & Quality
    • Recording
      • Cloud Recording
      • Local Recording
    • Transcribing
      • Session Transcription
      • Recording Transcription
    • Live Captions
    • Session summaries
    • Live streaming RTMP
    • Quality Insights
      • Real-time troubleshooting
      • Using the Insights dashboard
      • Improving call quality
      • Tracking room events with Webhooks
  • 🤷End User
    • End User Support Guides
      • Supported Browsers & Devices
      • Screen Sharing Setup & Usage
      • Using Breakout Groups
      • Troubleshooting & Basics
  • 🚚Developer Guides
    • Quickly deploy Whereby to your domain
    • Tracking Customer Usage
    • Migrating from Twilio
      • Twilio JS SDK Quick Migration
      • Twilio JS SDK Direct Migration
  • 🖥️Reference
    • REST API Reference
      • /meetings
      • /insights
      • /recordings
      • /transcriptions
      • /summaries
      • /rooms
    • Web Component Reference
    • React Hooks Reference
      • Quick Start
        • Getting started with the Browser SDK
      • Guides & Tutorials
        • Migrate from version 2.x to 3
        • Grid logic
        • Custom Video Tiles with React
        • Usage with Next.js
        • How to customize the toolbar
      • API Reference
        • WherebyProvider
        • VideoView
        • VideoGrid
        • useLocalMedia
        • useRoomConnection
      • Types
    • React Native Reference
      • Quick Start
      • WherebyEmbed
    • Webhooks Reference
Powered by GitBook
On this page
  • Permissions
  • WKWebView (WebKit)
  • SFSafariViewController
  • Redirect to browser
  • Handling multiple iOS versions

Was this helpful?

Edit on GitHub
  1. Whereby 101
  2. Create Your Video Experience
  3. Embedding Whereby in a mobile app

Embedding Whereby in iOS

Below are the recommended approaches to embed Whereby in a native iOS app using a WebView.

Last updated 1 month ago

Was this helpful?

WebViews are powerful built-in components that allow loading URLs within a native app. When embedding Whereby, depending on your implementation, you can use the following types of URLs:

  • A Whereby room URL (which takes the user directly to the Whereby pre-call screen).

  • A custom web app that embeds Whereby using the Embedded element.

  • A React app that embeds Whereby with the React Hooks SDK.

This solution is based on Whereby Web, which provides advanced tools such as integrations and breakout groups. However, we also offer a native iOS SDK that allows you to customize the user experience in your iOS app. With the iOS SDK, you can create custom iOS UIButtons and UIViews, send commands to the room, and listen to room events to implement custom callbacks.

Permissions

Ensure the following permissions are declared in your Info.plist file:

  • NSMicrophoneUsageDescription -

  • NSCameraUsageDescription -

  • NSPhotoLibraryUsageDescription - (for file sharing)

  • NSPhotoLibraryAddUsageDescription - (for file sharing)

WKWebView (WebKit)

supports embedding pages that use WebRTC from iOS 14.5 onwards. Below is a basic example of how to implement a WKWebView.

import WebKit

class WKWebViewController: UIViewController, WKNavigationDelegate {

    public var roomUrlString = "" // Replace by your own
    private var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true
        webView = WKWebView(frame: view.frame, configuration: config)
        webView.navigationDelegate = self
        view = webView
        guard let roomUrl = URL(string: roomUrlString) else {
            return
        }
        webView.load(URLRequest(url: roomUrl))
    }
}

This is a minimal implementation that sticks to the default behavior of WKWebView. It is recommended to extend the configuration by implementing delegate methods to improve the user experience. For example, you can:

  • Avoid repeated media permission prompts.

  • Enable and manage file sharing.

  • Handle external link redirections.

SFSafariViewController

import SafariServices

class ViewController: UIViewController, SFSafariViewControllerDelegate {

    public var roomUrlString = "" // Replace by your own
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        guard let roomUrl = URL(string: roomUrlString) else {
            return
        }
        let safariVC = SFSafariViewController(url: roomUrl)
        safariVC.delegate = self
        present(safariVC, animated: true)
    }
}

Redirect to browser

Redirect to a browser (Safari by default) for iOS versions lower than 14.3:

import UIKit

class ViewController: UIViewController {

    public var roomUrlString = "" // Replace by your own
    
    override func viewDidLoad() {
        super.viewDidLoad()
        guard let roomUrl = URL(string: roomUrlString),
            UIApplication.shared.canOpenURL(roomUrl) else {
            return
        }
        UIApplication.shared.open(roomUrl)
    }
}sw

Handling multiple iOS versions

Here is an example on how to handle different solutions, depending on the iOS version:

if #available(iOS 14.5, *) {
    // Use WKWebView
} else if #available(iOS 14.3, *) {
    // Use SFSafariViewController
} else {
    // Redirect to browser app
}

When the app is sent to background, the camera is disabled. If you need the microphone to continue working while the app is in the background, we recommend redirecting to Safari app.

For a complete example, check out our public repository: .

For iOS 14.3 and 14.4, use to open a website containing an iframe with its src specified as a Whereby room, alongside a custom user interface:

To use Whereby with Cordova (Phonegap) please use the plugin for

📹
Read more
Microphone Access
Camera Access
Photo Library Access
Photo Library Additions
WKWebView
ios-webview-demo
SFSafariViewController
SafariViewController