正文

vue视频通话(agora声网)(代码片段)

@才华有限公司  @才华有限公司  2023-03-31  243

关键词：

文章目录

声网简介
基于声网实现视频通话

声网简介

声网官网

语音视频通话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版agorawebsdk声网agora与htc达成合作

...亮点速览产品与技术：声网Agora教育aPaaS灵动课堂升级视频通话/语音通话/互动直播NativeSDK升级上线3.4.2版本视频通话/语音通话/互动直播WebSDK升级至4.5.0版本互动白板本月发布了四个版本，最新版本为2.12.29本地服务端录制S... 查看详情

用声网androiduikit为实时视频通话应用添加自定义背景丨声网sdk教程(代码片段)

使用声网SDK和UIKit创建视频推流应用非常简单，而且声网还有许多功能，可以提高视频通话的质量和便利性。例如，我们可以在视频通话过程中使用虚拟背景，为视频通话增添趣味性。我们可以通过以下三种方式... 查看详情

声网agora实时音视频服务正式上线htcvivesyncapp，支持非vr用户

...者声网Agora（纳斯达克股票代码：API）宣布其视频SDK现已集成到领先的VR/XR远程协作及会议应用HTCVIVESyncApp中。通过集成声网Agora的视频SDK，HTCVIVESyncApp可以支持HTCVIVE用户和非VR用户在同一虚拟环境中进行更紧密无缝... 查看详情

关闭应用程序时颤动agora视频通话屏幕

】关闭应用程序时颤动agora视频通话屏幕【英文标题】：Flutteragoravideocallscreenwhenappisclosed【发布时间】：2021-09-0211:09:44【问题描述】：有人可以分享如何在agora后台实现呼叫屏幕的代码吗？我正在按照youtube上的CSGuySkype克隆系列开... 查看详情

声网agora教育apaas灵动课堂升级：ui与业务逻辑分离，界面功能自定义更灵活(代码片段)

声网Agora教育aPaaS产品灵动课堂现已升级至v1.1.0版本。声网Agora灵动课堂可以帮助教育机构和开发者最快15分钟上线自有品牌、全功能的在线互动教学平台，节省90%开发时间。灵动课堂自1月20日发布，截至3月31日注册用户数... 查看详情

Agora 的视频通话布局

】Agora的视频通话布局【英文标题】：Agora\'sVideoCallLayout【发布时间】：2018-06-0102:31:21【问题描述】：SDK：Agora视频通话平台：电视操作系统：Android问题strong>：我最近在我们的应用中集成了Agora的视频通话服务，每当我发起视... 查看详情

agorasdk和vuforiasdk共享视频(代码片段)

本文内容在本文中我将介绍如何将Vuforia的视频共享给Agora系统，利用声网提供的免费平台将实时视频内容共享出去。这次的案例中涉及两个技术点，一个是Vuforia的视频接口获取，一个是Agora系统以外部视频源的方式进... 查看详情

基于agorasdk实现windows端的一对一视频通话（基于3.6.2版本）(代码片段)

前提条件MicrosoftVisualStudio2019或以上版本支持Windows7或以上版本的Windows设备有效的Agora账户（免费注册）注：如果你的网络环境部署了防火墙，请根据声网文档中心的「应用企业防火墙限制」打开相关端口。设置开... 查看详情

我如何在 React-Native 中使用 agora 视频通话共享手机屏幕

】我如何在React-Native中使用agora视频通话共享手机屏幕【英文标题】：howcanisharemobilescreenusingagoravideocallinReact-Native【发布时间】：2021-08-2509:35:04【问题描述】：如何在反应原生的agora视频通话中实现屏幕共享？在agora文档中提供代... 查看详情

agora 支持视频通话铃声吗

】agora支持视频通话铃声吗【英文标题】：Doesagorasupportringtoneonvideocall【发布时间】：2019-12-1213:47:13【问题描述】：我想知道agora.io是否支持客户端电话上的视频通话响铃选项，例如A正在呼叫B并且B的电话在来电时响铃。我正在使... 查看详情

unity实战篇|接入声网sdk实现视频通话——自己动手做一个视频通话

目录查看详情

一对一用户在agora视频通话期间无法看到对方

】一对一用户在agora视频通话期间无法看到对方【英文标题】：Onetooneusercannotseeeachotherduringagoravideocall【发布时间】：2019-03-2904:52:29【问题描述】：我已经使用agoraCDN在我的angular5应用程序中实现了agora代码。摄像头正在打开，但... 查看详情

Agora WebRTC 更改视频通话视图

】AgoraWebRTC更改视频通话视图【英文标题】：AgoraWebRTCChangevideocallview【发布时间】：2018-02-0605:27:59【问题描述】：我正在开发一个使用Agora.io进行视频通话的react-native项目。在视频通话中，它将我的摄像头信息显示为全屏，接收... 查看详情

Flutter 中的 Agora 视频通话问题

】Flutter中的Agora视频通话问题【英文标题】：AgoravideocallissueinFlutter【发布时间】：2019-12-2010:05:24【问题描述】：当我们在Flutter中使用Agora视频通话时，如果应用程序在后台运行，它就无法正常工作。（前台工作）。在使用GoogleFC... 查看详情

Agora：ReactNative 没有在视频通话中渲染显示远程用户视频

】Agora：ReactNative没有在视频通话中渲染显示远程用户视频【英文标题】：Agora:ReactNativeisnotrenderingshowingtheremoteuservideointhevideocall【发布时间】：2021-06-2813:56:29【问题描述】：我正在使用ReactNative构建一个群视频聊天应用程序。对... 查看详情

是否可以录制 Agora SDK 视频通话？

】是否可以录制AgoraSDK视频通话？【英文标题】：IsitpossibletorecordingAgoraSDKVideoCall?【发布时间】：2019-05-1606:48:21【问题描述】：我正在开发一个带有视频通话的应用程序。哪个SDK将支持Android、IOS和Web的所有功能，例如视频通话和... 查看详情

在 Agora.io 视频通话后 Unity VideoPlayer 音频中断

】在Agora.io视频通话后UnityVideoPlayer音频中断【英文标题】：UnityVideoPlayeraudiobrokenafteranAgora.iovideocall【发布时间】：2020-11-2618:47:39【问题描述】：我们的应用程序有一个基于agora.io进行视频通话的场景和另一个使用UnityVideoPlayer播放... 查看详情

在 Agora 视频通话 SDK 中启动 Unity 应用

】在Agora视频通话SDK中启动Unity应用【英文标题】：LaunchaUnityapponin-comingvideocallinAgoravideocallSDK【发布时间】：2020-08-1012:48:18【问题描述】：我们正在使用适用于Unity的视频通话SDK，我们希望在来电时唤醒应用。问题：当视频通话开... 查看详情