<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/NSWyYnG0wEQ?si=Fp2nAQPptiTE3kt5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></div><a href="https://trtc.io/demo/homepage/#/detail?scene=roomkit">Video conferencing</a> has become an indispensable tool for daily communication for enterprises and individuals. Whether it is remote work, online education, or keeping in touch with friends and family, video conferencing applications such as Zoom play an important role. So, how to develop a powerful and easy-to-use video conferencing application?<a href="https://trtc.io/document/60441?platform=web&amp;product=conference&amp;menulabel=overview">This tutorial</a> will take you step by step to build a video conferencing application similar to Zoom. We will use the latest technology stack and powerful tools such as Tencent Real-time Audio and Video (TRTC) to create a conference application with high-definition audio and video, multi-person interaction, screen sharing, and other functions. Whether you are a beginner or have some development experience, this tutorial will provide you with comprehensive guidance and practical opportunities.Before starting to build the application, let's first understand the core functions and technical points of the video conferencing application:1. Real-time audio and video communication: Use technologies such as WebRTC to achieve low-latency, high-quality audio and video transmission.2. Multi-person interaction: Support multiple participants to join the meeting at the same time and provide real-time audio and video interaction.3. Screen sharing: Allow participants to share their own screens for easy presentation and collaboration.4. Meeting management: Provides meeting creation, joining, invitation and other functions to facilitate users to organize and participate in meetings.5. User interface: Design a simple and intuitive user interface to provide a good user experience. <h2 id="Prerequisites" style="margin-left:0px;">Prerequisites</h2>Node.js version: Node.js ≥ 16.19.1.Modern browser, <a href="https://trtc.io/document/41664">supporting WebRTC APIs</a>.<h2 id="Step-1.-Download-Demo" style="margin-left:0px;">Step 1. Download Demo</h2>1. Open Terminal Copy and enter the sample command to clone the repository.<pre><code class="language-javascript">git clone https://github.com/Tencent-RTC/TUIRoomKit.git﻿</code></pre>2. Installation of dependenciesVue3<pre><code class="language-javascript">cd ./TUIRoomKit/Web/example/vite-vue3-ts</code></pre>Vue2<pre><code class="language-javascript">cd ./TUIRoomKit/Web/example/webpack-vue2.7-ts</code></pre><pre><code class="language-javascript">npm install</code></pre><h2 id="Step-2.-Configure-Demo" style="margin-left:0px;">Step 2. Configure Demo</h2>1. ﻿<a href="https://trtc.io/document/59973?platform=web&amp;product=conference">Activate the TUIRoomKit service</a>，get the SDKAppID and SDKSecretKey.﻿<figure class="image image_resized" style="width:100%;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/4ada4c36169d11efb366525400762795.png" alt=""></figure>2. Open the TUIRoomKit/Web/example/vite-vue3-ts/src/config/basic-info-config.js file and enter the SDKAppID and SDKSecretKey you got when you activated the service:<figure class="image image_resized" style="width:100%;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/4befbf52169d11ef947052540019e87e.png" alt=""></figure>Note：For Vue2 projects, open the TUIRoomKit/Web/example/webpack-vue2.7-ts/src/config/basic-info-config.js file and enter the SDKAppID and SDKSecretKey you got when you activated the service.<h2 id="Step-3.-Run-Demo" style="margin-left:0px;">Step 3. Run Demo</h2>1. Run Demo by typing the command in the terminal.Vue3<pre><code class="language-javascript"># cd TUIRoomKit/Web/example/vite-vue3-ts
npm run dev</code></pre> Vue2<pre><code class="language-javascript"># cd TUIRoomKit/Web/example/webpack-vue2.7-ts
npm run serve</code></pre>Note：For local environment, please access under localhost protocol, please refer to <a href="https://web.sdk.qcloud.com/trtc/webrtc/doc/en/tutorial-05-info-browser.html#h2-3">the description of network access protocol</a>.2. Open a browser page and enter the corresponding URL.<figure class="image image_resized" style="width:100%;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/7bf5b90523db11efa0b8525400db4520.png" alt=""></figure><h2 id="Step-4.-Create-your-first-conference" style="margin-left:0px;">Step 4. Create your first conference</h2>Click on the New Room button to create your first meeting room. The room types are On-stage Speaking Room and Free Speech Room.<h3>1. Free speech room</h3><figure class="image image_resized" style="width:100%;"><img datasrc="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/80e009d123db11ef94525254005f7176.png" alt="" alt="img"></figure><h3>2. On-stage Speaking Room</h3>You can apply for the satge.<figure class="image image_resized" style="width:99.82%;"><img datasrc="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/e97132a323dd11ef8b7b52540096e81f.png" alt="" alt="img"></figure><h2 id="Step-5.-Join-conference" style="margin-left:0px;">Step 5. Join conference</h2>Participants can join a meeting created by the meeting host by filling in the corresponding <code>RoomId</code>.<figure class="image image_resized" style="width:100%;"><img datasrc="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/9e153caa23db11ef860b52540049c929.png" alt="" alt="img"></figure><h2 id="Conclusion">Conclusion</h2>In conclusion, <a href="https://trtc.io/document/60441?platform=web&amp;product=conference&amp;menulabel=overview">this tutorial</a> has provided a comprehensive guide on how to quickly set up and experience a high-quality multi-person video conference using the TUIRoomKit sample project. By following the step-by-step instructions, you can now confidently run the demo within a matter of minutes and explore the powerful features of the TUIRoomKit.Through this hands-on experience, you have gained valuable insights into the capabilities of the TUIRoomKit, including its user-friendly interface, high-quality audio and video transmission, and seamless multi-person conferencing. You now have a solid foundation to build upon and integrate these features into your own applications, whether for business meetings, online education, or any other scenario that requires reliable and efficient video conferencing.As you continue to explore the possibilities of video conferencing technology, TUIRoomKit is just one of the many tools available to developers. With its robust features and easy-to-use sample project, however, it is an excellent choice for those looking to quickly implement high-quality video conferencing in their applications.We encourage you to further explore the TUIRoomKit documentation and experiment with its various settings and customization options to create a video conferencing experience tailored to your specific needs. By leveraging the power of the TUIRoomKit and staying up-to-date with the latest advancements in video conferencing technology, you can create innovative and engaging applications that connect people across the globe.If you have any questions or need assistance online, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">Contact us</a> or join us on <a href="https://t.me/+EPk6TMZEZMM5OGY1">Telegram</a> or <a href="https://discord.com/invite/hq7jW7zChW">Discord</a>. For technical problems, you can also get help directly from developers on <a href="https://stackoverflow.com/questions/tagged/trtc.io">Stack Overflow</a>.﻿

