集成Web端美颜特效SDK

安装Queen美颜组件

npm install aliyun-queen-engine

导入默认版本美颜

默认版本（Advance版本）支持基础美颜、高级美颜、美妆、美型、滤镜、贴纸美颜功能。

import QueenEngine, {kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBlend} from "aliyun-queen-engine"
queenEngine = new QueenEngine();

导入Lite版本美颜

Lite版本仅支持基础美颜功能。

import {QueenEngineLite, kQueenBeautyType, kQueenBeautyParams} from "aliyun-queen-engine"
queenEngine = new QueenEngineLite();

导入Pro版本美颜

Pro版本支持基础美颜、高级美颜、美妆、美型、美体、滤镜、贴纸、隔空写字、抠图美颜功能。

import {QueenEnginePro, kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBodyShapeType, kQueenBeautyBlend} from "aliyun-queen-engine"
queenEngine = new QueenEnginePro();

导入Full版本美颜

Full版本支持基础美颜、高级美颜、美妆、美型、美体、滤镜、贴纸、隔空写字、抠图美颜、Animoji功能。

import {QueenEngineFull, kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBodyShapeType, kQueenBeautyBlend} from "aliyun-queen-engine"
queenEngine = new QueenEngineFull();

导入Worker版本美颜

Worker版本通过初始化时传入kQueenVersion指定Lite、Advance、Pro、Full版本。

import {QueenEngineWorker, kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBodyShapeType, kQueenBeautyBlend, kQueenVersion} from "aliyun-queen-engine"
queenEngine = new QueenEngineWorker(kQueenVersion.Pro);

初始化Queen引擎

1. 初始化Queen引擎。

   const sdkLicenseKey = ""; //queen sdk 授权licenseKey
   const queenEngine = new QueenEngine();
   //const queenEngine = new QueenEnginePro(); //Pro版本初始化
   queenEngine.init(sdkLicenseKey, function(){
    //初始化完成回调
   }, function(progress){
    //progress：加载进度条
   });

2. 指定canvas初始化。

   需要指定的canvasElement type为webgl2类型或默认为空。

   const canvasElement = document.getElementById("canvas");
   const queenEngine = new QueenEngine();
   queenEngine.init(sdkLicenseKey, function(){
    //初始化完成回调
   }, function(progress){
    //progress：加载进度条
   }, canvasElement);

3. 指定推理模型初始化。

   const queenEngine = new QueenEnginePro();
   queenEngine.init(sdkLicenseKey, function(){
    //初始化完成回调
   }, function(progress){
    //progress：加载进度条
   }, canvasElement,{
    "segment": kQueenModelShapeType.None,//初始化时不加载背景抠图模型
    "pose": kQueenModelShapeType.None, //初始化时不加载美体变形模型
    "backend": kBackendType.Auto //自动选择推理后端
   });

   说明

   • kQueenModelShapeType.None默认不加载背景抠图模型，使用抠图或美体时按需加载。

   • kQueenModelShapeType.Horizontal引擎初始化时载入横向图模型。

   • kQueenModelShapeType.Vertical引擎初始化时载入竖向图模型。

   • kQueenModelShapeType.Both引擎初始化时载入时加载横向图模型和竖向图模型。

   • 横向图模型，即width > height源输入。

   • 竖向图模型，即height > width源输入。

   • kBackendType.WebGL使用WebGL推理后端。

   • kBackendType.WebGPU优先使用WebGPU推理后端。

   • 模型加载会影响页面加载速度。

4. Worker版本接入。

   import {QueenEngineWorker, kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBlend} from "aliyun-queen-engine"
   const canvasElement = document.getElementById("canvas");
   queenEngine = new QueenEngineWorker(kQueenVersion.Pro);
   queenEngine.init(sdkLicenseKey, function(){
    //初始化完成回调
   }, function(progress){
    //progress：加载进度条
   }, canvasElement);

