AnyChat SDK for Web 开发流程指南

bracxzy · 发表于 2015-1-30 11:26:27

本帖最后由 bracxzy 于 2015-1-30 11:27 编辑

JavaScript的开发工具有很多，开发者可根据自己的喜好进行选择。在此，我们推荐开发者使用dreamwaver作为自己的开发工具，本套开发指南也是针对dreamwaver开发环境下进行编写的。

一、安装AnyChat Web插件
AnyChat for Web SDK包中提供了一个ActiveX插件（如果您自己有ActiveX代码签名证书，可对SDK包bin\AnyChatWeb目录中的“npanychatweb.dll”和“npvideoshowctrl”插件进行签名，具体操作参考bin下面的readme.txt文件），AnyChat Web SDK提供的所有JavaScript接口都是基于这个插件实现。在使用AnyChat Web SDK接口进行通讯之前,需要确保插件已经安装成功。安装插件的步骤如下：
(1) 打开解压后的SDK包下的bin目录，双击AnyChatWebSetup.exe程序进行安装，安装的过程中可以选择安装路径，如下图所示：

(2)按照提示，单击“下一步”按钮，即可完成插件的安装。

二、导入SDK文件
(1)将解压后的sdk包下src\sdk目录的anychatsdk.js文件拷贝到网页工程的相应的目录下面，我的目录结构如下图所示：

(2)在需要使用AnyChat Web SDK接口的网页中引入anychatsdk.js,参考代码如下：

<head>
<title>AnyChat for Web SDK Demo</title>
<script language="javascript" type="text/javascript" src="./javascript/anychatsdk.js" charset="GB2312"></script>
</head>

复制代码

  三、基本流程
   在工程准备好了之后，需要实现以下基本流程，才能调用音视频交互等其他功能接口，才能调用音视频交互等其他功能接口。

   3-1.监听基本事件
   监听“连接服务器、用户登录、进入房间、与服务器网络连接”等事件。

   (1)将SDK包下src\AnyChatWebDemo\javascript\anychatevent.js拷贝到网页工程相应目录下，并在网页中加载anychatevent.js文件，参考代码如下：

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

复制代码

(2)在anychatevent.js的函数体中可以添加上层需要处理的代码，不需要的函数可以删除。在相应的条件下内核会自动执行anychatevent.js的相应函数，参考代码如下：

