vue视频通话(Agora声网)

Posted 2023-03-31 @才华有限公司

文章目录

• 声网简介
• • • • 语音视频通话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 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组件版本 配套文档

RTC月度小报5月 |教育aPaaS灵动课堂升级抢先体验VUE版 Agora Web SDK声网Agora与HTC达成合作

本月亮点速览

产品与技术：

声网Agora 教育 aPaaS 灵动课堂升级 视频通话/语音通话/互动直播 Native SDK 升级上线 3.4.2 版本
视频通话/语音通话/互动直播 Web SDK 升级至 4.5.0 版本 互动白板本月发布了四个版本，最新版本为 2.12.29
本地服务端录制 SDK 已更新至 3.0.6 版本

RTC 社区动态：

QCon 实时音视频专场：实时互动的最佳实践与未来展望 抢先体验 VUE 版 Agora Web SDK！
实时语音质量监控系统的过去、现在和未来

声网Agora 动态：

声网2021年Q1财报：营收4023万美元，创历史新高 声网Agora 受邀参加ACE教育峰会 声网Agora 与 HTC
达成合作，赋能下一代 AR 与 XR 技术创新

产品与技术

声网Agora 教育 aPaaS 灵动课堂升级

声网Agora 教育 aPaaS 产品灵动课堂现已升级至 v1.1.0 版本。声网Agora 灵动课堂可以帮助教育机构和开发者最快 15 分钟上线自有品牌、全功能的在线互动教学平台，节省 90% 开发时间。灵动课堂自 1 月 20 日发布，截至 3 月 31 日注册用户数超 1000 家，支持的课堂数量超过 50 万/月，全球覆盖学生数累计超过 400 万。

在新版本的灵动课堂中，我们针对此前“UI 不易于修改”的问题，将 UI 代码与业务逻辑隔离，并提供 UI Kit ，从而能让开发者可以更容易地修改、添加 UI 控件。既保证了低代码开发，又提供了更高的自定义灵活度。

同时，为了让大家可以替换、添加灵动课堂的一些功能模块，甚至针对自身业务需求增加功能模块，我们还增加了自定义插件功能，即 ExtApp。你可以像搭积木一样，将自己实现的一些课堂功能，比如倒计时、抢答等，加入灵动课堂。🔗点击这里了解更多。

5 月更多发版信息

视频通话/语音通话/互动直播 Native SDK 升级上线了 3.4.2 版本。Android 版本上，现已支持通过 URI 访问本地文件。在 macOS 版本上，修复了 USB 设备驱动问题，以及 Rosetta 转译问题。同时，还修复了 3.4.0、3.4.1 版本与 3.0.0 之前版本之间互通时出现的卡顿问题。

视频通话/语音通话/互动直播 Web SDK 已在 5 月升级至 4.5.0 版本。新增了针对特定场景中，本地播放音频的回声消除功能，并优化了媒体流安全性，增加了新的加密模式，还改进了屏幕共享视频功能。同时，我们还在 5 月发布了 3.6.0 版 Web SDK(供老版本 SDK 用户使用)，修改了由于浏览器策略变化带来的问题，并改进了媒体流加密、视频体验等。

「互动白板」本月发布了四个版本，最新版本为 2.12.29。我们在本月为互动白板中的动态 PPT 增加支持图片透明度、图表，以及将 SmartArt 展示为图片。

本地服务端录制 SDK 已更新至 3.0.6 版本。

同时，我们还更新了声网Agora RTC SDK 的各跨平台版本，包括 Electron、Unity、Flutter、React Native 。

RTC 社区动态

QCon 实时音视频专场：实时互动的最佳实践与未来展望

5 月 29 日，在 「QCon 北京全球软件开发大会」上，由声网Agora 技术 VP 冯越作为专题出品人发起的「实时音视频专场」，邀请到了来自新东方、伴鱼英语、声网Agora 的技术专家，与大家分享了下一代视频引擎架构、大规模实施音视频系统的难点与跳转、语音测评及本地化实践、前端音视频播放器的研究与实践等话题。🔗点击这里了解更多。

抢先体验 VUE 版 Agora Web SDK！

