<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/7UI7a9e8lek?si=fWlPZuOZXouvLzJS" 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><h2 id="Introduction" id="Introduction" id="Introduction" id="Introduction" id="Introduction" id="Introduction">Introduction</h2>Whether it's staying connected with friends and family or collaborating with colleagues, chat apps like WhatsApp and Telegram have revolutionized the way we communicate. If you've ever wondered how to create your own 1v1 chat app, this <a href="https://trtc.io/document/45914?platform=android&amp;product=chat&amp;menulabel=uikit">tutorial</a> is for you! We'll guide you through the process of building a feature-rich 1v1 chat app using Android Studio, Tencent UIKit, and Tencent SDK, enabling you to create a seamless and engaging chatting experience for your users. By the end of this tutorial, you'll have a fully functional 1v1 chat app ready to be customized and deployed.<h2 id="Environment-requirements" id="Environment-requirements" id="Environment-requirements" id="Environment-requirements" id="Environment-requirements" id="Environment-requirements">Environment requirements</h2><ul><li>Android Studio-Chipmunk</li><li>Gradle-6.7.1</li><li>Android Gradle Plugin Version-4.2.0</li><li>kotlin-gradle-plugin-1.5.31</li></ul><h2 id="Step-1:-Create-an-App" id="Step-1:-Create-an-App" id="Step-1:-Create-an-App" id="Step-1:-Create-an-App" id="Step-1:-Create-an-App" id="Step-1:-Create-an-App" style="margin-left:0px;">Step 1: Create an App</h2>1. Log in to the <a href="https://console.trtc.io/">Console</a>. If you already have an app, record its SDKAppID and SDKSecretKey.Note：1. A Chat account can create a maximum of 300 Chat apps. If you want to create a new app, you can disable and delete an unwanted app first.2. Once an app (along with its SDKAppID) is deleted, the service it provides and all its data are lost. Please operate with caution.2. Click <code>Create Application</code>, enter your Application name, product, Region, and click <code>Create</code>.<figure class="image image_resized" style="width:100%;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/4531d6be1cd711efa2475254002fd0a8.png" alt="Create application流程指导图:

