设为首页收藏本站

AnyChat技术支持论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 10887|回复: 4

AnyChat SDK for Web 开发流程指南

[复制链接]

1

主题

2

帖子

41

积分

新手上路

Rank: 1

积分
41
发表于 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程序进行安装,安装的过程中可以选择安装路径,如下图所示:


1.jpg


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


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


2.jpg


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

  1. <head>
  2. <title>AnyChat for Web SDK Demo</title>
  3. <!-- 加载AnyChat for Web SDK库-->
  4. <script language="javascript" type="text/javascript" src="./javascript/anychatsdk.js" charset="GB2312"></script>
  5. </head>
复制代码
  三基本流程
      在工程准备好了之后,需要实现以下基本流程,才能调用音视频交互等其他功能接口,才能调用音视频交互等其他功能接口。

     3-1.监听基本事件
       监听“连接服务器、用户登录、进入房间、与服务器网络连接”等事件。
      
     (1)将SDK包下src\AnyChatWebDemo\javascript\anychatevent.js拷贝到网页工程相应目录下,并在网页中加载anychatevent.js文件,参考代码如下:
  1. <head>
  2. <script language="javascript" type="text/javascript" src="./javascript/anychatevent.js" charset="GB2312"></script>
  3. </head>
复制代码
(2)在anychatevent.js的函数体中可以添加上层需要处理的代码,不需要的函数可以删除。在相应的条件下内核会自动执行anychatevent.js的相应函数,参考代码如下:
  1. // 异步消息通知,包括连接服务器、登录系统、进入房间、网络掉线等消息
  2. function OnAnyChatNotifyMessage(dwNotifyMsg, wParam, lParam) {
  3.    switch(dwNotifyMsg) {
  4.      case WM_GV_CONNECT:
  5.         OnAnyChatConnect(wParam, lParam);break;
  6.      case WM_GV_LOGINSYSTEM:
  7.         OnAnyChatLoginSystem(wParam, lParam);break;
  8.      case WM_GV_ENTERROOM:
  9.         OnAnyChatEnterRoom(wParam, lParam);break;
  10.      case WM_GV_ONLINEUSER:
  11.         OnAnyChatRoomOnlineUser(wParam, lParam);break;
  12.      case WM_GV_USERATROOM:
  13.         OnAnyChatUserAtRoom(wParam, lParam);break;
  14.      case WM_GV_LINKCLOSE:
  15.         OnAnyChatLinkClose(wParam, lParam);break;
  16.      default:
  17.         break;
  18. }
复制代码
3-2.初始化SDK
           加载插件资源,其他的功能接口都必须在初始化成功之后才能正常使用。可以放在需要使用AnyChat功能的网页onload事件中延时(setTimeout)调用。如果初始化失败,可能是没有安装插件或者插件版本太老,可以提示客户需要安装插件并提供插件下载链接,并启动定时器不断调用初始化,直到用户安装插件成功。参考代码如下:
  1. function loadAnyChat(){
  2.     setTimeout(function () {
  3.     //刷新网页加载插件列表
  4.     if (navigator.plugins && navigator.plugins.length) {
  5.         window.navigator.plugins.refresh(false);
  6.     }
  7.     var errorcode=BRAC_InitSDK(0);
  8.     if(errorcode==0){
  9.         //初始化成功,清除插件安装检测定时器
  10.      if(mRefreshPluginTimer != -1){
  11.             clearInterval(mRefreshPluginTimer); }
  12.     else{
  13.         if(errorcode==GV_ERR_PLUGINNOINSTALL){
  14.             //初始化失败,需要安装插件,提供插件下载链接给客户
  15.         }
  16.         else if(errorcode==GV_ERR_PLUGINOLDVERSION){
  17.             //初始化失败,当前插件的版本过低,请下载安装最新版本
  18.         }
  19.         if(mRefreshPluginTimer == -1) {
  20.             mRefreshPluginTimer = setInterval(function(){ LogicInit(); }, 1000);
  21.         }
  22. }
  23. }, 500);
  24. }
  25. window.onload = loadAnyChat;
复制代码
3-3.连接、登录服务器
     使用AnyChat功能的通讯功能,必须要先连接登录AnyChat的通讯服务器,这里以我们对外公开测试服务器地址demo.anychat.cn为例,参考代码如下:
  1. // 连接服务器,第一个参数为你需要连接的视频服务器地址,如果您部署视频服务器的地址为192.168.1.8,则传人这个地址
  2. BRAC_Connect("demo.anychat.cn", 8906);
  3. //登录服务器
  4. BRAC_Login("AnyChat", "", 0);
复制代码
这两个流程的执行都是异步的操作,会触发相应的OnAnyChatConnect、OnAnyChatLoginSystem函数。

     3-4.进入房间
     应用层将roomid传入,进入指定的房间。只有在同一个房间内的用户才能进行音视频通讯,参考代码如下:
  1. //第一个参数为房间号,可传入任意正数
  2. BRAC_EnterRoom(1, "", 0);
复制代码
进入房间的操作是一个异步的操作,会依次触发anychatevent.js的OnAnyChatEnterRoom、OnAnyChatRoomOnlineUser回调(参考4.1)

回复

使用道具 举报

1

主题

2

帖子

41

积分

新手上路

Rank: 1

积分
41
 楼主| 发表于 2015-1-30 11:26:28 | 显示全部楼层
    四、音视频交互
     AnyChat for Web SDK为开发者提供了便捷的建立音视频通讯的接口,通过以下几步操作,即可在您的应用中集成音视频交互功能

     5-1.在html中准备两个div
     准备两个div,一个用于显示本地视频,一个用于显示远程视频。参考代码如下:
  1. <!-- 用于显示本地视频div-->
  2.     <div id="ANYCHAT_VIDEO_LOCAL" style="width:320px;heigh t:240px;background-color:#E6E6E6;margin:5px 5px 5px 5px;float:left;">
  3.     </div>
  4.     <!-- 用于显示远程视频div-->
  5.     <div id="ANYCHAT_VIDEO_REMOTE"style="width:320px;height:240px;background-color:#E6E6E6;margin:5px 5px 5px 5px;float:left;">
  6.     </div>
复制代码
5-2.打开本地音视频
     调用BRAC_UserCameraControl打开视频,调用BRAC_UserSpeakControl打开音频,调用 BRAC_SetVideoPos显示视频(AnyChatLocalVideoDiv为用来指定显示本地视频的div id),参考代码如下:
  1. //打开本地音视频, 第一个参数用-1表示本地,也可以用本地的真实userid
  2.     BRAC_UserCameraControl(-1, 1);
  3.     BRAC_UserSpeakControl(-1, 1);
  4.     // 第一个参数传人-1表示本地,第二个参数传入用于显示视频的div dom对象,第三个参数传入的值定义视频插件创建对象的id
  5.     BRAC_SetVideoPos(-1, getElementById ("AnyChatLocalVideoDiv"), "AnyChatLocalVideo");
复制代码
打开本地音视频数据需要在进入房间成功之后才有效,即在收到OnAnyChatEnterRoom回调后(参考4.5)打开本地音视频,其他客户端才能请求到你的音视频数据。
   
     5-3.关闭本地音视频
     打开本地音视频后,可以在音视频交互的过程中选择关闭本地音视频。同时,还可以在关闭之后重新打开本地音视频(参考5.2);在音视频交互结束之后需要调用该操作,释放本地摄像头和音频采集设备,参考代码如下:
  1. //关闭本地视频, 第一个参数用-1表示本地,也可以用本地的真实userid
  2.     BRAC_UserCameraControl(-1, 0);
  3.     //关闭本地音频
  4.     BRAC_UserSpeakControl(-1, 0);
  5.     //将关闭视频停留的最后一帧画面清除
  6.     BRAC_SetVideoPos(0, getElementById ("AnyChatLocalVideoDiv"), "AnyChatLocalVideo")
复制代码
5-4.请求远程音视频
     在OnAnyChatRoomOnlineUser或者OnAnyChatUserAtRoom(参考3.1)中判断通话目标对象已经进入房间之后,该操 作有效。调用BRAC_UserCameraControl打开视频,调用BRAC_UserSpeakControl打开音频,调用 BRAC_SetVideoPos显示视频,AnyChatRemoteVideoDiv为用来指定显示远程视频的div id,如要显示多个人的视频,准备多个div,为每个用户绑定一个div即可,参考代码如下:
  1. // dwTargetUserID为目标通话用户userID
  2.     BRAC_UserCameraControl(dwTargetUserID, 1);
  3.     BRAC_UserSpeakControl(dwTargetUserID, 1);
  4.     // 第一个参数传人-1表示本地,第二个参数传入用于显示视频的div dom对象,第三个参数传入的值定义视频插件创建对象的id。
  5.     BRAC_SetVideoPos(dwTargetUserID, getElementById ("AnyChatRemoteVideoDiv"), "AnyChatRemoteVideo");
复制代码
5-5.关闭远程音视频
     请求远程音视频后,可以在音视频交互的过程中选择关闭远程音视频。同时,还可以在关闭之后重新请求远程音视频(参考5.5);在音视频交互结束之后需要调用该操作,释放远程音视频资源,参考代码如下:
  1. //关闭远程视频, dwTargetUserID为目标通话用户userID
  2.     BRAC_UserCameraControl(dwTargetUserID, 0);
  3.     //关闭远程音频, dwTargetUserID为目标通话用户userID
  4.     BRAC_UserSpeakControl(dwTargetUserID, 0);
复制代码
五、资源释放

     (1)离开房间
     释放当前房间内的音视频资源。参考代码如下:
  1. //离开房间,-1表示离开当前所在房间
  2.     BRAC_LeaveRoom(-1);
复制代码
在音视频交互结束后,可调用该操作。离开当前房间之后,可再次选择进入指定房间。
   
      (2)退出
      断开与AnyChat通讯服务器连接。参考代码如下:
  1. //退出,断开与服务器连接
  2.     BRAC_Logout();
复制代码
在需要断开跟AnyChat服务器通讯连接的时候,可调用该操作。退出之后,可以再次调用连接、登录服务器。

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

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

   3.png
回复 支持 反对

使用道具 举报

0

主题

3

帖子

20

积分

新手上路

Rank: 1

积分
20
发表于 2017-12-27 14:29:15 | 显示全部楼层
如何部署一个web sdk的项目
回复 支持 反对

使用道具 举报

2

主题

336

帖子

1243

积分

金牌会员

Rank: 6Rank: 6

积分
1243
发表于 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 进一步详细指导
回复 支持 反对

使用道具 举报

0

主题

3

帖子

20

积分

新手上路

Rank: 1

积分
20
发表于 2017-12-27 16:15:39 | 显示全部楼层
佰锐科技-刘洋 发表于 2017-12-27 15:36
你好 可以参考上面帖子内容导入web sdk  具体项目可以参考官网 web sdk源码下载链接:http://sdk.anychat ...

谢谢你耐心的指导
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|AnyChat ( 粤ICP备13022410号-1 )  

GMT+8, 2020-11-29 01:32 , Processed in 0.152842 second(s), 25 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表