支持 TypeScript、Promise API，来体验一下新一代的 Web SDK

2020/3/6 11:02:06

编程Tag： typescript rtc

本文主要是介绍支持 TypeScript、Promise API，来体验一下新一代的 Web SDK，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Agora Web SDK NG 版：agoraio-community.github.io/AgoraWebSDK…

声网 Agora Web SDK 过不了多久即将发布新版本。现在，我们已经有一个稳定的内测版本了。我们在新的 SDK 中增加了一些新功能，而且相对上一版更易用，集成起来更顺滑。为了让部分开发者也一起来体验一下，我们决定再开启一次“尝鲜之旅”。老朋友、新用户，都可以来免费试用！

在各位加入“体验服”之前，我们先讲讲 Agora Web SDK NG（Next Generation）版有哪些新特性。

有哪些新特性

所有异步方法使用 Promise

如今 Promise 或者说 async/await 对于前端开发者来说早已经不再陌生，甚至如果某个异步方法不支持 Promise，优秀的开发者也会将这些方法包装成 Promise 来方便自己代码中的异步管理。

不过，目前正式版 Agora Web SDK 还在使用的 callback/事件回调等令很多人诟病的方式来实现异步管理，原因自然是多方面的。所以 NG 版本中，所有异步方法将改用 Promise。不过NG 版 SDK 在支持 Promise API 同时，将不再向下兼容 callback 调用。我们相信，拥抱 Promise 是一个正确的选择，因为这会极大地提升开发者的开发效率和开发体验。我们从接下来的两段代码对比就能看出来：

 
// 使用 Agora Web SDK 3.0 实现加入频道之后发布
const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" }); const stream = AgoraRTC.createStream({ audio: true, video: true });
client.init("YOUR APPID", () => {
  client.join("YOUR TOKEN", "YOUR CHANNEL", null, (uid) => {
    console.log("join channel success");
    stream.init(() => {
console.log("stream init success");
      client.publish(stream);
      client.on("stream-published", () => {
        console.log("publish success");
       }); 
    });
  }); 
});
复制代码

可以看到，目前官网的版本是标准的回调写法，因为各种历史包袱和 API 向下兼容的脚链，如果再这样下去，会让我们的 SDK 变得越来越难用。

这个情况在 Agora Web SDK NG 版上得到了改变:

 
// 使用 Agora Web SDK NG 实现加入频道之后发布
// 我们假设这段代码运行在一个 async 环境下，所以直接使用 await
const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" }); 
const localAudio = await AgoraRTC.createMicrophoneAudioTrack(); 
const localVideo = await AgoraRTC.createCameraVideoTrack();

const uid = await client.join("YOUR APPID", "YOUR CHANNEL", "YOUR TOKEN",
null);
console.log("join channel success");

await client.publish([localAudio, localVideo]);
console.log("publish success");
复制代码

很明显，使用 Promise 配合 async/await 让整个代码逻辑更加清晰易懂，我们相信未来的 Agora Web SDK可以帮你写出更漂亮的代码。

细心的你可能会发现，在新的 SDK 中，采集本地流被拆分成了 2 个方法（createMicrophoneAudioTrack 和 createCameraVideoTrack），返回的不是一个 Stream 对象而是两个 Track 对象。这也是一大改动，我们会在后面介绍。

完美支持 TypeScript

随着 TypeScript 的不断壮大，越来越多的开发者开始使用 TypeScript 来开发 Web 应用。TypeScript 的优势非常明显，它可以帮助我们写出高质量、高可维护性的代码，对于大型的前端应用开发具有非常重要的意义。Agora Web SDK NG 版使用 TypeScript 开发，所以也导出了完备的类型定义文件供 TypeScript 开发者使用，配合编辑器的 TypeScript 插件，这将会极大得提升你的开发体验。

我们的 Typescript 类型导出默认会携带英文版本的 API 文档。

更灵活的音视频控制

在官网版本的 Web SDK 中，所有音视频控制的方法都通过 Stream 对象来向外提供。无论是本地流还是远端流，无论是音频流还是视频流，全部都被封装成 Stream 对象、这使得一些需要很精细控制音视频行为的需求变得难以实现，需要不断地依赖 Stream.addTrack / Stream.removeTrack 。

在 Agora Web SDK NG 版中，我们删除了 Stream 对象，相对应的，我们使用 Track 对象来控制音视频。我们把音视频控制的最小单位从一个音视频流改成了一个一个音视频轨道，每种轨道对象都有它自己的方法，不会出现 Stream.setBeautyEffect 无法在纯音频流上调用，Stream.getAudioVolume 无法在纯视频流上调用的情况。我们从一个需求例子来看这样改动有什么好处。

