tencentcloud-webar-wx

v1.0.10

Published

2 months ago

tencent effect webar component for wx

Downloads

0High
0Medium
0Low

nnsjiang

webar tencentcloud tencentEffect effect AR beauty 小程序美颜

小程序插件接入腾讯云视立方美颜特效

本文档指导您使用微信小程序插件方案接入腾讯云视立方美颜特效 SDK ,以下简称视立方 WEBAR。

准备工作

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

使用原生微信小程序接入

本节仅适用于原生微信小程序项目接入，uniapp 项目请参见 uniapp（小程序）接入

接入配置

使用插件前需在小程序工程的app.json中声明要使用的插件，例如：

{
  "plugins": {
    "webarPlugin": {
      "version": "1.0.1",
      "provider": "wx04445cff065100ed"
    }
  }
}

在小程序目录安装 npm 包: tencentcloud-webar-wx

npm install tencentcloud-webar-wx

打开微信开发者工具，工具=> 执行构建 npm

使用 webar-image 组件接入图片美颜特效

webar-image 基于 webgl 相关能力，提供图片和相册美颜特效处理能力，支持导出和预览。

在 page 的.json文件中定义需要引入的webar-image组件。

{
  "usingComponents": {
    "webar-image": "tencentcloud-webar-wx/webar-image"
  }
}

在 page 的.wxml文件中使用组件。

<webar-image
  licenseKey="{{licenseKey}}"
  appId="{{appId}}"
  authFunc="{{authFunc}}"
  plugin3d="{{plugin3d}}"
  url="https://webar-static.tencent-cloud.com/assets/image2.jpg"
  bind:created="onArCreated"
  style="width: 100vw; height: 100vh"
/>

在 page 的.js文件中使用 webarContext 设置美颜特效。

webar-image 会通过 created 事件返回 WebarContext

onArCreated(event) {
  const webarContext = event.detail
  // 设置美颜
  webarContext.setBeautify({
    whiten: 0.5,
    dermabrasion: 0.6
  });
  // 设置滤镜
  webarContext.setFilter(id, 1);
  // 设置美妆、特效、贴纸
  webarContext.setEffect([{ id, intensity:1 }]);
},

使用 webar-camera 组件接入拍照录像美颜

webar-camera 组件使用微信组件 camera 进行封装，适用于拍摄录像场景下的美颜特效处理。

在 page 的.json文件中定义需要引入的webar-camera组件。

{
  "usingComponents": {
    "webar-camera": "tencentcloud-webar-wx/webar-camera"
  }
}

在 page 的.wxml文件中使用组件。

<webar-camera
  licenseKey="{{licenseKey}}"
  appId="{{appId}}"
  authFunc="{{authFunc}}"
  plugin3d="{{plugin3d}}"
  bind:created="onArCreated"
  style="width: 100vw; height: 100vh"
/>

组件 webar-camera 的使用方法和微信原生标签 camera 的方法一致，可参考微信小程序标签 camera 的文档说明，美颜特效相关参数请参考组件属性说明。

在 page 的.js文件中使用 webarContext 设置美颜特效。

webar-camera 会通过 created 事件返回 WebarContext

onArCreated(event) {
  const webarContext = event.detail
  // 设置美颜
  webarContext.setBeautify({
    whiten: 0.5,
    dermabrasion: 0.6
  });
  // 设置滤镜
  webarContext.setFilter(id, 1);
  // 设置美妆、特效、贴纸
  webarContext.setEffect([{ id, intensity:1 }]);
  webarContext.download(true) // 保存图片，参数为是否存储到相册
},

使用 webar-live-pusher 组件接入直播推流美颜特效

webar-live-pusher 组件使用微信组件 live-pusher 进行封装，适用于直播推流场景下的美颜特效处理。

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

该模式目前仅支持使用云直播接入，暂不支持 trtc

在 page 的.json文件中定义需要引入的webar-live-pusher组件。

{
  "usingComponents": {
    "webar-live-pusher": "tencentcloud-webar-wx/webar-live-pusher"
  }
}

在 page 的.wxml文件中使用组件。

