视频聊天 Demo

   ESFramework Demo －－ 入门Demo，简单的即时通讯系统（附源码） 是基于ESFramework实现的一个简单的文字聊天demo，现在，我们将在这个demo的基础上，使用OMCS为其增加类似QQ的视频聊天的功能。基于文字的聊天功能的实现，在这里就不再重复说明了，我们这里重点解释一下视频聊天功能的实现。本Demo要实现的视频聊天功能可以细分为以下几个特性：

（1）一方发起视频对话请求，对方同意后，即可开始视频对话。

（2）在对话的过程中，任何一方都可以挂断，以终止对话。

（3）在对话的过程中，任何一方掉线，都会自动终止对话。

（4）双击视频窗口，会全屏显示视频，按esc退出全屏。

（5）使用信号强度显示器显示当前通道的质量。

      Demo运行起来后，效果图如下所示：

     

 

一.信息类型定义

 

     在原先信息类型定义InformationTypes的基础上，我们需要增加了几种信息类型，以完成视频对话请求、挂断等功能。

[csharp]  view plain copy

1. public static class InformationTypes  
2. {  
3.     /// <summary>  
4.     /// 文字聊天信息 0  
5.     /// </summary>  
6.     public const int Chat = 0;  
7.     /// <summary>  
8.     /// 视频请求 1  
9.     /// </summary>  
10.     public const int VideoRequest = 1;  
11.     /// <summary>  
12.     /// 回复视频请求的结果 2  
13.     /// </summary>  
14.     public const int VideoResult = 2;  
15.     /// <summary>  
16.     /// 通知对方 挂断 视频连接 3  
17.     /// </summary>  
18.     public const int CloseVideo = 3;         
19.     /// <summary>  
20.     /// 通知好友 网络原因，导致 视频中断   
21.     /// </summary>  
22.     public const int NetReasonCloseVideo = 4;  
23. }  

    由于新增的几个与视频对话功能相关的信息类型都是相当于一个指令，不需要复杂的内容，所以，就不用再定义信息的协议体了。

 

二.实现视频显示控件

 

     视频对话时，会在某个Panel的表面显示对方的视频，并在这个控件的右下角用另外一个小Panel的表面来显示自己的视频。所以，我们将这两个控件组合起来，形成一个统一的整体VideoViewer，如下所示：

     

      然后，在实现VideoViewer时，我们实例化了两个DynamicCameraConnector、一个MicrophoneConnector、以及一个ChannelQualityDisplayer。

（1）两个DynamicCameraConnector实例，一个用于连接到对方的摄像头，一个用于连接自己的摄像头。分别将VideoViewer上的两个Panel通过DynamicCameraConnector的SetViewer方法设置给对应的摄像头连接器实例。

（2）MicrophoneConnector实例 用于连接到对方的麦克风。

（3）ChannelQualityDisplayer实例 用于显示自己到对方的通道的质量。

      关于这些连接器组件具体如何使用，可以参考 OMCS开发手册（02） －－ 多媒体连接器。

      当双击大的Panel时，需要全屏显示视频，所以，我们又定义了一个FullScreenForm，其实现模式与VideoViewer差不多。只不过，在显示FullScreenForm时，需要动态更改上面两个DynamicCameraConnector实例绘制的控件表面，所以，FullScreenForm暴露了BigPanel和SmallPanel两个属性以在适当的时候通过SetViewer方法设置给DynamicCameraConnector。这也是在这里为什么要使用DynamicCameraConnector组件，而不是使用CameraConnector控件的原因。

 

三.实现视频对话流程

 

      现在，我们简单描述一下实现视频对话流程的要点，更详细的细节请查阅源代码。

（1）发起方发送InformationTypes.VideoRequest类型的信息给对方，以请求视频对话。

（2）接收方收到请求后，界面提示用户是同意还是拒绝，用户选择后，将发送InformationTypes.VideoResult类型的信息给请求方，信息的内容是一个bool值，true表示同意，false表示拒绝。

（3）发起方收到回复，如果回复为拒绝，则界面给出对应的提示；如果回复为同意，则进入（4）。

（4）先说接收方，如果同意视频，则发送回复后，立即调用DynamicCameraConnector和MicrophoneConnector的Connect方法，连接到对方的摄像头、麦克风。

（5）对于发起方，当收到对方同意的回复后，也立即调用DynamicCameraConnector和MicrophoneConnector的Connect方法，连接到接收方的摄像头、麦克风。

（6）当一方点击挂断的按钮时，就会发送InformationTypes.CloseVideo类型的信息给对方，并调用DynamicCameraConnector和MicrophoneConnector的Disconnect方法断开到对方设备的连接。

（7）另一方接收到InformationTypes.CloseVideo类型的信息时，也会调用DynamicCameraConnector和MicrophoneConnector的Disconnect方法以断开连接。

（8）如果接收到自己掉线的事件或好友掉线的事件，也采用类似挂断对话的处理。

 

四.部署

 

      本demo基于ESFramework和OMCS构建，所以，从这个方面来说，其可以拆分为两块：一块是由ESFramework实现的业务逻辑功能（比如，上述视频对话流程的实现），一块是由OMCS实现的多媒体功能。就本demo的服务端部署而言，需要部署两个服务端，一个是ESFramework实现的业务逻辑的应用服务器，一个是OMCS自带的多媒体服务器。整体结构就如下图所示：

      

      为了方便大家测试运行，我们把OMCS服务端的项目也包含在了demo的解决方案中。

 

五.下载

 

      视频聊天Demo 源码

      补充说明：在基于OMCS实现类似的视频系统时，需要谨慎考虑两个连接的状态同步性（在本demo中，即时到ESFramework服务端的连接和到OMCS服务器的连接），本demo对此的处理非常简单。详细分析可以参考OMCS开发手册（04） －－ 二次开发流程中的注意事项。