Conference

thumbnail_Group 7744conferencelogo.png

Group 7744conferencelogo.png

Benefits of Building Live Streaming Apps on Android

Key Features to Consider When Developing a Live Streaming App

How to Create Live Android Streaming Apps?

5 Most Popular Live Android Streaming Apps 2024

large_Screenshot 2024-06-27 at 15.01.51.png

medium_Screenshot 2024-06-27 at 15.01.51.png

small_Screenshot 2024-06-27 at 15.01.51.png

thumbnail_Screenshot 2024-06-27 at 15.01.51.png

Screenshot 2024-06-27 at 15.01.51.png

Develop Live Android Streaming Apps [Complete Guide]

How to Build Live Android Streaming Apps?

Build App

large_how to build a video calling app on iOS.png

medium_how to build a video calling app on iOS.png

small_how to build a video calling app on iOS.png

thumbnail_how to build a video calling app on iOS.png

how to build a video calling app on iOS.png

How to Build A Video Calling App on iOS | Tencent RTC Blog

How to Build A Video Calling App on iOS

Set Up

Call

iOS development

large_Screenshot 2024-07-09 at 16.55.49.png

medium_Screenshot 2024-07-09 at 16.55.49.png

small_Screenshot 2024-07-09 at 16.55.49.png

thumbnail_Screenshot 2024-07-09 at 16.55.49.png

Screenshot 2024-07-09 at 16.55.49.png

