使用Action和Event构建功能强大的交互式WebRTC数据通道应用程序

随着2.0版本的发布，Ant Media Server Enterprise Edition支持WebRTC数据通道标准，之前我们发布了3篇博客文章，与Ant Media Server EE的数据通道的设置、使用和实现有关：

我们上一篇关于此主题的博客文章将介绍通过WebRTC数据通道发送控制消息(如动作和事件)，以及通过使用这些信息创建更具交互性和复杂性的应用程序时的最佳实践。我们将通过我们的Javascript和Android SDK中的一些示例用法来检查两个用例场景，并试图使它们更容易为我们的客户所理解。

通过数据通道发送各种事件或动作是使用WebRTC实现交互式应用程序最方便、最安全的方式。通过数据信道的低等待时间和安全通信可能特别有用，特别是在交互式应用的情况下，例如在会议中、在电子学习中或在某些游戏中，其中每个参与者具有特定角色并被允许进行特定类型的动作并且可以触发特定事件。

例如，在电子学习应用程序中，学生可以举手提问，老师可以决定接受或拒绝该请求。如果请求被接受，老师和其他学生将开始播放该学生的视频流。

公司的视频会议应用也可以实现类似的场景，其中经理可以允许员工在演示期间根据要求发言。类似地，在会议或电子学习期间对主题进行投票、交流某些事件(如静音麦克风)、提醒或戳其他用户或在WebRTC游戏期间发送游戏命令和事件都可以通过数据通道轻松实现。

正如我们在与聊天应用相关的博客中提到的，我们建议将事件或用户操作作为JSON或XML的结构化数据发送。对于大多数应用程序来说，在接收端使用通用的JSON或XML解析器来解析它们就足够了，但是对于具有针对这些事件的验证模式(如XML Schema或JSON Schema)的复杂应用程序来说，在验证、解析和映射它们时可能会很有用，而且不容易出错。

当有人将麦克风静音时，JSON格式的示例事件将通过数据通道发送给会议.html页面中的所有会议参与者，如下所示：

对于更复杂的应用，需要某种类型的通信协议来管理不同用户或系统之间可能的交互。在为交互式和反应式应用程序设计此类协议时，清楚地指定和检查具有特定角色的用户可以生成哪些操作和事件，以及这些事件可以导致哪些其他状态，这一点非常重要。在这种情况下，UML序列图可以帮助记录和设计通信场景，而UML状态图可以帮助处理所有依赖于不同状态和角色的边缘和用例。接下来，我们将讨论一个简单的与用例相关的会议。

在WebRTC Android SDK中的最新版本的Conference ence.html和ConferenceActivity中，当与会者将其麦克风静音或取消静音，或者启用或禁用要发布的视频流时，会通过WebRTC数据通道向所有其他与会者发送类似上述部分的特殊事件消息。然后，所有其他流参与者解析接收到的事件，并且基于事件类型，开发人员可以定制会议.html以通知用户或在相应的流上显示图标。

在Web端，当事件收到DATA_RECEIVED信号时，调用回调函数：

函数handleNotificationEvent(Obj){.console.log("；接收数据："；，obj.event.data)；*var NotificationEvent=JSON.parse(obj.event.data)；*如果(NotificationEvent！=NULL&；&；typeof(NotificationEvent)=="；Object"；){*var eventStreamId=NotificationEf(NotificationEvent！=NULL&；&；typeof(NotificationEvent)=="；Object"；){**var eventStreamId=NotificationEn。){#34；摄像头关闭时间："；，eventStreamId)；{#34；摄像头关闭时间："；，eventStreamId)；{#34；false if(eventTyp=="；CAM_Turned_On"；){#34；摄像头打开时间："；，eventStreamId)；{#34；摄像头打开时间："；，eventStreamId)；*#34；其他if(eventTyp=="；MIC_静音"；){0。麦克风已静音："；，eventStreamId)；麦克风}Else if(eventTyp=="；MIC_unmuted"；){_unmuted"；){_unmuted"；console.log("；麦克风未静音for："；，eventStreamId)；{_unmuted"；}}。

在本例中，为简单起见，它只将它们记录到控制台。在Android中，在ConferenceActivity onMessage方法中，通知事件的处理方式类似于Toast消息：

public void onMessage(DataChannel.Buffer，String dataChannelLabel){*ByteBuffer data=Buffer.data；*string strDataJson=new string(data.array()，StandardCharsets.UTF_8)；或try{#34；JSONObject json=new JSONObject(StrDataJson)；**字符串eventType=json.getString("；eventType"；)。："；+StreamId，Toast.LENGTH_Long).show()；**}catch(Exception E){*Log.e(getclass().getSimpleName()，e.getMessage())；**}}。

请查看Web中的会议.html页面和Android WebRTC SDK中的ConferenceActivity页面，以更好地了解这些消息是如何生成和处理的。

更复杂的情况是，学生在E-Learning应用程序中举手提问。

在我们的假设场景中，多个学生可以几乎同时通过WebRTC数据通道发送举手消息，之后教师应该决定接受或拒绝他们的请求之一。因此，教师的回答应该引用他接受或拒绝的RaiseHandRequest发送者的惟一流ID。如果他接受了请求，他会向每个人发送接受消息，请求被接受的学生将自动开始发布他的视频流，其他人将播放该视频流。

我们在这里并没有展示如何为学生和教师实现不同的角色，但是实现这一点的一种方法是，例如，为教师和学生提供不同的自定义版本的Conference ence.html和ConferenceActivity。我们还可以在我们的场景中添加以下限制：当一个学生提出问题时，其他任何学生都不能要求提出任何问题。为了实现该约束，状态信息可以以以下可能的状态存储在每个参与者中：

因此，只有当STATE为QUERK_SESSION_EMPTY和STATE为QUERK_SESSION_FULL时，学生才能提问，没有人可以举手提问。在我们的场景中，状态的协调器将是教师，在学生临时断开连接并重新连接的边缘情况下，当前状态应该由教师发送给他。(另一种选择是教师定期发送州作为某种保活消息。)。

{"；senderId"；："；教师1"；，"；eventType"；："；RaiseHandAccept"；，"；EventTime"；：1592602986，"；AnswerToRequest"；："；学生1"；，"；描述"；："；您只有1分钟时间提问"；}。

收到后，学生1开始发布他的视频流，其他人开始播放。

在这篇博客文章中，我们试图告知我们的客户一些可能的示例用例和使用WebRTC数据通道实施交互式应用程序时的最佳实践。这里我们谈论的是相对简单的用例，但是使用WebRTC数据通道和Ant Media Server SDK可以实现各种令人兴奋的交互式和复杂的项目。“我们希望指导开发人员使用我们的SDK实现他们令人惊叹的、功能丰富的项目。”

请注意，此处描述的方法和设计决策并不完整，也不是实现此类解决方案的唯一途径。根据您的需求，最适合您需求的设计可以是不同的设计。在我们的所有示例项目中都包含了Conference ence.html和ConferenceActivity，并在2.0版中通过我们的Web、Android和iOS SDK向我们的客户提供了WebRTC数据通道。如果您有任何问题，请写信联系@antmedia.io。

在举手UML时序图中，简化了可视化通信，使其更加清晰。通常，类参与者之间交换的每条消息都将通过Ant Media ServerEE，因为底层流将处于发布和播放模式。