Have you ever been in this situation as a WebRTC developer?

Whether or not a weBRTC-based video call can be successfully established is directly affected not only by code quality and server stability, but also by software and hardware compatibility issues on the user side that you may not be aware of, as well as mysterious user operations. But users don’t care that much. Their first reaction is definitely “You have a Bug in your app!”

We sound network engineers have been troubled by this. Until, that is, they wrote a Troubleshooting gadget themselves. The gadget is now open source. This widget is based on the Agroa SDK interface implementation and is suitable not only for Agora developers, but also for developers new to WebRTC.

Agora WebRTC Troubleshooting

This tool works in both PC and mobile browsers and can help you automatically check whether your device’s browser is running WebRTC applications properly. Items that can be detected include:

  • Browser compatibility

  • Whether the microphone recording is normal

  • Check whether loudspeaker playback is normal

  • What resolutions are currently supported by the device

  • Network connection and current network audio and video bit rate, packet loss rate

  • Camera (user optional)

Test tool address here, you can give your browser to do a “checkup” :

https://webdemo.agora.io/agora_webrtc_troubleshooting/

The gadget is simple to use and can be said to be suitable for all ages, just follow the page prompts step by step.

If you are an independent developer developing applications based on WebRTC, have your users test the above projects with this Web demo address. However, when testing “Network connection”, the tool is testing the network connection status and packet loss between the client and Agora server. The results of this test may be different from the actual experience of WebRTC applications without Agora SDK integration.

If you’re an Agora developer, you can go one step further and create a test tool for your App based on the source code and integrate it into your product. We already have some Agora developers doing this. Here, we take a quick look at the source code and show you how to modify it.

Code principle analysis

Test tool called the multiple Agora SDK interface, for example through AgoraRTC. CheckSystemRequirements interface to detect browser compatibility; Stream. GetStats is used to obtain network connection status data. Use stream.getAudioLevel to detect current volume, etc. Developers can also take advantage of these interfaces in their own applications and incorporate functionality into their products.

Browser compatibility

Here using the Agora Web SDK AgoraRTC. CheckSystemRequirements browser interface to automatically detect whether the current support for voice and video calls.

/** whether your browser fully supports Agora Web SDK */
AgoraRTC.checkSystemRequirements(): boolean
/**
 * some browser info got from
 * object `navigator` in BOM
 */
navigator.appVersion
navigator.appName
Copy the code


Detection microphone

Step 1: Create an audio stream using agorartC.createstream

Step 2: Use stream.getAudioLevel to check the current volume

/** create an audio stream and try to init/play it */
AgoraRTC.createStream(): stream
/**
 * accumulate audio level to check
 * if it is in an ideal range
 */
stream.getAudioLevel(): number
Copy the code


Detection loudspeaker

In this case, we use HTML5’s audio component directly and let the user confirm if they hear the audio being played.

Measurement resolution

Step 1: Use agorartC.createstream to create a video stream based on different parameters

Step 2: Use HTMLVideoElement to get the resolution of the video

/** Create stream with different video profiles */
AgoraRTC.createStream(): stream
/** Get actual resolution from html element */
HTMLVideoElement.videoHeight
HTMLVideoElement.videoWidth
Copy the code


Checking network Connections

Step 1: Create a sending client and a receiving client using AgorArtc.createclient Step 2: Create streams using AgorArtc.createstream Step 3: Publish streams from the sending client Step 4: Subscribe the sent stream to the receiving client using client.subscribe Step 5: Get the network connection status data using stream.getStats

/**
 * Create two clients: a sender which will publish
 * a regular stream, and a receiver which will subscribe the
 * stream published by the sender.
 */
AgoraRTC.createStream(): stream
/** Get stream tranfer info by using getStats */
stream.getStats(callback: (stats:any) => void): void
Copy the code


Detection camera

Ask the user whether to enable the camera. If yes, the image collected by the camera is displayed on the screen.

Test tool modification

If you are an Agora developer and want to modify a test tool for your own application, follow these steps:

1. Add your App ID to settings.js under./ SRC /utils.

2. Install dependencies

npm install
Copy the code

3. Run the application locally

npm run dev
Copy the code

Access localhost:8080 in your browser

4. Build applications

npm run build
Copy the code

An HTTP server is required to create files.

Once you’ve done that, you can integrate it into your own application and modify the UI as needed. Before users use the product, the operating environment can be detected to help you clear mines in advance and improve user experience.

Click here to go to Github to get the code

Welcome to the RTC developer community to exchange experience with more WebRTC, real-time audio and video developers.