Vue 项目集成声网SDK

前期准备

1. 注册声网账号并创建项目

   • 注册账号：访问声网官网，完成注册流程。
     
     https://doc.shengwang.cn/api-ref/rtc/javascript/interfaces/iagorartcclient
   • 创建项目：登录后进入控制台，创建一个新项目，获取项目的 App ID。这个 App ID 是后续集成 SDK 的关键标识。

2. 配置频道与 Token

   • 设置频道号：为你的应用设定一个唯一的频道名称（Channel Name），同一频道内的用户可以进行音视频通信。
   • 生成测试 Token：在项目配置中生成用于测试的临时 Token（通常有效期为 24 小时）。正式环境中应通过你的服务器动态颁发安全的 Token。

安装与引入 SDK

1. 安装 SDK

   npm install agora-rtc-sdk-ng --save

2. 在项目中引入 SDK

   在你的 Vue 项目的入口文件（如 main.js）或其他需要用到的地方引入 SDK：
    

   import AgoraRTC from "agora-rtc-sdk-ng"

初始化客户端并加入频道

1. 创建客户端实例用于通话/直播管理

   const client = AgoraRTC.createClient({mode: 'live', //通话场景，live为直播codec: 'vp8', //浏览器使用的编码格式role: 'audience', //用户角色  audience为观众
   });

   可以调用 setClientRole 方法修改用户角色：
   client.setClientRole(ClientRole, ClientRoleOptions)

2. 定义用户参数，加入频道

   调用 join 方法让用户加入到指定的频道。成功加入后，用户可以开始接收和发送音视频流，同一频道的用户可以可以互相通话。

   const options = { appid: 'your_app_id', // 替换为你的实际 App IDchannel: 'your_channel_name', // 替换为你的频道名 token: 'your_token', // 替换为有效的 Tokenuid: 456789, // 标识用户的 ID，需保证在同一频道内唯一 ,如果不指定或设为 null，服务器会自动分配一个整数型 uid }client.join(options.appid, options.channel, options.token || null).then(res => {console.log('加入频道成功',res)
   }).catch(err => {console.log('加入频道失败', err)
   })

   加入频道时会触发 connection-state-change 回调：

   // 声网监听事件，SDK与服务器连接状态发生改变回调
   client.on('connection-state-change', state => {// state 当前连接的状态
   })

3. 加入频道成功后，会触发 user-joined 回调
   该回调在以下情况下会被触发：
   1.  通信场景的远端用户/直播场景的远端主播调用 join 方法加入频道
   2.  直播场景的远端观众加入频道后调用 setClientRole 将用户角色改变为主播
   3.  通信场景的远端用户/直播场景的远端主播网络中断后重新加入频道

   //远端用户或主播加入频道的回调，断开重新加入频道或者调用join方法加入频道都会触发该回调
   client.on('user-joined', (user) => {console.log('触发了该回调------------user-joined');//user加入频道的用户信息const uidCell = user.uid.toString();// 可以再这这个回调创建对应的DOM，添加到页面中，用于播放视频，如下：let playerDiv;         playerDiv = document.createElement("div");playerDiv.id = uidCell;playerDiv.className = `className`playerDiv.style.width = '100%';playerDiv.style.height = '100%';// 将 div 添加到页面dynamicRefs.value[`player-${uid.value}`].append(playerDiv)
   })

4. 在 user-published 回调中，调 subscribe 方法订阅远端用户的音视频轨道，然后进行播放
    

   client.on('user-published', async (user, mediaType) => {console.log('触发了该回调------------user-published');const uid = user.uid.toString();await client.subscribe(user, mediaType);//订阅远端用户的音视频轨道nextTick(() => {if (mediaType === 'video') {// xxx 是一个dom元素，如 user.videoTrack.play(document.getElementById(`${uid}`),{fit:'contain'})user.videoTrack.play('xxx')}if (mediaType === 'audio') {// 播放音频时 SDK 不会创建任何 DOM 元素，所以无需像视频一样提供 DOM 元素user.audioTrack.play()}})
   })  

5. 在 user-left 远端用户离线回调
   
   可以再该回调中判断用户是离线
    

   client.on('user-left', user => {console.log(`直播断开或结束`)
   })

6. 离开频道
   离开频道即挂断或退出通话，页面隐藏或组件销毁的时候,要离开直播间即调用 leave 方法

   //离开直播间
   client.leave()