在网页里实现文字聊天是比较容易的，但若要实现视频聊天，就比较麻烦了。这里，我们将实现一个简单的网页版视频聊天Demo，可以支持所有类型的浏览器。

本Demo除了视频聊天功能外，还包含以下功能：

1.上下线通知：假设所有用户都是好友，任何一个用户上线，都会出现在其他人的好友列表中，下线则会从好友列表中移除。

2.掉线后会自动进行断线重连。

3.当同名的用户登陆时，会把前面的用户挤掉。

4.所有在线用户之间进行文字聊天。

5.与在线好友进行视频聊天。

一. Demo运行效果

先来看看Demo的最终效果吧！

二. JS 实现过程

1.实现账号登录

登录界面如下：

打开视频聊天demo网页时，会出现登录界面，输入视频服务器IP、账号（使用随机生成的就可以），点击登录按钮就可以登录到视频聊天服务器。

调用ESFramework框架的RapidPassiveEngine()的initialize方法，以及OMCS框架的MultimediaManager的Initialize方法以完成登录。

登录成功后会自动进入用户主界面。

        //OMCS登录$('#Singin').bind("click", function () {this.multimediaManager = MultimediaManagerFactory.GetSingleton();var id = document.getElementById("userID").value;//用户idvar posw = document.getElementById("logonPassword").value;//用户密码var serverIP = document.getElementById("serverIP").value;//ip地址// var serverPort = document.getElementById("serverPort").value;//端口try {if (this.multimediaManager.Connected() == true) {this.multimediaManager.Initialize(id, posw, serverIP, 9900);             } else {alert("登录失败");console.log("多媒体webSocket还未连成功");}}catch (ex) {console.log(ex);}})//ESFramework登录$('#Singin').bind("click", function () {                       engine.initialize({serverIP: serverIP,//服务器IPserverPort: serverPort,//服务器端口userID: userID,//登录用户名useWss: false,logonPassword: hex_md5(logonPassword),//md5后的密码heartBeat: 5000,//心跳间隔时间(单位为ms)callBackTimeout: 5000,//回调方法超时时间(单位为ms)maxLengthOfUserID: 11,//设置用户名最大长度customizeHandler: new CustomizeHandler(),//用户自定义消息处理器loginResutCallBack: function (loginResult) {//登录结果回调方法if (loginResult.logonResult == 0) {//登录成功$("#chatBox").html("登录服务器成功");document.getElementById('loginid').innerHTML = '当前账号 '+userID;document.getElementById('login').style.display = 'none';document.getElementById('main').style.display = 'block'                      //esf登录engine.ContactsOutter.addEventListener(new contractsListener());//注册联系人事件engine.BasicOutter.addEventListener(new basicListener());//注册基础事件});};

2. 实现文字聊天

使用通信框架最基础的需求就是收发信息，ESFramework(WebSocket)底层已经为我们封装好了所有与信息收发相关的操作，当RapidPassiveEngine被new出来以后，RapidPassiveEngine对象就实例化了CustomizeOutter 属性，在对象的initialize函数被调用后，即可调用CustomizeOutter 里面的相关函数来发送消息，以及实现customizeHandler后就可以处理收到的信息。

Web端可以收到来自其它客户端或服务端的信息、大数据块、以及同步调用。

（1）发送文字聊天消息

发送文字聊天信息可时通过调用CustomizeOutter中send()来进行操作，再发送前点击在线用户即可改变targetUser的值从而绑定你要发送信息的对象。

//选择聊天对象
function selectUser(userid) {var selfid = document.getElementById('userID').value;targetUser = userid;$("#chatBox").html("正在与" + userid + "对话中.....");var shows = document.getElementById('showfather').children;//console.log(shows);for (var i= 0; i < shows.length; i++) {if (shows[i].id != (userid + 'show')) {shows[i]. className='othershow'}document.getElementById(userid + 'show').className = 'shownow'}
}

发送信息时可以自定义不同的参数，从而判断出不同的消息类型。

//发送信息    $("#btn").bind("click", function () {if ($(".bottomtext").val() == "") {alert("不能发送空消息~");return;}else if (targetUser.length == 0) {alert("未选中目标用户~");return;}else {value = $(".bottomtext").val();var selfid=document.getElementById('userID').value;appendContent("自己", value，selfid);$(".bottomtext").val("");var time = [];var info = util.getbytes(value);//以下为与服务端定义的协议体var stream = new OStream(time);var bodyLen = 4 + 4 + info.length + 4;stream.writeInt32(bodyLen);stream.writeInt32(info.length);stream.write(info);stream.writeInt32(1);//发送时间  距离2016.01.01 00:00:00的总秒数engine.CustomizeOutter.send(0, stream.getBytesArray(), targetUser);}})

（2）处理文字聊天消息

当我们收到其他在线用户或者服务端发来的信息时，通过实现customizeHandler接口来获取和处理信息。

