Web端接入美颜特效SDK - 视频直播

准备工作

申请试用LicenseKey，获取方式请参见获取美颜特效SDK License。
下载美颜特效Web SDK包并解压，请参见美颜特效SDK下载。
将SDK包中的sdk_dist目录文件复制到项目中。
导入Queen SDK。

import QueenEngine, {kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBlend,} from "@/queensdk"

接入示例

初始化Queen引擎

 const sdkUrl= "./";//queen sdk bin文件目录
 const sdkLicense = "";//queen sdk 授权licensekey
 const queenCanvasId = "canvas";//渲染使用的canvas id
 let queenEngine = new QueenEngine();
 queenEngine.initialize(sdkUrl, sdkLicense, function(){
    //初始化完成
 }, function(progress){
    //progress：加载进展条
 }, queenCanvasId);

配置美颜参数

// 开启基础美颜
queenEngine.setQueenBeautyType(kQueenBeautyType.SkinBuffing, true);
// 设置磨皮系数
queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinBuffing, 0.7);
// 设置锐化系数
queenEngine.setQueenBeautyParams(kQueenBeautyParams.Sharpen, 0.5);
// 打开美白功能开关
queenEngine.setQueenBeautyType(kQueenBeautyType.SkinWhiting, true);
// 设置美白系数
queenEngine.setQueenBeautyParams(kQueenBeautyParams.Whitening, 0.6);
// 设置红润系数
queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);

基于imageData对象渲染

const ctx = document.getElementById("sourceCanvas").getContext('2d');
const imgData = ctx.getImageData(0, 0, weblCtx.canvas.width, weblCtx.canvas.height);
queenEngine.render(new Uint8Array(imageSource.data), weblCtx.canvas.width, weblCtx.canvas.height, drawWithImageData) 

function drawWithImageData(imageBufferData, imgWidth, imgHeight) {
    let ctx = document.getElementById("effectCanvas").getContext("2d");
    let imageBuffer = new Uint8ClampedArray(imageBufferData);
    let imageData = new ImageData(imageBuffer, imgWidth, imgHeight);
    ctx.clearRect(0, 0, imgWidth, imgHeight);
    ctx.putImageData(imageData, 0, 0);
}

纹理渲染

const canvas = document.getElementById("sourceCanvas")
let outTexture = queenEngine.renderMediaObjectToTexture(canvas, canvas.width, canvas.height)
drawTexture(outTexture)
...

接口说明

美颜特效渲染

基于imageData对象渲染

/**
 * 图片渲染 
 * 返回ImageData对象
 * @param imageData 图片ImageData
 * @param imageWidth 宽
 * @param imageHeight 高
 * @param renderCallback 图片渲染回调
 */
render = function(imageData, imageWidth, imageHeight, renderCallback);

基于纹理渲染

/**
 * 基于纹理渲染
 * 输入媒体对象返回纹理对象
 * @param mediaElement  媒体对象 imageElement、videoElement、canvasElement、videoframe、imagebitmap
 * @param width 媒体对像宽度
 * @param height 媒体对像高度
 * @returns 
 */
renderMediaObjectToTexture = function(mediaElement, width, height);

纹理渲染

**
 * 基于纹理id渲染
 * 输入纹理id 返回纹理id
 * @param inTextureId 输入纹理id
 * @param width 媒体对像宽度
 * @param height 媒体对像高度
 * @returns 
 */
renderTextureId = function(inTextureId, width, height);

美颜引擎注销

**
 * 美颜引擎注销
 */
engineDestory = function();

Animoji表情

Animoji初始化

/**
   * Animoji初始化
   * @param animojiUrl animoji资源地址
   * @param width 宽
   * @param height 高
   * @param scale 放大尺寸
   * @returns 
   */
  animojiInit = function (animojiUrl: string, width: number, height: number, scale: number)

Animoji 图片渲染

/**
   * Animoji 图片渲染
   * @param imageData 图片imageData
   * @param imageWidth 宽
   * @param imageHeight 高
   * @param renderCallBack 渲染回调 
   */
  animojiRender = function (imageData: Uint8Array, imageWidth: number, imageHeight: number, renderCallBack: any)

Animoji纹理渲染

/**
 * Animoji纹理渲染
 * 返回渲染后纹理
 * @param imageSource 媒体对象 image、video、canvas、videoframe、imagebitmap
 * @param imageWidth 宽
 * @param imageHeight 高
 */
animojirenderMediaObjectToTexture = function (mediaSource: any, imageWidth: number, imageHeight: number)

Animoji大小调整

/**
 * Animoji大小调整
 * @param scale 推荐：0.8~1.5
 */
animojiResize = function (scale: number)

设置Animoji背景模式

/**
* 设置Animoji背景模式
* @param mode 背景模式：0：无，1：摄像头背景 2：指定背景图片
* @param backgroundImgUrl 背景图片，如果mode=2时需要指定
*/
setAnimojiBackgroundWithMode = function (mode, backgroundImgUrl)

Animoji引擎注销

 /**
 * Animoji引擎注销
 */
animojiDestroy = function ()

背景抠图

绿幕/蓝幕抠图

/**
  * 绿幕/蓝幕抠图
  * 开启此抠图功能，纯色背景抠图（setPureColorToBackground）会关闭。
  * @param isBlue 绿幕:false，蓝幕:true
  * @param backgroundImgUrl 背景图片Url
	*/
setGreenScreenWithUrl = function (isBlue, backgroundImgUrl)

实景抠图

/**
 * 实景AI抠图
 * @param backgroundImgUrl 背景图片Url
 */
setSegmentBackgroundUrl = function (backgroundImgUrl)

纯色抠图