1. Click "Create Application" button.
2. Enter application name, select product, choose region, and click "Create"."></figure><h2 id="Step-2:-Obtain-SDKAppID-and-SDKSecretKey" id="Step-2:-Obtain-SDKAppID-and-SDKSecretKey" id="Step-2:-Obtain-SDKAppID-and-SDKSecretKey" id="Step-2:-Obtain-SDKAppID-and-SDKSecretKey" id="Step-2:-Obtain-SDKAppID-and-SDKSecretKey" id="Step-2:-Obtain-SDKAppID-and-SDKSecretKey" style="margin-left:0px;">Step 2: Obtain SDKAppID and SDKSecretKey</h2>After creation, you can view the newly created app's Status, SDKAppID, Expiration time, etc., on the Applications page:﻿<figure class="image image_resized" style="width:100%;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/7678376f1cd711ef9b0c525400762795.png" alt="After creating an application, you can view its status, SDKAppID, expiration time"></figure>Record the SDKAppID and SDKSecretKey from the Application Information.Danger:Keep the SDKSecretKey properly to prevent disclosure.<h2 id="Step-3:-Download-and-Configure-the-Demo" id="Step-3:-Download-and-Configure-the-Demo" id="Step-3:-Download-and-Configure-the-Demo" id="Step-3:-Download-and-Configure-the-Demo" id="Step-3:-Download-and-Configure-the-Demo" id="Step-3:-Download-and-Configure-the-Demo" style="margin-left:0px;">Step 3: Download and Configure the Demo</h2>1. Download the <a href="https://github.com/TencentCloud/chat-uikit-android">Android demo project </a>from Github.2. Open the project in the terminal directory and find the <code>GenerateTestUserSig.java</code> file. The path is Android/Demo/app/src/main/java/com/tencent/qcloud/tim/demo/signature/GenerateTestUserSig.java, and set the relevant parameters:SDKAPPID: set it to the SDKAppID obtained above.SECRETKEY: set it to the SDKSecretKey obtained above.<figure class="image image_resized" style="width:100%;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/e0d841971cd711ef9b9e5254002977b6.png" alt="GenerateTestUserSig class, Tencent Cloud SDKAppID, SDKSecretKey, Expiry Time, Application Configuration, Terminal Directory, Android Demo App"></figure>Warning：In this tutorial, the method to obtain <code>UserSig</code> is to configure a <code>SECRETKEY</code> in the client code. In this method, the <code>SECRETKEY</code> is vulnerable to decompilation and reverse engineering. Once your <code>SECRETKEY</code> is disclosed, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo project and feature debugging.The correct <code>UserSig</code> distribution method is to integrate the calculation code of <code>UserSig</code> into your server and provide an app-oriented API. When <code>UserSig</code> is needed, your app can send a request to the business server to obtain a dynamic <code>UserSig</code>. <h2 id="Step-4:-Compile-and-Run-the-Demo" id="Step-4:-Compile-and-Run-the-Demo" id="Step-4:-Compile-and-Run-the-Demo" id="Step-4:-Compile-and-Run-the-Demo" id="Step-4:-Compile-and-Run-the-Demo" id="Step-4:-Compile-and-Run-the-Demo" style="margin-left:0px;">Step 4: Compile and Run the Demo</h2>Import the demo project with Android Studio, and then compile and run it. For more information, see the file <code>README.md</code> in the corresponding directory of the demo project cloned above.<div class="raw-html-embed"><div class="tpm-blog-md-call-to-action" style="width: 100%; background: #e8f0ff; border-radius: 12px;box-sizing: border-box;padding: 16px 24px;background-repeat: no-repeat;background-position: right center;background-size: contain;display: flex;flex-direction: column;background-image: url(https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/1c9a7b9c-a132-40ee-8adf-8786f82501ce.png)">
 <h3 style="margin: 0; font-size: 20px">
 Want to build a similar app or platform? Get your free 10,000 minutes
 now
 </h3>
 <a href="https://trtc.io/login?s_url=https://console.trtc.io" target="_blank" style="color: #fff;padding: 5px 24px;gap: 10px;text-decoration: none;border-radius: 16px;background: #1c66e5;margin-top: 20px;display: inline-block;color: #fff;font-size: 14px;font-style: normal;font-weight: 700;line-height: 22px; text-align: center;width: fit-content;">
 Get Started for Free
 </a>
 </div></div><h2 id="Conclusion" id="Conclusion" id="Conclusion" id="Conclusion" id="Conclusion" id="Conclusion">Conclusion</h2>Congratulations! You have now built a fully functional 1v1 chat app using Android Studio, Tencent UIKit, and Tencent SDK. With features like 1v1 chatting, group chat, search, and support for multiple message types, your app is ready to be customized and deployed. But this is just the beginning! You can further enhance your app by adding <a href="https://trtc.io/document/59441?platform=android&amp;product=chat&amp;menulabel=uikit">additional features</a> such as user authentication, push notifications, and end-to-end encryption to ensure a secure and seamless chatting experience for your users.As you continue to develop and refine your 1v1 chat app, keep in mind the importance of user feedback and iteration. Listen to your users' suggestions and incorporate their ideas to create an app that truly meets their needs. With dedication and persistence, your 1v1 chat app can become the next big thing in the world of instant messaging.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>.

Chat

chat.svg

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 App

large_Screenshot 2024-07-09 at 18.49.20.png

medium_Screenshot 2024-07-09 at 18.49.20.png

small_Screenshot 2024-07-09 at 18.49.20.png

thumbnail_Screenshot 2024-07-09 at 18.49.20.png

Screenshot 2024-07-09 at 18.49.20.png