我们在用户登录时调用initialize方法时转入即可自动处理接收到的信息，接收到的信息我们通过判断信息类型来执行不同的操作。

function CustomizeHandler() {this.handleInformation = function (sourceUserID, informationType, info) {if (informationType == 0)//聊天消息{                  } else if (informationType == 1)//视频消息{                            } else if (informationType == 2) {                               } else if (informationType == 3) {}

（3）渲染显示文字聊天消息

通过appendOtherContent和appendContent函数将信息在页面中渲染出来通过传入的对象OppositeID不同将收到的信息渲染到不同的聊天窗口。并且通过selectUser来切换到发送信息的用户的窗口。

function appendContent(sendName, content, OppositeID) {Time = getTime();$("#" + OppositeID).append('<div class="selfstyle"><p class="selfname">' + sendName + ":" + Time + '</p><p>' + content + '</p></div>');$("#" + OppositeID).animate({ scrollTop: 99999 });}function appendOtherContent(sendName, content, OppositeID) {Time = getTime();selectUser(OppositeID);var showid = OppositeID + 'show'$("#" + showid).append('<div class="otherstyle"><p class="othername">' + sendName + ":" + Time + '</p><p>' + content + '</p></div>');$("#" + showid).animate({ scrollTop: 99999 });

3. 实现视频聊天

视频聊天功能可以让你与服务器上的在线用户进行视频聊天，通过OMCS服务插件来实现摄像头和麦克风的连接，所以在使用前必须打开OMCS视频服务Web插件才能正常使用。

（1）点击视频聊天后先通过CustomizeOutter 的send向对方发送消息类型为1的视频连接请求数据，同时打开视频聊天的窗口并且打开自己的摄像头和麦克风连接

（2）视频连接对象收到数据类型为1的视频连接请求后出接受视频连接的聊天框，可以选择接受或拒绝.

当视频连接对象选择接受视频聊天，则会同时连接自己和对方的摄像头麦克风；

当对方拒绝时，则关闭视频连接的请求。

选择过后将会发送一条消息类型为2的消息给视频的发起者。

（3）视频发起者收到数据为2的回复后，会进行判断对方的选择是接受还是拒绝，若是接受则开始连接对方的摄像头，拒绝则关闭自己的摄像头麦克风和视频连接窗口。

（4）当某一方关闭连接或者断开连接时会发送一条消息类型为3的消息发给另一方，收到类型为3的消息后会断开自己的摄像头和麦克风连接。

在连接过程中也可通过视频聊天窗口的控件，控制自己的摄像头麦克风的开启和关闭。

发送视频请求时间如下（接受拒绝和关闭同理）

$('#videomic').bind('click', function () {     if (targetUser.length == 0) {alert("未选中视频聊天用户~");return;} else {value = 'null';console.log(value);document.getElementById('VideoMic').style.display = 'block';document.getElementById('VideoHeardTxt').innerHTML = '连接中...';document.getElementById('VideoSelf').src = 'img/video.jpg'document.getElementById('VideoOther').src = 'img/head.jpg'ConnertVideoSelf(userID, 'VideoSelf')appendContent(selfid, "我发送了视频请求");var time = [];var info = util.getbytes(value);//以下为与服务端定义的协议体var stream = new OStream(time);var bodyLen = 4 + 4 + info.length + 4;stream.writeInt32(bodyLen);stream.writeInt32(info.length);stream.write(info);stream.writeInt32(1);//发送时间  距离2016.01.01 00:00:00的总秒数var userID = document.getElementById('userID').value;         engine.CustomizeOutter.send(1, null, targetUser);}})

视频麦克风连接事件如下

var microphoneConnector, dynamicCameraConnector;
var cameraArr = [];
var micArr = [];
function Connectvideo(destID, whichimg) {var a = document.getElementById(whichimg);this.dynamicCameraConnector = new DynamicCameraConnector();this.dynamicCameraConnector.ConnectEnded = connectEnded;  //连接成功监听this.dynamicCameraConnector.Disconnected = disconnected;  //连接关闭监听this.dynamicCameraConnector.OwnerOutputChanged = videoOutput;this.dynamicCameraConnector.SetAutoReconnect(true);this.dynamicCameraConnector.AutoReconnectSucceed = videocl;this.dynamicCameraConnector.SetViewer(a);this.dynamicCameraConnector.BeginConnect(destID);//开始摄像头的连接cameraArr.push(this.dynamicCameraConnector);this.microphoneConnector = new MicrophoneConnector();this.microphoneConnector.ConnectEnded = microphone;this.microphoneConnector.OwnerOutputChanged = micOutput;this.microphoneConnector.SetAutoReconnect(true);this.microphoneConnector.AutoReconnectSucceed = miccl;this.microphoneConnector.BeginConnect(destID);//开始麦克风的连接micArr.push(this.microphoneConnector);
}

视频聊天的几个特性：

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

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

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

（4）点击右下角较小视频窗口，会放大该视频显示窗口。

（5）Web版的视频聊天可以与pc版视频聊天互通。