Tencent RTC Video Features: Elevating Your Communication Experience

<img src="https://trtc.io/media/fe08cf4e-6115-4b11-8073-0ebcbfa63e91.png" alt="Twilio Video to TRTC Migration: Guide for Web, iOS, and Android Platforms">Welcome to the Twilio Video to TRTC migration guide for Web, iOS, and Android Platforms. This guide aims to facilitate a seamless transition for applications migrating from Twilio to TRTC. To ensure a smooth migration process, we provide an API level comparison between Twilio and TRTC at each step for implementing basic RTC video functionality.If you are planning to develop a new application instead of migrating, you can proceed directly to <a href="https://trtc.io/">Tencent&nbsp;RTC</a>. There, you will find all the necessary information about TRTC to kickstart your new project.<h2 id="Tencent-RTC-Video-Features:-Elevating-Your-Communication-Experience" style="margin-left:0px;">Tencent RTC Video Features: Elevating Your Communication Experience</h2>Unlock a new era of video communication with Tencent RTC's powerful features:<ul style="list-style-type:disc;"><li>Cross-Platform Compatibility: Enjoy video calls across various platforms, ensuring accessibility from any device.</li><li>Customizable Video Solutions: Tailor your video calling experience with flexible layout configurations and branding options.</li><li>AI-Powered Noise Cancellation: Experience crystal-clear conversations by eliminating background noise disruptions.</li><li>Offline Video Call Notifications: Stay connected with notifications for missed calls, even when offline.</li><li>Floating Window Feature: Optimize multitasking during video calls by keeping them ongoing while navigating other tasks.</li><li>Multi-Device Video Synchronization: Transition seamlessly between devices without missing a beat.</li><li>Flexible Video Layout Customization: Personalize video calls to reflect your brand identity with easy layout and style customization using Call APIs.</li></ul><span style="color:rgb(15,15,15);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">Pre-announcement: This blog exclusively presents the web edition of our migration guide. If you're seeking guidance for the iOS or Android platform, please refer to our comprehensive <a href="https://trtc.io/document">documentation</a><span style="color:rgb(15,15,15);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;"> for detailed instructions. We aim to provide tailored support for each platform to ensure a smooth transition.<ul style="list-style-type:disc;"><li><a href="https://trtc.io/document/58154">Twilio&nbsp;Video&nbsp;to&nbsp;TRTC&nbsp;Migration&nbsp;Guide&nbsp;-&nbsp;iOS</a></li><li><a href="https://trtc.io/document/58153">Twilio&nbsp;Video&nbsp;to&nbsp;TRTC&nbsp;Migration&nbsp;Guide&nbsp;-Android</a></li></ul><h2 id="Step-1:-Create-a-TRTC-Application" style="margin-left:0pt;text-align:justify;">Step 1: Create a TRTC Application</h2>In order to access TRTC service and SDK, a TRTC application must be created first from the console. Click on <a href="https://console.trtc.io/">this&nbsp;page</a> to create a new TRTC application, then you can get the following necessary information for <span style="color:rgb(15,15,15);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">TRTC service authentication. SDKAppID SDKAppID is used to uniquely identify a TRTC application. It is generated automatically when an application is created.&nbsp; SDKSecretKey SDKSecretKey is one of the key parameter to be used to generate the security signature. The generated signature ensures the access of TRTC service when calling the initialization and login API of the SDK.<h2 id="Step-2：Install-and-Setup-the-SDK" style="margin-left:0pt;text-align:justify;">Step 2：Install and Setup the SDK</h2><h3 style="text-align:justify;">By npm</h3><ul style="list-style-type:disc;"><li style="text-align:justify;">Use npm to install trtc-sdk-v5 package in your project.</li></ul><pre><code class="language-javascript">npm install trtc-sdk-v5 --save</code></pre><ul style="list-style-type:disc;"><li>Import the module in the project script.&nbsp;</li></ul><pre><code class="language-javascript">import TRTC from 'trtc-sdk-v5';</code></pre><h3>By script</h3><ul><li>Download SDK file trtc.js from <a href="https://github.com/LiteAVSDK/TRTC_Web/blob/main/v5/SDK/trtc.js">Github</a> and add the following code to your webpage:</li></ul><pre><code class="language-javascript">&lt;script src="trtc.js"&gt;&lt;/script&gt;</code></pre><h2 id="Step-3：Join-a-Room" style="margin-left:0pt;text-align:justify;">Step 3：Join a Room</h2><h3>In Twilio:</h3><pre><code class="language-javascript">// Replace Twilio Video import
import * as TwilioVideo from 'twilio-video'

