文章目录

声网简介
- - - 语音视频通话API
    - 互动直播API
    - 实时消息API
    - 实时录制API
    - 实时码流加速API
    - 水晶球Agora Analytics 质量监控平台
基于声网实现视频通话
- - 注册配置
  - 实现音视频通话基本逻辑
  - - 创建对象
    - 加入频道
    - 创建轨道
    - 订阅轨道
  - 基于以上步骤封装组件
  - 导入注册使用
  - 项目页面
  - 注意事项
  - GitHub链接

声网简介

声网官网

语音视频通话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 channelthis.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 viewsthis.remoteUsers = {};$("#remote-playerlist").html("");// leave the channelawait 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:'',//你的AppIdtoken:'', // 根据房间号生成的token(房间号和token对应)channel:'',//频道号uid:8848,//uid必须为数字类型}}
}
</script>