网页版视频聊天二.JS实现过程登录打开视频

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

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

一. Demo运行效果

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

网页传奇源代码下载

JS网页版视频聊天二. JS 实现过程1.登录

打开视频聊天demo网页时网页传奇源代码下载，会出现登录界面，输入视频服务器IP、账号（使用随机生成的就可以），点击登录按钮就可以登录到视频聊天服务器。调用通信框架的()的方法，以及OMCS语音视频框架的的方法以完成登录。

        //ESFramework登录
        $('#Singin').bind("click", function () {                       
            engine.initialize({
                serverIP: serverIP,//服务器IP
                serverPort: 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. 实现视频聊天

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

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

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

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

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

网页传奇源代码下载

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

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

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

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);
}