tencentcloud-webar-wx v1.0.5

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

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

准备工作

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

使用原生微信小程序接入

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

接入配置

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

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

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

npm install tencentcloud-webar-wx

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

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

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

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

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

2. 在 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"
/>

3. 在 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 进行封装，适用于拍摄录像场景下的美颜特效处理。

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

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

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

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

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

3. 在 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

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

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

2. 在 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 的文档说明，美颜特效相关参数请参考组件属性说明。

3. 在 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 }]);
},

设置虚拟背景

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

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

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

注意

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

使用 uniapp 接入

接入前配置

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

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

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

npm install tencentcloud-webar-wx

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

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

1. 在引入组件的页面 的.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 进行封装，适用于拍摄录像场景下的美颜特效处理，美颜特效相关参数请参考插件相关组件美颜特效属性说明。

1. 在引入组件的页面 的.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。

1. 在引入组件的页面 的.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>

设置虚拟背景

1. 在引入组件的页面 的.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>

注意

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

组件美颜特效属性说明

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 实例方法说明

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