Web端轻松实现音视频聊天通话

网络上视频主播的火热带动了网络视频聊天室开发行业的火热。现在网上企业或者工作室在弄网页的视频聊天室。通过个人学习，借用别人的开发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();

}

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

原文链接：http://www.itpub.net/thread-1898060-1-7.html

Web端轻松实现音视频聊天通话相关推荐

VUE实现Web端多人语音视频聊天
1 多人语音聊天功能介绍本文展示了如何使用 ZEGO Express SDK 构造多人音视频通话场景,即实现多对多实时音视频聊天互动.用户可在房间内与其余用户进行实时音视频通话,互相推拉流.该场景可 ...
Web端阿里云音视频通信推流、拉流demo
请先阅读官网文档阿里云音视频通信前提:一些前期的准备工作需要后端人员去操作.下面我只要介绍Web端推流和拉流的实现方式一.推流首先请从官网下载最新sdk,添加到同层目录如下图 <!DOCT ...
即时通讯（IM）开源项目OpenIM每周迭代版本发布-音视频实时通话-v2.0.4
介绍 OpenIM每周五发布新版,包括新特性发布,bug修复,同时合并PR 由于2.0版本重构完毕,架构更清晰,代码更规范,先邀请各位参与OpenIM社区建设,包括技术开发,技术分享等,特性开发,性能 ...
技术分享| 如何快速实现音视频在线通话
请问咱们支持像微信一样的音视频呼叫功能吗? 请问呼叫邀请怎么实现? 如果客户端离线了,怎么呼叫到客户? 怎么添加呼叫铃声?以及接收铃声? 经常能听到有用户问上述的问题,今天借此机会向大家讲解下音视频呼 ...
如何实现实时音视频聊天功能
众所周之,实时音视频聊天技术门槛很高,一般的公司要想在短时间内从零补齐这方面的技术短板相当困难,而开源音视频工程WebRTC提供了这样一个捷径(包括笔者公司的产品在内,同样是基于WebRTC技术才得以 ...
基于WebRTC实现1v1音视频聊天室
一. 前言 WebRTC(Web Real-Time Communication)旨在将实时通信功能引入到浏览器,用户无需安装其他任何软件或插件即可在浏览器间进行实时通信功能.本文介绍基于 WebRT ...
如何基于 ZEGO SDK 实现 Flutter 一对一音视频聊天应用
之前的文章发布了ZEGO SDK实现Android端音视频通话应用的开发教程,不少开发者反馈很实用,能不能也出一版Flutter的教程. 有求必应,这不小编来了- 我们封装了ZEGO Flutter ...
实时音视频聊天中超低延迟架构的思考与技术实践
1.前言从直播在线上抓娃娃,不断变化的是玩法的创新,始终不变的是对超低延迟的苛求.实时架构是超低延迟的基石,如何在信源编码.信道编码和实时传输整个链条来构建实时架构?在实时架构的基础之上,如果通过优 ...
微信团队分享：微信每日亿次实时音视频聊天背后的技术解密
本文内容整理自腾讯专家研究员 & 微信视频技术负责人谷沉沉在 2017 ArchSummit 全球架构师峰会上的技术分享. 1.前言 2012 年 7 月,微信 4.2 版本首次加入了实时音视 ...
用DirectShow实现QQ的音视频聊天功能
用DirectShow实现QQ的音视频聊天功能 2005-07-19 14:11作者:智慧的鱼出处:天极网责任编辑:方舟当下比较流行的即时通信工具,比如MSN,QQ等都实现了视音频的功能,通过视频, ...

Web端轻松实现音视频聊天通话

Web端轻松实现音视频聊天通话相关推荐

最新文章

热门文章