tencent cloud

腾讯特效 SDK

动态与公告
产品动态
关于腾讯特效 SDK V3.5 版本更新公告
关于腾讯特效 SDK V3.0 版本相关接口及素材变更公告
产品简介
产品概述
产品功能
基本概念
产品优势
应用场景
购买指南
价格总览
购买流程
欠费退费说明
新手指引
Demo 体验
免费测试
License 指引
移动端 License 新增与续期
PC 端 License 新增与续期
Web端 License 新增与续期
常见问题
SDK 下载
功能说明
SDK 下载
版本历史
SDK 集成指引(无 UI)
通用集成腾讯特效
原子能力集成指引
SDK 集成指引(含 UI)
通用集成腾讯特效
直播 SDK 集成腾讯特效
TRTC SDK 集成腾讯特效
短视频 SDK 集成腾讯特效
Avatar 虚拟人集成指引
API 文档
iOS
Android
Flutter
Web
功能实践
SDK 包瘦身
SDK 集成问题排查
性能调优
效果调优
素材使用
美颜参数说明
美颜场景推荐参数
短视频企业版迁移指引
第三方推流接入美颜(Flutter)
小程序美颜特效实践
素材制作工具使用
Web 美颜特效
产品概述
快速上手
SDK 接入
API 文档
控制台指南
Demo 体验
内置素材总览
实践教程
常见问题
常见问题
通用类相关
技术类相关
License 相关
旧版文档
美颜场景推荐参数
美颜参数表
一分钟集成 TRTC
一分钟集成直播
TE SDK 政策
隐私协议
数据处理和安全协议
联系我们

快速上手

PDF
聚焦模式
字号
最后更新时间: 2025-09-16 11:27:45
Web 美颜特效支持在 Web 浏览器实现美颜、滤镜、美妆、贴纸等功能。本文档将引导您快速地在本地跑通一个支持实时美颜的 Web 应用,您可以在此基础上根据相关文档实现更多功能。
注意:
此项目为测试项目,仅供本地测试使用。正式上线前请购买正式版License,并在产品控制台配置业务网站域名,详情参见 创建正式 License

前期准备事项

已开通 腾讯云服务

步骤1:创建 License

创建测试 License

登录 腾讯云视立方控制台 > Web端 License,单击新建测试 License。填写项目名称,域名输入本地开发用地址,此处以 demo.webar.com为例,单击确定完成创建。
Web License 针对域名授权,请填写实际项目业务站点的域名(不要填写 localhost:xxxx)。
Web License 使用时会校验域名信息,所以务必确保实际运行的域名与申请 license 时填写的域名一致,localhost 地址除外。因为 localhost 地址默认是校验通过的,所以即使上述填写的是demo.webar.com域名,本地跑通 Demo 也可以使用 localhost:xxxx 作为开发用地址,可以正常跑通。



注意:
测试 License 有效期仅支持 14 天(可续期一次增加14天,共28天),每个账户最多可创建一个测试 License,正式项目请前往 Web License购买页 按需购买。

获取 License Key 和 Token

创建完成后可以看在项目列表中看到创建好的测试项目信息,获取 Web 美颜特效服务对应的密钥 Token,以及本测试项目的 License Key
注意:
密钥 Token 用于计算鉴权签名,请一定妥善保管,此处在前端使用 Token 计算签名仅是为了帮助您在本地跑通 Demo,正式环境中需要迁移到服务端。




获取 APPID

腾讯云账号中心 获取 APPID。




步骤2:本地运行

1. 拉取示例项目代码。
2. 步骤1 中拿到的 License Key、Token 和 APPID 按下图所示替换到 index.js 配置项中。



3. 本地开发环境运行。
注意:
此 Demo 通过 npm 包的方式加载美颜 SDK,本地运行前请确保当前设备已安装nodejs环境。
项目目录下依次执行以下命令后,打开浏览器访问 localhost:8090 即可开始体验 Web 美颜特效能力。
# 安装依赖
npm i

# 编译运行
npm run dev
完成以上流程后,就可以浏览器中体验 Web SDK 的美颜特效功能,您可以根据 SDK 接入指南 ,使用内置的素材体验各种美妆滤镜效果,或使用更多 Web 美颜特效的能力,如自定义贴纸、自定义美妆、自定义滤镜等,请参见 素材制作 制作属于您的特效素材 。


帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