视频聊天 Demo(Win、Linux、Android、Web,支持国产OS

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

(1)一方发起视频对话请求,对方同意后,即可开始视频对话。

(2)在对话的过程中,任何一方都可以挂断,以终止对话。

(3)在对话的过程中,任何一方掉线,都会自动终止对话。

(4)双击视频窗口,会全屏显示视频,按esc退出全屏。

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

      本demo包含了服务端、PC客户端(基于WPF)和Web端,PC端与Web端完全互通,也可以进行文字、视频聊天。本文主要以PC版代码作为讲解,Web版大家可自行下载源码了解。 

      Demo PC 版运行起来后,效果图如下所示:

    

      手机端与PC进行视频聊天的效果如下所示:

     

一.信息类型定义

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

    public static class InformationTypes
    {     
        /// <summary>
        /// 视频请求 
        /// </summary>
        public const int VideoRequest = 5;
        /// <summary>
        /// 回复视频请求的结果
        /// </summary>
        public const int VideoResult = 6;
        /// <summary>
        /// 通知对方 挂断 视频连接
        /// </summary>
        public const int CloseVideo = 7;
        /// <summary>
        /// 通知好友 网络原因,导致 视频中断 
        /// </summary>
        public const int NetReasonCloseVideo = 8;
        /// <summary>
        /// 通知对方(忙线中) 挂断 视频连接
        /// </summary>
        public const int BusyLine = 9;
    }

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

二.实现视频显示控件

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

    

      然后,在实现VideoViewer时,我们实例化了两个DynamicCameraConnector、一个MicrophoneConnector。

(1)两个DynamicCameraConnector实例,一个用于连接到对方的摄像头,一个用于连接自己的摄像头。

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

      关于这些连接器组件具体如何使用,可以参考 OMCS开发手册(02) -- 多媒体连接器

      通过DynamicCameraConnector的NewFrameReceived事件可以拿到每一帧图像Bitmap,然后将Bitmap贴图给Image控件就可以显示视频了。

三.实现视频对话流程

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

(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)如果接收到自己掉线的事件或好友掉线的事件,也采用类似挂断对话的处理。

四.下载

1. 视频聊天Demo 服务端 + PC端 + Web端 源码

该源码中包括如下项目:

(1)Oraycn.Demos.VideoChat.Server :               该Demo的Windows服务端。 

(2)Oraycn.Demos.VideoChat.Client :                该Demo的Windows客户端(基于WPF)。

(3)Oraycn.Demos.VideoChat.ClientWinform:  该Demo的Windows客户端(基于WinForm)。 

(4)Oraycn.Demos.VideoChat.LinuxServer : 该Demo的Linux服务端(基于.NetCore)。

(5)Oraycn.Demos.VideoChat.LinuxClient :  该Demo的Linux客户端(基于.NetCore),支持在统信UOS、银河麒麟等国产OS上运行。

          注: Linux客户端内置的是x86/x64非托管so库,若需要其它架构的so,请联系我们免费获取。  

(6)Oraycn.Demos.VideoChat.Web :该Demo的Web端(JS),支持在Windows和Linux上运行,支持所有类型的浏览器。

        当运行本Demo 的 Web端时,如果尚未安装OMCS视频服务Web插件,网页会自动提示下载安装。完成安装后,刷新网页,会提示启动插件,点击同意启动后,再次刷新网页即可进行正常登录了。关于OMCS Web插件的更多介绍请参见:OMCS 开发手册之 Web SDK 说明(JavaScript)   

2. 视频聊天Demo Android端 源码 

3. Avalonia端 源码

 

如此,Windows PC端、Linux PC端、Android端、Web端即可互通,以进行文字聊天和视频聊天。

       

-----------------------------------------------------------------------------------------------------------------------------------------------  

下载免费版本的OMCS以及 demo源码

阅读 更多OMCS开发手册系列文章

Q Q:168757008

官网:www.oraycn.com

导航

首页

官方网站

联系我们

立即咨询 

站内搜索

OrayTalk 企业即时通讯系统

傲瑞通官网

详细说明

客户端下载

OrayMeeting 视频会议系统

详细说明

客户端下载

ESFramework 通信框架

详细说明

SDK与Demo下载

ESFramework FAQ

版本变更记录

OMCS 语音视频框架

详细说明

SDK与Demo下载

OMCS FAQ

版本变更记录

OVCS 视频会议Demo

详细说明

源码下载

傲瑞实用组件

SDK下载

H5Media 纯网页音视频交互

NPusher 推流组件

MCapture 语音视频采集组件

MFile 语音视频录制组件

MPlayer 语音视频播放组件

OAUS 自动升级系统

StriveEngine 轻量级的通信引擎

傲瑞组件 FAQ

授权

授权流程

产品选购指南

授权方案说明

授权SDK使用说明

其它

支持信创国产化

SDK使用技巧

联系我们