浏览器上的音频即时通讯应用开发

网络上视频主播的火热带动了网络视频聊天室开发行业的火热。现在网上企业或者工作室在弄网页的视频聊天室。通过个人学习,借用别人的开发Demo(AnyChat SDK,网上随便搜索一下就可以下载的),加上几十行JavaScript脚本就能轻松实现视频通话;也不用去下载指定的什么浏览器,因为IE、firefox、chrome等windows平台主流浏览器全部通过,完美运行。下边就跟大伙分享分享我的成果,布局代码就不贴出来了,只贴JavaScript脚本。

下面是我所使用的开发包的特点:

1.        支持Windows平台浏览器上的音频即时通讯应用开发

2.        提供JavaScript语言API接口,脚本编程

3.        兼容IE、Chrome、Firefox、360、遨游等主流浏览器

4.        支持iOS、Android、PC等设备和Web之间的互联互通

一、加载AnyChat for Web SDK

首先还是得先加载AnyChatfor Web SDK库

<scriptlanguage="javascript" type="text/javascript"src="./javascript/anychatsdk.js"charset="GB2312"></script>

<scriptlanguage="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(){    // 初始化

varNEED_ANYCHAT_APILEVEL = "0";

varerrorcode = 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表示出错代码

functionOnAnyChatConnect(bSuccess, errorcode) {

if(errorcode == 0) { }    // 连接服务器成功

elsealert("连接服务器失败");     //连接失败作提示,此时系统不会触发登录系统函数

}

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

// 客户端登录系统,dwUserId表示自己的用户ID号,errorcode表示登录结果:0 成功,否则为出错代码,参考出错代码定义

functionOnAnyChatLoginSystem(dwUserId, errorcode) {

if(errorcode == 0) {    // 登录成功,显示大厅界面,隐藏登录界面。失败的话什么也不做,维持原状

mSelfUserId = dwUserId;

document.getElementById("login_div").style.display ="none";   //隐藏登录界面

document.getElementById("hall_div").style.display ="block";   //显示大厅界面

}

}

、调用进入房间函数

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

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

// 进入房间

functionEnterRoom(){    // 进入自定义房间

BRAC_EnterRoom(parseInt(document.getElementById("customroomid").value),"", 0);  //进入房间

}

进入房间触发回调函数

// 客户端进入房间,dwRoomId表示所进入房间的ID号,errorcode表示是否进入房间:0成功进入,否则为出错代码

functionOnAnyChatEnterRoom(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

functionOnAnyChatRoomOnlineUser(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)房间

functionOnAnyChatUserAtRoom(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 = "";

}

收到在线用户发来信息时会触发函数

// 收到文字消息

functionOnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) {

document.getElementById("ReceiveMsg").innerHTML +=BRAC_GetUserName(dwFromUserId) + ":" + lpMsgBuf +"<br />";  // 收到信息显示到接收框

}

自定义函数

//自定义函数 请求远程视频用户

function SetTheVideo() {

varuseridlist = 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];

}

六、退出房间

退出房间调用函数

functionOutOfRoom(){

BRAC_LeaveRoom(dwRoomid);

}

七、退出系统

退出系统调用函数

functionOutOfSystem(){

BRAC_Logout();

}

到此,简单的视频聊天室就完成了,如果你是个人的研究,不讲究界面和风格,甚至可以直接试用,可以和朋友直接视频聊天了,如果你是开发工作室,那么请一个设计师,优化界面和其他功能部署,那么你的开发基本完成了!

时间: 2024-12-10 06:25:11

浏览器上的音频即时通讯应用开发的相关文章

iOS平台上的音视频即时通讯应用开发

现在IOS很是火热,一大堆开发人员在捣鼓IOS平台的开发,相信大家也使用过QQ的语音视频对话功能,但是不知道大家有没有试过自己来开发一个基于IOS平台的音视频即时通讯的应用,这个应用必须能够做到跨平台 支持iOS平台设备上的音频即时通讯应用开发 提供Objective-C语言API接口,开放示例源代码 集成H.264.AAC.AMR等编解码技术 封装音视频的采集.编解码.传输.显示和播放等模块 支持Android.Web.PC等设备和iOS之间的互联互通 想要在IOS平台下实现音视频通信,最快捷

通证经济项目区块链社交im即时通讯系统开发