配置美颜参数

1. 设置基础美颜。

   // 开启基础美颜
   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);

2. 设置高级美颜。

   //高级美颜
   queenEngine.setQueenBeautyType(kQueenBeautyType.FaceBuffing, true);
   // 设置去眼袋系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Pouch, 0.9);
   // 设置去法令纹系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.NasolabialFolds, 0.9);
   // 设置白牙系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.WhiteTeeth, 0.9);
   // 设置口红系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Lipstick, 0.2);
   // 设置腮红系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Blush, 0.1);
   // 设置口红色相系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickColorParam, 0.1);
   // 设置口红饱和度系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickGlossParam, 0.1);
   // 设置口红明度系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickBrightnessParam, 0.1);
   // 设置亮眼系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenEye, 0.9);
   // 设置红润系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);
   // 设置去皱纹系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Wrinkles, 0.9);
   // 设置去暗沉系数
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenFace, 0.3);

3. 设置美型。

   // 打开美型功能开关，美型参数详见kQueenBeautyFaceShapeType
   queenEngine.setQueenBeautyType(kQueenBeautyType.FaceShape, true);
   //颧骨，值的范围[0,1]，默认0
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutCheek, 0.6);
   // 削脸，值的范围[0,1]，默认0
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutFace, 0.7);
   //瘦脸，值的范围[0,1]，默认0
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.ThinFace, 0.8);
   //脸长，值的范围[0,1]，默认0
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.LowerJaw, 0.8);
   //下巴拉长，值的范围[-1,1]，默认0
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.HigherJaw, 0.6); 

4. 设置美妆。

   • 使用SDK内置资源美妆。

     使用内置资源接口时，SDK会从CDN下载美颜素材。

     //激活美妆
     queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
     //设置美妆眉毛
     await queenEngine.setMakeupEyeBrow(Assets.kResMakeupEyeBrow.BiaoZhunMei, 0.6);
     //设置美妆睫毛
     await queenEngine.setMackupEyeLash(Assets.kResMakeupEyeLash.ChenJing, 0.6);
     //设置美妆眼影
     await queenEngine.setMakeupEyeShadow(Assets.kResMakeupEyeShadow.DaDiSe, 0.5);
     //设置美妆眼线
     await queenEngine.setMakeupEyeLiner(Assets.kResMakeupEyeLiner.DaYan, 0.4);
     //设置美妆美瞳
     await queenEngine.setMakeupEyeBall(Assets.kResMakeupEyeBall.BiMuYu, 0.5);
     //设置美妆口红
     await queenEngine.setMakeupMouth(Assets.kResMakeupMouth.AnYeZi, 0.3);
     //设置美妆腮红
     await queenEngine.setMakeupBlush(Assets.kResMakeupBlush.BlushWuGu, 0.2);
     //设置美妆高光
     await queenEngine.setMakeupHighlight(Assets.kResMakeupHighLight.Highlight, 0.1);
     //移除美妆效果 - 移除美妆美瞳
     queenEngine.removeMakeupWithType(kQueenBeautyMakeupType.Eyeball);
     //详细请参考QueenEngin.d.ts接口文件说明

   • 本地资源美妆。

     const makeupPackage = "./mouth.zip"
     const makeupName = "1.2.3.png";
     const band = kQueenBeautyBlend.LabMix;
     // 打开美妆功能开关，美妆参数详见kQueenBeautyMakeupType
     queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
     // 设置美妆口红效果的透明度
     queenEngine.setMakeupAlphaWithType(kQueenBeautyMakeupType.Mouth, true, 0.6);
     // 设置口红效果
     queenEngine.setMakeupWithPackage(kQueenBeautyMakeupType.Mouth, makeupPackage, makeupName, band).then(() => {
     
     });

