Agora Web SDK NG version:Agoraio – community. Dead simple. IO/AgoraWebSDK…

A new version of the Agora Web SDK will be released soon. We now have a stable beta version. We’ve added some new features to the new SDK, which is easier to use and smoother to integrate than the previous version. In order for some developers to try it out, we decided to go on another “taste it” tour. Old friends, new users, can come to the free trial!

Before you join the “Experience Server”, let’s talk about the new features of the Agora Web SDK NG (Next Generation) release.

What are the new features

All asynchronous methods use Promises

Promises, or async/await, are no longer unfamiliar to front-end developers, and even if an asynchronous method does not support Promises, good developers will wrap those methods as promises to facilitate asynchronous management in their code.

However, the current Agora Web SDK still uses callback/ event callbacks to implement asynchronous management for many reasons. So in the NG version, all asynchronous methods will be used instead of promises. However, the NG SDK, while supporting the Promise API, will no longer be backward compatible with callback calls. We believe embracing Promise is the right thing to do because it will dramatically improve the developer’s productivity and development experience. We can see this from the next two code comparisons:

Const client = agorartc.createclient ({mode: 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");
       }); 
    });
  }); 
});
Copy the code

As you can see, the current version of the official website is the standard callback method, due to various historical baggage and API backward compatibility anklet, if this continues, it will make our SDK more and more difficult to use.

This situation has changed with Agora Web SDK NG:

// We assume that this code is running in an async environment, so we can use 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");
Copy the code

Obviously, using Promise with async/await makes the whole code logic much clearer and we believe that the future Agora Web SDK will help you write beautiful code.

Careful you may find that in the new SDK, collecting local stream is split into two methods (createMicrophoneAudioTrack and createCameraVideoTrack), Instead of a Stream object, two Track objects are returned. This is also a major change, which we’ll talk about later.

Perfect support for TypeScript

As TypeScript continues to grow, more and more developers are developing Web applications using TypeScript. The advantages of TypeScript are clear: it helps us write high-quality, maintainable code, which is important for large-scale front-end application development. The Agora Web SDK NG version is developed in TypeScript, so it also exports a complete TypeScript definition file for TypeScript developers to use, along with the editor’s TypeScript plugin, which will greatly improve your development experience.

More flexible audio and video control

In the official version of the Web SDK, all methods of audio and video control are provided externally through the Stream object. Both local and remote streams, both audio and video, are packaged as Stream objects. This makes it difficult to implement the need for very fine control of audio and video behavior, requiring constant reliance on stream.addtrack/stream.removetrack.

In Agora Web SDK NG, we removed the Stream object and instead used the Track object to control audio and video. We changed the minimum unit of audio-video control from one audio-video Stream to one audio-video track, each track object has its own method, no stream.setBeautyeffect can’t be called on a pure audio-video Stream, Stream.getaudiovolume cannot be called on a pure video Stream. Let’s take a look at a requirements example to see the benefit of this change.

Requirements: After the user joins the channel, the audio and video will be collected and played on the page, but only the audio will be published by default, and the video will be published after the user clicks a button on the page (the user may need to confirm his/her appearance/camera position, etc.).

// Use Agora Web SDK NG // we assume this code is running in an async environment, so use await directly, At the same time, we assume that this time has been added into the channel const audioTrack = await AgoraRTC. CreateMicrophoneAudioTrack (); const videoTrack = await AgoraRTC.createCameraVideoTrack(); // Play local video videotrack.play ("DOM_ELEMENT"); // Publish local audio await client.publish(audioTrack); / /... Publish (videoTrack) local video await client after user clicks a button. / /... Unpublish (audioTrack); unpublish(audioTrack);Copy the code

We couldn’t release the Stream again and again, and the logic got messy whenever we needed to change the audio and video structure. After using Track, we can publish/unpublish as many Tracks as we want, which doesn’t add too much complexity to our code, but helps us manage our audio and video objects.

Agora Web SDK NG allows users to publish multiple audio tracks, which the SDK will automatically mix and send to the peer end, but does not allow users to publish multiple video tracks simultaneously. Support for multiple video tracks is already planned.

Mix background music

With track-based audio and video management, music mixing scenes have become more flexible. In the SDK version on the official website, we realized mixing through stream. startAudioMixing, which has some disadvantages: first, it can’t mix with multiple music at the same time; Second, the mixing API is not well designed (for example, the replace parameter controls background music, mixing with or replacing the voice?). ; Third, the two operations of “play background music locally” and “publish background music to the other end” cannot be separated well. For example, in the scene of anchor KTV, the anchor side only wants to hear the accompaniment (background music), but the audience side wants to hear the accompaniment and anchor’s voice (the mix of background music and voice), which cannot be achieved in the official website version of the Web SDK.