// 异步消息通知，包括连接服务器、登录系统、进入房间、网络掉线等消息
function OnAnyChatNotifyMessage(dwNotifyMsg, wParam, lParam) {
switch(dwNotifyMsg) {
case WM_GV_CONNECT:
OnAnyChatConnect(wParam, lParam);break;
case WM_GV_LOGINSYSTEM:
OnAnyChatLoginSystem(wParam, lParam);break;
case WM_GV_ENTERROOM:
OnAnyChatEnterRoom(wParam, lParam);break;
case WM_GV_ONLINEUSER:
OnAnyChatRoomOnlineUser(wParam, lParam);break;
case WM_GV_USERATROOM:
OnAnyChatUserAtRoom(wParam, lParam);break;
case WM_GV_LINKCLOSE:
OnAnyChatLinkClose(wParam, lParam);break;
default:
break;
}

复制代码

3-2.初始化SDK
加载插件资源，其他的功能接口都必须在初始化成功之后才能正常使用。可以放在需要使用AnyChat功能的网页onload事件中延时(setTimeout)调用。如果初始化失败，可能是没有安装插件或者插件版本太老，可以提示客户需要安装插件并提供插件下载链接，并启动定时器不断调用初始化，直到用户安装插件成功。参考代码如下：

function loadAnyChat(){
setTimeout(function () {
//刷新网页加载插件列表
if (navigator.plugins && navigator.plugins.length) {
window.navigator.plugins.refresh(false);
}
var errorcode=BRAC_InitSDK(0);
if(errorcode==0){
//初始化成功，清除插件安装检测定时器
if(mRefreshPluginTimer != -1){
clearInterval(mRefreshPluginTimer); }
else{
if(errorcode==GV_ERR_PLUGINNOINSTALL){
//初始化失败，需要安装插件,提供插件下载链接给客户
}
else if(errorcode==GV_ERR_PLUGINOLDVERSION){
//初始化失败，当前插件的版本过低，请下载安装最新版本
}
if(mRefreshPluginTimer == -1) {
mRefreshPluginTimer = setInterval(function(){ LogicInit(); }, 1000);
}
}
}, 500);
}
window.onload = loadAnyChat;

复制代码

3-3.连接、登录服务器
使用AnyChat功能的通讯功能，必须要先连接登录AnyChat的通讯服务器，这里以我们对外公开测试服务器地址demo.anychat.cn为例，参考代码如下：

// 连接服务器,第一个参数为你需要连接的视频服务器地址，如果您部署视频服务器的地址为192.168.1.8，则传人这个地址
BRAC_Connect("demo.anychat.cn", 8906);
//登录服务器
BRAC_Login("AnyChat", "", 0);

复制代码

这两个流程的执行都是异步的操作，会触发相应的OnAnyChatConnect、OnAnyChatLoginSystem函数。

3-4.进入房间
应用层将roomid传入,进入指定的房间。只有在同一个房间内的用户才能进行音视频通讯，参考代码如下：

//第一个参数为房间号，可传入任意正数
BRAC_EnterRoom(1, "", 0);

复制代码

进入房间的操作是一个异步的操作，会依次触发anychatevent.js的OnAnyChatEnterRoom、OnAnyChatRoomOnlineUser回调（参考4.1）

RayQ · 发表于 2017-12-27 16:15:39

佰锐科技-刘洋发表于 2017-12-27 15:36
你好可以参考上面帖子内容导入web sdk 具体项目可以参考官网 web sdk源码下载链接：http://sdk.anychat ...

谢谢你耐心的指导

佰锐科技-刘洋 · 发表于 2017-12-27 15:36:17

RayQ 发表于 2017-12-27 14:29
如何部署一个web sdk的项目

你好可以参考上面帖子内容导入web sdk 具体项目可以参考官网 web sdk源码下载链接：http://sdk.anychat.cn/html/download.html 如果还有不明白的地方可以加Q2541104522 进一步详细指导

RayQ · 发表于 2017-12-27 14:29:15

如何部署一个web sdk的项目

bracxzy · 发表于 2015-1-30 11:26:28

四、音视频交互
   AnyChat for Web SDK为开发者提供了便捷的建立音视频通讯的接口，通过以下几步操作，即可在您的应用中集成音视频交互功能

   5-1.在html中准备两个div
   准备两个div，一个用于显示本地视频，一个用于显示远程视频。参考代码如下：

<div id="ANYCHAT_VIDEO_LOCAL" style="width:320px;heigh t:240px;background-color:#E6E6E6;margin:5px 5px 5px 5px;float:left;">
</div>
<div id="ANYCHAT_VIDEO_REMOTE"style="width:320px;height:240px;background-color:#E6E6E6;margin:5px 5px 5px 5px;float:left;">
</div>

复制代码

5-2.打开本地音视频
调用BRAC_UserCameraControl打开视频，调用BRAC_UserSpeakControl打开音频，调用 BRAC_SetVideoPos显示视频(AnyChatLocalVideoDiv为用来指定显示本地视频的div id)，参考代码如下：

//打开本地音视频, 第一个参数用-1表示本地，也可以用本地的真实userid
BRAC_UserCameraControl(-1, 1);
BRAC_UserSpeakControl(-1, 1);
// 第一个参数传人-1表示本地，第二个参数传入用于显示视频的div dom对象，第三个参数传入的值定义视频插件创建对象的id
BRAC_SetVideoPos(-1, getElementById ("AnyChatLocalVideoDiv"), "AnyChatLocalVideo");

复制代码

打开本地音视频数据需要在进入房间成功之后才有效，即在收到OnAnyChatEnterRoom回调后（参考4.5）打开本地音视频，其他客户端才能请求到你的音视频数据。

5-3.关闭本地音视频
打开本地音视频后，可以在音视频交互的过程中选择关闭本地音视频。同时，还可以在关闭之后重新打开本地音视频（参考5.2）；在音视频交互结束之后需要调用该操作，释放本地摄像头和音频采集设备，参考代码如下：

//关闭本地视频, 第一个参数用-1表示本地，也可以用本地的真实userid
BRAC_UserCameraControl(-1, 0);
//关闭本地音频
BRAC_UserSpeakControl(-1, 0);
//将关闭视频停留的最后一帧画面清除
BRAC_SetVideoPos(0, getElementById ("AnyChatLocalVideoDiv"), "AnyChatLocalVideo")

复制代码

5-4.请求远程音视频
在OnAnyChatRoomOnlineUser或者OnAnyChatUserAtRoom（参考3.1）中判断通话目标对象已经进入房间之后，该操作有效。调用BRAC_UserCameraControl打开视频，调用BRAC_UserSpeakControl打开音频，调用 BRAC_SetVideoPos显示视频，AnyChatRemoteVideoDiv为用来指定显示远程视频的div id，如要显示多个人的视频，准备多个div，为每个用户绑定一个div即可，参考代码如下：

// dwTargetUserID为目标通话用户userID
BRAC_UserCameraControl(dwTargetUserID, 1);
BRAC_UserSpeakControl(dwTargetUserID, 1);
// 第一个参数传人-1表示本地，第二个参数传入用于显示视频的div dom对象，第三个参数传入的值定义视频插件创建对象的id。
BRAC_SetVideoPos(dwTargetUserID, getElementById ("AnyChatRemoteVideoDiv"), "AnyChatRemoteVideo");

复制代码

5-5.关闭远程音视频
请求远程音视频后，可以在音视频交互的过程中选择关闭远程音视频。同时，还可以在关闭之后重新请求远程音视频（参考5.5）；在音视频交互结束之后需要调用该操作，释放远程音视频资源，参考代码如下：

//关闭远程视频， dwTargetUserID为目标通话用户userID
BRAC_UserCameraControl(dwTargetUserID, 0);
//关闭远程音频， dwTargetUserID为目标通话用户userID
BRAC_UserSpeakControl(dwTargetUserID, 0);

复制代码

五、资源释放

(1)离开房间
释放当前房间内的音视频资源。参考代码如下：

//离开房间，-1表示离开当前所在房间
BRAC_LeaveRoom(-1);

复制代码

在音视频交互结束后，可调用该操作。离开当前房间之后，可再次选择进入指定房间。

(2)退出
断开与AnyChat通讯服务器连接。参考代码如下：

//退出，断开与服务器连接
BRAC_Logout();

复制代码

在需要断开跟AnyChat服务器通讯连接的时候，可调用该操作。退出之后，可以再次调用连接、登录服务器。

   (3)释放资源
   释放整个SDK资源。刷新或者关闭网页就释放资源，不需要调用api释放。释放之后，需要重新调用初始化SDK，才能进行连接、登录、进入房间等操作。

  六、附录
   AnyChat for Web SDK包里提供的AnyChatWebDemo（源码在“src\AnyChatWebDemo”目录下）运行效果如下图所示：

		自动登录	找回密码
密码			立即注册