Agora Web SDK “体验服”开启！一起来“聊”么？

01

有哪些新特性

所有异步方法使用 Promise

 

如今 Promise 或者说 async/await 对于前端开发者来说早已经不再陌生，甚至如果某个异步方法不支持 Promise，优秀的开发者也会将这些方法包装成 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");       });      });   }); }); 

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

我们的 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 限制。

更多你期待的小特性

在这一版本中，我们还实现了许多你可能期待已久的新特性：

• 本地音频轨道支持调整音量，可以使用这个方法实现调整⻨克⻛音量

• 无论是屏幕共享，还是摄像头，甚至是您自定义的视频源，在 Agora Web SDK NG 中都支持大小 流编码模式

• 支持通过本地文件，裸 PCM 数据进行音乐混音

• 支持手动控制音频编码参数

• 支持在发布屏幕共享音频的同时发布自己的⻨克⻛音频

• 视频编码参数除了支持指定数值外，还支持指定一个数值范围，让浏览器自动调整

• 接入方式对用户不太友好，需要引入两个 SDK，是否开启 H5 实时直播也需要用户自行实现浏览器 的判断逻辑

• 在低端机(ios 8/ android 4.4)上的表现不如人意

扫码填写问卷