<!--美颜特效模式，支持除虚拟背景外所有美颜特效-->
<webar-live-pusher
  enableVideoCustomRender
  licenseKey="{{licenseKey}}"
  appId="{{appId}}"
  authFunc="{{authFunc}}"
  plugin3d="{{plugin3d}}"
  bind:created="onArCreated"
  style="width: 100vw; height: 100vh"
/>

组件 webar-live-pusher 的使用方法和微信原生标签 live-pusher 的方法一致，更多属性可参考微信小程序标签 live-pusher 的文档说明，美颜特效相关参数请参考组件属性说明。

在 page 的.js 文件中使用 sdkContext 设置美颜特效。

webar-live-pusher 会通过 created 事件返回 WebarContext

async onArCreated(event) {
  const webarContext = event.detail
  // 设置美颜
  webarContext.setBeautify({
    whiten: 0.5,
    dermabrasion: 0.6
  });
  // 设置滤镜
  webarContext.setFilter(id, 1);
  // 设置美妆、特效、贴纸
  webarContext.setEffect([{ id, intensity:1 }]);
},

设置虚拟背景

在 page 的.json文件中定义需要引入的webar-live-pusher组件。

{
  "usingComponents": {
    "webar-live-pusher": "webar-live-pusher/webar-live-pusher"
  }
}

在 page 的.wxml文件中使用组件。

注意
webar-live-pusher 分为美颜特效和虚拟背景，开启 enableVideoCustomRender 即为美颜特效模式，开启 custom-effect 即为虚拟背景，两者不可同时使用。

使用 uniapp 接入

接入前配置

使用组件前需在 uniapp 工程的manifest.json中声明要使用的插件：

{
  "mp-weixin": {
    "plugins": {
      "webarPlugin": {
        "version": "1.0.1",
        "provider": "wx04445cff065100ed"
      }
    }
  }
}

在 uniapp 项目根目录安装 npm 包: tencentcloud-webar-wx

npm install tencentcloud-webar-wx

使用 WebArImage 组件接入图片美颜特效

WebArImage 基于 webgl 相关能力，提供图片和相册美颜特效处理能力，支持导出和预览。

在引入组件的页面的.vue文件中使用组件。

WebArImage 会通过 created 事件返回 WebarContext

<template>
  <view>
    <WebArImage
      :licenseKey="licenseKey"
      :appId="appId"
      :authFunc="authFunc"
      :plugin3d="plugin3d"
      url="https://webar-static.tencent-cloud.com/assets/image2.jpg"
      @created="onArCreated"
      my-style="width: 100vw; height: 100vh"
    />
  </view>
</template>

<script>
  import WebArImage from "tencentcloud-webar-wx/WebArImage/WebArImage.vue";

  export default {
    components: {
      WebArImage,
    },
    methods: {
      // 此事件会返回 webarContext 实例，通过该实例调用 webar sdk的美颜方法。方法介绍参考文末。
      onArCreated(sdk) {
        webarContext = sdk.detail || sdk; // uniapp 下事件有可能有detail也有可能没有
        // 设置美颜
        webarContext.setBeautify({
          whiten: 0.5,
          dermabrasion: 0.6,
        });
        // 设置滤镜
        webarContext.setFilter(id, 1);
        // 设置美妆、特效、贴纸
        webarContext.setEffect([{ id, intensity: 1 }]);
        webarContext.download(true); // 保存图片，参数为是否存储到相册
      },
    },
  };
</script>

使用 WebArCamera 组件接入拍照录像美颜

WebArCamera 组件使用微信组件 camera 进行封装，适用于拍摄录像场景下的美颜特效处理，美颜特效相关参数请参考插件相关组件美颜特效属性说明。

在引入组件的页面的.vue文件中使用组件。

WebArCamera 会通过 created 事件返回 WebarContext

<template>
  <view>
    <WebArCamera
      :licenseKey="licenseKey"
      :appId="appId"
      :authFunc="authFunc"
      :plugin3d="plugin3d"
      @created="onArCreated"
      my-style="width: 100vw; height: 100vh"
    />
  </view>
</template>

