|
| 1 | +--- |
| 2 | +ms.author: enricohuang |
| 3 | +title: Azure Communication Calling Web SDK in iOS WebView environment |
| 4 | +titleSuffix: An Azure Communication Services document |
| 5 | +description: In this quickstart, you'll learn how to integrate Azure Communication Calling WebJS SDK in an iOS WKWebView environment |
| 6 | +author: sloanster |
| 7 | +services: azure-communication-services |
| 8 | +ms.date: 01/13/2023 |
| 9 | +ms.topic: quickstart |
| 10 | +ms.service: azure-communication-services |
| 11 | +ms.subservice: calling |
| 12 | +--- |
| 13 | + |
| 14 | +iOS WKWebView allows you to embed web content seamlessly into your app UI. |
| 15 | +If you want to develop an ACS calling application on iOS, besides using the Azure Communication Calling iOS SDK, you can also use Azure Communication Calling Web SDK with iOS WKWebView. In this quickstart, you'll learn how to run webapps developed with the Azure Communication Calling Web SDK in an iOS WKWebView environment. |
| 16 | + |
| 17 | +## Prerequisites |
| 18 | +[!INCLUDE [Public Preview](../../../../includes/public-preview-include-document.md)] |
| 19 | + |
| 20 | +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F). |
| 21 | +- [XCode](https://developer.apple.com/xcode/), for creating your iOS application. |
| 22 | +- A web application using the Azure Communication Calling Web SDK. [Get started with the web calling sample](../../../../samples/web-calling-sample.md). |
| 23 | + |
| 24 | +This quickstart guide assumes that you're familiar with iOS application development. We'll mention the necessary configuration and tips when developing iOS WKWebView application for ACS Calling SDK. |
| 25 | + |
| 26 | +## Add keys in Info.plist |
| 27 | + |
| 28 | +To make a video call, make sure you have the following keys added to the Info.plist: |
| 29 | +```xml |
| 30 | +<?xml version="1.0" encoding="UTF-8"?> |
| 31 | +<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> |
| 32 | +<plist version="1.0"> |
| 33 | +<dict> |
| 34 | + <key>NSMicrophoneUsageDescription</key> |
| 35 | + <string>Camera access is required to make a video call</string> |
| 36 | + <key>NSCameraUsageDescription</key> |
| 37 | + <string>Microphone access is required to make an audio call</string> |
| 38 | +</dict> |
| 39 | +</plist> |
| 40 | +``` |
| 41 | + |
| 42 | +## Handle permission prompt |
| 43 | +On iOS Safari, users can see permission prompt more frequent than on other platforms. It is because Safari doesn't keep permissions for a long time unless there's a stream acquired. |
| 44 | + |
| 45 | +WKWebView provides a way to handle browser permission prompt by using [WKUIDelegate.webView](https://developer.apple.com/documentation/webkit/wkuidelegate/3763087-webview). This API is only available on iOS 15.0+. |
| 46 | + |
| 47 | +Here's an example. In this example, the browser permission is granted in `decisionHandler`, so users won't see browser permission prompt after they grant the app permissions. |
| 48 | + |
| 49 | +```swift |
| 50 | +import WebKit |
| 51 | +import SwiftUI |
| 52 | + |
| 53 | +struct WebView: UIViewRepresentable { |
| 54 | + private(set) var url: URL |
| 55 | + private var webView: WKWebView |
| 56 | + |
| 57 | + init(url: String) { |
| 58 | + self.url = URL(string: url)! |
| 59 | + |
| 60 | + let prefs = WKWebpagePreferences() |
| 61 | + prefs.allowsContentJavaScript = true |
| 62 | + prefs.preferredContentMode = .recommended |
| 63 | + |
| 64 | + let configuration = WKWebViewConfiguration() |
| 65 | + configuration.defaultWebpagePreferences = prefs |
| 66 | + configuration.allowsInlineMediaPlayback = true |
| 67 | + configuration.mediaTypesRequiringUserActionForPlayback = [] |
| 68 | + let webView = WKWebView(frame: CGRect(), configuration: configuration) |
| 69 | + self.webView = webView |
| 70 | + } |
| 71 | + |
| 72 | + class Coordinator: NSObject, WKUIDelegate { |
| 73 | + let parent: WebView |
| 74 | + init(_ parent: WebView) { |
| 75 | + self.parent = parent |
| 76 | + } |
| 77 | + func webView(_ webView: WKWebView, requestMediaCapturePermissionFor origin: WKSecurityOrigin, initiatedByFrame frame: WKFrameInfo, type: WKMediaCaptureType, decisionHandler: @escaping (WKPermissionDecision) -> Void) { |
| 78 | + decisionHandler(WKPermissionDecision.grant) |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + func makeCoordinator() -> Coordinator { |
| 83 | + Coordinator(self) |
| 84 | + } |
| 85 | + |
| 86 | + func makeUIView(context: Context) -> WKWebView { |
| 87 | + return webView |
| 88 | + } |
| 89 | + |
| 90 | + func updateUIView(_ uiView: WKWebView, context: Context) { |
| 91 | + uiView.uiDelegate = context.coordinator |
| 92 | + uiView.load(URLRequest(url: self.url)) |
| 93 | + } |
| 94 | +} |
| 95 | +``` |
| 96 | + |
| 97 | + |
| 98 | +## WebView configuration |
| 99 | +Azure Communication Calling Web SDK requires JavaScript enabled. |
| 100 | + |
| 101 | +`allowsInlineMediaPlayback` is also required to be `true`. |
| 102 | + |
| 103 | +```swift |
| 104 | +let prefs = WKWebpagePreferences() |
| 105 | +prefs.allowsContentJavaScript = true |
| 106 | +prefs.preferredContentMode = .recommended |
| 107 | + |
| 108 | +let configuration = WKWebViewConfiguration() |
| 109 | +configuration.defaultWebpagePreferences = prefs |
| 110 | +configuration.allowsInlineMediaPlayback = true |
| 111 | +let webView = WKWebView(frame: CGRect(), configuration: configuration) |
| 112 | +``` |
| 113 | + |
| 114 | +## Known issues |
| 115 | + |
| 116 | +### Microphone is muted when app goes to background |
| 117 | +When a user locks the screen or WkWebView app goes to background, the microphone input will be muted until the app comes back to foreground. |
| 118 | +This is iOS WkWebView system behavior, and the microphone isn't muted by ACS Calling Web SDK. |
| 119 | + |
| 120 | +### Connection drops soon after the app goes to background |
| 121 | +This is also iOS app behavior. When we switch to other audio/video app, the connection will drop around 30 seconds later. |
| 122 | +This isn't a problem if the app only stays in background for a short time. When the app comes back to foreground, the call will recover. |
| 123 | +If the app stays in background for a longer period, the server will think the user is away and remove the user from the participants list. |
| 124 | +In this case, when the user switches the WkWebView app back to foreground, the call will disconnect and won't recover. |
0 commit comments