现在网上很多朋友在弄网页的视频聊天室

一、加载AnyChat for Web SDK库

首先还是得先加载AnyChat for Web SDK库

<script language="javascript" type="text/javascript" src=/blog_article/"/javascript/anychatsdk.js" charset="GB2312"></script>
<script language="javascript" type="text/javascript" src=/blog_article/"/javascript/anychatevent.js" charset="GB2312"></script>

二、全局变量定义

 定义全局变量

var mDefaultServerAddr = "demo.anychat.cn";		// 默认服务器地址
var mDefaultServerPort = 8906; 				// 默认服务器端口号
var mSelfUserId = -1; 					// 本地用户ID
var mTargetUserId = -1; 				// 目标用户ID（请求了对方的音视频）

三、调用初始化函数

网页加载完成后判断有没有安装插件和插件是否是最新

// 页面加载完成 初始化
function LogicInit() {    // 初始化   
    var NEED_ANYCHAT_APILEVEL = "0";
    var errorcode = BRAC_InitSDK(NEED_ANYCHAT_APILEVEL);
    if (errorcode == GV_ERR_SUCCESS)    // 初始化插件成功   
        document.getElementById("login_div").style.display = "block";  // 显示登录界面   
    else    // 没有安装插件，或是插件版本太旧，显示插件下载界面   
        document.getElementById("prompt_div").style.display = "block";    // 显示提示层   
}

四、调用登录函数

在这里服务器地址和端口都写死，输入用户名就可以登录

登录按钮点击事件：

// 登录系统
function LoginToHall() {
    BRAC_Connect(mDefaultServerAddr, mDefaultServerPort);  // 连接服务器   
    BRAC_Login(document.getElementById("username").value, "", 0);    // 登录系统，密码为空也可登录   
}

调用登录函数后首先会触发连接服务器函数

// 客户端连接服务器，bSuccess表示是否连接成功，errorcode表示出错代码
function OnAnyChatConnect(bSuccess, errorcode) {
    if (errorcode == 0) { }    // 连接服务器成功       
     else alert("连接服务器失败");      //连接失败作提示，此时系统不会触发登录系统函数
}

连接服务器成功后会触发登录系统回调函数

// 客户端登录系统，dwUserId表示自己的用户ID号，errorcode表示登录结果：0 成功，否则为出错代码，参考出错代码定义
function OnAnyChatLoginSystem(dwUserId, errorcode) {
    if (errorcode == 0) {    // 登录成功，显示大厅界面，隐藏登录界面。失败的话什么也不做，维持原状   
        mSelfUserId = dwUserId; 
        document.getElementById("login_div").style.display = "none";   //隐藏登录界面   
        document.getElementById("hall_div").style.display = "block";   //显示大厅界面   
    }
}

五、调用进入房间函数

登录成功后显示大厅，大厅里就个输入框和一个 进入房间 按钮

点击 进入房间 按钮 调用函数

// 进入房间
function EnterRoom(){    // 进入自定义房间
    BRAC_EnterRoom(parseInt(document.getElementById("customroomid").value), "", 0);  //进入房间   
}

进入房间触发回调函数

// 客户端进入房间，dwRoomId表示所进入房间的ID号，errorcode表示是否进入房间：0成功进入，否则为出错代码
function OnAnyChatEnterRoom(dwRoomId, errorcode) {
    if (errorcode == 0) {  // 进入房间成功，显示房间界面，隐藏大厅界面；进入房间失败时不作任何动作   
        document.getElementById("hall_div").style.display = "none"; //隐藏大厅界面   
        document.getElementById("room_div").style.display = "block";  //显示房间界面   
        BRAC_UserCameraControl(mSelfUserId, 1);  // 打开本地视频   
        BRAC_UserSpeakControl(mSelfUserId, 1);   // 打开本地语音                   
        // 设置本地视频显示位置   
        BRAC_SetVideoPos(mSelfUserId, document.getElementById("AnyChatLocalVideoDiv"), "ANYCHAT_VIDEO_LOCAL");
        // 设置远程视频显示位置（没有关联到用户，只是占位置）                         
        BRAC_SetVideoPos(0, document.getElementById("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE");
    }
}

进入房间时，会触发在线用户回调函数

// 收到当前房间的在线用户信息，进入房间后触发一次，dwUserCount表示在线用户数（包含自己），dwRoomId表示房间ID
function OnAnyChatRoomOnlineUser(dwUserCount, dwRoomId) {
    // 判断是否需要关闭之前已请求的用户音视频数据       
    if (mTargetUserId != -1) {      // mTargetUserId 表示  上次视频会话的用户ID  为自定义变量           
        BRAC_UserCameraControl(mTargetUserId, 0);     // 关闭远程视频      
        BRAC_UserSpeakControl(mTargetUserId, 0);     // 关闭远程语音
        mTargetUserId = -1;
    }
    if (dwUserCount > 1)     // 在该函数中判断是否有在线用户，有的话就打开其中一个远程视频
        SetTheVideo();
}

有用户退出房间时判断是否远程用户，并作出相应操作

// 用户进入（离开）房间，dwUserId表示用户ID号，bEnterRoom表示该用户是进入（1）或离开（0）房间
function OnAnyChatUserAtRoom(dwUserId, bEnterRoom) {
       

      
      
    

      

浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。 

不过既然浮动元素不占任何正常文档流空间，为什么文字不在DIV下，而是环绕DIV？
这就是浮动的特性。普通的块级元素处在浮动元素下层，但它内部的文字（以及行内元素）会环绕浮动元素。
浮动的概念源自图片的左/右对齐，而图片左/右对齐的目的就是实现文字环绕图片。
所以说，这就是浮动的特性。