网页的视频聊天室开发
现在网上很多朋友在弄网页的视频聊天室
- 支持Windows平台浏览器上的音频即时通讯应用开发
- 提供JavaScript语言API接口,脚本编程
- 兼容IE、Chrome、Firefox、360、遨游等主流浏览器
- 支持iOS、Android、PC等设备和Web之间的互联互通
一、加载AnyChat for Web SDK库
首先还是得先加载AnyChat for Web SDK库
<script language="javascript" type="text/javascript" src="./javascript/anychatsdk.js" charset="GB2312"></script>
<script language="javascript" type="text/javascript" src="./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) {if (bEnterRoom == 1)if (mTargetUserId == -1) SetTheVideo();else {if (mTargetUserId == dwUserId)mTargetUserId = -1;}
}
发送信息时调用函数
// 发送信息
function SendMessage() {BRAC_SendTextMessage(0, 0, document.getElementById("SendMsg").innerHTML); //调用发送信息函数 Msg:信息内容document.getElementById("ReceiveMsg").innerHTML += "我:" + document.getElementById("SendMsg").innerHTML + "<br />";document.getElementById("SendMsg").innerHTML = "";
}
收到在线用户发来信息时会触发函数
// 收到文字消息
function OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) {document.getElementById("ReceiveMsg").innerHTML += BRAC_GetUserName(dwFromUserId) + ":" + lpMsgBuf + "<br />"; // 收到信息显示到接收框
}
自定义函数
//自定义函数 请求远程视频用户
function SetTheVideo() {var useridlist = BRAC_GetOnlineUser(); // 获取所有在线用户ID BRAC_UserCameraControl(useridlist[0], 1); // 请求对方视频 BRAC_UserSpeakControl(useridlist[0], 1); // 请求对方语音 BRAC_SetVideoPos(useridlist[0], document.getElementById("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE"); // 设置远程视频显示位置mTargetUserId = useridlist[0];
}
六、退出房间
退出房间调用函数
function OutOfRoom(){ BRAC_LeaveRoom(dwRoomid);
}
七、退出系统
退出系统调用函数
function OutOfSystem(){ BRAC_Logout();
}
到此,简单的视频聊天室就完成了...
网页的视频聊天室开发相关推荐
- 独家揭秘语音视频聊天室开发顶尖制作教程
互联网的不断发展,各种新技术的兴起,原本做管理软件 的我也逐渐转向从事着互联网相关的运营产品的开发.尤其是目前抄得最火热的音视频互动平台技术,今天我先列出最基本开发流程,适用于开发视频会议系统.语音视 ...
- 即时通讯 音视频聊天室开发建议
目前网上视频聊天室.视频会议软件.可视IP电话软件随处可见,你是否想自己做一个玩玩?其实这类软件无非是视频加上网络而建成的.如果熟悉视频捕 捉和网络传输技术,根本就难不倒你.本文详细介绍了如何利用别人 ...
- 基于webrtc的点对点音视频聊天室开发|spring+vue.js
WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API.它于2011年6月1日开源并在Goog ...
- 类似YY 9158网页版多人语音视频聊天室远程教学系统源码
仿六间房网页视频聊天室 网页视频直播系统源码 开发采用FMS加flash只需在网页上就可发布视频直播,无需安装插件儿 主要应用远程教育,培训,远程视频直播(类似6间房聊天室) 视频采用H264压缩一路 ...
- WebRTC实现网页版多人视频聊天室
因为产品中要加入网页中网络会议的功能,这几天都在倒腾 WebRTC,现在分享下工作成果. 话说 WebRTC Real Time Communication 简称 RTC,是谷歌若干年前收购的一项技术 ...
- FluorineFx + Flex视频聊天室案例开发----客户端
上一篇<FluorineFx + Flex视频聊天室案例开发----服务器端>详细的介绍了如何利用FluorineFx开发一个及时通信的视频聊天室服务器处理程序,并通过Web网站来宿主这个 ...
- FMS案例开发--视频聊天室(三)
本文要介绍的内容主要有利用SharedObject来实现聊天文字聊天和在线用户的列表,以及实现语音视频聊天等. 前一篇文章介绍了实现用户注册和登录的功能,本文接着介绍用户注册并成功登录后的相关功能开发 ...
- Flex与.NET互操作(十六):FluorineFx + Flex视频聊天室案例开发
本文将使用FluorineFx和Flex结合介绍一个简单的视频聊天室案例开发,希望通过此篇和大家交流FluorineFx和Flex的相关技术,同时也希望本篇可以帮助到需要使用FluorineFx做及时 ...
- 网络视频聊天室的开发指南
目前网上视频聊天室.视频会议软件.可视IP电话软件随处可见,你是否想自己做一个玩玩?其实这类软件无非是视频加上网络而建成的.如果熟悉视频捕 捉和网络传输技术,根本就难不倒你.本文详细介绍了如何利用别人 ...
最新文章
- PHP文件上传主要代码讲解
- 数据蒋堂 | 非等值分组
- KMP中next数组的理解
- 如何快速掌握oracle,教你如何快速从 Oracle 官方文档中获取需要的知识
- Spring与SpringMVC集成出现的问题
- 【例9.8】合唱队形
- java 读取图片给 matlab_如何将MATLAB图像处理程序转换为java?
- 计算机怎么远程桌面,电脑远程桌面如何连接 电脑远程桌面连接方法【详解】...
- python property作用_python中@property的作用和getter setter的解释
- 胡适:一个最低限度的国学书目
- 指数退避和AIMD为什么都青睐数字2
- 怎样对系统进行优化?
- 经典例题:判断给定数组是否已经排好序
- YouBank数字钱包
- 福寿园首席员工系列报道:一雕一琢 人生定格
- 并查集+字符排序-困兽之斗(乐视题)
- java语言输出当前日期时间的方法
- 【剑指 Offer_15】二进制中1的个数_PythonJava_逐位相与解法
- git branch -D 大写的D 删除分支
- Nimbus 社区AMA-第6期
热门文章
- android imageview选择器,ImageView 实现Android colorPikcer 选择器的示例代码
- 文件服务器临时文件,使用没有临时文件的节点js将文件上载到休息文件服务器...
- 今天接到蚂蚁金服的电话面试,直接被虐成渣渣
- Java后端保存图片
- 九三学社邬玉良:破解大数据之患
- 沪江CCtalk杨继珩:做有温度的技术,赋予未来教育更多可能!
- 一、境外资源屏蔽,helloworld,Terminator,VsCode与ROS实现,lanuch文件,ROS命令,ROS计算图
- 【愚公系列】2021年12月 python爬虫自动化-爬虫环境搭建
- HTML实例原型设计
- 三菱d700变频器模拟量控制_三菱变频器d700参数设置_三菱d700变频器代码故障_三菱d700接线图...