var twilioVideo = TwilioVideo
var twilioRoom

twilioRoom = await twilioVideo.connect(TOKEN, { name: 'yourName', audio: false, video: false, dominantSpeaker: true })</code></pre><h3>In TRTC：</h3><pre><code class="language-javascript">const trtc = TRTC.create();

try {
 await trtc.enterRoom({ roomId: 8888, scene:'rtc', sdkAppId, userId, userSig });
 console.log('Entered the room successfully');
} catch (error) {
 console.error('Failed to enter the room ' + error);
}</code></pre><h2 id="Step-4：Publish-Local-Video/Audio" style="margin-left:0pt;text-align:justify;">Step 4：Publish Local Video/Audio</h2><h3>In Twilio:</h3><pre><code class="language-javascript">// video
let localVideoTrack = await twilioVideo.createLocalVideoTrack({
 height: { ideal: 720, min: 480, max: 1080 },
 width: { ideal: 1280, min: 640, max: 1920 },
 aspectRatio: 16/9,
})
twilioRoom.localParticipant.publishTrack(localVideoTrack)
const localMediaContainer = document.getElementById('video-container-div')
localMediaContainer!.appendChild(localVideoTrack.attach())
// audio
let localAudioTrack = await twilioVideo.createLocalAudioTrack()
twilioRoom.localParticipant.publishTrack(localAudioTrack);
const audioElement = localAudioTrack.attach();
document.body.appendChild(audioElement);</code></pre><h3>In TRTC：</h3><pre><code class="language-javascript">const view = document.getElementById('localVideo');
const cameraList = await TRTC.getCameraList();
if (cameraList[0]) {
 await trtc.startLocalVideo({
 view,
 option: {
 cameraId: cameraList[0].deviceId,
 }
 });
}
// To preview the camera image, you need to place an HTMLElement in the DOM, which can be a div tag, assuming its id is local-video.
const view = 'local-video';
await trtc.startLocalVideo({ view });
await trtc.startLocalAudio();</code></pre><h2 id="Step-5：Subscribe-Remote-Video/Audio" style="margin-left:0pt;text-align:justify;">Step 5：Subscribe Remote Video/Audio</h2><h3>In Twilio:</h3><pre><code class="language-javascript">twilioRoom.on('participantConnected', (participant) =&gt; {
 participant.on('trackSubscribed', (track) =&gt; {
 // a user turned on their video, render it
 document.getElementById('remote-video-container-div').appendChild(track.attach());
 });
 participant.on('trackUnsubscribed', (track) =&gt; {
 // a user turned off their video, stop rendering it
 var selfTwilioVideo = document.getElementById('remote-video-container-div')
 selfTwilioVideo.querySelector('video').remove()
 })
})</code></pre><h3>In TRTC：</h3><pre><code class="language-javascript">// Listen for the TRTC.EVENT.REMOTE_VIDEO_AVAILABLE event before entering the room to receive all remote user video publishing events. 
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) =&gt; {
 // To play the video image, you need to place an HTMLElement in the DOM, which can be a div tag, assuming its id is `${userId}_${streamType}`
 const view = `${userId}_${streamType}`;
 trtc.startRemoteVideo({ userId, streamType, view });
});</code></pre><h2 id="Step-6：Leave-a-Room" style="margin-left:0pt;text-align:justify;">Step 6：Leave a Room</h2><h3>In Twilio:</h3><pre><code class="language-javascript">twilioVideo.disconnect()</code></pre><h3>In TRTC:</h3><pre><code class="language-javascript">await trtc.exitRoom(); 
// After the exit is successful, if you do not need to use the trtc instance later, you can call the trtc.destroy method to destroy the instance and release related resources in a timely manner. The destroyed trtc instance cannot be used again and a new instance needs to be created.
trtc.destroy();</code></pre><h2 id="Conclusion" style="margin-left:0pt;text-align:justify;">Conclusion</h2><span style="color:rgb(15,15,15);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">This migration guide outlines the differences in building a video web application using TRTC compared to one with the Twilio Video SDK. Hope the API level "mapping" provided in each step of this guide can facilitate you to switch from Twilio Video to TRTC in a quick and straightforward way.If you intend to view the guides for iOS or Android platforms, please refer to our documentation: Twilio migration steps on <a href="https://trtc.io/document/58154">iOS</a>&nbsp;and&nbsp;<a href="https://trtc.io/document/58153">Android</a>.If you require developer support or any further assistance regarding to the TRTC integration, please feel free to <a href="https://trtc.io/contact?utm_source=website&amp;utm_medium=blog&amp;utm_term=trtc&amp;utm_campaign=blog&amp;_channel_track_key=EB6l06UE">Contact Us</a> or join us in <a href="https://discord.gg/hq7jW7zChW">Discord</a>. We will ensure a smooth integration and address any queries you may have. Your success with TRTC is always our priority.

 Twilio Video to TRTC Migration: Guide for Web, iOS, and Android Platforms