<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/feNiUc5DeA8?si=BrHC5oNuJDT3icJ3" 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>Whether it’s for connecting remote teams, facilitating online classes, or enhancing customer support, video calling is an essential tool. However, developing a video call application from scratch can be time-consuming and complex. What if you could build a scalable and feature-rich video call application on the web in just 10 minutes? Using Vue 3, known for its efficiency and ease of use, this tutorial will guide you through creating a complete video call app in just 10 minutes!<h2 id="Prerequisites">Prerequisites</h2><ul><li>﻿<a href="https://nodejs.org/en/">Node.js</a> version 16+.</li><li>Modern browser, supporting WebRTC APIs.</li></ul><h2 id="Step-1.-Activate-the-service">Step 1. Activate the service</h2>Refer to <a href="https://trtc.io/document/59832?platform=web&amp;product=call">Activate the Service</a> to obtain <code>SDKAppID, SDKSecretKey</code>, which will be used as Mandatory Parameters in <a href="https://trtc.io/document/50993#step3">Initialize the TUICallKit</a>.<h2 id="Step-2.-Download-TUICallKit">Step 2. Download TUICallKit</h2>1. Download the <a href="https://www.npmjs.com/package/@tencentcloud/call-uikit-vue">@tencentcloud/call-uikit-vue</a> component.<pre><code class="language-javascript">npm install @tencentcloud/call-uikit-vue</code></pre>2. Copy the <code>debug</code> directory to your project directory <code>src/debug</code>, it is necessary when generating userSig locally.MacOS<pre><code class="language-javascript">cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src</code></pre>Windows<pre><code class="language-javascript">xcopy node_modules\@tencentcloud\call-uikit-vue\debug .\src\debug /i /e</code></pre><h2 id="Step-3.-Initialize-TUICallKit">Step 3. Initialize TUICallKit</h2>You can choose to import the sample code in the <code>src/App.vue</code> file.The example code uses the <code>Composition API</code> approach.1. using <a href="https://trtc.io/document/51015#init#tuicallkit">&lt;TUICallKit /&gt;</a>, which contains the complete UI interaction during a call.<pre><code class="language-javascript">&lt;template&gt;
 &lt;span&gt; caller's ID: &lt;/span&gt;
 &lt;input type="text" v-model="callerUserID"&gt; 
 &lt;button @click="init"&gt; step1. init &lt;/button&gt; &lt;br&gt;
 &lt;span&gt; callee's ID: &lt;/span&gt;
 &lt;input type="text" v-model="calleeUserID"&gt;
 &lt;button @click="call"&gt; step2. call &lt;/button&gt;
 
 &lt;!--【1】Import the TUICallKit component: Call interface UI --&gt;
 &lt;TUICallKit style="width: 650px; height: 500px " /&gt;
&lt;/template&gt;</code></pre>2. using the <a href="https://trtc.io/document/51015#init">TUICallKitServer.init</a> API to log in to the component, you need to <code>fill in</code> <code>SDKAppID, SDKSecretKey</code> as two parameters in the code.<pre><code class="language-javascript">&lt;script setup&gt; // lang='ts'
import { ref } from 'vue';
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 2.3
﻿

const SDKAppID = 0; // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
const SDKSecretKey = ''; // TODO: Replace with your SDKSecretKey
﻿

const callerUserID = ref('');
const calleeUserID = ref('');
﻿

//【2】Initialize the TUICallKit component
const init = async () =&gt; {
 const { userSig } = GenerateTestUserSig.genTestUserSig({
 userID: callerUserID.value, 
 SDKAppID,

 SecretKey: SDKSecretKey 

 });

 await TUICallKitServer.init({

 userID: callerUserID.value, 

 userSig, 

 SDKAppID,

 });

 alert('TUICallKit init succeed');

}