/**
 * 纯色背景抠图。
 * @param backgroundImgUrl 背景图片Url
 */
setPureColorBackgroundUrl = function (backgroundImgUrl)

配置美颜类型

 /**
   * 配置美颜类型
   * @param type kQueenBeautyType枚举
   * @param enable 是否启用
   */
  setQueenBeautyType = function (type: number, enable: boolean)

配置美颜参数值

/**
   * 参数类型
   * @param param kQueenBeautyParams检举
   * @param value 参数值
   */
setQueenBeautyParams = function (param: number, value: number);

配置LUT滤镜

/**
 * @brief 设置滤镜图片,设置滤镜图片前需要将kQueenBeautyTypeLUT打开
 * @param imageUrl 所要设置的滤镜图片的地址
 */
setLutImageUrl = function (imageUrl: string)

设置美型类型

/**
*  @brief 设置美型类型,设置前需要将kQueenBeautyType.FaceShape打开
*  @param faceShapeType  需要设置美型的类型，参考QueenBeautyFaceShapeType
*  @param value 需要设置的值
*/
setFaceShape = function (faceShapeType: number, value: number)

美妆API

设置美妆类型和图片素材路径

/**
* @brief 设置美妆类型和图片素材路径，设置美妆需要将kQueenBeautyType.Makeup 打开
* @param makeupType 美妆类型
* @param imageUrl 美妆素材地址，一般为zip包
* @param blend 混合类型
*/
setMakeupWithUrl = function (makeupType: number, imageUrl: string, blend: number)

设置美妆类型和图片素材路径

/**
* @brief 设置美妆类型和图片素材路径，设置美妆需要将kQueenBeautyType.Makeup 打开
* @param makeupType 美妆类型
* @param packageUrl 资源压缩包url
* @param imageName 包内图片名称
* @param blend 混合类型
*/
setMakeupWithPackage = function (makeupType: number, packageUrl: string, imageName: string, blend: number);

/**
* @brief 设置美妆类型和图片素材路径，设置美妆需要将kQueenBeautyType.Makeup 打开
* @param makeupType 美妆类型
* @param imagePaths 美妆素材地址集合
* @param blend 混合类型
*/
setMakeupWithType = function (makeupType: number, imagePaths: string, blend: number)

/**
* @brief 设置美妆类型和图片素材路径
* @param makeupType 美妆类型
* @param imagePaths 美妆素材地址集合（多个资源则,号分开）
* @param blend 混合类型
* @param fps 对应的帧率
*/
setMakeupWithTypeFps = function (makeupType: number, imagePaths: string, blend: number, fps: number)

设置美妆透明度

 /**
* @brief 设置女性美妆透明度，可指定性别
* @param makeupType 美妆类型
* @param alpha 妆容透明度
*/
setMakeupFemaleAlpha = function (makeupType: number, alpha: number)

/**
* @brief 设置男性美妆透明度，可指定性别
* @param makeupType 美妆类型
* @param alpha 妆容透明度
*/
setMakeupMaleAlpha = function (makeupType: number, alpha: number)

/**
* @brief 设置美妆透明度，可指定性别
* @param makeupType 美妆类型
* @param isFeMale 是否是女性，女性:true，男性:false，（男性为接口预留，这里均传女性即true即可）
* @param alpha 妆容透明度
*/
setMakeupAlphaWithType = function (makeupType: number, isFeMale: boolean, alpha: number)

设置美妆类型的混合类型

 /**
  * @brief 设置美妆类型的混合类型
  * @param makeupType 美妆类型
  * @param blend 混合类型
  */
  setMakeupBlendWithType = function (makeupType: number, blend: number)

清除所有美妆

  /**
  * @brief 清除所有美妆
  */
  resetAllMakeupType = function ()

贴纸API

增加贴纸

/**
* @brief 增加贴纸/贴图/实景抠图需要替换的背景，素材统一接口，支持GLTF,TAOPAI,MEDIAAI 类型
* @param materialZipUrl 要添加的素材的Url
*/
addMaterialWithUrl = function (materialZipUrl: string)

移除贴纸

 /**
  * @brief 删除贴纸/贴图/实景抠图需要替换的背景
  * @param materialZipUrl 要删除的素材的Url
  */
removeMaterialWithUrl = function (materialZipUrl: string)

人脸识别功能调试

展示人脸识别点位

  /**
  * @brief 展示人脸识别点位
  * @param show 是否展示
  */
  showFaceDetectPoint = function (show: boolean)

展示人脸区域三角剖分线

/**
  * @brief 展示人脸区域三角剖分线
  * @param show 是否展示
  */
  showMakeupLine = function (show: boolean)

资源载入

参数配置中所有的URL均需要转成PATH才能正常使用，需要通过下面的API将URL资源文件载入到Queen引擎中生成PATH。

通过url载入资源

 /** 
 * 载入url资源到引擎
 * @param url url链接
 * @param needUnZip 是否需要解压
 * @returns 
 */
loadResourceFileWithUrl = function (url: string, needUnZip: boolean)

  /** 
 * 载入url资源到引擎
 * @param url url链接
 * @param saveFileName 保存文件名
 * @param needUnZip 是否需要解压
 * @returns 
 */
loadResourceFileWithUrlSaveAs = function (url: string, saveFileName:string, needUnZip: boolean) {

通过buffer写入

/**
 * 通过buffer写入资源
 * @param buffer arrayBuffer数据
 * @param saveFileName 保存文件名
 * @param needUnZip 是否需要解压
 * @param loadCallback 成功回调
 * @returns 
 */
loadResourceFileWithData = function(buffer: ArrayBuffer, saveFileName: string, needUnZip: boolean);