实现视频聊天功能(ios)
In this tutorial, we’ll build an iOS app where students and teachers can interact in a virtual classroom using Stream Chat, to deliver fully featured chat components, and Dolby.io, to provide quality audio and video. By the end, we’ll have an application similar to the screenshots below. As a bonus, it’s compatible with both light and dark mode.
在本教程中，我们将构建一个iOS应用程序，学生和教师可以在此虚拟教室中使用Stream Chat进行交互，以提供功能齐全的聊天组件 ，并使用Dolby.io来提供高质量的音频和视频。 最后，我们将有一个类似于以下屏幕截图的应用程序。 另外，它与明暗模式兼容。
If you get lost during this tutorial, you can check the completed project in this GitHub repo. Let’s get started with our EdTech app development!
如果您在本教程中迷路了，可以在此GitHub存储库中检查已完成的项目。 让我们开始开发我们的EdTech应用程序！
(What is Stream Chat?)
Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure. Drive in-app conversion, engagement, and retention with the Stream Chat messaging platform API & SDKs.
在更少的时间内建立实时聊天。 通过我们高度可靠的聊天基础架构，快速发布应用内消息。 通过Stream Chat消息传递平台API和SDK推动应用内转换，参与度和保留度。
(What is Dolby.io’s Client SDK?)
Dolby Interactivity APIs provide a platform for unified communications and collaboration. In-flow communications refers to the combination of voice, video, and messaging integrated into your application in a way that is cohesive for your end-users. This is in contrast to out-of-app communications where users must stop using your application and instead turn to third-party tools.
杜比交互式API提供了一个用于统一通信和协作的平台。 流内通信是指以对最终用户具有凝聚力的方式集成到您的应用程序中的语音，视频和消息传递的组合。 这与应用程序外通信相反，在应用程序外通信中，用户必须停止使用您的应用程序，而转而使用第三方工具。
(Requirements)
(Create the Xcode project)
First, we open Xcode and create a Single View App project.
首先，我们打开Xcode并创建一个Single View App项目。
And make sure to select ‘Storyboard’ for the User Interface.
并确保为用户界面选择“ Storyboard”。
(Install dependencies)
To install the Stream Chat and Dolby.io’s Client SDK dependencies, we’ll use CocoaPods. If you prefer Carthage, both frameworks support it as well.
要安装Stream Chat和Dolby.io的Client SDK依赖项，我们将使用CocoaPods 。 如果您喜欢Carthage，则两个框架也都支持它。
In the folder where you saved the project, run pod init and add StreamChat and VoxeetUXKit to the Podfile. It should look similar to this:
在保存项目的文件夹中，运行pod init并将StreamChat和VoxeetUXKit添加到Podfile 。 它看起来应该类似于：
After you do that, run pod install, wait a bit for it to finish, and open the project via the .xcworkspace that CocoaPods created.
完成之后，运行pod install ，稍等片刻，然后通过CocoaPods创建的.xcworkspace打开项目。
(Configure the Stream Chat dashboard)
Sign up at GetStream.io, create the application, and make sure to select development instead of production.
在GetStream.io上注册，创建应用程序，并确保选择开发而不是生产。
To make things simple for now, let’s disable both auth checks and permission checks. Make sure to hit save. When your app is in production, you should keep these enabled.
为了使事情现在变得简单，让我们同时禁用身份验证检查和权限检查。 确保点击保存。 当您的应用程序投入生产时，应保持启用状态。
You can see the documentation about authentication here and permissions here.
Now, save your Stream credentials, as we’ll need them to power the chat in the app. Since we disabled auth and permissions, we’ll only really need the key for now. Still, in production, you’ll use the secret in your backend to implement proper authentication to issue user tokens for Stream Chat, so users can interact with your app securely.
现在，保存您的Stream凭据，因为我们需要它们来增强应用程序中的聊天功能。 由于我们禁用了身份验证和权限，因此我们现在仅真正需要密钥。 尽管如此，在生产中，您仍将使用后端中的秘密来实施正确的身份验证，以为Stream Chat发行用户令牌 ，以便用户可以安全地与您的应用进行交互。
As you can see, I’ve blacked out my keys. You should make sure to keep your credentials safe.
如您所见，我已经把钥匙涂黑了。 您应该确保自己的凭据安全。
(Configure the Dolby.io dashboard)
Configuring the Dolby.io dashboard is simpler. Just create an account there, and it should already set up an initial application for you.
配置Dolby.io仪表板更加简单。 只需在此处创建一个帐户，它就应该已经为您设置了一个初始应用程序。
Now, save your credentials, as we’ll need them to power the audio and video streaming in the app. As with the Stream credentials, you use these for development. In production, you’ll need to set up proper authentication. It’s described in detail here.
现在，保存您的凭据，因为我们将需要它们来支持应用程序中的音频和视频流。 与Stream凭据一样，您可以将其用于开发。 在生产中，您需要设置适当的身份验证。 在这里详细描述。
(Configure Stream Chat and Dolby.io’s SDKs)
The first step with code is to configure the Stream and Dolby SDK with the credentials from the dashboards. Open the AppDelegate.swift file and modify it, so it looks similar to this:
使用代码的第一步是使用仪表板中的凭据配置Stream和Dolby SDK。 打开AppDelegate.swift文件并对其进行修改，因此它类似于以下内容：
That code initializes the Dolby.io and Stream Chat SDKs with credentials you got in the previous two steps.
该代码使用在前两个步骤中获得的凭据来初始化Dolby.io和Stream Chat SDK。
(Create the Join Screen)
Let’s start building the “Join” screen. This screen consists of two UIButton instances. One to join as a Student, and the other to participate as the teacher. That is an oversimplification to make this tutorial short and get to the chat, audio, and video features faster. In your complete app, you'll need proper registration, database, and all that. For this tutorial, the screen will look similar to the screenshot below.
让我们开始构建“ Join”屏幕。 该屏幕包含两个UIButton实例。 一个作为学生加入，另一个作为老师参加。 为了简化本教程并更快地进行聊天，音频和视频功能，这过于简单了。 在您完整的应用程序中，您需要适当的注册，数据库以及所有这些。 对于本教程，屏幕看起来类似于以下屏幕截图。
Go to the storyboard, select the default view controller, and click Editor > Embed In > Navigation Controller. That will place it under a navigation controller, which we'll use to navigate to the classroom screen.
转到情节提要，选择默认的视图控制器，然后单击Editor > Embed In > Navigation Controller 。 它将放置在导航控制器下，我们将使用它来导航到教室屏幕。
Make sure to rename ViewController to JoinViewController, so you don't get confused later. You can do this easily by right-clicking on ViewController in ViewController.swift and selecting refactor.
确保将ViewController重命名为JoinViewController ，以免以后混淆。 您可以通过右键单击ViewController中的ViewController.swift并选择refactor来轻松地做到这一点。
To make things simple, let’s leave the storyboard like this and use only code from now on. To set up the two buttons, we need the following code in JoinViewController.swift:
为简单起见，让我们像这样保留情节提要，从现在开始仅使用代码。 要设置这两个按钮，我们需要在JoinViewController.swift使用以下代码：
That code sets up the views, the constraints, and the handlers we need. Let’s start by extending JoinViewController to define setupViews:
该代码设置了我们所需的视图，约束和处理程序。 让我们首先扩展JoinViewController来定义setupViews ：
That code will create the buttons and add them to the controller’s view. Next, we need to define constraints between the three. Let’s do this by extending JoinViewController to define setupConstraints:
该代码将创建按钮并将其添加到控制器的视图。 接下来，我们需要在这三个之间定义约束。 让我们通过扩展JoinViewController来定义setupConstraints来做到这一点：
That code will ensure the studentButton stays in the center of the screen and the teacherButton below it. Now we need to set up the handler for when the user presses the buttons. Let's do this again by extending the controller to define setupHandlers:
该代码将确保studentButton停留在屏幕的中央，而studentButton停留在屏幕的teacherButton 。 现在，我们需要为用户按下按钮的时间设置处理程序。 让我们通过扩展控制器来定义setupHandlers来再次执行此setupHandlers ：
That code will make it so, when the user presses the button, a ClassViewController is created and set up for the teacher or a student, depending on which button the user pressed. We'll create ClassViewController in the next step.
该代码将使之成为可能，当用户按下按钮时，将创建ClassViewController并为教师或学生设置，具体取决于用户按下的按钮。 下一步，我们将创建ClassViewController 。
(Create the Classroom Screen)
Now, let’s create the screen where the students and teacher will talk via chat and where they may begin a video call. We’ll start by defining ClassViewController. It will look similar to the screenshots below.
现在，让我们创建一个屏幕，学生和老师将在该屏幕上通过聊天进行交谈，并在此处进行视频通话。 我们将从定义ClassViewController开始。 它看起来类似于下面的屏幕截图。
The first step is to create a ClassViewController.swift file and paste the code below.
第一步是创建一个ClassViewController.swift文件，并粘贴下面的代码。
That code defines a subclass of ChatViewController, which provides most of the chat behavior and UI we need. It also defines the student and teacher User objects and a Channel object. These objects will be used to interact with the Stream API. Additionally, we're generating a random id for the student using the String extension below.
该代码定义了ChatViewController的子类，该子类提供了我们所需的大多数聊天行为和UI。 它还定义了学生和教师的User对象和Channel对象。 这些对象将用于与Stream API进行交互。 此外，我们使用下面的String扩展名为学生生成一个随机ID。
On viewDidLoad, we also call setupViews and setupHandlers to set up the views and handlers needed. We'll define those functions next.
在viewDidLoad ，我们还调用setupViews和setupHandlers来设置所需的视图和处理程序。 接下来，我们将定义这些功能。
But, let’s first define the setupStudent function that sets the current Stream Chat user as a student, and the setupTeacher function that sets it as the teacher.
但是，让我们首先定义将当前Stream Chat用户设置为学生的setupStudent函数，以及将其设置为教师的setupTeacher函数。
Now we define setupViews to set up the views we need.
现在，我们定义setupViews来设置所需的视图。
Those functions will display a button which starts a call. For it to work, we’ll need to define setupHandlers as well.
这些功能将显示一个开始通话的按钮。 为了使其正常工作，我们还需要定义setupHandlers 。
Those functions set callButtonPressed as the function to be called when the call button is pressed, which in turn calls startCall, which we define next.
这些函数将callButtonPressed设置为按下呼叫按钮时要调用的函数，而后者又调用了我们接下来定义的startCall 。
Finally, that function uses the Dolby.io SDK to start a conference call.
最后，该函数使用Dolby.io SDK发起电话会议。
(Configure usage descriptions)
If you run the app now, you’ll be able to chat, but pressing the call button will cause the application to crash. That happens because we need to configure the usage descriptions for microphone and video in the Info.plist file. To do this, just open Info.plist and set the NSMicrophoneUsageDescription and NSCameraUsageDescription keys as pictured below.
如果您现在运行该应用程序，则可以聊天，但是按通话按钮将导致该应用程序崩溃。 发生这种情况是因为我们需要在Info.plist文件中配置麦克风和视频的使用说明。 为此，只需打开Info.plist并设置NSMicrophoneUsageDescription和NSCameraUsageDescription键，如下图所示。
Finally, we open the app in two devices, and, from the chat, we can start a call.
最后，我们在两个设备中打开该应用程序，然后从聊天中开始通话。
(Wrapping up)
Congratulations! You’ve built the basis of a functioning EdTech app with Stream Chat and Dolby.io. I encourage you to browse through Stream Chat’s docs, Dolby.io’s docs, and experiment with the project you just built. Good luck on your EdTech app development!
恭喜你！ 您已经使用Stream Chat和Dolby.io构建了功能良好的EdTech应用程序的基础。 我鼓励您浏览Stream Chat的docs ， Dolby.io的docs ，并尝试使用刚刚构建的项目。 祝您的EdTech应用开发愉快！
Originally published at https://getstream.io.
最初发布在 https://getstream.io 。
实现视频聊天功能(ios)
