Many cities and states have been under lockdown since the outbreak of the coronavirus epidemic. During this difficult time, we’re all looking for new ways to stay connected and support each other (and not go absolutely insane from the boredom and isolation). This is when social networking applications such as Houseparty become especially relevant and helpful.
自从冠状病毒流行以来,许多城市和州都处于封锁状态。 在这个困难时期,我们都在寻找保持联系和相互支持的新方法(不要因无聊和孤立而发疯)。 这是诸如Houseparty之类的社交网络应用变得特别相关和有用的时候。
These applications let users meet up and have fun with their friends without having to leave their homes. Users can enter their friend’s virtual room by just clicking a button. Houseparty, in particular, also provides some built-in games that users can play together.
这些应用程序使用户可以聚在一起并与朋友一起玩乐,而不必离开家。 用户只需单击一个按钮即可进入其朋友的虚拟房间。 特别是Houseparty,还提供了一些内置游戏,用户可以一起玩。
If you’ve ever wondered how these cool applications are made, read on! This blog post will help get you started on the basics of building a similar social networking application in iOS.
如果您想知道如何制作这些很棒的应用程序,请继续阅读! 这篇博客文章将帮助您开始在iOS中构建类似的社交网络应用程序的基础知识。
先决条件 (Prerequisites)
1. A basic understanding of Swift and the iOS SDK.
1.对Swift和iOS SDK的基本了解。
2. An Agora.io developer account.
2.一个Agora.io开发人员帐户 。
3. Xcode and an iOS device.
3. Xcode和iOS设备。
4. CocoaPods (If you don’t have CocoaPods installed already, you can find instructions here).
4. CocoaPods(如果尚未安装CocoaPods,则可以在此处找到说明)。
总览 (Overview)
This guide will go over the steps for building a social networking application similar to Houseparty. This is a list of the core features that will be included in our app:
本指南将介绍构建类似于Houseparty的社交网络应用程序的步骤。 这是将包含在我们的应用程序中的核心功能的列表:
- Users can create and login into their account. User account information will be saved in Google Firebase Realtime Database. 用户可以创建并登录其帐户。 用户帐户信息将保存在Google Firebase实时数据库中。
- Users can set up virtual rooms to host video calls. 用户可以设置虚拟房间来主持视频通话。
- Users can configure the accessibility of their virtual rooms. “Public” rooms are open for all friends to join and “private” rooms are invitation-only. 用户可以配置其虚拟房间的可访问性。 “公共”房间向所有朋友开放,“私人”房间仅供邀请。
- During a video call, users can send private messages to another user in the same room by double-clicking on that user’s remote video. 在视频通话期间,用户可以通过双击该用户的远程视频,向该房间中的另一个用户发送私人消息。
- Users can chat with friends who are not in the room by clicking a button next to their names in the friend list. 用户可以通过单击好友列表中其姓名旁边的按钮来与不在房间中的好友聊天。
You can find my Github demo app as a reference for this article.
您可以找到我的 Github演示应用程序 作为本文的参考。
建立一个新项目 (Setting Up a New Project)
To start, let’s open up Xcode and create a new, blank project.
首先,让我们打开Xcode并创建一个新的空白项目。
1. Open Xcode and select New Project.
1.打开Xcode并选择新建项目 。
2. Select Single View App.
2.选择单视图应用程序。
3. Name and finalize your project. Make sure the language is set as Swift.
3.命名并完成您的项目。 确保将语言设置为Swift 。
设置CocoaPods (Setting up CocoaPods)
1. In Terminal, navigate to the root directory of your project and run pod init
to initialize CocoaPods.
1.在终端中,导航到项目的根目录,然后运行pod init
初始化CocoaPods。
2. Open the Podfile that was created and add the pods for the Agora library, as well as the Firebase libraries we’ll use for user management:
2.打开已创建的Podfile,然后添加Agora库以及我们将用于用户管理的Firebase库的Pod:
target ‘Your App’ do
use_frameworks!pod ‘AgoraRtcEngine_iOS’
pod ‘AgoraRtm_iOS’
pod ‘Firebase/Analytics’
pod ‘Firebase/Auth’
pod ‘Firebase/Database’
pod ‘FirebaseUI’end
3. Run pod install
in Terminal to install the libraries.
3.在终端中运行pod install
以安装库。
4. From now on, open YourApp.xcworkspace to edit and run your app.
4.从现在开始,打开YourApp.xcworkspace来编辑和运行您的应用程序。
设置Firebase (Setting up Firebase)
Go to https://console.firebase.google.com and create a new Firebase project. Follow the instructions there to set up Firebase within your existing app. We’re going to be using Firebase for authentication, analytics, and user management.
转到https://console.firebase.google.com并创建一个新的Firebase项目。 按照那里的说明在现有应用程序中设置Firebase。 我们将使用Firebase进行身份验证,分析和用户管理。
Once you’ve finished going through Firebase’s setup, you should have completed the following steps:
完成Firebase的设置后,您应该已经完成以下步骤:
1. Register your app’s Bundle ID with Firebase. (As a reminder, you can find your Bundle ID in your project settings, under General)
1.在Firebase中注册应用程序的捆绑ID。 (提醒一下,您可以在项目设置的“常规”下找到您的捆绑包ID)
2. Download the GoogleService-Info.plist
file and add it to your app.
2.下载GoogleService-Info.plist
文件并将其添加到您的应用程序中。
3. Import Firebase to your AppDelegate, and call FirebaseApp.configure()
in didFinishLaunchingWithOptions
.
3.将Firebase导入到您的AppDelegate中,然后在didFinishLaunchingWithOptions
调用FirebaseApp.configure()
。
4. Run your application and have Firebase verify communication.
4.运行您的应用程序,并让Firebase验证通信。
You will then be presented with the Firebase dashboard. Go to the Develop pane, where you’ll find the Authentication section.
然后,您将看到Firebase仪表板。 转到“开发”窗格,在其中找到“身份验证”部分。
Click on the “Set up sign-in method” button to move to the sign-in method pane. Enable the Email/Password and Google sign-in options. You’ll need to set your public-facing app name and support email to do so.
单击“设置登录方法”按钮以移至登录方法窗格。 启用电子邮件/密码和Google登录选项。 为此,您需要设置面向公众的应用名称和支持电子邮件。
In Xcode, you’ll need to set up a URL scheme to handle Google sign-in. Copy the REVERSED_CLIENT_ID
field from your GoogleService-Info.plist
, and open up the URL Types pane in the Info section of your project settings:
在Xcode中,您需要设置一个URL方案来处理Google登录。 从GoogleService-Info.plist
复制REVERSED_CLIENT_ID
字段,然后在项目设置的“信息”部分中打开“ URL类型”窗格:
Add a new URL type and paste the reversed client ID into the URL Schemes field. We’ll also need to write some code so our app knows how to handle that URL. We’ll be using Firebase UI, so for us it’s as simple as just telling Firebase to handle it. Add the following to your AppDelegate.swift
:
添加新的URL类型,并将反向的客户端ID粘贴到“ URL方案”字段中。 我们还需要编写一些代码,以便我们的应用程序知道如何处理该URL。 我们将使用Firebase UI,对我们而言,这就像告诉Firebase处理它一样简单。 将以下内容添加到您的AppDelegate.swift
:
There are plenty of other sign-in options that you may want to allow, but we won’t be covering them here.
您可能还希望允许使用许多其他登录选项,但我们不会在此处进行介绍。
设置视图 (Setting up the View)
In your Xcode project, update the Main.storyboard
and add a NavigationController. We’re going to be using a UICollectionView
to manage our video streams, so update your root view controller by adding a UICollectionView
with a custom UICollectionViewCell
. We’re keeping it simple, so all you need in this custom class is a view to show video:
在您的Xcode项目中,更新Main.storyboard
并添加NavigationController。 我们将使用一个UICollectionView
来管理我们的视频流,通过添加这样更新您的根视图控制器UICollectionView
用自定义UICollectionViewCell
。 我们将其保持简单,因此您需要在此自定义类中显示视频的视图:
We’ll also need a bunch of buttons to handle all the user’s actions:
我们还需要一堆按钮来处理用户的所有操作:
使用FirebaseUI登录 (Logging in with FirebaseUI)
In this tutorial, we’ll be using Firebase’s built-in UI to handle sign-in for us. If you already have a login page, or simply want to be more flexible with your UI, you can find the docs for logging in programmatically with email and Google here and here, respectively.
在本教程中,我们将使用Firebase的内置UI为我们处理登录。 如果您已经有一个登录页面,或者只是想更加灵活地使用UI,则可以在 此处 和 此处 分别 找到用于通过电子邮件和Google以编程方式登录的文档 。
We’re going to be using FirebaseUI to log in to our app. We’ll have our initial entry screen — our AgoraVideoViewController
— handle showing the default FUIAuth View Controller. All we need to do is tell it what providers we want to allow, and who to tell when the user successfully logs in:
我们将使用FirebaseUI登录到我们的应用程序。 我们将有一个初始输入屏幕—我们的AgoraVideoViewController
—句柄,显示默认的FUIAuth视图控制器。 我们需要做的就是告诉它我们要允许哪些提供者,以及告诉谁该用户何时成功登录:
We could call this function on startup, but it would get pretty annoying to have to log in every time we open the app. To solve this, we can use something provided to us by FirebaseAuth — an AuthStateDidChangeListener
. It will tell us whenever the user’s authentication state changes, and allow us to only show the login page if there’s no user already logged in. Adding one is pretty simple:
我们可以在启动时调用此函数,但是每次打开应用程序时都必须登录,这会很烦人。 为了解决这个问题,我们可以使用FirebaseAuth提供给我们的东西AuthStateDidChangeListener
。 每当用户的身份验证状态更改时,它都会告诉我们,并允许我们仅在没有用户登录时才显示登录页面。添加一个非常简单:
We now have a functional login page that will appear if the current user is nil.
现在,如果当前用户为nil,我们将出现一个正常的登录页面。
创建用户数据库 (Creating a User Database)
Firebase will track our users for us — you can see this for yourself on the Authentication tab of the Firebase dashboard, if you try signing in. However, this list of users isn’t very useful to us. While we can get information from it about the currently logged-in user, it won’t allow us to get any info about other users. We’ll need our own database for that.
Firebase会为我们跟踪我们的用户-如果您尝试登录,则可以在Firebase仪表板的“身份验证”选项卡上亲自查看。但是,此用户列表对我们不是很有用。 虽然我们可以从中获取有关当前登录用户的信息,但它不允许我们获取有关其他用户的任何信息。 为此,我们需要自己的数据库。
Go to the Database tab on the Firebase dashboard, and create a new Realtime Database. Start it in test mode for now, so we can easily modify it without having to worry about security while we’re working on it. We could add data manually here, but it’ll be easier to do it automatically in code.
转到Firebase仪表板上的“数据库”选项卡,然后创建一个新的实时数据库。 现在,以测试模式启动它,因此我们可以轻松地对其进行修改,而不必担心我们在工作时的安全性。 我们可以在此处手动添加数据,但是用代码自动完成会更容易。
登录时添加用户 (Adding Users on Login)
Head back to our FUIAuthDelegate
extension. We’re going to make use of that didSignInWith
callback to add a user to our database whenever they log in:
回到我们的FUIAuthDelegate
扩展。 每当用户登录时,我们将利用该didSignInWith
回调将用户添加到我们的数据库中:
This code gets a reference to our main database, and adds an entry in a new “users” node. Each child of a node needs to have a unique key, so we use the unique UID Firebase gives us, and we store the user’s email, their display name, and a lowercase version of their display name that will make it easier to search for it later.
这段代码引用了我们的主数据库,并在新的“用户”节点中添加了一个条目。 节点的每个子节点都必须具有唯一的密钥,因此我们使用唯一的UID Firebase提供给我们,并且我们存储用户的电子邮件,他们的显示名称以及他们的显示名称的小写版本,这将使其更易于搜索。后来。
加入视讯通话 (Joining a Video Call)
Once the user has logged in, they should automatically be placed into their own personal room so that their friends can drop by. To do that, we’ll be using the Agora SDK to quickly and easily handle video calls for us.
用户登录后,应自动将其放置在自己的个人房间中,以便他们的朋友可以前来。 为此,我们将使用Agora SDK为我们快速轻松地处理视频通话。
添加摄像头和麦克风权限 (Add Camera and Microphone Permissions)
In order to use the microphone and camera, we’ll need to ask the user for permission to do so. In your Info.plist add the following keys:
为了使用麦克风和摄像头,我们需要征求用户的许可。 在您的Info.plist中,添加以下键:
Privacy — Microphone Usage Description
Privacy — Camera Usage Description
Make sure you add a value for each. These values are user-facing, and will be displayed when the app asks for these permissions from the user.
确保为每个值添加一个值。 这些值是面向用户的,当应用向用户请求这些权限时将显示这些值。
初始化Agora引擎 (Initialize the Agora Engine)
In order to do anything with Agora, we need an AgoraRtcEngineKit
object initialized with our appID (acquired from the Agora Developer Console). Let’s add a helper function that will give us this object when we need it, creating it first if necessary.
为了对Agora做任何事情,我们需要一个用我们的appID初始化的AgoraRtcEngineKit
对象(从Agora开发者控制台获取)。 让我们添加一个辅助函数,该函数将在需要时为我们提供该对象,并在必要时首先创建它。
启用视频 (Enable Video)
Next, we need to tell Agora we want to enable the video, and set up the video configuration.
接下来,我们需要告诉Agora我们要启用视频,并设置视频配置。
Feel free to adjust the video configuration to suit your needs. You can view the agora documentation on video configuration here.
随意调整视频配置以适应您的需求。 您可以在 此处 查看有关视频配置的agora文档 。
加入通话 (Join a Call)
We want users to join a call as soon as they log in. To make sure each one is placed into their own personal channel, we’ll use their uid as the channel name.
我们希望用户在登录后立即加入呼叫。为确保每个用户都进入自己的个人频道,我们将使用其uid作为频道名称。
Update your viewWillAppear
and add a new function for joining a call:
更新您的viewWillAppear
并添加新功能以加入呼叫:
Note: Agora uses UInt IDs to identify individual users within a call. Our Firebase UIDs won’t work for this, because they’re strings, and it’s not important that they stay the same from call to call, so we just pass in 0 and save whatever Agora assigns us for later use.
注意:Agora使用UInt ID来识别呼叫中的各个用户。 我们的Firebase UID不能用于此目的,因为它们是字符串,在每次调用之间保持不变并不重要,因此我们只需传入0并保存Agora分配给我们的任何内容,以备后用。
显示影片 (Displaying Video)
It’s finally time to put our UICollectionView
to good use. First, we’re going to implement some Agora delegate functions so we can detect when other users join our call, and keep track of their in-call ids.
现在终于可以充分利用我们的UICollectionView
了。 首先,我们将实现一些Agora委托函数,以便我们可以检测其他用户何时加入我们的通话,并跟踪他们的通话ID。
And then we need to set up our collection view cells to display video:
然后,我们需要设置集合视图单元以显示视频:
Note: Make sure you set your view controller as a UICollectionViewDelegateFlowLayout. Learn from my mistakes.
注意:确保将视图控制器设置为UICollectionViewDelegateFlowLayout。 从我的错误中学习。
和朋友一起工作 (Working With Friends)
It’s time to start keeping track of a user’s friends. We’re going to add two popover views to our app — one for searching for users to add as friends, and one for displaying a friends list that we can use to join other user’s rooms.
现在该开始跟踪用户的朋友了。 我们将向我们的应用程序添加两个弹出窗口视图-一个用于搜索要添加为好友的用户,另一个用于显示可用于加入其他用户房间的好友列表。
搜索用户 (Searching for Users)
We’re going to create a UserSearchViewContoller
to search through our user database for possible new friends.
我们将创建一个UserSearchViewContoller
以在用户数据库中搜索可能的新朋友。
We need a UISearchBar
, and a UITableView
to display the results. We’ll make a very simple UserTableViewCell
class for our cells:
我们需要一个UISearchBar
和一个UITableView
来显示结果。 我们将为单元格创建一个非常简单的UserTableViewCell
类:
Make sure to hook everything up to our UserSearchViewController class, and make sure to set the ViewController as the initial view controller. Then let’s show our new View Controller when our user hits the “Add Friends” button. In our main AgoraVideoViewController
class:
确保将所有内容连接到UserSearchViewController类,并确保将ViewController设置为初始视图控制器。 然后,当用户点击“添加朋友”按钮时,让我们展示新的View Controller。 在我们的主要AgoraVideoViewController
类中:
We set up some basic stuff when we load:
加载时,我们设置了一些基本的东西:
Most of our complex logic comes when the user actually searches:
当用户实际搜索时,大多数复杂的逻辑就会出现:
When the user hits the search button, we perform a database query to return all users whose username starts with the text entered.
当用户点击搜索按钮时,我们将执行数据库查询以返回其用户名以输入文本开头的所有用户。
Tip: If you don’t have multiple phones to test with, you can always add dummy users into your database directly in the Firebase console.
提示:如果没有可供测试的多个电话,则始终可以直接在Firebase控制台中将虚拟用户添加到数据库中。
If you run your app and search for another user, they will now appear in your list! Very cool. However, you may also notice Firebase complaining at you in the console:
如果您运行您的应用并搜索其他用户,他们现在将出现在您的列表中! 很酷。 但是,您可能还会注意到Firebase在控制台中抱怨您:
_[Firebase/Database][I-RDB034028] Using an unspecified index. Your data will be downloaded and filtered on the client. Consider adding “.indexOn”: “username” at /users to your security rules for better performance_
This is Firebase telling us that it’s not indexing our users by our search fields, because we haven’t told it to. With as few users as we have now, it’s not a big deal, but if we want to release to a large userbase, we should fix this. Fortunately, adding the rule is easy. Head to the Database tab in your Firebase dashboard, and open up your Rules. Add the .indexOn
field to your users database and hit Publish:
这是Firebase告诉我们,它没有通过搜索字段为用户编制索引,因为我们没有告诉我们。 现在我们的用户数量很少,这没什么大不了的,但是如果我们要释放给庞大的用户群,则应该解决此问题。 幸运的是,添加规则很容易。 转到Firebase仪表板中的“数据库”选项卡,然后打开“规则”。 将.indexOn
字段添加到您的用户数据库,然后单击发布:
加一个朋友 (Adding a Friend)
Finally, we need to add a user to our friends list when the user selects them. To do that, we’re going to create a “friends” database alongside our user database and add a node to it:
最后,我们需要在用户选择朋友时将其添加到我们的朋友列表中。 为此,我们将在用户数据库旁边创建一个“ friends”数据库,并在其中添加一个节点:
查看您的朋友 (Viewing Your Friends)
Now that we have friends on our friends list, it’s time to use that to join other people’s rooms. Let’s make one more view controller.
现在我们的朋友列表上有朋友了,是时候使用它来加入其他人的房间了。 让我们再做一个视图控制器。
We need a UITableView and that’s about it. We can even reuse our UserTableViewCell
class. Again, we show it in a popover when the user taps a button. This time, though, we’re going to create a protocol for our new view controller to tell our AgoraVideoViewController
which friend’s room we want to join.
我们需要一个UITableView,仅此而已。 我们甚至可以重用UserTableViewCell
类。 同样,当用户点击按钮时,我们会在弹出窗口中显示它。 不过,这次,我们将为新的视图控制器创建一个协议,以告诉我们的AgoraVideoViewController
我们要加入哪个朋友的房间。
And in our new class:
在我们的新课程中:
When the view appears, we’ll get our usual reference to the current user, and use that to get each friend’s ID:
当该视图出现时,我们将获得对当前用户的常规引用,并使用该引用来获取每个朋友的ID:
And then we display each friend’s username, and pass the ID back to the video view when selected:
然后,我们显示每个朋友的用户名,并在选择时将ID传递回视频视图:
Finally, back in our AgoraVideoViewController
, we handle the message and change rooms accordingly.
最后,回到我们的AgoraVideoViewController
,我们处理消息并相应地更改房间。
更衣室 (Locking Rooms)
Sometimes, a user wants to set his own virtual room to become a “private” room so that no one else can join his room except those who are already in the room. So how should we achieve that?
有时,用户希望将自己的虚拟房间设置为“私有”房间,以便除了已经在房间中的人之外,其他任何人都不能加入他的房间。 那么我们应该如何实现呢?
First, we’ll need to know whether the current room belongs to us. Then, we’ll allow the host to lock the room with a button, and save that state to the database.
首先,我们需要知道当前房间是否属于我们。 然后,我们将允许主机通过按钮锁定房间,并将该状态保存到数据库中。
Add the following line to the success callback of joinChannel
:
joinChannel
添加到joinChannel
的成功回调中:
self?.isLocalCall = channelName == self?.currentUser?.uid
And then implement the handler for the button:
然后实现按钮的处理程序:
Our channels can now be locked and that state is saved to the database. But it doesn’t do anything yet. We need to check whether a room is locked when we try to join it. In our JoinFriendViewController
let’s first show the user if a room is locked by adding the following to cellForRowAt:
现在可以锁定我们的频道,并将状态保存到数据库中。 但是它什么也没做。 尝试加入房间时,我们需要检查房间是否被锁定。 在我们的JoinFriendViewController
首先通过向cellForRowAt:
添加以下内容来向用户显示房间是否被锁定cellForRowAt:
Unlike with observeSingleEvent
, the observe
function will be called whenever the value being observed changes. Which is great for us, because it means the cell will automatically update as soon as any of our friends locks or unlocks their room.
与observeSingleEvent
不同,每当观察值更改时,都会调用observe
函数。 这对我们来说很棒,因为这意味着只要我们的任何一个朋友锁定或解锁房间,该单元就会自动更新。
We can then update our didSelectRowAt
function to show an alert if the user tries to join a locked room:
然后,我们可以更新我们的didSelectRowAt
函数,以在用户尝试加入锁定的房间时显示警报:
And that’s all there is to it!
这就是全部!
添加文字聊天 (Adding Text Chat)
We’re going to use Agora’s Real-Time Messaging (RTM) SDK in order to allow users to chat with each other while they’re in a video call. First, let’s set up the AgoraRtmKit
.
我们将使用Agora的实时消息(RTM)SDK,以便允许用户在进行视频通话时彼此聊天。 首先,让我们设置AgoraRtmKit
。
We use the same Agora app ID we already have, and then we login and logout of RTM when our user does. We also set up the AgoraRtmDelegate
protocol. We’re only going to use it to make sure our chat button isn’t clickable until we’ve finished logging in.
我们使用已经拥有的相同Agora应用ID,然后在用户登录时登录和注销RTM。 我们还设置了AgoraRtmDelegate
协议。 我们将仅使用它来确保在完成登录之前无法单击聊天按钮。
For the chat room itself, we’ll need one final view controller.
对于聊天室本身,我们需要一个最终视图控制器。
We need a UITextField
to send messages, and a table view to display them. We again have a very simple cell:
我们需要一个UITextField
来发送消息,并需要一个表视图来显示它们。 我们再次有一个非常简单的单元格:
Like before, we’re going to present this view as a popover when the user hits the ‘Chat’ button.
像以前一样,当用户点击“聊天”按钮时,我们将以弹出窗口的形式显示此视图。
加入文字频道 (Joining a Text Channel)
In our ChatViewController
, we’re going to do some very familiar setup to make sure we have a user at all times, and then join an RTM channel in viewWillAppear
:
在我们的ChatViewController
,我们将进行一些非常熟悉的设置以确保我们一直都有一个用户,然后在viewWillAppear
加入一个RTM通道:
The createChannel
method will create a channel if one doesn’t exist, or join an existing one if it does. Like with Agora video channels, everyone that joins a channel with the same name will be able to chat with each other.
如果不存在频道,则createChannel
方法将创建一个频道;如果不存在,则将其加入现有频道。 与Agora视频频道一样,加入同名频道的每个人都可以彼此聊天。
显示讯息 (Showing Messages)
In order to display a conversation, we need to do two things: Send messages when the local user types them, and receive messages from everyone else.
为了显示对话,我们需要做两件事:在本地用户键入消息时发送消息,并从其他所有人接收消息。
Whenever the user sends or receives a message, we add it to our message data, insert a new table row, and then scroll to the bottom to make sure we see it.
每当用户发送或接收消息时,我们都会将其添加到消息数据中,插入新的表格行,然后滚动到底部以确保我们能够看到它。
处理键盘 (Handling the Keyboard)
If you try to test the app now, you’ll notice an immediate problem: Our text field is at the bottom of the screen, and the keyboard covers it up when you select it. Let’s fix that.
如果您现在尝试测试该应用程序,您会注意到一个直接的问题:我们的文本字段位于屏幕底部,并且当您选择它时,键盘会将其遮盖起来。 让我们修复它。
Here, we add a reference to the NSLayoutConstraint
attaching the text field to the bottom of the screen. Using Notification Center, we can then find out when the keyboard is shown or hidden, and adjust how far from the bottom of the screen our text field is automatically.
在这里,我们添加了对NSLayoutConstraint
的引用,将文本字段附加到了屏幕的底部。 然后,使用Notification Center,我们可以确定显示或隐藏键盘的时间,并调整文本字段自动距屏幕底部的距离。
画龙点睛 (Finishing Touches)
Finally, let’s add the functionality to our final two buttons, both of which are a simple call to an Agora API. To switch the camera:
最后,让我们在最后两个按钮中添加功能,这两个按钮都是对Agora API的简单调用。 要切换相机:
And to mute our local audio:
并使我们的本地音频静音:
恭喜啦 (Congratulations)
If you’ve made it this far, congratulations! You have a working social app. The best way to test it is to build it and run on multiple phones, but you can also use Agora’s web demo to substitute as additional users.
如果您已经做到了,那么恭喜! 您有一个正在运行的社交应用。 对其进行测试的最佳方法是构建它并在多部电话上运行,但是您也可以使用Agora的网络演示代替其他用户。
Thank you for following along. If you want to see more features such as push notifications or presence tracking, please leave a comment below! If you have any questions, you can also reach out via email at devrel@agora.io.
感谢您的关注。 如果您想查看更多功能,例如推送通知或状态跟踪,请在下面发表评论! 如果您有任何疑问,也可以通过电子邮件devdev@agora.io与我们联系。
翻译自: https://medium.com/swlh/how-to-build-a-drop-in-video-chat-application-in-ios-667e9a92df75