5. 设置滤镜。

   • 使用内置滤镜。

     await queenEngine.setLutByType(Assets.kResLut.M1, 0.5);

   • 使用自定义滤镜。

     const lutImageUrl = "./lut.png";
     queenEngine.setLutImageUrl(lutImageUrl).then(function () {
       queenEngine.setQueenBeautyType(kQueenBeautyType.LUT, true);
       queenEngine.setQueenBeautyParams(kQueenBeautyParams.LUT, 0.5);
     });

6. 设置头像贴纸。

   1. 使用内置贴纸。

      queenEngine.addMaterialWithType(Assets.kResSticker.ILoveChina);
      //或
      queenEngine.addMaterialWithIndex(0);
      //同时设置多个
      queenEngine.addMaterialWithIndexs([0,1]);

   2. 使用自定义贴纸。

      const stickerZip = "./sticker.zip";
      queenEngine.addMaterialWithUrl(stickerZip).then(() => {
       });

7. 配置实景抠图。

   const backgroundUrl = "./bg.png";
   queenEngine.setSegmentBackgroundUrl(backgroundUrl).then(() => {
    });

8. 配置绿幕抠图。

   const backgroundUrl = "./bg.png";
   const isBlue = false;//是否蓝幕
   queenEngine.setGreenScreenWithUrl(isBlue, backgroundUrl).then(() => {
    });

9. 配置背景处理。

   //背景模糊
   queenEngine.enableBokehBackground(true);
   //背景透明
   queenEngine.enableTransparentBackground(true);

美颜渲染

1. 摄像头流渲染。

    queenEngine.openCameraAndRender().then((stream=>{
    const video = document.querySelector('video');
    video.srcObject = stream;
    video.play();
    })) 

2. 渲染到Canvas。

   渲染的Canvas为初始化引擎时传入的Canvas。

    const sourceVideo = document.querySelector('video');
    queenEngine.renderMediaObjectToRenderCanvas(sourceVideo, sourceVideo.clientWidth, sourceVideo.clientHeight);

3. 视频流渲染。

    navigator.mediaDevices.getUserMedia(constraints)
    .then(mediaStream => {
    let renderMediaStream = queenEngine.renderMediaStream(mediaStream);
    const video = document.querySelector('video');
    video.srcObject = renderMediaStream;
    video.play();
    });

4. 图片渲染。

   fetch(图片地址)
   .then(buffer => buffer.blob())
   .then(createImageBitmap)
   .then(img => {
    queenEngine.renderWithMediaObject(img, img.width, img.height, function(imageBufferData, imageWidth, imageHeight){
    const canvas = document.getElementById('playCanvas'); //canvas画布 
    const ctx = canvas.getContext("2d");
    const imageBuffer = new Uint8ClampedArray(imageBufferData);
    const imageData = new ImageData(imageBuffer, imageWidth, imageHeight);
    ctx.clearRect(0, 0, imageWidth, imageHeight);
    ctx.putImageData(imageData, 0, 0);
   });
   });

5. 纹理渲染。

   const canvas = document.getElementById("sourceCanvas");
   let outTexture = queenEngine.renderMediaObjectToTexture(canvas, canvas.width, canvas.height);
   queenEngine.drawOutTexture(outTexture);//纹理会绘制到初始化传入的canvas

6. 纹理输入渲染。

   let inputTexture = queenEngine.generateTextureId();
   queenEngine.updateTexture(inputTexture, imageData);
   let outTexture = queenEngine.renderTextureId(inputTexture, width, height);
   queenEngine.drawOutTexture(outTexture)//纹理会绘制到初始化传入的canvas

7. 管道流渲染。

   const videoTrack = stream.getVideoTracks()[0];
   const processor = new MediaStreamTrackProcessor({ track: videoTrack });
   const readFrameStream = processor.readable;
   const generator = new MediaStreamTrackGenerator({ kind: 'video' });
   let writeFrameStream = generator.writable;
   readFrameStream.pipeThrough(queenEngine.getTransformStream()).pipeTo(writeFrameStream);