2. Follow the script prompts to confirm that you want to copy the TUILiveKit source code to the ./src/components/TUILive directory. Enter 'y' if you want to customize the copy directory, otherwise enter 'n'.
3. After exporting the source code, the TUILiveKit source code will be added to the project path you specified. At this point, you need to manually change the reference to the liveMainView component, liveRoom object from the npm package address to the relative path address of the TUILive source code.
Step 2: Configure the LiveKit source code development environment
Config for Vue3 + Vite + TS
1. Install development environment dependencies
npminstall typescript -S -D
2. Register for Pinia
TUILive uses Pinia for room data management, you need to register Pinia in the project entry file, which is the src/main.ts file.
// src/main.ts
import{ createPinia }from'pinia';
const app =createApp(App);
// register for Pinia
app.use(createPinia());
app.mount('#app');
3. Configuring esLint Checksums
If you don't want the TUILiveKit component's esLint rules to conflict with your local rules and cause runtime errors, you can add the Ignore TUILive folder to .eslintignore.
// Please add the real path to the TUILive source code
src/components/TUILive
Should you encounter TypeScript errors during the project build process, it is advisable to inspect the project's package.json file. Remove the vue-tsc segment within the corresponding build command as illustrated below:
// package.json
{
"scripts":{
// "build": "vue-tsc --noEmit --skipLibCheck && vite build",
"build":"vite build"
}
}
4. At this point you can run the project to see the effect of source code importation.
npm run dev
Step 3：At this point you can run the project to see the effect of source code importation.
1. Replace icons
You can directly modify the icon components in the /TUILive/components/common/icons folder to ensure that the icon color and style are consistent throughout the app. Please keep the icon file names unchanged when replacing.
2. Adjust UI layout
You can adjust the UI layout of the TUILive interface by modifying different components under the /TUILive/components path.
- components/
- Chat Chat
- common Common icon components
- ManageMember Member management
- RoomContent Room video
- RoomFooter Room page Footer section
- RoomHeader Room page Header section
- RoomHome Home page
- RoomInvite Invite members
- RoomLogin Login page
- RoomMore More
- RoomSetting Settings
Method 2：Implement your own UI
The overall functionality of TUILiveKit is based on the RTC Room Engine SDK, and you can implement your own UI based entirely on the RTC Room Engine SDK. See details RTC Room Engine SDK.
Yes
No
Was this page helpful?