vue视频通话(Agora声网)

文章目录

声网简介

声网官网

语音视频通话API

通过调用API，应用可实现1对1、多对多实时语音、视频通话功能

互动直播API

通过调用API，可实现超低延时互动直播，让主播与观众实时连麦

实时消息API

稳定可靠、高并发、低延时的全球消息云服务 帮助你快速构建实时场景

实时录制API

提供音视频通话或直播的录制，满足回放、取证、质检、审核等应用需求，与 Agora Native / Web SDK 兼容

实时码流加速API

通过调用API，可实现自定义码流 在互联网上实时传输

水晶球Agora Analytics 质量监控平台

基于Agora实时通讯全链路数据，提供全周期质量监测、回溯和分析的解决方案

基于声网实现视频通话

注册配置

进入官网后注册进入控制台

点击创建项目

项目名称、使用场景可以任意选择
鉴权机制选择安全模式

提交后显示创建成功 ~~~

点击配置，我们开始配置token

点击生成临时token,输入自定义频道号，点击生成~，这样我们就完成了token配置！

实现音视频通话基本逻辑

创建对象

调用 createClient 方法创建 AgoraRTCClient 对象。

加入频道

调用 join 方法加入一个 RTC 频道，你需要在该方法中传入 App ID 、用户 ID、Token、频道名称 。

创建轨道

先调用createMicrophoneAudioTrack 通过麦克风采集的音频创建本地音频轨道对象；然后调用publish 方法，将本地音频轨道对象当作参数即可将音频发布到频道中。

订阅轨道

当一个远端用户加入频道并发布音频轨道时：
   1、监听client.on(“user-published”) 事件。当 SDK 触发该事件时，在这个事件回调函数的参数中你可以获取远端用户 AgoraRTCRemoteUser 对象 。
   2、调用 join subscribe 方法订阅远端用户 AgoraRTCRemoteUser 对象，获取远端用户的远端音频轨道 RemoteAudioTrack 对象。
   3、调用 play 方法播放远端音频轨道。
   
   

   
   

基于以上步骤封装组件

全部文件代码贴在在文末GitHub上
图片文件github自取

下载SDK

npm install agora-rtc-sdk-ng -s

AgoraVideo.vue

<template>
  <div id="app">
    <p id="local-player-name" class="player-name"></p>
    <div id="local-player" class="player">
      <div class="call" @click="sharRTC"></div>
      <div class="answer" @click="Leave"></div>
    </div>
    <div id="remote-playerlist"></div>
  </div>
</template>
<script>
import AgoraRTC from "agora-rtc-sdk-ng";
export default {
  name: "App",
  data() {
    return {
      agoraClient: null, //实例
      localTracks: {
        //信道
        videoTrack: null,
        audioTrack: null,
      },
      options: {},
      remoteUsers: {},
    };
  },
  props: {
    appid: String,
    token: String,
    channel: String,
    uid: Number,
  },
  mounted() {
    $(".answer").css("display", "none");
    // alert(AgoraRTC.checkSystemRequirements());是否兼容声网
  },
  methods: {
    // 开始
    sharRTC() {
      // 创建本地客户端 AgoraRTC 的实例
      this.agoraClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
      // 用户信息
      this.options = {
        appid: this.appid,
        channel: this.channel,
        uid: 8848,
        token: this.token,
      };
      // 连接
      this.join();
    },
    // 获取
    async join() {
      $(".answer").css("display", "block");
      $(".call").css("display", "none");
      // 添加事件侦听器以在远程用户发布时播放远程曲目.
      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");
    },
    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];
      console.log("我离开了，请销毁我的Dom结构！~~~");

      setTimeout(() => {
        let length = $(".player").length;
        for (let i = 0; i < length; i++) {
          if ($($(".player")[i]).html() == "") {
            $($(".player")[i]).parent().remove();
            console.log("销毁成功");
          }
        }
      }, 1000);
    },

    async subscribe(user, mediaType) {
      const uid = user.uid;
      // <div id="player-wrapper-${uid}">
      // <p class="player-name">remoteUser(${uid})</p>
      // 订阅远程用户
      await this.agoraClient.subscribe(user, mediaType);
      if (mediaType === "video") {
        const player = $(`
          <div class="player-wrapper-id">
            <div id="player-${uid}" class="player"></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("");
      console.log("客户离开信道成功");
      $(".call").css("display", "block");
      $(".answer").css("display", "none");
    },
  },
};
</script>
<style>
#app {
  width: 100%;
  height: 100%;
}
.player {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  position: relative;
}

#remote-playerlist {
  width: 17%;
  position: absolute;
  height: 171px;
  top: 40px;
  right: 20px;
}
.player-wrapper-id {
  height: 200px;
}
.call {
  cursor: pointer;
  position: absolute;
  bottom: 4%;

  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 40px;
  height: 40px;
  background-image: url("~@/assets/接听.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.answer {
  cursor: pointer;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  bottom: 4%;
  z-index: 99;
  width: 40px;
  height: 40px;
  background-image: url("~@/assets/挂断.png");
  background-size: contain;
  background-repeat: no-repeat;
}
</style>

导入注册使用

<agora-video:appid='appid' :token="token" :channel="channel" :uid="uid"/>

<script>
import AgoraVideo from './AgoraVideo.vue'
export default {
   components: {
   AgoraVideo 
  },
  data() {
    return {
      appid:'',//你的AppId
	  token:'', // 根据房间号生成的token(房间号和token对应)
      channel:'',//频道号
      uid:8848,//uid必须为数字类型
      }
    }
}
</script>

项目页面

点击拨打

完结

注意事项

1、有的电脑没有摄像头，或者有摄像头不支持（用电脑微信视频通话测试摄像头是否正常使用）
2、必须使用https协议或者本地localhost进行测试

GitHub链接

👉本文GitHub源码仓库连接

👉官网 Dome vue2组件版本(不支持vue3) GitHub源码仓库连接

👉官网 Dome vue2组件版本 配套文档