快速入门音频通话

最近更新时间:2022-09-20 05:17:40

本文主要介绍如何将 RTC Web SDK 集成到你的项目中以及相关注意事项。

开发环境要求

  • 一个有效的 开发者账号

  • 一款支持 RTC SDK 的主流浏览器:

    浏览器兼容性
    Chrome 49+
    Safari 9+
    Firefox 52+
    微信浏览器
    QQ 浏览器 10.5+
    Internet Explorer 11+
  • 一台拥有音视频输入输出设备(麦克风)的终端

快速集成

本小节介绍如何获取 AppID 以及如何快速将 SDK 集成到项目中。

获取 AppID

参考以下步骤获取一个 AppID。若已经拥有 AppID,请跳过当前步骤,直接查看操作流程

  • 1. 创建项目

    首先我们需要在开发者控制台创建一个「项目」

  • 2. 获取 APP ID

    获取项目的「APP ID」

引入 SDK

1: 获取 SDK

你可以通过如下几种方式获取最新的 SDK:

    1. 官网下载中心找到 「RTC SDK 下载」 的 Web 端
    1. 前往阿里云 OSSctrl + scommand + s 下载
    1. 前往 github cloneDownload ZIP 下载
    1. 通过 npm 市场下载

    该方法需要安装 npm。详见 Install npm

    npm i ar-rtc-sdk
    

2: 导入 SDK

导入 SDK 支持以下方式:

  • script 标签引入

    使用 <script> 标签引入的 SDK ,window 对象中会暴露一个 ArRTC 的全局变量。

    <script src="/<YOUR_PATH>/to/ArRTC@latest.js"></script>
    
  • ES6 方式引入

    import ArRTC from '/<YOUR_PATH>/to/ArRTC@latest.js';
    
  • CommonJS 方式引入

    var ArRTC = require('/<YOUR_PATH>/to/ArRTC@latest.js');
    
  • npm 方式引入

    // ES6
    import ArRTC from 'ar-rtc-sdk';
    // 或者是 commonJS
    var ArRTC = require('ar-rtc-sdk');
    

操作流程

本节内容主要介绍如何实现音频直播。

初始化客户端

通过 ArRTC.createClient 创建本地客户端 rtcClient 的实例。

const client = ArRTC.createClient({ mode: "live", codec: "h264" });

使用相同 App ID 的应用才能互相通信。

加入频道

调用 rtcClient.join 方法加入频道,join 方法需要传入以下四个参数:

  • appid:anyRTC 控制台获取的 App ID。
  • channel:通话的频道名称。
  • token:用于 Token 鉴权,提供应用信息的安全级别。
  • uid: 用来标识用户身份,无缝对接业务系统。必须为字符串,不可超过 48 字节,可设为空、null 或 "null"。
rtcClient.join(appid, channel, token, uid).then((uid) => {
  // 加入成功
});

监听远端用户加入频道

远端用户加入频道会触发 user-joined 回调。

rtcClient.on("user-joined", (user) => {
  ...
});

监听远端用户发布音频流

远端用户发布音视频流会触发 user-published 回调。可在此回调中订阅远端用户的音视频流。

rtcClient.on("user-published", async (user, mediaType) => {
  if (mediaType === "audio") {
    // 订阅远端用户的音频轨道
    await rtcClient.subscribe(user, mediaType);
    // 播放远端音频
    user.audioTrack.play();
  }
});

创建本地音频轨道

该方法枚举可用的音频输入设备,比如麦克风。

调用本方法浏览器会弹出设备授权窗口,由于浏览器安全策略的限制,该操作仅支持在 localhost127.0.0.1 或者安全的 HTTPS 环境下进行。

const audioTrack = await ArRTC.createMicrophoneAudioTrack();

发送本地音频流

将本地音频轨道发布至频道中,发布音频轨道之后,远端会收到 user-published 回调。

rtcClient.publish(audioTrack);

退出频道

调用该方法离开频道。

离开频道需要自行释放本地创建的轨道。否则摄像头和麦克风会处于工作的状态,例如:摄像头灯常亮。

rtcClient.leave();
audioTrack && audioTrack.close();

开发注意事项

  • 在收发音频流,或者频道操作前,需要确保已经成功加入频道。
  • 如果多次监听回调,回调事件会触发多次。
  • RTC 支持创建多个 rtcClient 实例。