产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
直播送礼组件（Web React 桌面浏览器）
本文将引导您在自己的项目中，快速接入TUILiveKit 直播送礼组件：LiveGift 。
核心功能
功能 | 说明 |
礼物列表 | 显示配置的礼物列表，可以点击“更多”按钮查看完整礼物列表。 |
礼物发送 | 礼物列表中选中礼物后，可以点击发送。发送的礼物信息会显示在聊天消息中。 |
礼物播放 | 支持 SVG 2D、SVG 3D 和 MP4 视频礼物，SVG 3D 礼物支持全屏播放。 |
组件接入
步骤1：环境配置与开通服务
说明：
步骤2：安装依赖
npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --save
pnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react
yarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-react
步骤3：集成直播送礼组件
在您的项目中引入并使用直播送礼组件，可直接复制如下示例代码到您的项目中，实现礼物列表、发送礼物、3D 礼物播放。
import React from "react";import { LiveGift } from "tuikit-atomicx-react";import styles from "./GiftPanel.module.scss";const GiftPanel: React.FC = () => {return (<div className={styles.livePlayer__giftPanel}><LiveGift /></div>)};export default GiftPanel;
.livePlayer__giftPanel{width: 100%;height: 130px;flex-shrink: 0;border-top: 1px solid var(--uikit-stroke-color-primary);background: var(--uikit-bg-color-operate);}
下一步
自定义礼物配置：通过服务端 API 上传您自己的礼物图标、动画文件，并设置价格。
礼物扣费回调：配置回调地址，将送礼请求转发至您的计费后台，实现“余额校验”与“扣费”闭环。
PK 分数联动：在主播 PK 场景下，将礼物价值实时转换为 PK 分数。
数据统计：获取礼物发送记录、总价值等运营数据。
升级礼物动画特效 SDK：如果 SVGA 无法满足需求，可集成高级播放器支持 MP4/PAG 等高清透明动画。
文档反馈