<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/o0PcxpGl66Y?si=fA_8HF3qWnUUF9PO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></div>Chat apps play a crucial role in both personal and professional communication. They provide a seamless way for people to connect, share information, and collaborate in real-time.<h2 id="Use-Cases">Use Cases</h2><h3>Personal Communication</h3><ul><li>Staying Connected: Keep in touch with family and friends, share updates, and maintain relationships regardless of distance.</li><li>Instant Messaging: Faster and more interactive than traditional SMS, with options for text, voice, and video.</li></ul><h3>Business Collaboration:</h3><ul><li>Team Communication: Enhance productivity with real-time discussions, project updates, and feedback.</li><li>Remote Work: Essential for virtual meetings, file sharing, and collaborative tasks in distributed teams.</li></ul><h3>Customer Support:</h3><ul><li>Instant Assistance: Provide real-time help and support to customers, improving satisfaction and loyalty.</li><li>Chatbots: Use AI to handle common queries and offer 24/7 support.</li></ul><h3>Education:</h3><ul><li>Online Classes: Facilitate student-teacher interactions, Q&amp;A sessions, and homework submissions.</li><li>Study Groups: Enable students to collaborate, discuss topics, and share resources.</li></ul><h3>Social and Entertainment:</h3><ul><li>Interest Groups: Join communities based on shared hobbies or interests to exchange ideas and experiences.</li><li>Live Interaction: Engage with live streams and gaming communities in real-time.</li></ul>By building a powerful chat app, you can enhance user communication experiences across various scenarios. Do you want to quickly build it with conversation, chat, group and a complete UI on the web? Follow our <a href="https://trtc.io/document/50055?platform=web&amp;product=chat&amp;menulabel=uikit">step-by-step guide</a> to create a real-time chat app using React.js and Tencent RTC in 10 minutes!<h2 id="Environment-Requirements" style="margin-left:0px;">Environment Requirements</h2><ul><li>React v18.0 (Version 17.x is not supported.)</li><li>TypeScript</li><li>Node (The Node version should not be earlier than 12.13.0 and not later than 17.0.0. The official LTS version 16.17.0 of Node.js is recommended.)</li><li>npm (Use a version that matches the Node version in use.)</li></ul><h2 id="chat-uikit-react-Integration" style="margin-left:0px;">chat-uikit-react Integration</h2><h3 style="margin-left:0px;">Step 1: Create a project</h3>Create a new React project. You can choose whether to use a TS template or not.<pre><code class="language-javascript">npx create-react-app sample-chat --template typescript</code></pre>After the project is created, go to the project directory.<pre><code class="language-javascript">cd sample-chat</code></pre><h3 style="margin-left:0px;">Step 2: Download the chat-uikit-react component</h3>Use npm to download <a href="https://www.npmjs.com/package/@tencentcloud/chat-uikit-react">chat-uikit-react</a> and use it in your project. Additionally, related <a href="https://github.com/TencentCloud/chat-uikit-react">open source code</a> is also provided on GitHub, which you can use as a basis to develop your own component library.<pre><code class="language-javascript">npm install @tencentcloud/chat-uikit-react</code></pre><h3 style="margin-left:0px;">Step 3: Include the chat-uikit-react component</h3>Note:<ul><li>In the following code, <code>SDKAppID</code>, <code>userID</code>, and <code>userSig</code> are not input. Acquire the necessary information in <a href="https://trtc.io/document/50055#.E6.AD.A5.E9.AA.A44.EF.BC.9A.E8.8E.B7.E5.8F.96-sdkappid.E3.80.81userid-.E5.92.8C-usersig">Step 4</a> and replace it accordingly.</li><li>npm Integration Method</li><li>Source Code Integration Method</li><li>Replace the content in App.tsx, or you can create a new component for inclusion.</li></ul><pre><code class="language-javascript">import React, { useEffect, useState } from 'react';
import { ChatSDK } from '@tencentcloud/chat';
import { TUIKit } from '@tencentcloud/chat-uikit-react';
import { TUILogin } from '@tencentcloud/tui-core';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
﻿

