iOS

iOS integration

Below you can find the code sample for integrating the WebView into and iOS application.

Integrating the ContentView into a Native SwiftUI Application

The ContentView struct in ContentView.swift is a SwiftUI View that hosts a WebView in a TabView. Here's a breakdown of the key components:

WebView Struct

The WebView struct is a UIViewRepresentable that wraps a WKWebView. It takes a URL and a Binding to a Bool for reloading the web view.

struct WebView: UIViewRepresentable {
    let url: URL
    @Binding var reload: Bool
    ...
}

WebsiteView1 Struct

WebsiteView1 is a SwiftUI View that hosts a WebView. It also includes a button for reloading the web view.

struct WebsiteView1: View {
    @State private var reload: Bool = false
    ...
}

ContentView Struct

The ContentView struct is a SwiftUI View that hosts a TabView with WebsiteView1.

struct ContentView: View {
    var body: some View {
        TabView {
            WebsiteView1()
                .tabItem {
                    Label("FAN View", systemImage: "1.square.fill")
                }
        }
    }
}

To integrate this ContentView into a native SwiftUI application, developers would need to include this view in their application, ensure the necessary WebView and WebsiteView1 structs are available, and adjust the URL and tab name as needed.

Full code for ContenView.swift:

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL
    @Binding var reload: Bool

    func makeUIView(context: Context) -> WKWebView {
        let webViewConfiguration = WKWebViewConfiguration()
        webViewConfiguration.allowsInlineMediaPlayback = true
        webViewConfiguration.mediaTypesRequiringUserActionForPlayback = []


        let webView = WKWebView(frame: .zero, configuration: webViewConfiguration)
        webView.load(URLRequest(url: url))
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        if reload {
            uiView.reload()
        }
    }
}

struct WebsiteView1: View {
    @State private var reload: Bool = false
    var body: some View {
        VStack {
            Button(action: {
                reload.toggle()
            }){
                Image(systemName: "arrow.clockwise")
                    .resizable()
                    .frame(width: 20, height: 20)
            }
            .padding()
            WebView(url: URL(string: ""<<url to the relevant template>>")!, reload: $reload)
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            WebsiteView1()
                .tabItem {
                    Label("FAN View", systemImage: "1.square.fill")
                }
        }
    }
}

Entry point for the ContentView:

To start your SwiftUI application you need some entry point. It hosts the ContentView which in turn hosts a WebView in a TabView. Here's a breakdown of the key components: The cdn_uiApp struct is the main entry point of your SwiftUI application. It defines the scene-based life cycle with the @main attribute and contains the body property which returns a Scene.

@main
struct cdn_uiApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

In the body property, a WindowGroup is created which will automatically create a new window for each platform your app supports. Inside this WindowGroup, the ContentView is initialized.

Permissions

To allow a WebView application based on WebRTC to work properly, you have to provide privacy permissions in your .xcodeproj file for the camera and microphone

The following permissions are required to enable WebView to work fully. If you prefer to only have a viewing experience, then you might skip these permissions