实时音视频礼物系统 (Web Vue3)

本文将引导您在自己的项目中，快速接入TUILiveKit 直播送礼组件：LiveGift 。
﻿
核心功能
功能
说明
礼物列表
显示配置的礼物列表，可以点击“更多”按钮查看完整礼物列表。
礼物发送
礼物列表中选中礼物后，可以点击发送。发送的礼物信息会显示在聊天消息中。
礼物播放
支持 SVG 2D、SVG 3D 和 MP4 视频礼物，SVG 3D 礼物支持全屏播放。
组件接入
步骤1：环境配置与开通服务
在进行快速接入之前，您需要参考 准备工作，满足相关环境配置及开通对应服务。
说明：
使用礼物系统要求开通 TUILiveKit 体验版、多人连麦版或大规模直播版，不同套餐中可配置的礼物数量有所不同，详细参见 功能与计费说明 中的礼物系统说明，您可按需选购。
步骤2：安装依赖
npm
pnpm
yarn
npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
步骤3：集成直播送礼组件
在您的项目中引入并使用直播送礼组件，可直接复制如下示例代码到您的项目中，实现礼物列表、发送礼物、3D 礼物播放。
<template>
    <div class="gift-panel">
        <LiveGift />
    </div>
</template>
﻿
<script setup lang="ts">
import { LiveGift } from 'tuikit-atomicx-vue3';
</script>
﻿
<style lang="scss" scoped>
.gift-panel{
  padding: 6px 0;
  border-top: 1px solid var(--stroke-color-primary);
  background-color: var(--bg-color-operate);
  display: flex;
  
  &.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }
}
</style>
下一步
完成上述 UI 集成后，您已经实现了客户端的礼物展示能力。为了构建一个完整的商业化礼物功能，您还需要参考 礼物系统后端对接与进阶功能 文档，完成以下核心业务逻辑的对接：
自定义礼物配置：通过服务端 API 上传您自己的礼物图标、动画文件，并设置价格。
礼物扣费回调：配置回调地址，将送礼请求转发至您的计费后台，实现“余额校验”与“扣费”闭环。
PK 分数联动：在主播 PK 场景下，将礼物价值实时转换为 PK 分数。
数据统计：获取礼物发送记录、总价值等运营数据。
升级礼物动画特效 SDK：如果 SVGA 无法满足需求，可集成高级播放器支持 MP4/PAG 等高清透明动画。

功能	说明
礼物列表	显示配置的礼物列表，可以点击“更多”按钮查看完整礼物列表。
礼物发送	礼物列表中选中礼物后，可以点击发送。发送的礼物信息会显示在聊天消息中。
礼物播放	支持 SVG 2D、SVG 3D 和 MP4 视频礼物，SVG 3D 礼物支持全屏播放。

礼物系统 (Web Vue3)

本页目录：

核心功能

组件接入

步骤1：环境配置与开通服务

步骤2：安装依赖

步骤3：集成直播送礼组件

下一步