&lt;/script&gt;</code></pre>&nbsp; &nbsp;&nbsp;<figure class="table" style="width:98.26%;"><table class="ck-table-resized"><colgroup><col style="width:18.01%;"><col style="width:13.74%;"><col style="width:68.25%;"></colgroup><tbody><tr><td style="background-color:rgb(245, 247, 250);border:1px solid rgb(225, 230, 240);padding:8px 16px;">Parameter</td><td style="background-color:rgb(245, 247, 250);border:1px solid rgb(225, 230, 240);padding:8px 16px;">Type</td><td style="background-color:rgb(245, 247, 250);border:1px solid rgb(225, 230, 240);padding:8px 16px;">Note</td></tr><tr><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">userID</td><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">String</td><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">Unique identifier of the user, <code>defined by you</code>, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.</td></tr><tr><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">SDKAppID</td><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">Number</td><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">The unique identifier for the audio and video application created in the <a href="https://console.trtc.io/">Tencent RTC Console</a>.</td></tr><tr><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">SDKSecretKey</td><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">String</td><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">The SDKSecretKey of the audio and video application created in the <a href="https://console.trtc.io/">Tencent RTC Console</a>.</td></tr><tr><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">userSig</td><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">String</td><td style="border:1px solid rgb(225, 230, 240);padding:8px 16px;">A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.</td></tr></tbody></table></figure><h2 id="Step-4.-Make-the-first-call">Step 4. Make the first call</h2>1. using the <a href="https://trtc.io/document/51015#call">TUICallKitServer.call API</a> to make a call.<pre><code class="language-javascript">//【3】Make a 1v1 video call
const call = async () =&gt; {
 await TUICallKitServer.call({
 userID: calleeUserID.value,
 type: TUICallType.VIDEO_CALL,
 }); 
};</code></pre>2. Run the project.3. Open two browser pages, enter different userID(defined by you) click <code>step1. init</code> to login (caller and callee).﻿<figure class="image image_resized" style="width:873.984px;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/deab8c362c8611efb8c45254005a8b94.png" alt=""></figure>4. After both userID init to successfully, click on<code> step2. call</code>to make a call. If you have a call problem, refer to <a href="https://trtc.io/document/51024?platform=android&amp;product=call#create_userID">FAQs</a>.﻿<figure class="image image_resized" style="width:873.984px;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ed9385572c8611ef9bb3525400ab9413.png" alt=""></figure>If you have any requirements or feedback, you can contact: info_rtc@tencent.com. Or Reach out via <a href="https://t.me/+EPk6TMZEZMM5OGY1">Telegram</a> or <a href="https://discord.com/invite/hq7jW7zChW">Discord</a> for advice on your implementation.

Build a Video Call App with Vue3 in 10 Minutes | Complete UI

Build a Video Call App in 10 minutes with UIKit using Vue3

large_Screenshot 2024-07-28 at 20.07.59.png

medium_Screenshot 2024-07-28 at 20.07.59.png

small_Screenshot 2024-07-28 at 20.07.59.png

thumbnail_Screenshot 2024-07-28 at 20.07.59.png

Screenshot 2024-07-28 at 20.07.59.png

