vue项目中使用腾讯美颜SDK

最近做一个vue3的直播类项目，直播视频推拉流前同事已经完成，本萌新第一次接腾讯美颜sdk，且百度一通都没有找到相关帖子，所以写个帖子记录一下吧。

步骤一、阅读腾讯特效 SDK 官方文档

直接看 SDK 接入 > Web 端接入

步骤二、安装依赖

npm install tencentcloud-webar

创建美颜工具函数

import { ArSdk, isWebGLSupported } from 'tencentcloud-webar'
import store from '@/store'
import sha256 from './sha256.js'
import { initLocalStream, destroyLocalStream } from '@/views/testPusher/hooks/rtc'// 下面需要的鉴权参数需要你申请一个账号按照官方文档自己弄一下获取，这里不做介绍
const authConfig = {licenseKey: '****************',token: '**********',appid: '**********',
}
let beautySdk = null
// 初始化客户端
export const initBeauty = async () => {// 获取鉴权参数const authData = {licenseKey: authConfig.licenseKey,appId: authConfig.appid,authFunc: genSignature, // 详见「License 配置与使用 - 签名方法」}const config = {module: {// 0.2.0版本新增beautify: true, // 是否启用美颜模块，启用后可以使用美颜、美妆、贴纸等功能segmentation: true, // 是否启用人像分割模块，启用后可以使用背景功能},auth: authData, // 鉴权参数camera: {// 传camera配置调起内置相机width: 3840, // 拍摄画面宽度height: 2160, // 拍摄画面高度mirror: true, // 是否开启左右镜像frameRate: 15, // 画面采集帧率},beautify: {// 初始化美颜参数(可选)whiten: 0.1,dermabrasion: 0.3,eye: 0.2,chin: 0,lift: 0.1,shave: 0.2,},}if (isWebGLSupported()) {beautySdk = new ArSdk({// 传入一个 config 对象用于初始化 beautySdk...config,})window.beautySdk = beautySdkawait handleClientEvents(beautySdk)} else {// 屏蔽逻辑}
}
const genSignature = () => {const timestamp = Math.round(new Date().getTime() / 1000)const signature = sha256(timestamp + authConfig.token + authConfig.appid + timestamp).toUpperCase() // 使用上面获取到的token和appid合成加密串返回return { signature, timestamp }
}// 处理监听事件
const handleClientEvents = (beautySdk) => {let effectList = []let filterList = []beautySdk.on('created', async () => {console.warn('SDK 鉴权完成并成功创建实例时触发')// // 在 created 回调中可拉取特效和滤镜列表供页面展示，详见「SDK接入 - 参数与方法」// await beautySdk//   .getEffectList({//     Type: 'Preset',//     Label: '美妆',//   })//   .then((res) => {//     effectList = res//     console.warn(effectList, '- - - - effectList - - - -')//     // 美妆特效列表//     store.commit('pusher/SET_EFFECT_LIST', res)//   })// await beautySdk.getCommonFilter().then((res) => {//   filterList = res//   store.commit('pusher/SET_FILTER_LIST', res)//   // 滤镜列表//   console.warn(filterList, '- - - - filterList - - - -')// })})beautySdk.on('cameraReady', async () => {// 初始化一个SDK的player，其中my-dom-id表示您需要放置播放器的容器id// const player = await beautySdk.initLocalPlayer('stream')// // 直接播放// await player.play()console.warn('cameraReady')// 在 cameraReady 回调中可以更早地获取输出画面，此时初始化传入的美颜参数还未生效// 适用于需要尽早地展示画面，但不要求画面一展示就有美颜的场景// 后续美颜生效后无需更新stream，SDK内部已处理// const arStream = await beautySdk.getOutput()// 本地播放// localVideo.srcObject = arStream})beautySdk.on('ready', async () => {// 在 ready 回调中获取输出画面，此时初始化传入的美颜参数已生效// 区别上述cameraReady中获取output，适用于画面一展示就要有美颜的场景，但不要求尽早地展示画面// 根据自身业务需求选择一种处理方式即可const outputStream = await beautySdk.getOutput()// 本地播放// localVideo.srcObject = outputStream// initLocalStream 是视频直播推拉流函数中的初始化方法，美颜渲染的数据需要通过 SDK 的 getOutput 接口拿到await initLocalStream({video: true,audio: true,dom: 'stream',mediaStream: outputStream,})// 初始化一个SDK的player，其中my-dom-id表示您需要放置播放器的容器id// const player = await beautySdk.initLocalPlayer('stream')// // 直接播放// await player.play()console.warn('ready')// 在 created 回调中可拉取特效和滤镜列表供页面展示，详见「SDK接入 - 参数与方法」await beautySdk.getEffectList({Type: 'Preset',Label: '美妆',}).then((res) => {effectList = resconsole.warn(effectList, '- - - - effectList - - - -')// 美妆特效列表store.commit('pusher/SET_EFFECT_LIST', res)// 设置默认美妆store.commit('pusher/SET_CURRENT_BEAUTY_LIST', { key: 'currentEffect', list: [effectList[0].EffectId] })})await beautySdk.getCommonFilter().then((res) => {filterList = resstore.commit('pusher/SET_FILTER_LIST', res)store.commit('pusher/SET_CURRENT_BEAUTY_LIST', { key: 'currentFilter', list: [filterList[0].EffectId] })// 滤镜列表console.warn(filterList, '- - - - filterList - - - -')})// 设置美颜  store.state.pusher.beautifyData 等同于 beautify 配置beautySdk.setBeautify({...store.state.pusher.beautifyData,})// 设置特效beautySdk.setEffect({id: store.state.pusher.currentEffect[0],intensity: 0.7,})// 设置滤镜beautySdk.setFilter(store.state.pusher.currentFilter[0], 0.7)console.warn('设置美颜和特效」')})
}/*** 设置美妆特效* @param EffectId* @param intensity*/
export const setEffect = async (EffectId, intensity = 0.7) => {console.warn(beautySdk, '设置美妆特效sdk')// 设置特效beautySdk.setEffect({id: EffectId,intensity,})
}
/*** 设置滤镜* @param EffectId* @param intensity*/
export const setFilter = async (EffectId, intensity = 0.9) => {console.warn(beautySdk, '设置滤镜sdk')// 设置滤镜beautySdk.setFilter(EffectId, intensity)
}
/***  设置美颜参数**  @param whiten?: number, // 美白 0-1*  @param dermabrasion?: number // 磨皮0-1*  @param lift?: number // 瘦脸0-1*  @param shave?: number // 削脸0-1*  @param eye?: number // 大眼0-1*  @param chin?: number // 下巴0-1*/
export const defaultBeautify = {whiten: 0.2,dermabrasion: 0,lift: 0.3,shave: 0.1,eye: 0.9,chin: 0,
}
export const setBeautify = async (key) => {// 设置美颜beautySdk.setBeautify({ ...key })console.warn({ ...key }, '设置美颜sdk')
}export const outputStream = async () => {const outputStream = await beautySdk.getOutput()console.warn(outputStream, 'outputStream')return outputStream
}

sha256.js 来源于 https://webar-static.tencent-cloud.com/docs/examples/js-sha256/0.9.0/sha256.min.js

基础的设置弹窗展示

vue项目中使用腾讯美颜SDK相关推荐

android+腾讯地图h5,在uniapp H5项目中使用腾讯地图sdk
这里主要针对的是H5,小程序或app都有现成的sdk可以使用: 本人是用uniapp在做微信公众号的h5页面,其中需要把经纬度信息转化成文字描述的位置信息,在腾讯地图开发平台上申请了一个key,然后下 ...
vue项目中集成腾讯TIM即时通讯（附源码）
上图前言项目需要做个客服功能,用户端小程序,客服人员web端,于是用到了腾讯的tim 准备工作在腾讯云官网上创建应用,获取到相应的SDKAppID和相应的秘钥信息安装SDK (1) web项目 ...
如何在Vue项目中引入腾讯验证码服务
什么是腾讯验证码?它长这个样子--? 最近公司项目要求引入腾讯云验证,要求是这样的:为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
bing Map 在vue项目中的使用
写在最前面拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map ...
vue项目中，使用微信js-sdk打开微信内置导航，唤醒第三方导航，
vue项目中,使用微信js-sdk打开微信内置导航,唤醒第三方导航一.准备工作二.开发须知三.开始安装sdk 四.通过微信的config接口注入权限验证配置附上代码最近在搞vue项目需要在手 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
记录在Vue项目里面使用腾讯地图
目录前言一.异步引入SDK 1.封装初始化方法. 2.引入并使用. 二.腾讯地图marker使用 1.效果预览 2.代码实现三.在地图上画线并测量距离 1.效果预览 2.代码实现前言本文主要 ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...

vue项目中使用腾讯美颜SDK

步骤一、阅读腾讯特效 SDK 官方文档

步骤二、安装依赖

vue项目中使用腾讯美颜SDK相关推荐

最新文章

热门文章

vue项目中使用腾讯美颜SDK

步骤一、 阅读 腾讯特效 SDK 官方文档

步骤二、安装依赖

vue项目中使用腾讯美颜SDK相关推荐

最新文章

热门文章

步骤一、阅读腾讯特效 SDK 官方文档