如何在 IOS 的 WebView 中实施 WebRTC

在本文中，我们将学习如何在 IOS 的 WebView 中实施 WebRTC。

在 IOS WebView 中实施 WebRTC

让我们一步步创建一个启用了 WebRTC 的简单应用程序，以便更好地了解如何在 IOS 的 WebView 中实施 Webrtc

打开 Xcode 并创建一个新应用程序，将其命名为 webrtcInWebviewTestApp，选择 Swift 和 Swift UI 作为首选语言。

步骤1：创建webrtc_in_webview_testApp

打开webrtcInWebviewTestApp文件并粘贴以下代码

import SwiftUI
import WebKit

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

struct WebView: UIViewRepresentable {
    var url: URL

    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

我们要做什么。首先，我们要导入 SwiftUI 和 WebKit。

Swift UI 是用于构建 IOS 用户界面的框架
WebKit 是一个提供 WWebView 类的框架，用于在应用程序中呈现网页内容

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

@main 属性表示应用程序的主入口点
webrtc_in_webview_testApp 结构表示我们正在构建的应用程序的结构和行为
Body 属性返回定义主用户界面的Scene
WindowGroup 是为应用程序用户界面提供窗口的场景。其中包含作为应用程序主视图的 ContentView。

WebView 结构

struct WebView: UIViewRepresentable {
    var url: URL

    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

UIViewRepresentable 协议用于将 WwebView 等 UIKit 视图集成到 Swift UI 中。

makeUIView(context:)

func makeUIView(context: Context) -> WKWebView {
    return WKWebView()
}

该方法创建并返回将在 SwiftUI 视图层次结构中使用的初始 WWebView 实例
context 参数提供有关 SwiftUI 视图当前状态和环境的信息
返回值是 WKWebView 实例

updateUIView(_:context)

func updateUIView(_ webView: WKWebView, context: Context) {
    let request = URLRequest(url: url)
    webView.load(request)
}

每当 SwiftUI 状态发生变化时，该方法就会使用新信息更新 WkWebView
webView 是由 makeUIView(context:) 创建的实例
Context 提供了有关视图环境的上下文信息

步骤 2：创建 ContentView 结构

打开 contentView 文件并粘贴以下内容

import SwiftUI

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://webrtc.github.io/samples/src/content/getusermedia/gum/")!)  // This is a sample WebRTC-based video chat service
            .edgesIgnoringSafeArea(.all)

    }
}

#Preview {
    ContentView()
}

导入 SwiftUI。

ContentView 结构及定义：

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://webrtc.github.io/samples/src/content/getusermedia/gum/")!)  // This is a sample WebRTC-based video chat service
            .edgesIgnoringSafeArea(.all)

    }
}

ContentView 结构定义了一个新的 SwiftUI 视图，名为ContentView

Body 属性：该属性是视图协议所必需的，用于描述视图内容和布局

URL 初始化：从字符串创建 URL 对象，您可以在此处指定任何 webrtc URL。末尾的感叹号 ! 用于强制解开可选的 url

edgeIgnoringSafeArea(.all) 用于忽略安全区域插入，从而允许其占据整个屏幕

步骤3：创建info.plist

如何创建info.plist文件

1）点击侧边栏上的appname

2）然后点击 info 按钮

3）然后点击 + 按钮来创建info.plist文件

创建一个新的 info.plist，右键单击 info.plist 并将其作为源代码打开，然后将以下代码粘贴到info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>

        <!-- Camera Usage Description -->
        <key>NSCameraUsageDescription</key>
        <string>This application requires camera access to facilitate video calls.</string>

        <!-- Microphone Usage Description -->
        <key>NSMicrophoneUsageDescription</key>
        <string>This application requires microphone access to facilitate audio exchange during video calls.</string>

        <!-- Location Usage Description (if needed for your application) -->
        <key>NSLocationWhenInUseUsageDescription</key>
        <string>This app needs access to location when open to provide location-based services.</string>

        <!-- Network Security Configuration -->
        <key>NSAppTransportSecurity</key>
        <dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
        </dict>

        <!-- Required background modes (if needed for keeping the app running in background) -->
        <key>UIBackgroundModes</key>
        <array>
            <string>audio</string>
            <string>fetch</string>
            <string>location</string>
        </array>

        <!-- Supported interface orientations -->
        <key>UISupportedInterfaceOrientations</key>
        <array>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
        </array>
    </dict>
    </plist>
</plist>

您需要创建 info.plist 文件，因为您需要向用户请求使用摄像头和 webrtc 应用程序的音频的权限。

我们在这里做什么？

我们要求用户授予摄像头和麦克风的权限。摄像头和麦克风描述中的字符串让用户知道我们为什么需要权限。

在本例中，要在网页中进行 webrtc 视频通话，因此我们要求获得权限。