<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/wIRqfKW8l4E?si=-TZPCBvmE-P2gLg-" 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=beauty">Face filters</a> and augmented reality (AR) have become increasingly popular, thanks to apps like Snapchat and Instagram. These engaging features allow users to enhance their appearance, play with fun filters, and express their creativity in real-time. But did you know that you can now bring the same exciting capabilities to your own web applications? With Tencent Real-Time Communication (RTC) and its powerful Beauty AR Web SDK, you can create a face filter web app like Snapchat in just 5 minutes!In this tutorial, we'll guide you through the process of setting up and running a web application that supports real-time beautification. You'll learn how to implement AR beautification, filters, makeup, stickers, and other captivating features that will elevate your users' experience.<h2 id="Step-1.-Create-a-license" style="margin-left:0px;">Step 1. Create a license</h2><h3 style="margin-left:0px;">1. Applying for a trial license</h3>make sure you have created a web license as instructed in <a href="https://trtc.io/document/60218#">Applying for a trial license</a>.<h3 style="margin-left:0px;">2. Getting the license key and token</h3>After the creation, you can see the information of the created test project in the project list and get the <code>License Token</code> for Beauty AR Web and the <code>License key</code> for the test project. you also can get the <code>App ID</code>.Note:The license token is used to calculate the authentication signature, so make sure to keep it secure and confidential. Here, the token is used to calculate the signature on the frontend just to help you run the demo locally. In a real production environment, you need to implement the signature algorithm on the server.<figure class="image image_resized" style="width:100%;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/326b1b9127d911ef9bc3525400456a87.png" alt=""></figure><h2 id="Step-2.-Run-locally" style="margin-left:1px;">Step 2. Run locally</h2>1. Pull <a href="https://github.com/tencentcloud-webar/web-demo-en/tree/master/quick-start">sample project</a> code.<pre><code class="language-javascript">git clone https://github.com/tencentcloud-webar/web-demo-en.git﻿
cd quick-start</code></pre>2. replace the specified configuration items in <code>index.js</code> with the license key, token, and <code>APPID</code> obtained in <a href="https://trtc.io/document/53939?platform=web&amp;product=beautyar&amp;menulabel=web#step1">Step 1</a> as shown below:﻿<figure class="image image_resized" style="width:100%;"><img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/7b56f09bd52a11edbe2a525400088f3a.png" alt=""></figure> 3. Run the project in the local development environment.Note:Before running your project locally, make sure the <code>nodejs</code> environment is already installed on the device.Run the following commands successively in the project directory and access <code>localhost:8090</code> in the browser to try out the capabilities of Beauty AR Web.<pre><code class="language-javascript"># Install dependencies
npm i 
﻿

# Compile and run the code
npm run dev</code></pre>After following the steps above, you can try out the filters and effects of the SDK for desktop browser. You can use the built-in materials to try out various makeup filters and effects as instructed in <a href="https://trtc.io/document/50099">Overview</a>, or use more capabilities of Beauty AR Web such as custom stickers, makeup, and filters. For detailed directions on how to customize effect materials, please <a href="https://trtc.io/contact">contact us</a>.<h2 id="Conclusion">Conclusion</h2>Congratulations! You've successfully built a face filter web application like Snapchat in just 5 minutes using <a href="https://trtc.io/document/53939?platform=web&amp;product=beautyar&amp;menulabel=web">Tencent RTC's Beauty AR Web SDK</a>. By following the step-by-step instructions in this blog post, you've learned how to implement real-time AR beautification, filters, makeup, stickers, and other engaging features that will captivate your users.The Beauty AR Web SDK offers a wide range of possibilities for enhancing your web applications, and this tutorial has only scratched the surface. With the knowledge you've gained, you can now explore and implement even more advanced features, such as custom filters, facial tracking, and interactive effects.Remember, the key to creating a successful face filter web app is to provide a seamless, enjoyable, and creative user experience. By leveraging the power of Tencent RTC and its Beauty AR Web SDK, you can deliver just that, setting your application apart from the competition.We encourage you to experiment with the code, customize the features to suit your unique requirements, and continue learning from the comprehensive documentation provided by Tencent RTC. As you dive deeper into the world of AR and real-time communication, you'll discover endless opportunities to innovate and create truly remarkable web experiences.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>.

Title: Build a Snapchat-Like Face Filter Web App in 5 Minutes with Tencent RTC's Beauty AR SDK

Build A Face Filter Web APP Like Snapchat in 5 Minutes | Tencent RTC

Beauty AR

Build a 1v1 Chat App in Android Studio | Tencent RTC Tutorial

Build a 1v1 Chat App in Android Studio like WhatsApp in 5 Min! (Best UI)