Ant Media 的WebRTC iOS SDK 让您可以构建自己的 iOS 应用程序,只需几行代码即可发布和播放 WebRTC 广播。

在本文档中,我们将介绍以下主题。

运行示例 WebRTC iOS 应用程序

**从您的 iPhone 发布流

在 iPhone 上播放流媒体

与您的 iPhone 进行 P2P 通信

开发 WebRTC iOS 应用

如何发布

怎么玩

如何使用数据通道

运行示例 WebRTC iOS 应用程序

下载 WebRTC iOS SDK**

WebRTC iOS SDK 和 WebRTC Android SDK 可以免费下载。您可以通过 antmedia.io](https://antmedia.io/free-webrtc-android-ios-sdk/)上的[这个链接访问它们。如果您是企业用户,也可以在“我的帐户”页面的订阅部分下载。无论如何,下载 SDK 后,您只需解压缩文件并使用 Xcode 打开项目即可。

安装依赖

打开您的终端并转到参考项目所在的目录并运行 pod install 。如果您不熟悉 pod,请访问 cocoapods.org 获取文档和安装。

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // cd /go/to/the/directory/where/you/unzip/the/SDK pod install

这将为 WebSocket 连接安装 Starscream 数据包。

在 Xcode 中打开并运行项目

在您的 MacOS 中打开 Xcode,如果您没有在列表中看到示例项目,请单击打开另一个项目。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--2ge8cPWm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/6juzjp0hb8ny2ho7jxzp.png)

转到您下载并解压缩 iOS SDK 的目录。打开 AntMediaReferenceApplication.xcworkspace 文件

[](https://res.cloudinary.com/practicaldev/image/fetch/s--3EIRsM6J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/6h863hl0ue349nmctgjc.png)

打开项目后,将你的 iPhone 连接到你的 Mac 并在 Xcode 中选择你的 iPhone,如下所示。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--rjUFkPT---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to -uploads.s3.amazonaws.com/i/isg0tvtwgmqrpq9dsvnx.png)

单击 Xcode 左上角的 Run 按钮。然后将构建项目并将其部署到您的 iPhone。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--9jI0kdO---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to -uploads.s3.amazonaws.com/i/yjlxmgx3zszfcggpi0sy.png)

从您的 iPhone 发布流

点击发布按钮,然后点击 iPhone 中连接按钮下的设置服务器 IP。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--9G36D_U_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/q6n6rrzd42ujmasxif5b.png)

编写您的 Ant 媒体服务器的完整 WebSocket URL,然后点击保存按钮。它的格式是这样的

ws://192.168.7.25:5080/WebRTCAppEE/websocket

如果将 SSL 安装到 Ant Media Server,还可以使用

wss://your_domain_address:5443/WebRTCAppEE/websocket.

[](https://res.cloudinary.com/practicaldev/image/fetch/s--9_YCdrr---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to -uploads.s3.amazonaws.com/i/9g0xcfky8mndtyx3e38f.png)

将流 ID 设置为其他任何值,然后设置“stream1”并点击主屏幕上的“连接”按钮。然后它会要求您访问相机和麦克风。允许 Camera 和 Mic 访问后,流将发布到 Ant Media Server 上。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--wjPXGZB4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/g63vgmxbrhue40lpq6l9.png)

然后它将开始发布到您的 Ant 媒体服务器。您可以前往 Ant Media Server 的 Web 面板(http://server_ip:5080)并在那里观看流媒体。您也可以通过https://your_domain:5443/WebRTCAppEE/player.html快速播放流

在 iPhone 上播放流

在 iPhone 上播放流媒体与发布几乎相同。在播放之前,请确保有一个流并且它正在被发布到您的文本框中具有相同流 id 的服务器(您可以通过以下方式快速发布到 Ant Media Server

https://your_domain:5443/WebRTCAppEE)。对于我们的示例,下图中的流 id 仍然是“stream1”。然后你只需要点击“播放”按钮并点击“连接”按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--x-4Eo6mb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/i/m5l6mnb6ays8cgmcuphx.png)

点击“连接”按钮后,流将开始播放。

与您的 iPhone 进行 P2P 通信

WebRTC iOS SDK 也支持P2P 通信。如您所料,只需点击“P2P”,然后点击“连接”按钮。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--D23YiSQM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/2rfbc2mpjfybwsqmntfk.png)

当有另一个对等点通过 Android、iOS 或 Web 连接到相同的流 id 时,将建立 P2P 通信,对等点可以相互通信。您可以通过https://your_domain:5443/WebRTCAppEE/peer.html快速连接到相同的流 id

开发WebRTC iOS应用

我们强烈建议使用示例项目来开始您的应用程序。不过,了解依赖关系及其工作原理是件好事。现在我们将讲述如何使用 WebRTC iOS SDK 从头开始创建 WebRTC iOS 应用程序。让我们开始吧。

创建Xcode项目

打开 Xcode 并创建一个项目。从模板中选择 Single View App。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--X5kYWndx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/pn5y8ewz0jxg2wjyt6wg.png)

在下面将您的项目命名为“WebRTCiOSApp”

