如何在iOS中构建嵌入式视频聊天应用程序

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类型”窗格:

Image for post
URL Schemes
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

Handle URL Scheme
处理URL方案

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)

Image for post
Storyboard Layout
故事板布局

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 。 我们将其保持简单,因此您需要在此自定义类中显示视频的视图:

Custom UICollectionViewCell
自定义UICollectionViewCell

We’ll also need a bunch of buttons to handle all the user’s actions:

我们还需要一堆按钮来处理用户的所有操作:

Basic button handlers
基本按钮处理程序

使用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视图控制器。 我们需要做的就是告诉它我们要允许哪些提供者,以及告诉谁该用户何时成功登录:

FirebaseUI Initialization
FirebaseUI初始化

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 。 每当用户的身份验证状态更改时,它都会告诉我们,并允许我们仅在没有用户登录时才显示登录页面。添加一个非常简单:

Auth State Listener
身份验证状态监听器

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仪表板上的“数据库”选项卡,然后创建一个新的实时数据库。 现在,以测试模式启动它,因此我们可以轻松地对其进行修改,而不必担心我们在工作时的安全性。 我们可以在此处手动添加数据,但是用代码自动完成会更容易。

Image for post
Creating a Realtime Database
创建一个实时数据库

登录时添加用户 (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回调将用户添加到我们的数据库中:

Adding Users to the Database
将用户添加到数据库

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开发者控制台获取)。 让我们添加一个辅助函数,该函数将在需要时为我们提供该对象,并在必要时首先创建它。

Creating the Agora Engine
创建Agora引擎

启用视频 (Enable Video)

Next, we need to tell Agora we want to enable the video, and set up the video configuration.

接下来,我们需要告诉Agora我们要启用视频,并设置视频配置。

Set Up Video
设置视频

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并添加新功能以加入呼叫:

Joining a Call
加入通话

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。

Setting up user list
设置用户列表

And then we need to set up our collection view cells to display video:

然后,我们需要设置集合视图单元以显示视频:

Displaying video cells
显示视频单元

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以在用户数据库中搜索可能的新朋友。

Image for post
UserSearchViewController
UserSearchViewController

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类:

UserTableViewCell
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类中:

Showing User Search
显示用户搜索

We set up some basic stuff when we load:

加载时,我们设置了一些基本的东西:

User Search Setup
用户搜索设置

Most of our complex logic comes when the user actually searches:

当用户实际搜索时,大多数复杂的逻辑就会出现:

Searching for Users
搜索用户

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字段添加到您的用户数据库,然后单击发布:

Image for post
Indexing on Username
索引用户名

加一个朋友 (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”数据库,并在其中添加一个节点:

Adding a Friend
加一个朋友

查看您的朋友 (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.

现在我们的朋友列表上有朋友了,是时候使用它来加入其他人的房间了。 让我们再做一个视图控制器。

Image for post
Join Friend
加入朋友

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我们要加入哪个朋友的房间。

didTapInvite()
didTapInvite()

And in our new class:

在我们的新课程中:

JoinFriendViewController Setup
JoinFriendViewController设置

When the view appears, we’ll get our usual reference to the current user, and use that to get each friend’s ID:

当该视图出现时,我们将获得对当前用户的常规引用,并使用该引用来获取每个朋友的ID:

Create Friends List
建立好友清单

And then we display each friend’s username, and pass the ID back to the video view when selected:

然后,我们显示每个朋友的用户名,并在选择时将ID传递回视频视图:

Display Friends List
显示好友列表

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.

首先,我们需要知道当前房间是否属于我们。 然后,我们将允许主机通过按钮锁定房间,并将该状态保存到数据库中。

Lock variables
锁定变量

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:

然后实现按钮的处理程序:

Setting the Lock
设定锁

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:

Showing the Lock
显示锁

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函数,以在用户尝试加入锁定的房间时显示警报:

Respecting the Lock
尊重锁

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.

对于聊天室本身,我们需要一个最终视图控制器。

Image for post
Chat 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的简单调用。 要切换相机:

Switch Camera
切换相机

And to mute our local audio:

并使我们的本地音频静音:

Mute 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值