banner3-twilio migration

large_bannerbanner (7).png

medium_bannerbanner (7).png

small_bannerbanner (7).png

thumbnail_bannerbanner (7).png

bannerbanner (7).png

<img src="https://trtc.io/media/6fd5cada-0528-4bde-b00b-504c2ad06798.png" alt="Slice 7.png">We are named a Challenger in the 2023 Gartner® Magic Quadrant™ for CPaaS, based on ability and completeness of vision. We also ranked highest in Asia in the Video Use Case in the Critical Capabilities report for CPaaS.<h2 id="Other-Recognitions-and-Awards" id="Other-Recognitions-and-Awards" style="margin-left:0pt;">Other Recognitions and Awards</h2>In addition to being named a Challenger in the 2023 Gartner® Magic Quadrant™ for CPaaS, we have also been recognized in several other reports and awards:●&nbsp;<span style="background-color:rgb(255,255,255);color:rgb(0,0,0);font-family:Inter, Roboto, &quot;pingfang SC&quot;, &quot;hiragino sans gb&quot;, &quot;Apple SD Gothic Neo&quot;, ui-sans-serif, system-ui, -apple-system, &quot;system-ui&quot;, sans-serif, &quot;helvetica neue&quot;, arial, &quot;microsoft yahei ui&quot;, &quot;microsoft yahei&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">Frost &amp; Sullivan: Asia-Pacific Media Service Market Report, 2022: ranked as a leader in the Asia-Pacific region and placed first in terms of overall competitiveness●&nbsp;Gartner Critical Capabilities report for CPaaS, 2023: ranked highest in Asia on the Video Use Case●&nbsp;Gartner Market Guide for Communications Platform as a Service (CPaaS), 2022: recognized as a Representative Vendor<h2 id="Our-Strengths-Recognized-by-Gartner" id="Our-Strengths-Recognized-by-Gartner" style="margin-left:0pt;">Our Strengths Recognized by Gartner</h2>The cloud provider is active in areas besides CPaaS, such as infrastructure as a service (IaaS), platform as a service (PaaS), SaaS, gaming, digital content and meetings. Tencent owns communications and social services WeChat and WeCom (enterprise version of WeChat).●&nbsp;Scale to support applications in gaming, e-commerce and education to serve millions of customers.●&nbsp;Strong real-time capabilities in video streaming, audio, WebRTC, noise reduction and codecs. Common use cases include enterprise meetings, education, gaming and social media.●&nbsp;Good at offering its own solutions as well as providing a platform for other vendors to build their solutions. Example solutions include CDP, contact center, telemedicine, and e-commerce.<h2 id="About-Report" id="About-Report" style="margin-left:0pt;">About Report</h2>Gartner released the 2023 "Magic Quadrant™ for Communications Platform as a Service" report, and Tencent Cloud was recognized as a “Challenger". Notably, Tencent Cloud ranked highest in Asia, based in the Video Use Case in the Gartner Critical Capabilities report for CPaaS.<h3 style="margin-left:0pt;">Read the report, you will learn</h3>- Evaluation Criteria for the Magic Quadrant for Communications Platform as a Service- Strengths and cautions of Communications Platform as a Service- Market trend of Communications Platform as a Service<h2 id="How-to-Get-The-Report?" id="How-to-Get-The-Report?" style="margin-left:0pt;">How to Get The Report?</h2>Click <a href="https://trtc.io/contact">here</a> and write down '2023 Gartner' in the 'How may we help you?' box.Source:Gartner: Magic Quadrant for Communications Platform as a Service, Lisa Unden-Farboud, Daniel O'Connell, Ajit Patankar, Brian Doherty,18 September 2023Gartner: Critical Capabilities for Communications Platform as a Service, Ajit Patankar, Daniel O'Connell, Brian Doherty, Lisa Unden-Farboud, 18 September 2023Disclaimer:Gartner does not endorse any vendor, product or service depicted in its research publications and does not advise technology users to select only those vendors with the highest ratings or other designation. Gartner research publications consist of the opinions of Gartner’s research organization and should not be construed as statements of fact. Gartner disclaims all warranties, expressed or implied, with respect to this research, including any warranties of merchantability or fitness for a particular purpose.GARTNER is a registered trademark and service mark of Gartner and Magic Quadrant is a registered trademark of Gartner, Inc. and/or its affiliates in the U.S. and internationally and are used herein with permission. All rights reserved.&nbsp;

