帮你快速理解、总结文档立即下载
文档中心>腾讯特效 SDK>Web 美颜特效>SDK 接入>uni-app（小程序）接入>直播推流美颜

直播推流美颜

最近更新时间：2025-03-19 15:45:22
我的收藏

本页目录：

本文档指导您在 uniapp 项目中接入 webar 直播推流美颜，原生微信项目请参见 微信小程序端接入。

准备工作

1. 在 微信公众平台 注册并登录小程序。
2. 在 微信公众平台 添加小程序插件：视立方 WEBAR。
3. 符合接入要求，申请插件并申请试用视立方 WEBAR，详见 腾讯云视立方控制台。

接入配置

1. 使用组件前需在 uniapp 工程的manifest.json中声明插件：
{
  "mp-weixin": {
    "plugins": {
      "webarPlugin": {
        "version": "latest",
        "provider": "wx04445cff065100ed"
      }
    }
  }
}
2. 在 uniapp 项目根目录安装 npm 包: tencentcloud-webar-wx
npm install tencentcloud-webar-wx

使用 WebArPusher 组件接入美颜

设置美颜、滤镜、美妆、贴纸

WebArPusher 组件使用微信组件 live-pusher 进行封装，适用于直播推流场景下的美颜特效处理，美颜特效相关参数请参见 组件美颜特效属性说明。
1. 在引入组件的页面的.vue文件中使用组件。
WebArPusher 会通过 created 事件返回 WebarContext，详情请参见 API 文档。
<template>
  <view>
    <WebArPusher
      enableVideoCustomRender
      autopush
      :url="pushUrl"
      :licenseKey="licenseKey"
      :appId="appId"
      :authFunc="authFunc"
      :plugin3d="plugin3d"
      @created="onArCreated"
      my-style="width: 100vw; height: 100vh"
      class="webar"
    />
  </view>
</template>

<script>
  import WebArPusher from "tencentcloud-webar-wx/WebArPusher/WebArPusher.vue";
  export default {
    components: {
      WebArPusher,// 此处A需大写
    },
    methods: {
      // 此事件会返回 webarContext 实例，通过该实例调用 webar sdk的美颜方法。
      onArCreated(sdk) {
        const webarContext = sdk.detail || sdk; // uniapp 下事件有可能有detail也有可能没有
        // 设置美颜
        webarContext.setBeautify({
          whiten: 0.5,
          dermabrasion: 0.6,
        });
        // 设置滤镜
        webarContext.setFilter(id, 1);
        // 设置美妆、特效、贴纸
        webarContext.setEffect([{ id, intensity: 1 }]);
      },
    },
  };
</script>

设置虚拟背景

1. 在引入组件的页面的.vue文件中使用组件。
<template>
  <view>
    <WebArPusher
      custom-effect
      autopush
      :url="pushUrl"
      :licenseKey="licenseKey"
      :appId="appId"
      :authFunc="authFunc"
      :plugin3d="plugin3d"
      :background="backgroundUrl"
      @created="onArCreated"
      my-style="width: 100vw; height: 100vh"
      class="webar"
    />
  </view>
</template>
注意
1. WebArPusher 分为 美颜特效 和 虚拟背景，开启 enableVideoCustomRender 即为 美颜特效 模式，开启 custom-effect 即为 虚拟背景，两者不可同时使用。
2. WebArPusher 美颜特效模式仅支持 云直播接入，trtc 暂不支持。

组件美颜特效属性说明

属性
类型
默认值
必填
说明
licenseKey
string
""
是
腾讯云视立方 licenseKey
appId
string
""
是
腾讯云 appid
authFunc
async function
null
是
需返回 signature，timestamp，详见 WEBAR 鉴权方法，传递时请不要包含在对象中
plugin3d
function
null
否
3d 特效插件，开启 3d 贴纸时需传入
beautify
Object
null
否
初始美颜参数，取值范围：0 - 1，可用： whiten、dermabrasion、lift、shave、eye、chin
my-style
string
''
否
样式属性，同 style，vue3 项目需使用
background
string
''
否
虚拟背景图片 url，域名需加入小程序白名单
created
event
null
否
美颜特效 SDK 初始化完成事件
ready
event
null
否
美颜特效 SDK 加载完成事件
error
event
null
否
美颜特效 SDK 错误事件

webarContext 实例方法

获取可用滤镜列表、美妆列表、贴纸列表及设置美颜、滤镜、美妆、贴纸等方法，详见 API 文档。

鉴权方法 authFunc 生成方式

const config = {
    appid: '您的腾讯云APPID',
    token: '您的Token',
}
const authFunc = async function() {
    const timestamp = Math.round(new Date().getTime() / 1000);
    const signature = sha256(timestamp + config.token + config.appid + timestamp).toUpperCase();
    return { signature, timestamp };
此方法仅测试时使用，为防止 token 泄露，发布时请使用服务端加密，详见 腾讯云-美颜特效 SDK 官网文档。

示例代码

详情请参见：示例项目。
中国站