需求： 用户加入频道后采集音视频并将视频播放在⻚面上，但是默认只发布音频，待用户点击⻚面上某个按钮后再发布视频(用户可能需要确认自己的仪容/镜头位置等情况。

 
 
// 使用 Agora Web SDK NG
// 我们假设这段代码运行在一个 async 环境下，所以直接使用 await，同时我们假设这个时候已经加 入了频道
const audioTrack = await AgoraRTC.createMicrophoneAudioTrack(); 
const videoTrack = await AgoraRTC.createCameraVideoTrack();

// 播放本地视频
videoTrack.play("DOM_ELEMENT");
// 发布本地音频

await client.publish(audioTrack);
// ... 待用户点击某个按钮后, 再发布本地视频 
await client.publish(videoTrack);

// ...当然，只取消发布部分 Track 也是可以的 
await client.unpublish(audioTrack);
复制代码

在 Stream 的版本下我们不能重复发布，每当我们需要改动音视频结构时逻辑就会很混乱。在使用了 Track 之后，我们可以根据需求随意地发布/取消发布任意数量的 Tracks，这并不会给我们的代码增加太大的复杂度，但是会更有助于我们管理音视频对象。

Agora Web SDK NG 版允许用户发布多个音频轨道，SDK 会自动混音之后发送给对端，但不允许用户同时发布多个视频轨道。对多视频轨道的支持已在我们的计划中。

背景音乐混音

有了基于 Track 的音视频管理，音乐混音的场景也变得更灵活了。在官网版本的 SDK 中，我们通过 Stream.startAudioMixing 实现混音，它存在一些缺点：一是不能同时配合多种音乐进行混音；二是混音的 API 设计的也不够好用（比如 replace 参数来控制背景音乐，是和人声混音还是替代人声？）；三就是无法将“在本地播放背景音乐”和“将背景音乐发布到对端”这两个操作很好地剥离。举个例子，主播 KTV 的场景中，主播端希望只听到伴奏（背景音乐），但是观众端希望听到伴奏和主播的声音（背景音乐和人声的混音），在官网版本的 Web SDK 中是无法实现的。

现在，你可以用 Agora Web SDK NG 版很优雅地解决这个需求:

 
// 使用 Agora Web SDK NG
// 我们假设这段代码运行在一个 async 环境下，所以直接使用 await，同时我们假设这个时候已经加 入了频道

// 主播的⻨克⻛音频轨道
const microphoneTrack = await AgoraRTC.createMicrophoneAudioTrack();
// 背景音乐1的音频轨道
const bgmTrack1 = await AgoraRTC.createBufferSourceAudioTrack({ source: "https://xxx.xxx.mp3" });
// 背景音乐2的音频轨道
const bgmTrack2 = await AgoraRTC.createBufferSourceAudioTrack({ source: "https://xxx.xxx.233.mp3" });

// 在本地播放背景音乐
bgmTrack1.play(); bgmTrack1.startProcessAudioBuffer(); bgmTrack2.play(); bgmTrack2.startProcessAudioBuffer();

// 同时发布⻨克⻛/背景音乐，SDK 会自动混音
await client.publish([bgmTrack1, bgmTrack2, microphoneTrack]);
复制代码

和繁琐的 Autoplay 说再见

相信很多开发者在处理浏览器 Autoplay 限制时都遇到了不少阻碍。官网版本的 SDK 也对这方面下了一番功夫（详见声网文档中心“处理浏览器的自动播放策略”页面）。

简单来说，因为浏览器 Autoplay 的限制，让我们无法自动播放带有声音的媒体，我们必须通过和⻚面交互来解除这个限制。这个限制在 iOS Safari 上更为严格，开发者需要做很多额外处理才能给用户很好的自动播放体验。

Agora Web SDK NG 版中，这些处理已经在 SDK 中“内部消化”了。如果你的应用会自动播放一些带有声音的媒体内容，而此时用户还没有和⻚面发生交互，在官网版本中播放会失败，但 Agora Web SDK NG 版中的播放不会被阻塞，视频仍然可以正常播放，只是在最开始会听不到声音。当用户和⻚面发生任何交互时，声音的播放会自动恢复。(部分可以通过 UI 引导用户)同时因为 Agora Web SDK NG 版音频架构的升级，即使是在 iOS Safari 上，也只需要一次任意的⻚面交互就能全⻚面生命周期地解锁 autoplay 限制。

Next Step

Agora Web SDK NG 版目前提供的功能已能满足绝大多数的使用场景，但是我们在未来还会不断添加一些大家关心的新功能，这里简单列举一下 Agora Web SDK NG 接下来会实现的重点功能:

一站式的移动端/低端机解决方案

2019 年下半年我们推出了 H5 实时直播这个移动端的解决方案，得到了很不错的反响。同时我们也发现这个方案中值得改进的几个点:

接入方式对用户不太友好，需要引入两个 SDK，是否开启 H5 实时直播也需要用户自行实现浏览器的判断逻辑
在低端机(ios 8/ android 4.4)上的表现不如人意

我们计划在之后的迭代中让 Agora Web SDK 直接集成 H5 实时直播的方案，同时由 SDK 自己智能检测设备解码能力来自动选择是否使用 H5 实时直播，做到用户可以无感知集成，扩大 Agora Web SDK NG 的兼容范围。对于低端机，我们会推出一个更定制化的解决方案来确保在老设备上也能有流畅清晰的视频体验，这个解决方案会首先在 Agora Web SDK NG版本中实现。

Vue SDK

我们收到了很多来自开发者的反馈，希望我们可以提供 Vue 或者 React 专用的 Agora Web SDK，让使用这些框架的开发者可以快速集成我们的 SDK，实现实时互动场景。目前基于 Agora Web SDK NG 版的官方 Vue SDK 已经在开发中，很快就可以和大家⻅面了，React SDK 也在计划中。

在使用了 Vue SDK 之后，可以很大程度上利用 Vue 的双向数据绑定轻松地展示本地/远端媒体流和一些频道信息/媒体信息，无需自己绑定事件，实现起来会更为便捷。