文章目录

声网简介
- 语音视频通话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>

项目页面

点击拨打

完结

注意事项

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

GitHub链接

vue视频通话(Agora声网)相关推荐

vue项目Agora声网实现一对一视频聊天Demo示例（Agora声网实战及agora-rtc-vue使用,新增在线预览地址）
最终效果在线预览地址一.声网简介---->请查看官网二.声网注册---->请自行百度(创建音视频连接需要在Agora注册属于您的appid) 三.具体实现视频聊天步骤 1. 实现音视 ...
Unity Metaverse（八）、RTC Engine 基于Agora声网SDK实现音视频通话
文章目录简介创建应用构建应用场景 API调用与回调事件测试简介本文介绍如何在Unity中接入声网SDK,它可以应用的场景有许多,例如直播.电商.游戏.社交等,音视频通话是其实时互动的基础能 ...
Agora声网-Uniapp拉流（Vue拉流）
/** * agora声网解决方案* 1. 创建 AgoraClient 对象* 2. join进入相应频道* 3. on 监听 user-published 拿到远端用户对象 AgoraRTCRem ...
在uniapp开发中遇到的问题(agora声网进行视频通话）
自从uniapp诞生后,在实际开发的过程中使用的越来越多,虽说官方宣称是可以多平台进行适配,但在实际开发过程中可能是自己的能力不够,或者是其他什么问题,就感觉其实在做多平台的适配过程中特别是在功能的实 ...
基于 Web SDK 实现视频通话场景 | 声网 SDK 教程
声网视频 SDK 被广泛应用于多种实时互动场景中,例如视频会议.视频通话.音视频社交.在线教育等.为了让刚刚接触声网 SDK 的开发者,可以更顺畅地实现基础的视频通话功能,我们基于声网 Web SDK ...
(Agora声网)多人视频聊天应用的开发（三）多人聊天
转载于:Android多人视频聊天应用的开发(三)多人聊天-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2104587 本系列文章结合声网官方在Gi ...
(Agora声网)多人视频聊天应用的开发（一）快速集成
转载于:Android多人视频聊天应用的开发(一)快速集成-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2095621 本系列文章结合声网官方在Gi ...
(Agora声网)多人视频聊天应用的开发（二）一对一聊天
转载于:Android多人视频聊天应用的开发(二)一对一聊天-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2095626 本系列文章结合声网官方在G ...
声网Agora上市，只是云通信产业技术与商业爆发的前夜
中国软件网出品作者赵满满摘要: 一家340亿美元的企业上市需要7年,一个产业的成熟需要一个难逢的契机.一场新冠肺炎,让全球企业加速上云进程,那么这场爆发过后,云通信产业又会迎来怎样的新格局?我 ...

vue视频通话(Agora声网)