腾讯特效SDK快速上手_音视频解决方案_同尘科技
Web 美颜特效支持在 Web 网站以及微信小程序中实现美颜、滤镜、美妆、贴纸等功能。本文档将引导您快速地在本地跑通一个支持实时美颜的 Web 应用和微信小程序,您可以在此基础上根据相关文档实现更多功能。注意:此项目为测试项目,仅供本地测试使用。正式上线前请购买正式版 License,并在产品控制台配置业务网站域名,详情参考 创建正式 License。
前期准备事项
已开通 腾讯云服务已完成 实名认证
步骤1:创建 License
创建测试 License
登录 腾讯云视立方控制台 > Web端 License,单击新建测试 License。填写项目名称,域名输入本地开发用地址,此处以 localhost:8090
为例,单击确定完成创建。Web License 针对域名和小程序 APPID 授权,此处为了帮助您快速在本地跑通 Demo 所以使用 localhost
作为本地开发用地址,实际项目中请填写业务站点域名。如果需要跑通微信小程序,请填入自己的微信小程序 APPID(获取路径:微信公众平台 > 登录小程序账号 > 设置 > 账号信息)。
注意测试 License 有效期仅支持 14 天(可续期一次增加14天,共28天),最多可创建三个项目的测试License,正式项目请前往 Web License购买页 按需购买。
获取 License Key 和 Token
创建完成后可以在项目列表中看到创建好的测试项目信息,获取 Web 美颜特效服务对应的密钥 Token,以及本测试项目的 License Key。注意密钥 Token 用于计算鉴权签名,请一定妥善保管,此处在前端使用 Token 计算签名仅是为了帮助您在本地跑通 Demo,正式环境中需要迁移到服务端,用法参考签名方法文档。
获取 APPID
从 腾讯云账号中心 获取 APPID。
步骤2:本地运行
Web License 同时支持 Web 网站和微信小程序,此处您可以根据自己的业务场景选择进行以下步骤。
微信小程序
注意:此文档仅介绍小程序拍摄场景美颜,小程序推流场景美颜请参考 此文档。1. 进入 微信公众平台 > 登录小程序账号 > 设置 > 账号信息,获取微信小程序 APPID。2. 单击下载 Demo 源码 并解压到自己的本地路径。
3. 将解压好的项目工程导入微信小程序开发工具,并填入上述微信小程序对应的 APPID。
4. 进入
miniprogram
目录执行npm i
安装依赖,然后进入微信开发者工具,选择工具 > 构建 npm(可参考 小程序使用 npm)。5. 将 步骤1 中拿到的 License Key、Token 和 APPID 以及 第一步 中拿到的微信小程序 APPID 按下图所示替换到pages/camera/camera.js
的指定配置项中。
6. 单击编译预览,用手机扫码即可开始体验。注意不要在开发者工具的模拟器中直接运行。由于 SDK 使用 webgl canvas 进行了重量级的渲染工作,目前开发者工具不支持调试,因此建议直接通过编译 > 预览 > 手机扫码的方式进行调试。
Web 网站
1. 单击下载 Demo 源码 到本地,解压到自己的本地路径。
2. 打开解压好的项目,将 步骤1 中拿到的License Key、Token 和 APPID 按下图所示替换到指定配置项中。
3. 本地开发环境运行。注意本地运行前保证当前设备已安装
nodejs
环境。项目目录下依次执行以下命令后,打开浏览器访问localhost:8090
即可开始体验 Web 美颜特效能力。
# 安装依赖npm i
# 编译运行npm run dev
完成以上流程后,就可以分别在微信小程序或 PC 浏览器中体验 Web SDK 的美颜特效功能,您可以根据 SDK 接入指南 ,使用内置的素材体验各种美妆滤镜效果,或使用更多 Web 美颜特效的能力,如自定义贴纸、自定义美妆、自定义滤镜等,请参见 素材制作 制作属于您的特效素材 。
对音视频的解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?