Vue 集成声网SDK，实现视频通话。

vue集成声网流程示例：

声网详细文档请参考：声网官方文档（该文章仅简单应用，具体使用请参考文档）

1.使用 npm 获取 SDK

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

2.在Vue项目中的mian.js文件中引入

import AgoraRTC from "agora-rtc-sdk-ng"
const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

 3.在页面中使用声网，js代码示例：（注意：appid以及token！！！）

<script>
  import AgoraRTC from "agora-rtc-sdk-ng"'

  export default {
    name: "AgoraRTC-view",
    components: {},
    data() {
      return {
        appid: '', // appId
        token: '', // 根据房间号生成的token(房间号和token对应)
        channel: '', // 房间号(房间号和token对应)
        uid: null,
        agoraClient: null, //实例
        localTracks: { //信道
          videoTrack: null,
          audioTrack: null
        },
        options: {},
        remoteUsers: {},
        bodyStyle: {
          background: "#F5F9FF",
        },
      }
    },
    created() {

    },
    methods: {
      // 开始
      sharRTC() {
        this.showModal = true;
        // 创建本地客户端 AgoraRTC 的实例
        this.agoraClient = AgoraRTC.createClient({
          mode: "rtc",
          codec: "vp8"
        });
        // 用户信息
        this.options = {
          appid: this.appid,
          channel: this.channel,
          uid: 1,
          token: this.token
        };
        // 连接
        this.join();
      },
      // 获取
      async join() {
        // 添加事件侦听器以在远程用户发布时播放远程曲目.
        this.agoraClient.on("user-published", this.handleUserPublished);
        this.agoraClient.on("user-unpublished", this.handleUserUnpublished);
        // 加入频道
        [this.uid, this.localTracks.audioTrack, this.localTracks.videoTrack] = await Promise.all([
          // join the channel
          this.agoraClient.join(this.appid, this.channel, this.token || null),
          // 使用麦克风和摄像头
          AgoraRTC.createMicrophoneAudioTrack(),
          AgoraRTC.createCameraVideoTrack()
        ]);
        // 将本地曲目发布到频道
        await this.agoraClient.publish(Object.values(this.localTracks));
        // 播放本地视频曲目
        this.localTracks.videoTrack.play("local-player");
        console.log(AgoraRTC.createMicrophoneAudioTrack(), '麦克风音频轨道')
      },
      handleUserPublished(user, mediaType) {
        const id = user.uid;
        this.remoteUsers[id] = user;
        this.subscribe(user, mediaType);
      },
      handleUserUnpublished(user) {
        const id = user.uid;
        delete this.remoteUsers[id];
      },
      async subscribe(user, mediaType) {
        const uid = user.uid;
        // 订阅远程用户
        await this.agoraClient.subscribe(user, mediaType);
        if (mediaType === 'video') {
          const player = $(`
          <div id="player-wrapper-${uid}">
            <p class="player-name">remoteUser(${uid})</p>
            <div id="player-${uid}" class="playersp"></div>
          </div>
        `);
          $("#remote-playerlist").append(player);
          user.videoTrack.play(`player-${uid}`);
          user.audioTrack.play();
        }
        if (mediaType === 'audio') {
          user.audioTrack.play();
        }
      },
      // 客户离开信道
      async Leave() {
        this.localTracks.videoTrack.stop();
        this.localTracks.videoTrack.close();
        this.localTracks.audioTrack.stop();
        this.localTracks.audioTrack.close();
        // remove remote users and player views
        this.remoteUsers = {};
        // $("#remote-playerlist").html("");
        // leave the channel
        await this.agoraClient.leave();
        // $("#local-player-name").text("");
        this.showModal = false;
        console.log("客户离开信道成功");
      }
    }
  }
</script>

4.在页面中使用声网，html代码示例：

<div class="Modalview">
        <div class="Modalview_body">
          <div class="row video-group">
            <div class="col">
              <p id="local-player-name" class="player-name"></p>
              <div id="local-player" class="playersp"></div>
            </div>
            <div class="w-100"></div>
            <div class="col">
              <div id="remote-playerlist"></div>
            </div>
          </div>
        </div>
      </div>

5.在页面中使用声网，css代码示例：

<style lang="less" scoped>
  .Modalview {
    width: 100%;
    height: 100%;
    display: flex;
    // padding: 1.25rem;
    overflow: hidden;
    position: relative;
    background: #F5F9FF;
    box-sizing: border-box;
    flex-direction: column;

    &_body {
      flex: 1;
      width: 100%;
      overflow: none;
      position: relative;
      margin-top: 0.75rem;
      transition: .3s padding ease;
      background-color: #fff;
      border-radius: 10px;
    }
  }


  .playersp {
    width: 280px;
    height: 150px;
  }

  .player-name {
    margin: 8px 0;
  }
</style>