声网 Agora SDK | vue案例

1、运行安装命令

npm install agora-rtc-sdk

2、在项目中引入sdk

import AgoraRTC from 'agora-rtc-sdk'

3、定义变量

export default {
    data () {
        return {
            rtc: {
                client: null,
                joined: false,
                published: false,
                localStream: null,
                remoteStreams: [],
                params: {},
                playingStreamList: []
            },
            option: {
                appID: "",  // 这里可以放在config中process.env.SW_APPID
                channel: "",
                uid: null,
                token: null
            }
        }
    }
}

4、初始化一个客户端对象加入房间需要操作的步骤

// 首先在methods中写入一个joinRoom () {}的方法
joinRoom () {
    let $this = this;
    // 这里使用直播场景mode: "live"
    $this.rtc.client = AgoraRTC.createClient({mode: "live", codec: "h264"});
    if ($this.rtc.joined) {
        console.log("Your already joined");
        return;
    }
  	$this.rtc.params = $this.option;
    // 监听绑定事件
    this.handleEvents();
    // 初始化client对象
    $this.rtc.client.init($this.option.appID, function () {
        // setClientRole该方法设置用户角色'host'是主播，'audience'是观众
        $this.rtc.client.setClientRole('audience');
        // 加入频道
        $this.rtc.client.join($this.option.token, $this.option.channel, $this.option.uid ? +$this.option.uid : null,function (uid) {
            $this.rtc.joined = true;
            $this.rtc.params.uid = uid;
            // getTransportStats获取本地客户端与网关的连接状况的统计数据  按需添加
            $this.agoraRTTTimer = setInterval(() => {
                $this.rtc.client.getTransportStats((stats) => {
                  	$this.agoraRTT = stats.RTT
                });
            }, 3000)
        }, function(err) {
            console.log("client join failed, please open console see more detail")
            console.log("客户端连接失败", err)
        })
    }, (err) => {
        console.log("client init failed, please open console see more detail")
        console.log('客户端初始化失败', err);
    });
}

5、创建监听事件

handleEvents () {
      var $this = this
      // Occurs when an error message is reported and requires error handling.
      $this.rtc.client.on("error", (err) => {
          console.log(err)
      })
      // 监听 "peer-leave" 事件，监听离开房间
      $this.rtc.client.on("peer-leave", function(evt) {
          var remoteStream = evt.stream;
          var id = remoteStream.getId();
          remoteStream.stop("remote_video_" + id);
          $this.rtc.remoteStreams = $this.rtc.remoteStreams.filter(function (stream) {
          return stream.getId() !== id
          })
          $this.removeView(id);
      });
      // 监听 "stream-added" 事件，当有远端流加入时订阅该流。
      $this.rtc.client.on("stream-added", function (evt) {  
          var remoteStream = evt.stream;
          var id = remoteStream.getId();
          if (id !== $this.rtc.params.uid) {
          $this.rtc.client.subscribe(remoteStream, function (err) {
              console.log("stream subscribe failed", err);
          })
          }
      });
      // 监听 "stream-subscribed" 事件，订阅成功后播放远端流。
      $this.rtc.client.on("stream-subscribed", function (evt) {
          var remoteStream = evt.stream;
          var id = remoteStream.getId();
          // 捕获到流id
          $this.addView(id);
          // 播放流id
          remoteStream.play("remote_video_" + id, function(err) {
          if (err && err.status !== "aborted"){
              // 播放失败，一般为浏览器策略阻止。引导用户用手势触发恢复播放
              $this.playStatus = true
              $this.rtc.playingStreamList.push(remoteStream);
          }
          });
      })
      // 监听 "stream-removed" 事件，当远端流被移除时
      $this.rtc.client.on("stream-removed", function (evt) {
          var remoteStream = evt.stream;
          var id = remoteStream.getId();
          remoteStream.stop("remote_video_" + id);
          $this.rtc.remoteStreams = $this.rtc.remoteStreams.filter(function (stream) {
          		return stream.getId() !== id
          })
          $this.removeView(id);
      })
  }

6、创建ID流，删除ID流

addView(id) {
    let domIntro = document.createElement('div')
    domIntro.setAttribute('id', 'remote_video_' + id)
    document.getElementById("audio").appendChild(domIntro)
    // 添加指定ID流后的交互动作
    ...
}

removeView(id) {
    let removedom = document.getElementById("remote_video_" + id)
    removedom.remove()
    // 删除指定ID流后的交互动作
    ...
}

7、退出房间

退出房间leave方法可直接挂在到destroyed钩子中，若该页是APP内webview单独打开，退出时需要与客户端交互来实现

destroyed () {
    this.rtc.client.leave(function() {
      console.log("client leaves channel");
    }, function(err) {
      console.log("client leave failed ", err);
    });
}

填入正确的channel，token，appID就可以运行了，了解更多 api 请移步到官网