前期准备

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 ID
       channel: 'your_channel_name', // 替换为你的频道名 
       token: 'your_token', // 替换为有效的 Token
       uid: 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()