首先我们要明白"TOKEN"并不是代币的名词,所以我们常说的通证经济项目也不仅仅只是发行代币.这一点我们应该有所了解.通证经济目前是我们常常能够听到的一个名词,但它究竟是何意思呢?即时通讯系统开发微ruiec762679手机138-2311-5027通证经济简单的可以理解为在这个"大家庭"中,每个人的能力都是有限的,可能我擅长这个,你擅长这个,因此我们能够把所有人的力量集中在一个项目中,有钱的出钱,有力的出力,在这个过程中,只要你出过一份力量,系统就会根据你出的力量

区块链资产交易所搭建IM即时通讯系统开发

区块链资产交易所搭建IM即时通讯系统开发 [本文由源中瑞涂先生编辑/交易所开发VX搜索:ruiec999]随着数字资产交易市场的演进和机构投资者的参与,交易所领域创业面临的合规.安全.专业.透明等问题也逐渐成为其新的竞争力增长点.源中瑞业务涵盖:数字资产交易所开发.场外交易所开发.币币交易所开发.数字资产多币种钱包开发.数字资产抵押系统开发.IM即时通讯系统开发等各类区块链技术系统.(数字资产交易所:jy.ruiec.com)根据18年上半年全球各地交易所数量增长迅速,除传统中心化交易所以外,交

局域网实现即时通讯系统开发

随着全球信息化进程的不断发展,越来越多的企业使用局域网来管理各种事务.但随着局域网的机器增多,软件的应用对局域网的信息吞吐.处理能力的要求也越高.为解决上述矛盾,就有必要设计一个在局域网里的ICQ,国内拥有领先音视频通讯技术的佰锐科技十年专注于"AnyChat"音视频开发平台,通过采用先进的H.264视频编解码技术和AAC音频编解码技术,改善P2P数据传输技术.通过该系统,进行文件传输,消息的发布,提高企业的工作效率. AnyChat音视频开系统基于TCP/IP网络协议,采用C/S模式

关于即时通讯功能开发技术选型

最近研究即时通讯,发现自己使用XMPP,用openfire或者enjebber后台,会很复杂,要涉及到二次开发后台,要用java或者enjebber专用语言,实在无法开展. 后来找了下其他资料,发现现在国内的即时通讯云有好几家,功能都挺不错的,很强大,完爆自己后台,还省事,不花钱,挺好的,毫不犹疑的学习起来了他们的SDK. 我综合各方面最后选择了环信的产品.看了下文档,很快就基本流程,主要接口搞懂了,目测一两天就能搞出一个即使通讯功能,哈哈.

XMPP之ios即时通讯客户端开发-配置XMPP基本信息之工程代码(五)

登录功能完成以后包含以下代码文件: AppDelegate.h AppDelegate.m LoginViewController.h LoginViewController.m LoginUser.h LoginUser.m 以下看代码: // // AppDelegate.h // XMPP即时通讯 // // Created by Mac on 15/7/15. // Copyright (c) 2015年 聂小波. All rights reserved. // #import <UIK

XMPP之ios即时通讯客户端开发-mac上搭建openfire服务器(二)

come from:http://www.cnblogs.com/xiaodao/archive/2013/04/05/3000554.html 一.下载并安装openfire 1.到http://www.igniterealtime.org/downloads/index.jsp下载最新openfire for mac版 比如:Openfire 3.8.1,下载后的文件:openfire_3_8_1.dmg 2.点击安装,并执行默认操作 3.启动openfire服务 在系统偏好设置的其他里,点

XMPP之ios即时通讯客户端开发-配置XMPP基本信息(四)

前文已经有配置open fire,接下来要通过XMPP框架链接到open fire的服务器: 1.首先要在系统偏好设置里面打开open fire的服务器 2.代码中设置xmpp的myJID 有几个名词要理解: userName: password: hostName: myJID: 下面回顾先前配置open fire时的截图 hostName:127.0.0.1  (看填写的是什么,有的是用机器名***mac.local) userName:admin (open fire的登录名,默认的,修改

即时通讯 iOS音视频技术开发

随着iOS的强势面世,伴随着其出色的应用,一大堆开发人员在捣鼓IOS平台的开发,而基于iOS的音视频二次开发应用也为更多的程序员猛攻猛打.相信大家也使用过QQ的语音视频对话功能,但是不知道大家有没有试过自己来开发一个基于IOS平台的音视频即时通讯的应用,这个应用必须能够做到跨平台 支持iOS平台设备上的音频即时通讯应用开发 提供Objective-C语言API接口,开放示例源代码 集成H.264.AAC.AMR等编解码技术 封装音视频的采集.编解码.传输.显示和播放等模块 支持Android.W