[](https://res.cloudinary.com/practicaldev/image/fetch/s--aTDx2EQu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/ua37j24x7h3ydqqxlfu6.png)

打开终端并转到创建项目的目录并进行 pod 安装。您可以在 cocoapods.org 上了解有关 pod 的更多信息

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // cd /go/to/the/directory/where/you/create/the/project pod init

Podfile 应该在运行 pod init 之后创建。打开 thePodfile,粘贴以下内容并保存。

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` target 'WebRTCiOSApp' do # Comment the next line if you don't want to use dynamic frameworks use_frameworks! # Pods for WebRTCiOSApp pod 'Starscream', '~> 3.1.1' end

运行以下命令进行 pod 安装

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` pod install

关闭 Xcode 项目并在 Xcode 中打开 WebRTCiOSApp.xcworkspace

[](https://res.cloudinary.com/practicaldev/image/fetch/s--uNgMhmqe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/yneums28nnhecyu08oh8.png)

将项目目标设为 iOS 10

[](https://res.cloudinary.com/practicaldev/image/fetch/s--H8jFBoiu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/k34nfp0q92hep7kvcatl.png)

禁用位码

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KYA7Z1Bp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/xue6dpfo1vvofpdkg0xi.png)

将 WebRTC.framework 和 WebRTCiOSSDK.framework 文件夹复制到您的项目目录。

WebRTC.Framework:在WebRTCiOSReferenceProject下直接可用

WebRTCiOSSDK.Framework:是WebRTC iOS SDK的二进制框架版本。它是在 WebRTCiOSReferenceProject 目录下运行 ./export_fat_framework.sh 后创建的。然后它将在 Release-universal 目录下准备就绪。或者,您可以直接将 WebRTC iOS SDK 的源代码导入您的项目。

将 WebRTC.framework 和 WebRTCiOSSDK.framework 嵌入到您的项目中。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--X7F0EOMe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/f851nnin0gid636jhrdq.png)

在左下角即将出现的窗口中选择“添加其他人”,然后选择“添加文件”。然后添加 WebRTC.framework 和 WebRTCiOSSDK.framework。完成后,应该如下图所示。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--QeSh9uoq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/u98il94bp99d20if6v04.png)

尝试构建并运行应用程序。如果您遇到一些错误,例如某些方法仅在某些 iOS 版本中可用。使用@available 注解。您可以在这篇文章中获得有关此的更多信息

如何发布

创建一个 UIView 并向您的 StoryBoard 添加一个 Button。这只是简单的 iOS App 开发,这里不再赘述。您可以在 Internet 上获得很多关于此的教程。

添加麦克风和摄像头使用说明

[](https://res.cloudinary.com/practicaldev/image/fetch/s--NhIpyk1K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/0ydc2mgcdq5he4bkv532.png)

现在是时候编写一些代码了。在 ViewController 中初始化 webRTCClient

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // let webRTCClient: AntMediaClient = AntMediaClient.init()

将以下代码添加到 viewDidLoad() 方法。

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // webRTCClient.delegate = self webRTCClient.setOptions(url: "ws://ovh36.antmedia.io:5080/WebRTCAppEE/websocket", streamId: "stream123", token: "", mode: .publish, enableDataChannel: false) webRTCClient.setLocalView(container: videoView, mode: .scaleAspectFit) webRTCClient.start()

在您的 ViewController 中实现委托。 Xcode 帮助您实现。

ViewController 应该如下所示。运行应用程序后,它将开始使用 streamId:'stream123' 发布到您的服务器。

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // class ViewController: UIViewController { @IBOutlet var videoView: UIView! let webRTCClient: AntMediaClient = AntMediaClient.init() override func viewDidLoad() { super.viewDidLoad() webRTCClient.delegate = self //Don't forget to write your server url. webRTCClient.setOptions(url: "ws://your_server_url:5080/WebRTCAppEE/websocket", streamId: "stream123", token: "", mode: .publish, enableDataChannel: false) webRTCClient.setLocalView(container: videoView, mode: .scaleAspectFit) webRTCClient.start() } }

怎么玩

播放流比发布更简单。我们只需要更改 viewDidLoad() 中的一些代码。因此,以下代码片段只会在您的服务器上使用 streamId: 'stream123' 播放流。请确保,在您尝试播放之前,您需要将流 id 为“stream123”的流发布到您的服务器

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // class ViewController: UIViewController { @IBOutlet var videoView: UIView! let webRTCClient: AntMediaClient = AntMediaClient.init() override func viewDidLoad() { super.viewDidLoad() webRTCClient.delegate = self //Don't forget to write your server url. webRTCClient.setOptions(url: "ws://your_server_url:5080/WebRTCAppEE/websocket", streamId: "stream123", token: "", mode: .play, enableDataChannel: false) webRTCClient.setRemoteView(remoteContainer: videoView, mode: .scaleAspectFit) webRTCClient.start() } }

如何使用数据通道

Ant Media Server 和 WebRTC iOS SDK 可以使用 WebRTC 中的数据通道。为了使用数据通道,请确保它已启用服务器端和移动。为了在服务器端启用它,您只需在 setOptions 方法中将 enableDataChannel 参数设置为 true。

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // webRTCClient.setOptions(url: "ws://your_server_url:5080/WebRTCAppEE/websocket", streamId: "stream123", token: "", mode: .play, enableDataChannel: true)

之后就可以使用 AntMediaClient 的如下方法发送数据了

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // func sendData(data: Data, binary: Bool = false)

当收到新消息时,将调用委托的以下方法。

// hidden setup JavaScript code goes in this preamble area const hiddenVar = 42 `` // func dataReceivedFromDataChannel(streamId: String, data: Data, binary: Bool)

Sample 项目中还存在数据通道使用示例。

最后,如果您需要了解更多关于 WebRTC iOS SDK 中所有方法和委托的信息,请访问WebRTC iOS SDK 参考