声网 Agora Beta Program 是我们面向声网开发者所专门设立的开发者互动项目。通过声网 Agora Beta Program，我们希望可以进一步拉近开发者与声网之间的距离，倾听开发者的声音，确保我们未来的产品规划，符合开发者最真实的需求。

近期，我们正式推出了 VUE 版 Web SDK，针对使用 VUE 框架的 Web 音视频应用开发，在易用性方面做出诸多改进。本次体验官招募面向使用声网Agora SDK 的 Web 开发者，开发者可以在第一时间优先感受到 VUE 版 Web SDK 不同以往的开发体验。

快来扫码体验 VUE 版 Web SDK 吧!

实时语音质量监控系统的过去、现在和未来

随着 QoE 评价体系的发展，RTE 行业内越来越希望能够有一套实时反映用户主观体验的评估系统，声网从去年开始了音频部分的实时质量评估方法的研究，并逐渐摸索出了整个音频链路上各个环节的异常监控方法论。

在实时互动场景中，QoE 评价体系始终是一个热点话题。声网从去年开始了音频方面的实时质量评估方法的研究。我们在之前也分享过声网这套评估算法的冰山一角。5 月 13 日，在我们的「Agora Talk」直播中，声网Agora 音频算法工程师赵晓涵为开发者介绍了声网实时语音质量监控系统的进展，并和大家共同探讨交流了关于未来演化的方向。

声网动态

声网2021年Q1财报：营收4023万美元，创历史新高

北京时间 5 月 25 日，声网Agora（NASDAQ：API）发布了截至2021年3月31日的第一季度财报。财报显示，2021 年 Q1 声网实现营收 4023 万美元，去年同期为 3560 万美元，同比增长 13％；2020 年 Q4 为 3330 万美元，环比增长 21%，创历史新高。
客户规模方面，截至 2021 年 3 月 31 日，声网全球注册应用超 30.6 万个，同比增长 67%；活跃客户数量达 2324 个，同比增长 98％。🔗点击这里，了解更多。

声网Agora 受邀参加ACE教育峰会

5 月 18 日-19 日，由素质教育行业垂直媒体睿艺举办的“ACE 2021 全球素质教育行业峰会”在北京成功举办。声网Agora 副总裁何挺受邀出席峰会，并在领袖论坛上以《素质教育在实时互动中蜕变》为演讲主题，分享了实时互动技术对线上课堂教学效果的助力，以及声网在不同素质教育细分赛道的解决方案，受到与会教育机构的广泛关注。

从早期的录播到直播，再到互动直播和XR互动直播，互动从单向为主，逐渐到了实时互动直播时代，这个发展的过程中，声网一直在教育行业深耕，为教育机构提供集实时音视频、互动白板、屏幕共享、实时消息、实时录制、口语测评等功能的一站式在线教学解决方案。正是深厚的技术积累和专业优势，声网成为了在线教育行业巨头、独角兽、创业者首选的实时音视频技术服务商。🔗点击了解更多峰会详情

声网Agora 与 HTC 达成合作，赋能下一代 AR 与 XR 技术创新

全球实时互动云服务开创者和引领者声网Agora（纳斯达克股票代码：API）宣布与 HTC 达成合作。作为 HTC VIVE®独立软件供应商（ISV）计划的一部分，此次合作将加速在实时互动应用中实现 VR 技术的创新。HTC VIVE 持续打造领先的虚拟现实（VR）平台与生态，致力于为企业和消费者创造身临其境的沉浸式 VR 体验。ISV 合作伙伴计划能够帮助开发者在 HTC VIVE 的 VR 和 XR 生态系统中创建应用程序和平台，并无缝集成声网Agora 的实时音视频、实时消息、互动直播等技术。

随着消费者市场和企业级市场对 VR 和 XR 技术创新需求的不断增加，声网Agora 与 HTC 合作伙伴关系的确立，标志着当下最前沿的 Metaverse （元宇宙）场景与实时互动技术相结合的一大关键时刻的到来。在新冠肺炎疫情流行期间及疫情后期，消费者市场和企业级市场均能看到对于该场景的持续需求及其展现的价值，对于该领域的探索与创新也将为团队协作、社交、员工培训、研讨会等诸多场景带来更多新的机遇。🔗点击这里，阅读详细报道

更多社区&技术详情，可点击这里进行查看！