2023 Gartner® Magic Quadrant™ for CPaaS (Communications Platform as a Service)

banner1-gartner+cpaas

large_1207blog banner.png

medium_1207blog banner.png

small_1207blog banner.png

thumbnail_1207blog banner.png

1207blog banner.png

How to integrate Tencent RTC Call (TUICallKit)?

Tencent RTC offers audio/video communication SDK and UI kits, and delivers a global end-to-end latency of below 300 ms on average. With Tencent RTC, you can quickly develop cost-effective, high-quality interactive audio/video features. We will be using <a href="https://trtc.io/document/54896?utm_source=twitter&amp;utm_medium=rtc&amp;utm_term=call&amp;utm_campaign=tutorial&amp;_channel_track_key=7l2AVMTC">Tencent RTC Call (TUICallKit</a>) , a customized UI component designed specifically for call scenarios. We will guide you through the step-by-step process of quickly adding audio and video calling functionality to your Flutter project (<a href="https://flutter.dev/">Flutter</a> 3.0 or higher version) in minutes.<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/zZRInxrE6wU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div><h2 id="How-to-integrate-Tencent-RTC-Call-(TUICallKit)?" style="margin-left:0pt;">How to integrate Tencent RTC Call (TUICallKit)?</h2>Create Your Application in the Console<ul><li>Access the <a href="https://console.trtc.io/">Tencent RTC console</a> and click on "Create Application."</li><li>After successfully creating the application, choose the 7-day free trial option.</li><li>Take note of your application's name, SDK, APP ID, and secret key.</li></ul><img src="https://trtc.io/media/9e923617-60d4-4b2c-997c-adbea93ebf46.png" alt="creating the call app.png">Import the Tencent RTC Call (TUICallKit) Component into Your Project<ul><li>Open your newly created Flutter project.</li><li>Import the <a href="https://trtc.io/sdkDownload?utm_source=website&amp;utm_medium=blog&amp;utm_term=trtc&amp;utm_campaign=blog&amp;_channel_track_key=6tiILagC">latest version</a> of the Tencent RTC Call (TUICallKit) component into your project's configuration file.</li><li>Execute the command "flutter pub get" in the command line to import the component successfully.</li></ul><img src="https://trtc.io/media/fbf3dbb0-cc07-4e64-8cd1-686c6532a439.png" alt="execute the command &quot;flutter pub get&quot; in the command line.png">Configure the Project<ul style="list-style-type:disc;"><li>After importing the component, configure some basic information in your new project.</li><li>Import the necessary Dart files for using the Tencent RTC Call (TUICallKit) component.</li><li>Request camera and microphone permissions in the info.plist file under Runner in your iOS project.</li></ul><img src="https://trtc.io/media/2f054dd4-f3df-4176-a52e-724d9467328e.png" alt="configuration coding.png">Log in to the TUI Call Kit Component<ul><li>Log in to the Tencent RTC Call (TUICallKit) component in your Flutter project.</li><li>Use the "TUICallKit.instance.login" interface, providing the SDKAppID, user ID, and user signature as parameters.</li><li>Fill in the user ID (e.g., 6666) and generate the user signature using the User Sig Generation tool in the console.</li></ul><img src="https://trtc.io/media/d3051ede-53b0-41d5-86cb-864fcb154974.png" alt="fill the userID, SDKAppID and userSig in the login function.png"><h2 id="Run!-Make-and-Answer-a-Call" style="margin-left:0pt;">Run! Make and Answer a Call</h2><ul style="list-style-type:disc;"><li>Create a simple UI with a button to initiate the audio and video call.</li><li>Display the user ID (e.g., 6666) using a text widget.</li><li>Use the TUI call kit.instance.call interface to make a call to another user (e.g., 8888) when the button is clicked.</li></ul><img src="https://trtc.io/media/bcab3bf7-3063-43e0-a3fb-0d8b5f72b39f.png" alt="add the &quot;TUICallKit.instance.call&quot; interface.png"><ul><li>Implement the response to incoming calls in your Flutter project.</li><li>Use the "TUICallKit.instance.answer" interface to answer the call when prompted.</li></ul><img src="https://trtc.io/media/c1357e96-63dc-42e3-8c97-9a9db50cb917.png" alt="call demo.png"><h2 id="Conclusion" style="margin-left:0pt;">Conclusion</h2>Today, audio/video calling has become an essential communication tool, and setting up a video call has never been easier. With Tencent RTC Call (TUICallKit), you can seamlessly integrate video calling functionality into your Flutter projects, providing a simple and connected experience for your users.If you have more advanced requirements such as AI-powered noise cancellation and spatial audio, we offer a fully customized audio/video communication SDK &amp; API family for web, mobile, and games. Tailor your video communication experience to meet your specific needs and captivate your audience with <a href="https://trtc.io?utm_source=website&amp;utm_medium=blog&amp;utm_term=trtc&amp;utm_campaign=blog&amp;_channel_track_key=vk1DdHNL">Tencent RTC</a>.If you have any questions or need assistance, our support team is always ready to help. Please feel free to get in <a href="https://trtc.io/contact">touch with us</a>, or join us in <a href="https://discord.gg/hq7jW7zChW">Discord</a>.

