Try Live Demo

If you develop video applications with WebRTC,  you may encounter issues in WebRTC video play such as freezing/blurring/pixelating which can have different reasons behind. We will talk about the best-known causes and how to solve these issues.

In addition, for the ones who require technical information about WebRTC, you can easily refer to the following URLs:

Now, we can talk about the main reasons that will cause these issues.

webrtc-video-freezing-blurring-pixelating-solution

1.Client and Server Bandwidth & Upload & Download Network Capacity

You should check three parameters in this title.

WebRTC Video Publisher Upload Speed

As you know, if publisher upload speed is not enough to publish, this may cause some freezing/blurring.

WebRTC Video Player Download Speed

Another reason is download speed. If player download speed is not enough to play, this may also cause some freezing/blurring.

Server Network Capacity (Download / Upload)

This parameter is important for Video Streaming. When you set up a server, you need to pay attention to this parameter.

You can learn server network capacity with easily by checking this link.

2.Server Location

It is more stable to broadcast from physically closer servers. If broadcast-quality problems occur, you should pick a server that is close to where you broadcast.

3.Wrong configuration in Ant Media Server

Adaptive Streaming configuration

Adaptive Streaming can consume high resources. Therefore, it is recommended to enable adaptive streams not more than required needs.

Default Adaptive Streaming configurations are listed below:

Resolution Video Bitrate (Kbps) Audio Bitrate (Kbps)
2160p 6000 256
1080p 2000 256
720p 1500 128
480p 1000 75
360p 800 64
240p 500 32

 

You could find out which resolution is supported by your publishing device by the following URL:

https://webrtc.github.io/samples/src/content/getusermedia/resolution/

Frame rate Setting

The default WebRTC Frame Rate value is 20 and if you increase more than pre-configured value, this may consume higher server resources.

Encoder Setting

Ant Media Server is using veryfast preset that uses fewer CPU resources(disadvantage is less quality). You can change it and you can get better quality.

You can change the preset value from the config file (AMS-Folder/Application(LiveApp or etc)/WEB-INF/red5-web.properties ) with the following key.

settings.encoding.preset=

For ex: You could use medium
Furthermore, you could see all presets from URL below: https://trac.ffmpeg.org/wiki/Encode/H.264

4.Instance Insufficient Resources

If you don’t have enough CPU/RAM resources, server may not handle the load properly. This will cause freezing/blurring/pixelating issues. You should check your system resource usages when streaming is live to see if it’s the case.

Conclusion

We hope this tutorial is helpful for you 🙂 Please feel free to send an email (contact@antmedia.io) or contact us directly at https://antmedia.io in case of any question.


Selim Emre Toy

Highly motivated full-stack developer with 6 years of experience especially in Java and Angular. Constantly learning, passionate about solving complex problems. Proficient in various programming languages and technologies. Enjoys finding creative solutions to challenges.