In this tutorial, we’ll integrate video chat into an iOS application. To do this, we integrate Dolby.io’s Interactivity APIs, formally known as Voxeet, into our application. Video chat can easily be integrated with Stream Chat for a seamless communication experience.
在本教程中，我们将视频聊天集成到iOS应用程序中。 为此，我们将Dolby.io的交互API (正式称为Voxeet )集成到我们的应用程序中。 视频聊天可以轻松地与流聊天集成在一起，以获得无缝的通信体验。
Note: the library is still named Voxeet.
注意 ：该库仍名为Voxeet。
For this part, the application will support 1-on-1 private chat. Since Dolby is a pure client-side library, we only configure our ios application. However, to facilitate the UI for indicating whether a user has a call waiting, we use a few endpoints in the backend.
对于这一部分，该应用程序将支持一对一的私人聊天。 由于Dolby是纯客户端库，因此我们仅配置ios应用程序。 但是，为了方便UI指示用户是否正在等待呼叫，我们在后端使用了几个端点。
Note: Because these are minor and largely stub implementations, we don’t go into them in this tutorial. Please refer to the source code on GitHub if you’re curious. Also, ensure the backend is running if following along with this tutorial.
注意 ：因为这些是次要的并且大部分是存根实现，所以在本教程中我们不再赘述。 如果您有好奇心， 请参考 GitHub上 的源代码 。 另外，如果遵循本教程，请确保后端正在运行。
The app performs these steps:
该应用程序执行以下步骤：
- Initialize Voxeet libraries 初始化Voxeet库
- When a user navigates to the “People” screen, show a video icon next to a user’s name. 当用户导航到“人”屏幕时，在用户名旁边显示视频图标。
- When a user clicks this icon, start and join a Voxeet conference with a unique alias. The user waits for the other party to join. The application informs the backend of the new call. 当用户单击此图标时，请启动并加入具有唯一别名的Voxeet会议。 用户等待另一方加入。 该应用程序将新呼叫通知后端。
- When the other user enters following the previous steps, they’ll be placed in a 1-on-1 conference. 当其他用户按照上述步骤进入时，他们将被安排在一对一会议中。
- When either user leaves, the call is ended in the application. The backend is informed of the call ending. 当任一用户离开时，呼叫在应用程序中结束。 向后端通知呼叫结束。
Voxeet’s UXKit takes care of the connection and presentation for this 1-on-1 call. Our application needs to create and join the call, and the UXKit will overlay the video call UI.
Voxeet的UXKit负责此一对一通话的连接和演示。 我们的应用程序需要创建并加入通话，而UXKit将覆盖视频通话UI。
Let’s dive in.
让我们潜入。
步骤1：创建杜比帐户并安装Voxeet依赖关系🔗 (Step 1: Create a Dolby Account and Install Voxeet Dependencies 🔗)
Go to dolby.io and create an account. Once registered, navigate to the Dashboard (you can click in the top-right if you’re not there). Find the list of applications:
转到dolby.io并创建一个帐户。 注册后，导航到仪表板(如果您不在那里，则可以单击右上角的)。 查找应用程序列表：
If you already have an app (“my first app”), click into it. If you don’t, create an app by hitting “Add New App”. Now grab the API key and secret for our application. The keys we need are under the “Interactivity APIs” section. :
如果您已经有一个应用程序(“我的第一个应用程序”)，请单击它。 如果没有，请点击“添加新应用”来创建一个应用。 现在获取我们应用程序的API密钥和机密。 我们需要的密钥在“交互API”部分下。 ：
Click on “Show Secret” to view the secret.
单击“显示秘密”以查看秘密。
Next, add VoxeetUIKit to our Podfile and pod install:
接下来，将VoxeetUIKit添加到我们的Podfile和pod install ：
Note: Since the WebRTC dependency is larger than GitHub's file limit, we did not include the Pods in the repo. Please ensure you run pod install before attempting to run.
注意 ：由于WebRTC依赖关系大于GitHub的文件限制，因此我们没有在仓库中包含Pods。 在尝试运行之前，请确保您已运行pod install 。
步骤2：配置Voxeet UXKit库🔖 (Step 2: Configure the Voxeet UXKit Library 🔖)
Since the Voxeet library is not tied to a backend user account, we can configure it on the application load. We do this in the AppDelegate:
由于Voxeet库没有绑定到backend用户帐户，因此我们可以在应用程序负载上对其进行配置。 我们在AppDelegate执行此操作：
Change <VOXEET_CONSUMER_KEY> and <VOXEET_CONSUMER_SECRET> to the values, you retrieved in Step 1. We configure Voxeet not to have any push notifications, turn on the speaker and video by default, and appear maximized. We also set telecom to true. When this is set, the conference will behave like a cellular call, meaning when either party hangs up or declines the request (decline not implemented in this tutorial), it will end the call.
将<VOXEET_CONSUMER_KEY>和<VOXEET_CONSUMER_SECRET>更改为在步骤1中检索到的值。我们将Voxeet配置为不具有任何推送通知，默认情况下打开扬声器和视频，并最大化显示。 我们还将telecom设置为true。 设置此选项后，会议的行为将类似于蜂窝电话，这意味着当任何一方挂断电话或拒绝请求时(本教程中未实现的拒绝)，会议将结束。
If you’d like to use push notifications to notify a user when a call is incoming, check out CallKit combined with VoxeetSDK.shared.notification.push.type = .callKit. This is out of scope for this tutorial.
如果您想使用推送通知时的呼叫时通知用户，请CallKit联合VoxeetSDK.shared.notification.push.type = .callKit 。 这超出了本教程的范围。
步骤3：开始通话📱 (Step 3: Starting a Call 📱)
Next, we add a video action to the list to people, in between the start chat and follow icons from previous parts of this series. Here’s what our view will look like:
接下来，我们在开始聊天之间并向该人员列表添加视频操作，并按照本系列前面各部分中的图标进行操作。 这是我们的视图：
To do this, we just add another image view in our ListView in PeopleView:
为此，我们只需在PeopleView的ListView中添加另一个图像视图：
This is a simple system icon that we load via systemName. With the icon in place, we can add a click handler via onTapGesture to start our 1-on-1 call. Ignore the icon foregroundColor call for now. We'll get to that in a bit.
这是一个简单的系统图标，我们通过systemName加载。 放置好图标后，我们可以通过onTapGesture添加点击处理程序以开始我们的onTapGesture调用。 暂时忽略图标foregroundColor调用。 我们将稍作讨论。
Let’s look at startConferenceCall:
让我们看一下startConferenceCall ：
Here we create our conference call using Voxeet with an alias. We use this alias as an identifier, so the other user's application knows how to join the same call. The call to .create yields us a conference object. First, we call our backend via startCall to register the call, so the other user knows there's a call waiting. This is simply a POST request:
在这里，我们使用带有alias Voxeet创建电话会议。 我们使用此alias作为标识符，因此其他用户的应用程序知道如何加入同一呼叫。 调用.create产生一个会议对象。 首先，我们通过startCall调用backend以注册呼叫，因此其他用户知道正在等待呼叫。 这只是一个POST请求：
Note: We use Voxeet’s conference implementation as it’s perfect for facilitating a video chat between two people. The conference object is more powerful than this (multiple users, broadcast streams, screen sharing, etc.), but here only use it for a 1-on-1 call. The terms conference and calls are used interchangeably in this tutorial, given the scope of our application.
注意 ：我们使用Voxeet的会议实施方式，因为它非常适合促进两个人之间的视频聊天。 会议对象比这更强大(多个用户，广播流，屏幕共享等)，但是这里仅将其用于一对一通话。 给定应用程序的范围，术语会议和呼叫在本教程中可以互换使用。
Once we’ve notified the backend of the call, we join the conference via .join. Since we're using Voxeet's UXKit a video chat UI slides up from the bottom automatically:
一旦我们通知了呼叫的backend ，便通过.join加入会议。 由于我们使用的是Voxeet的UXKit ，因此视频聊天UI会自动从底部向上滑动：
步骤4：加入通话🤳 (Step 4: Joining a Call 🤳)
Now that the user has started a call with someone, we want the other user to see a call started so they can join. To keep things simple, we just turn the video icon red if there’s a call active. Recall from above that we are changing the video icon color via foregroundColor via a call to .videoIconColor:
现在，该用户已开始与某人通话，我们希望其他用户看到已开始通话，以便他们可以加入。 为简单起见，如果有通话，我们只需将视频图标变成红色即可。 从上方回想一下，我们正在通过调用.videoIconColor来通过foregroundColor颜色更改视频图标的颜色：
Here we’ll check a @State var calls for a call from the other user. If we do find one, we color the icon red. The calls var gets initialized when PeopleView appears via fetch:
在这里，我们将检查@State var calls是否有其他用户的调用。 如果找到一个，则将图标涂成红色。 当PeopleView通过fetch出现时，将calls var初始化：
We call account.fetchCalls to retrieve a list of active calls for the current user:
我们调用account.fetchCalls检索当前用户的活动呼叫列表：
This is simply a GET request against our mock backend (refer to source). The response object will have a from field, indicating who the user started the call.
这只是针对我们的模拟backend的GET请求(请参阅源)。 响应对象将具有“ from字段，指示用户是谁发起呼叫的。
Now that we know a user is calling the user will see a screen like this:
现在我们知道用户正在呼叫，该用户将看到如下屏幕：
If the user joins the call, the UXKit UI will change to show the call has started:
如果用户加入呼叫，则UXKit UI将更改以显示呼叫已开始：
步骤5：拨打电话☎ (Step 5: Leaving a Call ☎️)
When a user is done, they hang up using the end call icon. We don’t need to do anything special on our side to end the call, Voxeet takes care of that. We need to listen for the conference call ending so we can notify the backend of the change.
完成用户操作后，他们将使用结束通话图标挂断电话。 我们不需要做任何特别的事情来结束通话，Voxeet会负责。 我们需要监听电话会议的结束，以便我们可以将更改通知后端。
Note: In a production application, you’d likely want to use Voxeet’s push notifications and CallKit bindings or look at binding Dolby's Interactivity API WebSockets to the backend. While the approach below works, it is less robust than using the full Notification system built into Dolby's Interactivity APIs.
注意 ：在生产应用程序中，您可能想使用Voxeet的推送通知和CallKit绑定，或者查看将Dolby的Interactivity API WebSockets绑定到后端。 尽管下面的方法可行，但它比使用内置在Dolby交互API中的完整Notification系统更不可靠。
We’ll bind to the notification center and listen for the conference call to end. Upon ending, we’ll notify the backend the call has finished:
我们将绑定到通知中心，并听电话会议结束。 结束后，我们将通知后端呼叫已完成：
We use SwiftUI’s convenient .onReceive method to bind to the NotificationCenter event .VTConferenceDestroyed. When this happens, we know the call has finished. Since we configured VoxeetUXKit.shared.telecom = true this coincides on both sides when either party hangs up. When we get the notification, we simply call to the backend to stop the call via account.stopCall and fetch the new set to refresh the view (effectively removing the red video indicator). The stopCall is a simple DESTROY call to the backend:
我们使用SwiftUI的便捷.onReceive方法绑定到NotificationCenter事件.VTConferenceDestroyed 。 发生这种情况时，我们知道通话已结束。 由于我们配置了VoxeetUXKit.shared.telecom = true因此当任何一方挂断电话时，这在两侧都是重合的。 收到通知后，我们只需调用后端即可通过account.stopCall停止通话，并获取新的设置以刷新视图(有效地删除了红色的视频指示器)。 stopCall是对backend的简单DESTROY调用：
And we’re done. We now have a 1-on-1 chat between two parties integrated into our application using Dolby’s Voxeet offering. For more information on how to integrate Stream Chat within your application, have a look at the GitHub repo.
我们完成了。 现在，使用杜比的Voxeet产品，我们的应用程序中集成了两方之间的一对一聊天。 有关如何在您的应用程序中集成Stream Chat的更多信息，请查看GitHub存储库。
翻译自: https://medium.com/swlh/build-a-1-on-1-video-chat-with-swiftui-and-dolby-io-fd87ec5a65f7
扫一扫
1653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