Add Video Call with UI to Your Flutter Project in Minutes | Tencent RTC Blog

Add Video Call to Your Flutter Project in Minutes

banner2-flutter+call

large_Group 48097180.png

medium_Group 48097180.png

small_Group 48097180.png

thumbnail_Group 48097180.png

Group 48097180.png

Key Features and Benefits of 1 on 1 Video Chat

How 1 on 1 Video Chat Is Transforming Communication

How to Create a 1 on 1 Video Chat Application for Web, Ios, and Android

medium_Mask group (28).png

small_Mask group (28).png

thumbnail_Mask group (28).png

Mask group (28).png

1 on 1 Video Chat: Privacy & User Experience Insights

1 on 1 Video Chat: Revolutionizing Interaction 101

Call

Design Your Own Stranger Chat Platform: A Guide to Building an Omegle Alternative Website

large_封面15bestomeg.png

medium_封面15bestomeg.png

small_封面15bestomeg.png

thumbnail_封面15bestomeg.png

封面15bestomeg.png

5 Best Omegle Alternatives and How to Create One in 2024

Set Up

large_video jitter.png

medium_video jitter.png

small_video jitter.png

thumbnail_video jitter.png

video jitter.png

<img src="https://trtc.io/media/bb2d564d-29fc-4c48-a1ee-ab54756230a0.png" alt="video jitter">Have you ever experienced the frustrating situations of instability, buffering, decreased quality, or audio-video desynchronization during <a href="https://trtc.io/products/call">video calls</a> or while watching live broadcasts? It's understandable that you might feel compelled to refresh the page repeatedly or become disheartened and exit the application. These issues could indeed be caused by network jitter.As professional audio-video developers, it is crucial for us to understand the causes of jitter and find solutions in order to provide users with high-quality audio-video calling services and live streaming experiences.<h2 id="What-is-jitter" style="margin-left:0pt;">What is jitter</h2>First, let's understand what data packets are. After capturing audio-video data, the sender encodes and encapsulates this data into a series of small data packets, which are then transmitted over the network to the receiver. Upon receiving the data packets, the receiver performs operations such as unpacking and decoding, and finally delivers the processed audio data to the player for playback.In real-time audio-video transmission, due to network latency, packet loss, bandwidth limitations, and other factors, data packets may experience variable transmission speeds over the network. This can result in unstable arrival times of the packets at the receiver, leading to jitter.<h2 id="Causes-of-jitter" style="margin-left:0pt;">Causes of jitter</h2>Jitter is typically associated with the instability in network transmission and playback processes. Here are some possible causes of jitter:<ol><li>Network <a href="https://trtc.io/blog/details/throughput-latency">latency</a>: During real-time audio-video transmission, data packets may encounter varying degrees of delay while being transmitted over the network. This can result in unstable arrival times of the packets, leading to jitter.</li><li><a href="https://trtc.io/blog/details/high-packet-loss">Packet loss</a>: Packet loss in the network environment can cause certain video frames to fail to reach the receiver, resulting in jitter phenomena such as frame skipping or freezing.</li><li><a href="https://trtc.io/blog/details/bandwidth">BandWidth</a> limitations: When the network bandwidth is insufficient to support high-quality data transmission, it can result in unstable transmission speeds of data packets, leading to jitter.</li><li>Codec performance: The performance of the codec can also affect jitter. If the codec's processing speed is insufficient to keep up with the transmission speed of data packets, it can result in stuttering or frame skipping phenomena.</li><li>Player issues: If the player is unable to maintain a stable playback speed while processing video frames, it can also lead to video jitter.</li></ol><h2 id="Measurement-of-jitter" style="margin-left:0pt;">Measurement of jitter</h2>Measuring network jitter primarily involves calculating the extent of fluctuations in packet arrival times. Here are some commonly used methods to measure jitter:<ol><li>Mean Jitter: Calculate the time difference between consecutive packets' arrival times and compute the average of these time differences. Mean jitter reflects the overall fluctuation of network latency but may not accurately describe instantaneous jitter phenomena.</li><li>Jitter Variance: Calculate the time difference between consecutive packets' arrival times and then compute the variance of these time differences. Jitter variance reflects the degree of network latency fluctuations, where a higher value indicates more severe jitter.</li><li>Maximum Jitter: Calculate the time difference between consecutive packets' arrival times and identify the largest time difference. Maximum jitter reflects the maximum fluctuation of network latency but may be influenced by extreme values.</li><li>Percentile Jitter: Calculate the time difference between consecutive packets' arrival times and then compute a specific percentile value (e.g., 95th percentile) of these time differences. Percentile jitter reflects the fluctuation of network latency while reducing the impact of extreme values.</li><li>End-to-End Delay: Calculate the total delay between the sender and receiver. This metric encompasses various factors such as network latency, processing delay, etc., providing a comprehensive reflection of the impact of jitter on communication quality.</li></ol>In practical applications, it is possible to choose appropriate methods to measure jitter based on specific scenarios and requirements. Additionally, it is possible to evaluate network conditions and communication quality by combining other network metrics such as packet loss rate, bandwidth, etc.<h2 id="How-to-Reduce-jitter" style="margin-left:0pt;">How to Reduce jitter</h2>Due to the real-time and temporal nature of audio and video, jitter has a significant impact on the quality of audio and video. To reduce jitter, the following technical means and strategies can be employed:<ol><li>Frame dropping strategy: When the network conditions are poor, selectively discarding non-key frames can be an option to lower quality but maintain smoothness.</li><li>Frame synchronization algorithm: Predict and adjust the arrival time of data frames through algorithms to maintain a stable interval during playback.</li><li>Adaptive bitrate adjustment: Dynamically adjust the video bitrate based on network conditions to adapt to different bandwidth environments and reduce the likelihood of jitter.</li><li>Jitter buffer: Set up a jitter buffer at the receiving end to store and adjust the sequence of received data packets, reducing jitter during playback.</li><li>Optimizing codec performance: Choose higher-performing codecs or optimize the performance of existing codecs to improve processing speed and reduce stuttering or frame skipping.</li><li>Network optimization: Implement measures at the network level, such as selecting better transport protocols and optimizing network routing, to reduce network latency and packet loss, improving data transmission stability.</li><li>Player Buffering: Set up a buffer at the player end to cache received data. This provides some tolerance in playback time, reducing jitter.</li><li>Optimizing player performance: Optimize the internal processing flow of the player to ensure that it can play data frames at a stable speed, thereby reducing jitter.</li></ol><h2 id="Jitter-Buffer" style="margin-left:0pt;">Jitter Buffer</h2>Let's focus on introducing the Jitter Buffer. The Jitter Buffer is a technique used to reduce jitter in real-time audio and video transmission. By setting up a buffer at the receiving end, it stores and adjusts the sequence of received data packets, thereby reducing jitter during playback.In simple terms, the Jitter Buffer acts as a reservoir that buffers uneven data packets from the network before evenly delivering them to the decoder for decoding.<figure class="image"><img src="https://trtc.io/media/0ebfd035-4595-4d29-86f3-11a4e2d29bc9.png" alt="jitter buffer"></figure>To achieve this goal, different algorithms can be used to control the behavior of the Jitter Buffer. Here are some common Jitter Buffer algorithms:<ol><li>Fixed-size Jitter Buffer: This is the simplest algorithm where a fixed size is set for the Jitter Buffer (i.e., the number of data packets it can store). This algorithm is easy to implement but may not adapt well to changing network conditions.</li><li>Adaptive Jitter Buffer: This algorithm dynamically adjusts the size of the Jitter Buffer based on network conditions. For example, when significant network latency fluctuations are detected, the Jitter Buffer size can be increased to reduce the likelihood of packet loss. Conversely, when the network conditions are good, the Jitter Buffer size can be reduced to minimize playback delay.</li><li>Delay prediction-based Jitter Buffer: This algorithm determines when to retrieve packets from the Jitter Buffer for playback by predicting the delay of received packets.</li><li>Packet loss rate-based Jitter Buffer: This algorithm adjusts the size of the Jitter Buffer based on the packet loss rate at the receiving end. When the packet loss rate is high, the Jitter Buffer size can be increased to reduce the likelihood of packet loss. Conversely, when the packet loss rate is low, the Jitter Buffer size can be reduced to lower playback delay.</li></ol><h2 id="Jitter-Buffer-in-WebRTC" style="margin-left:0pt;">Jitter Buffer in WebRTC</h2><a href="https://trtc.io/blog/details/what-is-webrtc">WebRTC</a> (Web Real-Time Communication) is an open-source project aimed at providing simple and efficient real-time audio and video communication capabilities for web browsers and mobile applications. Through JavaScript APIs and related network protocols, WebRTC enables developers to implement real-time audio and video communication directly in web pages without the need for any plugins or third-party software.In WebRTC, the implementation of the Jitter Buffer relies on several key components:<ol><li>RTP (Real-Time Transport Protocol): WebRTC uses RTP for the transmission of audio and video data. RTP packets contain important information such as sequence numbers and timestamps, which are crucial for the implementation of the Jitter Buffer as they help determine the packet order and playback timing.</li><li>RTCP (Real-Time Control Protocol): WebRTC utilizes RTCP to collect and transmit statistical information about network conditions, such as packet loss rate and latency. This information can guide the behavior of the Jitter Buffer, such as dynamically adjusting the buffer size.</li><li>NACK (Negative Acknowledgement): NACK is a mechanism used to request retransmission of lost packets. In WebRTC, if the Jitter Buffer detects a missing packet, it can send a NACK message to request the sender to retransmit that packet. This helps reduce jitter.</li><li>Media Stream Processing: The media stream processing module in WebRTC is responsible for decoding, depacketizing, and playing received RTP packets. During this process, the Jitter Buffer sorts and adjusts the packets based on their sequence numbers and timestamps to ensure the correct playback order and timing.</li></ol>Specifically, the implementation of Jitter Buffer in WebRTC can be divided into the following steps:<ol><li>Receive RTP packets: Upon receiving RTP packets, WebRTC stores them in the Jitter Buffer.</li><li>Packet sorting: Sort the packets based on their sequence numbers and timestamps to ensure the correct playback order.</li><li>Buffer management: Dynamically adjust the size of the Jitter Buffer based on network conditions such as latency and packet loss rate. This can be achieved using statistical information collected through RTCP.</li><li>Packet loss handling: If a missing packet is detected, a NACK message can be sent to request the sender to retransmit that packet.</li><li>Packet retrieval: Retrieve packets from the Jitter Buffer for decoding and playback based on their timestamps and the current playback time.</li><li>Synchronization handling: In cases of audio-video synchronization, it may be necessary to adjust the behavior of the Jitter Buffer based on the latency difference between audio and video to attempt synchronization recovery.</li></ol>Through the above steps, WebRTC implements a robust Jitter Buffer that effectively reduces jitter phenomena and improves the quality of real-time audio and video communication.Finally, let me briefly introduce NetEQ, which is one of the core technologies in WebRTC, standing for Network Equalizer. NetEQ essentially functions as the audio Jitter Buffer, utilizing adaptive jitter buffering algorithms. The buffering delay can be continuously optimized based on network conditions. Its primary goal is to ensure smooth playback of incoming audio packets from the network while maintaining the lowest possible latency. In addition, NetEQ integrates packet loss concealment algorithms and seamlessly integrates with decoders, ensuring good voice quality even in high packet loss environments.<h2 id="Using-Tencent-RTC" style="margin-left:0pt;">Using Tencent RTC</h2><a href="https://trtc.io/?utm_source=website&amp;utm_medium=blog&amp;utm_term=trtc&amp;utm_campaign=blog&amp;_channel_track_key=vk1DdHNL">Tencent Real-Time Communication (TRTC) </a>is a cloud computing service provided by Tencent Cloud for real-time audio and video communication and interactive live streaming. TRTC offers a powerful set of APIs and SDKs that can be used to build various real-time audio and video applications, such as video conferencing, online education, interactive live streaming, and more.Regarding the jitter issue in the real-time audio and video domain, Tencent RTC offers the following advantages:<ol><li>Dynamic bitrate adjustment: Tencent RTC can dynamically adjust the bitrate of audio and video based on network conditions and device performance, adapting to different network environments and reducing the likelihood of jitter.</li><li>Efficient Jitter Buffer: Tencent RTC implements an efficient audio and video Jitter Buffer, which dynamically adjusts the buffer size and packet retrieval strategy based on network conditions, reducing jitter phenomena.</li><li>Optimized audio and video codecs: Tencent RTC supports multiple audio and video codecs that have been optimized to enhance encoding and decoding performance, reducing issues like freezing or frame skipping.</li><li>Network optimization: Leveraging Tencent Cloud's extensive network resources and optimization technologies such as intelligent route selection and Quality of Service (QoS), Tencent RTC reduces network latency and packet loss rate, thereby improving the stability of audio and video transmission.</li></ol><h2 id="Conclusion">Conclusion</h2>Developers can easily minimize jitter and achieve outstanding audio-video experiences, even in challenging network environments, using Tencent RTC. Sign up for free and rapidly create your own audio-video application.&nbsp;If you have any questions or need assistance, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact?utm_source=website&amp;utm_medium=blog&amp;utm_term=trtc&amp;utm_campaign=blog&amp;_channel_track_key=EB6l06UE">Contact Us</a> or join us in <a href="https://discord.gg/hq7jW7zChW">Discord</a>.