export default function SampleChat() {
 const [chat, setChat] = useState&lt;ChatSDK&gt;();
 const init = () =&gt; {
 const loginInfo = {
 SDKAppID: 0, // Your SDKAppID. Get it from Step 4
 userID: 'xxx', // Your userID. Get it from Step 5
 // UserSig is a cipher for a user to log in to IM. It is the ciphertext generated by 
 //encrypting information such as userID. Get it from Step 5
 userSig: 'xxx', // Your userSig. Get it from Step 5
 useUploadPlugin: true,
 };
 TUILogin.login(loginInfo).then(() =&gt; {
 const { chat } = TUILogin.getContext();
 setChat(chat);
 }).catch(() =&gt; {});
 }
 useEffect(() =&gt; {
 init();
 }, [])

 return (
 &lt;TUIKit chat={chat} language={'en'}&gt;&lt;/TUIKit&gt; // language support en or zh
 )
}</code></pre><h3 style="margin-left:0px;">Step 4: Create an application</h3>1. Log in to the <a href="https://console.trtc.io/">Chat console</a>.2. Click Create Application, enter your application name, and then click Create.<figure class="image image_resized" style="width:740px;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/1cbc778a11ea11efbf645254007bbd8c.png" alt=""></figure>3. After creation is complete, you can view the status, service version, SDKAppID, creation time, tag, and expiration time of the new application on the console overview page.<figure class="image image_resized" style="width:740px;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/413b377311ea11ef89cc5254002fd0a8.png" alt=""></figure><h3 style="margin-left:0px;">Step 5: Obtain userID and userSig</h3>Click the target application tab, enter the Account Management page, create an account, and obtain userID.<figure class="image image_resized" style="width:740px;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/d049465311ea11efbf645254007bbd8c.png" alt=""></figure>Go to the <a href="https://console.trtc.io/usersig">IM console &gt; UserSig Tools</a> , enter the userID to generate a userSig, and copy the userSig. For more information about userSig, see <a href="https://trtc.io/document/39074?product=consoleguide">Generating UserSig</a>.<figure class="image image_resized" style="width:740px;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/3158a82011eb11ef9af4525400720cb5.png" alt=""></figure><h3 style="margin-left:0px;">Step 6: Start the project</h3>Replace SDKAppID, userID, and userSig in App.tsx, and then run the following command:<pre><code class="language-javascript"> npm run start</code></pre>Note:<ol><li>Ensure that <code>SDKAppID</code>, <code>userID</code>, and <code>userSig</code> are successfully replaced in <a href="https://trtc.io/document/50055?platform=web&amp;product=chat&amp;menulabel=uikit#step3">Step 3</a>, as the failure to do so may cause the project to operate abnormally.</li><li>A <code>userID</code> corresponds to a <code>userSig</code>. For more information, see <a href="https://trtc.io/document/39074?product=consoleguide">Generating UserSig</a>.</li><li>If the project fails to start, please check whether the <a href="https://trtc.io/document/50055?platform=web&amp;product=chat&amp;menulabel=uikit#required">environment requirements</a> are met.</li></ol><h3 style="margin-left:0px;">Step 7: Send your first message</h3>1. After starting the project, click + on the left to start a one-to-one chat.2. Enter the userID created in <a href="https://trtc.io/document/50055#f64596b3-1f47-47d0-b226-d03dfb56dfe4">Step 5</a> in the search box, and then press Enter.3. Enter your message in the input box and press Enter to send.<figure class="image"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/96d1b0b1cfa211eebedb525400461a83.gif"></figure><h2 id="FAQs" style="margin-left:0px;">FAQs</h2><h4 style="margin-left:0px;">What is UserSig?</h4>A UserSig is a cipher with which you can log in to IM. It is the ciphertext generated by encrypting information such as userID.<h4 style="margin-left:0px;">How can I generate a UserSig?</h4>The issuance method for UserSig involves integrating the computation code of UserSig into your server, and providing an API oriented towards your project. When UserSig is needed, your project sends a request to the business server to obtain the dynamic UserSig. For more information, see <a href="https://trtc.io/document/39074?product=consoleguide">How to Generate a UserSig on the Server</a>.If you have any questions or need assistance online, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">Contact us</a> or join us on <a href="https://t.me/+EPk6TMZEZMM5OGY1">Telegram</a> or <a href="https://discord.com/invite/hq7jW7zChW">Discord</a>.

Build a Real-Time Chat App Using React

Build a Chat App in 10 Minutes with UIKit using React

Build a Multi-Person Video Conferencing App in 10 Minutes

Build a Video Conference Web App like Zoom with UIKit | Node.js | Tencent RTC