Now, you can solve this requirement elegantly with Agora Web SDK NG:

// Use Agora Web SDK NG // we assume this code is running in an async environment, so use await directly, At the same time, we assume that this time has been added into the channel / / the microphone of the host audio track const microphoneTrack = await AgoraRTC. CreateMicrophoneAudioTrack (); / / background music 1 audio track const bgmTrack1 = await AgoraRTC. CreateBufferSourceAudioTrack ({source: "https://xxx.xxx.mp3"}); / / background music 2 audio track const bgmTrack2 = await AgoraRTC. CreateBufferSourceAudioTrack ({source: "https://xxx.xxx.233.mp3"}); // Play background music locally bgmtrack1.play (); bgmTrack1.startProcessAudioBuffer(); bgmTrack2.play(); bgmTrack2.startProcessAudioBuffer(); Publish ([bgmTrack1, bgmTrack2, microphoneTrack]); publish([bgmTrack1, bgmTrack2, microphoneTrack]);Copy the code

Say goodbye to cumbersome Autoplay

I’m sure many developers have encountered obstacles when dealing with browser Autoplay restrictions. The official version of the SDK also puts some effort into this aspect (see the “Handling Browser autoplay Policies” page in the Sonnet Documentation Center).

Simply put, because of the limitations of the browser Autoplay, we can’t play media with sound automatically, and we have to interact with the page to get around this limitation. This restriction is even stricter on iOS Safari, where developers need to do a lot of extra processing to give users a good autoplay experience.

In Agora Web SDK NG, these processes are “internalized” in the SDK. If your app automatically plays some media content with sound before the user interacts with the page, it will fail to play in the official website version, but the Agora Web SDK NG version will not block playback and the video will still play normally, but the audio will not be heard at the beginning. When the user interacts with the page, the sound automatically resumes. And thanks to the Agora Web SDK NG audio architecture update, even on iOS Safari, it only takes one arbitrary page interaction to unlock the AutoPlay limit for the entire page life cycle.

More little features you can expect

In this release, we’ve also implemented a number of new features that you might have been waiting for:

  • Local audio tracks support volume adjustment, you can use this method to adjust the microphone volume
  • Whether it’s screen sharing, cameras, or even your own custom video sources, the Agora Web SDK NG supports the size stream encoding mode
  • Support local files, raw PCM data for music mixing
  • Support manual control of audio encoding parameters
  • Support publishing your own microphone audio at the same time as publishing screen shared audio
  • In addition to specifying a value, the video encoding parameter supports specifying a range of values for the browser to adjust automatically

Next Step

The Agora Web SDK NG version currently provides functionality that meets most usage scenarios, but we will continue to add new features in the future. Here are some of the key features that Agora Web SDK NG will implement next:

One-stop mobile terminal/low-end machine solution

In the second half of 2019, we launched H5 Live broadcast, a mobile solution, which has received a good response. At the same time, we also found several points worthy of improvement in this scheme:

  • The access mode is not friendly to users, so two SDKS need to be introduced. Whether to enable H5 live broadcast also requires users to realize the judgment logic of the browser by themselves
  • On the lower end of the spectrum (ios 8/ Android 4.4), performance is not as good

We plan to make Agora Web SDK directly integrate the H5 live broadcast scheme in the next iteration, and the SDK itself will automatically choose whether to use H5 live broadcast by intelligent detection of decoding capability of the device, so that users can integrate without perception and expand the compatible range of Agora Web SDK NG. For lower-end devices, we will introduce a more customized solution to ensure a smooth and crisp video experience on older devices, which will be implemented first in Agora Web SDK NG.

Vue SDK

We have received a lot of feedback from developers that we would like to provide Agora Web SDK for Vue or React, so that developers using these frameworks can quickly integrate our SDK and implement real-time interactive scenarios. An official Vue SDK based on Agora Web SDK NG is currently under development and will be available soon. The React SDK is also planned.

After using the Vue SDK, it is much easier to use Vue’s two-way data binding to easily display local/remote media streams and some channel information/media information without having to bind events yourself.

Experience the Web SDK NG

We believe that an excellent product depends on users and our common polishing. If you have any questions or suggestions about product design/API design/feature design while accessing Agora Web SDK NG, please contact us at the RTC Developer Community (rTCdeveloper.com).

Agora Web SDK NG version:Agoraio – community. Dead simple. IO/AgoraWebSDK…

At the same time, we would also like to invite developers who experience Agora Web SDK NG to fill out a questionnaire with prizes. We hope that you can deeply participate in the future SDK product planning.

Scan the code and fill in the questionnaire

Those who fill in the questionnaire carefully and participate in the SDK experience will get the ticket of 2020 RTC Real-time Internet Conference and 100 yuan JINGdong electronic card