ApsaraVideo Live:Integrate the Queen SDK into your uni-app project

Initialization

Register your license to initialize the Queen DPI engine.

const sdkLicenseKey = '*********' // The license key for the Queen SDK.

async function init(){
    // H5 platform
    //const canvasContainer = document.querySelector('.container') as HTMLElement;
    //const canvas = document.createElement('canvas') as HTMLCanvasElement;
    //canvas.setAttribute('type', 'webgl2');
    //canvasContainer.appendChild(canvas);

    // WeChat mini program platform
    let canvas = await new Promise((resolve) => {
    uni.createSelectorQuery().select('#canvas1').fields({ node: true}).exec((res) => {
         resolve(res[0].node);
    })});

    const queenEngine = new QueenEngine();
    queenEngine.create({
      SdkLicenseKey: sdkLicenseKey,
      OnInit: function(result: Boolean){
          console.info("Queen SDK initialized.", result)
      },
      Domain: '',// The domain name for the trial, such as ${APPID}.servicewechat.com
      OnProgress: function(progress: Number){
          console.info("Queen SDK loading:", progress);
      },
      RenderCanvas: canvas
    }
}

Configure retouching parameters

1. Set basic retouching.

   // Enable basic retouching.
   queenEngine.setQueenBeautyType(kQueenBeautyType.SkinBuffing, true);
   // Set the skin smoothing coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinBuffing, 0.7);
   // Set the sharpening coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Sharpen, 0.5);
   // Enable skin whitening.
   queenEngine.setQueenBeautyType(kQueenBeautyType.SkinWhiting, true);
   // Set the skin whitening coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Whitening, 0.6);
   // Set the rosy skin coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);

2. Set advanced retouching.

   // Advanced retouching.
   queenEngine.setQueenBeautyType(kQueenBeautyType.FaceBuffing, true);
   // Set the eye bag removal coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Pouch, 0.9);
   // Set the nasolabial fold removal coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.NasolabialFolds, 0.9);
   // Set the teeth whitening coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.WhiteTeeth, 0.9);
   // Set the lipstick coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Lipstick, 0.2);
   // Set the blush coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Blush, 0.1);
   // Set the lipstick hue coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickColorParam, 0.1);
   // Set the lipstick saturation coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickGlossParam, 0.1);
   // Set the lipstick brightness coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickBrightnessParam, 0.1);
   // Set the eye brightening coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenEye, 0.9);
   // Set the rosy skin coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);
   // Set the wrinkle removal coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Wrinkles, 0.9);
   // Set the skin brightening coefficient.
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenFace, 0.3);

3. Set face shaping.

   // Enable the face shaping feature. For more information about face shaping parameters, see kQueenBeautyFaceShapeType.
   queenEngine.setQueenBeautyType(kQueenBeautyType.FaceShape, true);
   // Cheekbones. Value range: [0, 1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutCheek, 0.6);
   // Cheek narrowing. Value range: [0, 1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutFace, 0.7);
   // Face slimming. Value range: [0, 1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.ThinFace, 0.8);
   // Face length. Value range: [0, 1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.LowerJaw, 0.8);
   // Chin lengthening. Value range: [-1, 1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.HigherJaw, 0.6); 

4. Set makeup.

   • Use the built-in makeup resources of the SDK.

     When you use the built-in resource API, the SDK downloads the required resources from the CDN.

     // Activate makeup.
     queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
     // Set the eyebrow makeup.
     await queenEngine.setMakeupEyeBrow(Assets.kResMakeupEyeBrow.BiaoZhunMei, 0.6);
     // Set the eyelash makeup.
     await queenEngine.setMackupEyeLash(Assets.kResMakeupEyeLash.ChenJing, 0.6);
     // Set the eyeshadow makeup.
     await queenEngine.setMakeupEyeShadow(Assets.kResMakeupEyeShadow.DaDiSe, 0.5);
     // Set the eyeliner makeup.
     await queenEngine.setMakeupEyeLiner(Assets.kResMakeupEyeLiner.DaYan, 0.4);
     // Set the colored contact lens makeup.
     await queenEngine.setMakeupEyeBall(Assets.kResMakeupEyeBall.BiMuYu, 0.5);
     // Set the lipstick makeup.
     await queenEngine.setMakeupMouth(Assets.kResMakeupMouth.AnYeZi, 0.3);
     // Set the blush makeup.
     await queenEngine.setMakeupBlush(Assets.kResMakeupBlush.BlushWuGu, 0.2);
     // Set the highlight makeup.
     await queenEngine.setMakeupHighlight(Assets.kResMakeupHighLight.Highlight, 0.1);
     // Remove a makeup effect. This example removes the colored contact lens effect.
     queenEngine.removeMakeupWithType(kQueenBeautyMakeupType.Eyeball);
     // For more information, see the QueenEngine.d.ts interface file.

   • Use local makeup resources.

     const makeupPackage = "./mouth.zip"
     const makeupName = "1.2.3.png";
     const band = kQueenBeautyBlend.LabMix;
     // Enable the makeup feature. For more information about makeup parameters, see kQueenBeautyMakeupType.
     queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
     // Set the transparency of the lipstick effect.
     queenEngine.setMakeupAlphaWithType(kQueenBeautyMakeupType.Mouth, true, 0.6);
     // Set the lipstick effect.
     queenEngine.setMakeupWithPackage(kQueenBeautyMakeupType.Mouth, makeupPackage, makeupName, band).then(() => {
     
     });

5. Set filters.

   • Use built-in filters.

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

   • Use custom filters.

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

6. Set stickers.

   1. Use built-in stickers.

      queenEngine.addMaterialWithType(Assets.kResSticker.ILoveChina);
      // Or
      queenEngine.addMaterialWithIndex(0);
      // Set multiple stickers at the same time.
      queenEngine.addMaterialWithIndexs([0,1]);

   2. Use custom stickers.

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

7. Configure green screen matting.

   const backgroundUrl = "./bg.png";
   const isBlue = false;// Specifies whether to use a blue screen.
   queenEngine.setGreenScreenWithUrl(isBlue, backgroundUrl).then(() => {
    });

8. Configure the background.

   // Make the background transparent.
   queenEngine.enableTransparentBackground(true);