<script>
  import WebArCamera from "tencentcloud-webar-wx/WebArCamera/WebArCamera.vue";

  export default {
    components: {
      WebArCamera,
    },
    methods: {
      // 此事件会返回 webarContext 实例，通过该实例调用 webar sdk的美颜方法。方法介绍参考文末。
      onArCreated(sdk) {
        webarContext = sdk.detail || sdk; // uniapp 下事件有可能有detail也有可能没有
        // 设置美颜
        webarContext.setBeautify({
          whiten: 0.5,
          dermabrasion: 0.6,
        });
        // 设置滤镜
        webarContext.setFilter(id, 1);
        // 设置美妆、特效、贴纸
        webarContext.setEffect([{ id, intensity: 1 }]);
      },
    },
  };
</script>

使用 WebArPusher 组件接入直播推流美颜特效

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

WebArPusher 组件使用微信组件 live-pusher 进行封装，适用于直播推流场景下的美颜特效处理，美颜特效相关参数请参考插件相关组件美颜特效属性说明，此组件目前仅支持使用云直播接入，暂不支持 trtc。

在引入组件的页面的.vue文件中使用组件。

WebArPusher 会通过 created 事件返回 WebarContext

<template>
  <view>
    <WebArPusher
      enableVideoCustomRender
      :licenseKey="licenseKey"
      :appId="appId"
      :authFunc="authFunc"
      :plugin3d="plugin3d"
      @created="onArCreated"
      my-style="width: 100vw; height: 100vh"
    />
  </view>
</template>

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

设置虚拟背景

在引入组件的页面的.vue文件中使用组件。

<template>
  <view>
    <WebArPusher
      custom-effect
      :licenseKey="licenseKey"
      :appId="appId"
      :authFunc="authFunc"
      :plugin3d="plugin3d"
      :background="backgroundUrl"
      @created="onArCreated"
      my-style="width: 100vw; height: 100vh"
    />
  </view>
</template>

注意
WebArPusher 分为美颜特效和虚拟背景，开启 enableVideoCustomRender 即为美颜特效模式，开启 custom-effect 即为虚拟背景，两者不可同时使用。

组件美颜特效属性说明

| 属性 | 类型 | 默认值 | 必填 | 说明 | | :---------- | :------------- | :----- | :--- | :------------------------------------------------------------------------------------- | | 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 | | background | string | '' | 否 | 虚拟背景图片 url，域名需加入小程序白名单 | | bindcreated | event | null | 否 | 腾讯特效 sdk 初始化完成事件 | | bindready | event | null | 否 | 腾讯特效 sdk 加载完成事件 |

WEBAR 鉴权方法 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 官网文档

插件 webarContext 实例方法说明

| 属性 | 类型 | 返回值 | 必填 | 说明 | | :-------------- | :---------------------------------------------------------------------------------------------------------- | :---------------- | :--- | :--------------------------------------------------------------------------------- | | pusherContext | LivePusherContext | "" | 否 | 插件中 live-pusher 实例，仅 webar-live-pusher 组件拥有 | | setBeautify | function(beautyParam):void | "" | 否 | 设置美颜 | | setFilter | function(filterId, intensity):void | null | 否 | 设置滤镜 | | setEffect | function([{ id, intensity }]):void | null | 否 | 设置特效（美妆、贴纸） | | setBackground | function({ type: 'image',src: arrayBuffer }):void | null | 否 | 设置虚拟背景，仅 pusher 组件在开启 custom-effect 时生效 | | getCommonFilter | function() | Promise<Filter> | 否 | 获取滤镜列表 | | getEffectList | function() | Promise<Effect> | 否 | 获取特效列表（美妆、贴纸） | | download | function(isSave) | string | 否 | 下载美颜图片仅 image 组件有效，不传参数时仅返回图片缓存地址，传 true 则下载到相册 |

更多方法请参考腾讯特效-API 文档

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

小程序插件接入腾讯云视立方美颜特效

准备工作

使用原生微信小程序接入

接入配置

使用 webar-image 组件接入图片美颜特效

使用 webar-camera 组件接入拍照录像美颜

使用 webar-live-pusher 组件接入直播推流美颜特效

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

设置虚拟背景

使用 uniapp 接入

接入前配置

使用 WebArImage 组件接入图片美颜特效

使用 WebArCamera 组件接入拍照录像美颜

使用 WebArPusher 组件接入直播推流美颜特效

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

设置虚拟背景

组件美颜特效属性说明

WEBAR 鉴权方法 authFunc 生成方式

插件 webarContext 实例方法说明