ApsaraVideo Live:Integrate Queen SDK for Web

Install the Queen SDK engine

npm install aliyun-queen-engine

Import the default edition

The default edition (Advanced Edition) of Queen SDK supports basic face retouching, advanced face retouching, makeup, face shaping, filters, and stickers.

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

Import Basic Edition

Queen SDK Basic Edition supports only basic face retouching.

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

Import Pro Edition

Queen SDK Pro Edition supports basic face retouching, advanced face retouching, makeup, face shaping, body shaping, filters, stickers, AR writing, and chroma key.

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

Import Full Edition

Queen SDK Full Edition supports basic face retouching, advanced face retouching, makeup, face shaping, body shaping, filters, stickers, AR writing, chroma key, and Animojis.

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

Import a worker

When you initialize the worker, you can specify Basic Edition, Advanced Edition, Pro Edition, or Full Edition by passing in the kQueenVersion parameter.

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

Initialize queenEngine

1. Initialize queenEngine.

   const sdkLicenseKey = ""; // The license key of Queen SDK.
   const queenEngine = new QueenEngine();
   //const queenEngine = new QueenEnginePro(); // Initialize Queen SDK Pro Edition.
   queenEngine.init(sdkLicenseKey, function(){
    // The initialization is complete.
   }, function(progress){
    // The progress bar is loaded.
   });

2. Initialize a specified canvas.

   For the canvas, set the canvasElement type parameter to webgl2 or leave this parameter empty.

   const canvasElement = document.getElementById("canvas");
   const queenEngine = new QueenEngine();
   queenEngine.init(sdkLicenseKey, function(){
    // The initialization is complete.
   }, function(progress){
    // The progress bar is loaded.
   }, canvasElement);

3. Initialize specified inference models.

   const queenEngine = new QueenEnginePro();
   queenEngine.init(sdkLicenseKey, function(){
    // The initialization is complete.
   }, function(progress){
    // The progress bar is loaded.
   }, canvasElement,{
    "segment": kQueenModelShapeType.None,// Do not load the chroma key model during initialization.
    "pose": kQueenModelShapeType.None, // Do not load the body shaping model during initialization.
    "backend": kBackendType.Auto // Automatically select the inference backend.
   });

   Note

   • kQueenModelShapeType.None: By default, the chroma key or body shaping model is not loaded. When you want to use the model, manually load it as needed.

   • kQueenModelShapeType.Horizontal: The horizontal chroma key or body shaping model is loaded during initialization.

   • kQueenModelShapeType.Vertical: The vertical chroma key or body shaping model is loaded during initialization.

   • kQueenModelShapeType.Both: The horizontal and vertical chroma key or body shaping models are both loaded during initialization.

   • For a horizontal model, the width of the input source is greater than the height of the input source, which is indicated by width > height.

   • For a vertical model, the height of the input source is greater than the width of the input source, which is indicated by height > width.

   • kBackendType.WebGL: The WebGL inference backend is used.

   • kBackendType.WebGPU: The WebGPU inference backend is used.

   • Model loading affects the speed of page loading.

4. (Optional) Initialize the 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(){
    // The initialization is complete.
   }, function(progress){
    // The progress bar is loaded.
   }, canvasElement);

Configure retouching parameters

1. Configure basic face retouching.

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

2. Configure advanced face retouching.

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

3. Configure face shaping.

   // Enable face shaping. The face shaping parameters are indicated by kQueenBeautyFaceShapeType.
   queenEngine.setQueenBeautyType(kQueenBeautyType.FaceShape, true);
   // Set the cheekbones. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutCheek, 0.6);
   // Set cheekbone narrowing. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutFace, 0.7);
   // Set face slimming. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.ThinFace, 0.8);
   // Set the face length. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.LowerJaw, 0.8);
   // Set chin lengthening. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.HigherJaw, 0.6); 

4. Configure makeup.

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

     When you use the built-in resources, the SDK downloads retouching materials from Alibaba Cloud CDN.

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

   • Use your local makeup resources.

     const makeupPackage = "./mouth.zip"
     const makeupName = "1.2.3.png";
     const band = kQueenBeautyBlend.LabMix;
     // Enable makeup. The makeup parameters are indicated by 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. Configure filters.

   • Use the 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. Configure stickers.

   1. Use the built-in stickers.

      queenEngine.addMaterialWithType(Assets.kResSticker.ILoveChina);
      // Specify a single sticker.
      queenEngine.addMaterialWithIndex(0);
      // Or, specify multiple stickers.
      queenEngine.addMaterialWithIndexs([0,1]);

   2. Use custom stickers.

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

7. Configure background replacement.

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

8. Configure green/blue-screen chroma key.

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

9. Configure background processing.

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

Perform rendering

1. Render the camera stream.

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

2. Apply the rendered media to the canvas.

   The canvas is the canvas that was specified when the engine was initialized.

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

3. Render the video stream.

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

4. Render an image.

   fetch(Image URL)
   .then(buffer => buffer.blob())
   .then(createImageBitmap)
   .then(img => {
    queenEngine.renderWithMediaObject(img, img.width, img.height, function(imageBufferData, imageWidth, imageHeight){
    const canvas = document.getElementById('playCanvas'); // The 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. Render the texture.

   const canvas = document.getElementById("sourceCanvas");
   let outTexture = queenEngine.renderMediaObjectToTexture(canvas, canvas.width, canvas.height);
   queenEngine.drawOutTexture(outTexture);// Draw the texture in the canvas that was specified during initialization.

6. Render the texture input.

   let inputTexture = queenEngine.generateTextureId();
   queenEngine.updateTexture(inputTexture, imageData);
   let outTexture = queenEngine.renderTextureId(inputTexture, width, height);
   queenEngine.drawOutTexture(outTexture)// Draw the texture in the canvas that was specified during initialization.

7. Render the pipeline stream.

   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);

SDK initialization

/**
 * Initialize the SDK.
 * @param sdkUrl The SDK.
 * @param sdkLicenseKey The license key.
 * @param initCallback The callback indicating that the SDK is initialized.
 * @param loaddingCallback The callback indicating that the progress bar is loaded.
 * @param renderCanvas The canvas that is used for rendering. If you leave this parameter empty, a canvas is automatically created.
 */
init(sdkLicenseKey: string, initCallback:()=>void, loaddingCallback:(progress: number) => void, renderCanvas: HTMLCanvasElement)

Rendering

1. Perform rendering based on the imageData object.

   /**
    * Render the image.
    * Return the ImageBuffer RGBA object.
    * @param imageData ImageBuffer RGBA, 
    * Example: const imageData = new Uint8Array(ImageData.data);
    * @param imageWidth The width.
    * @param imageHeight The height.
    * @param renderCallback The callback for image rendering.
    */
   render(imageData: Uint8Array, imageWidth: number, imageHeight: number, renderCallback: (outImageData:Uint8Array, imageWidth:number, imageHeight:number) => void)

2. Turn on the camera and perform retouching.

    /**
    * Enable retouching for the camera stream.
    * @param constraints The camera parameters.
    * @returns The retouched camera stream.
    */
   openCameraAndRender(constraints?: MediaStreamConstraints): Promise<MediaStream>

3. Render the media to the canvas.

    /**
    * Render the retouched media object to renderCanvas.
    * RenderCanvas is the canvas that was specified during initialization.
    * @param mediaObject Media object TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
    */
   renderMediaObjectToRenderCanvas(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): void

4. Perform rendering based on the media object.

   /**
    * Render the media object.
    * Return the rendered ImageData object.
    * @param mediaElement Media object TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
    * @param width 
    * @param height 
    * @param renderCallback 
    */
   renderWithMediaObject(mediaObject: TexImageSourceWebCodecs | Uint8Array, width: number, height: number, renderCallback: (outImageData: Uint8Array, imageWidth: number, imageHeight: number) => void): void

5. Perform rendering based on the texture ID.

   /**
    * Perform rendering based on the texture ID and return the texture object.
    * @param mediaElement Media object TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
    * @param width The width of the texture object.
    * @param height The height of the texture object.
    * @returns The texture object.
    */
   renderMediaObjectToTexture(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): WebGLTexture | null

6. Render the texture.

   **
    * Render the texture based on the texture ID.
    * Enter the texture ID. The texture ID is returned.
    * @param inTextureId The texture ID. You can call buildInputTexture to create a texture ID.
    * @param width The width of the media object.
    * @param height The height of the media object.
    * @returns The texture object.
    */
   renderTextureId(textureId: number, imageWidth: number, imageHeight: number, useOutTextureId: number = 0) : WebGLTexture | null;

7. Perform rendering based on the stream.

   /**
    * Render the video stream. The rendered video stream is returned.
    * Chrome 94 or later is required.
    * @param inputMediaStream The input media stream.
    */
   renderMediaStream(inputMediaStream: MediaStream): MediaStream 
   renderMediaStreamTrack(videoMediaStreamTrack: MediaStreamVideoTrack, width?: number, height?: number): MediaStreamVideoTrack
   getTransformStream(): TransformStream;// Return the stream retouching processor.

8. Destroy the retouching engine.

   /**
    * Destroy the retouching engine.
    */
   engineDestory();

Animoji

1. Initialize Animoji.

   /**
    * Initialize the Animoji feature.
    * @param animojiUrl The URL of the Animoji resources.
    * @param width The width.
    * @param height The height.
    * @param scale The scaled size.
    * @returns 
    */
   animojiInitialize(animojiUrl: string, width: number, height: number, scale: number): Promise<void> 

2. Render an Animoji image.

   /**
    * Render the Animoji image.
    * @param imageData The image data.
    * @param imageWidth The width.
    * @param imageHeight The height.
    * @param renderCallBack The callback for rendering. 
    */
   animojiRender(imageData: Uint8Array, imageWidth: number, imageHeight: number, renderCallback: (outImageData:Uint8Array, imageWidth:number, imageHeight:number) => void): void

3. Render an Animoji media object.

   /**
    * Render the Animoji.
    * @param mediaSource Media object TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
    * @param imageWidth The width.
    * @param imageHeight The height.
    * @param renderCallBack The callback for rendering.
    */
   animojiRenderWithMediaObject(mediaObject: TexImageSourceWebCodecs | Uint8Array, width: number, height: number, renderCallback: (outImageData: Uint8Array, imageWidth: number, imageHeight: number) => void): void 

4. Render an Animoji media object and return the texture output.

   /**
    * Render the Animoji.
    * @param mediaObject Media object TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
    * @param width The width.
    * @param height The height.
    * @returns The rendered texture object.
    */
   animojiRenderMediaObjectToTexture(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): WebGLTexture | null

5. Render an Animoji based on the texture ID.

   /**
    * Render the Animoji.
    * @param inTextureId The texture ID.
    * @param width The width.
    * @param height The height.
    * @returns The rendered texture object.
    */
   animojiRenderTextureId(inTextureId: number, width: number, height: number): WebGLTexture | null

6. Resize an Animoji.

    /**
    * Resize the animoji.
    * @param scale Recommended values: 0.8 to 1.5.
    */
   animojiResize(scale: number)

7. Set the background mode for an Animoji.

   /**
    * Set the background mode for the Animoji.
    * @param mode The background mode. A value of 0 specifies no background. A value of 1 specifies that the video captured from the camera is used as the background. A value of 2 specifies that an image is used as the background.
    * @param backgroundImgUrl The URL of the background image. This parameter is required if the mode parameter is set to 2.
    */
   setAnimojiBackgroundWithMode(mode: kBackgroundProcessType, backgroundImgUrl: string)

8. Destroy the Animoji engine.

   /**
    * Destroy the Animoji engine.
    */
   animojiDestroy()

Chroma key

To enable the chroma key module, you need to add the following dependencies:

$ npm add @tensorflow/tfjs
$ npm add @tensorflow/tfjs-backend-webgl
$ npm add @tensorflow/tfjs-backend-webgpu

1. Configure green/blue-screen chroma key.

   /**
    * Configure green/blue-screen chroma key.
    * If you enable green/blue-screen chroma key, pure-color chroma key is disabled. 
    * @param isBlue Specifies whether to use a blue screen. A value of true specifies that a blue screen is used. A value of false specifies that a green screen is used.
    * @param backgroundImgUrl The URL of the background image.
    * @param threshold The sensitivity of the screen. Valid values: [1,10]. Default value: 1.
    * @param autoThresholdEnabled Specifies whether to dynamically calculate the sensitivity of the screen based on the environment. If the value of this parameter is true, the threshold parameter does not take effect. If the value of this parameter is false, the threshold parameter takes effect.
    * @param outputGrayMask The output gray mask.
    * @param backgroundProcessType The background processing method. 
    */
   setGreenScreenWithUrl = function (isBlue: boolean, backgroundImgUrl: string, threshold: number, autoThreshold: boolean, outputGrayMask: boolean, backgroundProcessType:kBackgroundProcessType): Promise<void>

2. Configure background replacement.

   /**
    * Configure AI-based background replacement.
    * @param backgroundImgUrl The URL of the background image.
    * @returns 
    */
   setSegmentBackgroundUrl(backgroundImgUrl: string): Promise<void>

3. Configure pure-color chroma key.

   /**
   * Configure pure-color chroma key. 
   * Note: If you enable pure-color chroma key, green/blue-screen chroma key is disabled. 
   * @param backgroundImgPath The URL of the background image.
   * @param threshold The sensitivity of the screen. Valid values: [1,10]. Default value: 1.
   * @param colorType The color that you want to replace. Valid values: 0 (green), 1 (blue), 2 (cyan), 3 (purple), 4 (yellow), and 5 (red). Default value: 0. 
   */
   setPureColorBackgroundUrl(backgroundImgUrl: string, threshold: number, colorType: number): Promise<void>

Parameter settings

1. Configure a retouching effect.

   /**
    Configure the retouching effect.
    * @param type The retouching effect, which is enumerated by kQueenBeautyType.
    * @param enable Specifies whether to enable the retouching effect.
    */
   setQueenBeautyType(type: kQueenBeautyType, enable: boolean)

2. Configure a retouching parameter.

   /**
    * Specify a value for the retouching parameter.
    * @param param The retouching parameter, which is enumerated by kQueenBeautyParams.
    * @param value The parameter value.
    */
   setQueenBeautyParams(param: kQueenBeautyParams, value: number)

3. Configure a Lookup Table (LUT) filter.

    /**
    * Use a built-in LUT filter.
    * @param lutType The LUT filter, which is enumerated by Assets.kResLut.
    * @returns 
    */
   setLutByType(lutType: Assets.kResLut): Promise<void>
    
   /**
    * Specify a LUT filter.
    * @param imageUrl The URL of the filter that you want to specify.
    * @returns 
    */
   setLutImageUrl(imageUrl: string): Promise<void>

4. Configure a face shaping effect.

   /**
    * Configure the face shaping effect. Before you configure the face shaping effect, set kQueenBeautyType.FaceShape to true.
    * @param faceShapeType The face shaping effect, which is enumerated by kQueenBeautyFaceShapeType.
    * @param value The parameter value.
    */
   setFaceShape(faceShapeType: kQueenBeautyFaceShapeType, value: number)

5. Call methods related to makeup.

   1. Use the built-in makeup resources.

      /**
       * Set the eyebrow effect.
       * @param eyeBrowType The eyebrow type, which is enumerated by kResMakeupEyeBrow.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
       * @returns 
       */
      setMakeupEyeBrow(eyeBrowType: Assets.kResMakeupEyeBrow, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>
      
      /**
       * Set the eyelash effect.
       * @param eyelashType The eyelash type, which is enumerated by kResMakeupEyeLash.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
       * @returns 
       */
      setMackupEyeLash(eyelashType: Assets.kResMakeupEyeLash, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>
      
      /**
       * Set the eye shadow effect.
       * @param eyeShadowType The eye shadow type, which is enumerated by kResMakeupEyeShadow.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
       * @returns 
       */
      setMakeupEyeShadow(eyeShadowType: Assets.kResMakeupEyeShadow, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>
      
      /**
       * Set the eyeliner effect.
       * @param eyeLinerType The eyeliner type, which is enumerated by kResMakeupEyeLiner.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
       * @returns 
       */
      setMakeupEyeLiner(eyeLinerType: Assets.kResMakeupEyeLiner, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>
      
      /**
       * Set the colored eye contacts effect.
       * @param eyeballType The colored eye contacts type, which is enumerated by kResMakeupEyeBall.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
       * @returns 
       */
      setMakeupEyeBall(eyeballType: Assets.kResMakeupEyeBall, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>
      
      /**
       * Set the lipstick effect.
       * @param mouthType The lipstick type, which is enumerated by kResMakeupMouth.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
       * @returns 
       */
      setMakeupMouth(mouthType: Assets.kResMakeupMouth, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>
      
      /**
       * Set full face makeup.
       * @param wholeType The full face makeup type, which is enumerated by Assets.kResMakeupWhole.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
       * @returns 
       */
      setMakeupWhole(wholeType: Assets.kResMakeupWhole, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>
      
      /**
       * Set the blush effect.
       * @param blushType The blush type, which is enumerated by kResMakeupBlush.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend. 
       * @returns 
       */
      setMakeupBlush(blushType: Assets.kResMakeupBlush, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>
      
      /**
       * Set the highlight effect.
       * @param highlightType The highlight type, which is enumerated by kResMakeupHighLight.
       * @alpha The transparency.
       * @param blend The mixed type, which is enumerated by kQueenBeautyBlend. 
       * @returns 
       */
      setMakeupHighlight(highlightType: Assets.kResMakeupHighLight, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

   2. Specify a makeup type and the paths of the makeup materials.

       /**
      * Specify a makeup type and the paths of the makeup materials. Before you specify the makeup type, set kQueenBeautyTypeMakeup to true.
      * @param makeupType The makeup type, which is enumerated by kQueenBeautyMakeupType.
      * @param imageUrl The URL of the makeup materials.
      * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
      */
      setMakeupWithUrl(makeupType: kQueenBeautyMakeupType, imageUrl: string, blend: kQueenBeautyBlend): Promise<void> 

   3. Specify a makeup type and the paths of the makeup materials.

      /**
      * Specify a makeup type and the paths of the makeup materials. Before you specify the makeup type, set kQueenBeautyTypeMakeup to true.
      * @param makeupType The makeup type.
      * @param packageUrl The URL of the resource package.
      * @param imageName The name of the image in the package.
      * @param blend The mixed type, which is enumerated by kQueenBeautyBlend.
      */
      setMakeupWithPackage(makeupType: kQueenBeautyMakeupType, packageUrl: string, imageName: string, blend: kQueenBeautyBlend): Promise<void>

   4. Configure the makeup transparency.

      /**
      * Configure the transparency for a makeup type. You can specify the gender.
      * @param makeupType The makeup type.
      * @param isFeMale Specifies whether the gender is female. A value of true specifies female. A value of false specifies male. Male makeup is reserved for future use. Set the value to true.
      * @param alpha The transparency.
      */
      setMakeupAlphaWithType = function (makeupType: kQueenBeautyMakeupType, isFeMale: boolean, alpha: number)

   5. Specify a type of mixed makeup.

      /**
      * Configure the transparency for the mixed makeup type. You can specify the gender.
      * @param makeupType The mixed makeup type.
      * @param isFeMale Specifies whether the gender is female. A value of true specifies female. A value of false specifies male. Male makeup is reserved for future use. Set the value to true.
      * @param alpha The transparency.
      */
      setMakeupAlphaWithType(makeupType: kQueenBeautyMakeupType, isFeMale: boolean, alpha: number)

   6. Remove makeup.

      /**
       * Remove makeup.
       * @param makeupType The makeup type.
       */
      removeMakeupWithType(makeupType: kQueenBeautyMakeupType): void

   7. Clear all makeup effects.

      /**
      * Clear all makeup effects.
      */
      resetAllMakeupType()

6. Call methods related to stickers.

   1. Add a sticker.

       /**
       * Use a built-in sticker.
       * @param stickerType The built-in sticker.
       * @returns 
       */
      addMaterialWithType(stickerType: Assets.kResSticker): Promise<void>
      /**
       * Use a built-in sticker.
       * @param stickerIndex The index value of the built-in sticker.
       * @returns 
       */
      addMaterialWithIndex(stickerIndex: number): Promise<void> 
       
      /**
       * Specify a sticker.
       * @param materialZipUrl The URL of the sticker package.
       * @returns 
       */
      addMaterialWithUrl(materialZipUrl: string): Promise<void>

   2. Remove a sticker.

      /**
       * Remove a material, such as sticker, texture, or chroma key background.
       * @param materialZipUrl 
       */
      removeMaterialWithUrl(materialZipUrl: string)
       /**
       * Remove the sticker.
       * @param stickerType The built-in sticker.
       * @returns 
       */
      removeMaterialWithType(stickerType: Assets.kResSticker);
      /**
       * Remove the sticker.
       * @param stickerIndex The index value of the built-in sticker.
       * @returns 
       */
      removeMaterialWithIndex(stickerIndex: number)

7. Perform feature debugging.

   1. Show facial keypoints.

      /**
      * Show facial keypoints.
      * @param show Specifies whether to show facial keypoints.
      */
      showFaceDetectPoint(show: boolean)

   2. Show face triangulation.

      /**
      * Show face triangulation.
      * @param show Specifies whether to show face triangulation.
      */
      showMakeupLine(show: boolean)

   3. Show body keypoints.

      /**
       * Show body keypoints.
       * @param show Specifies whether to show body keypoints.
       */
      showBodyDetectPoint(show: boolean)

8. Configure body shaping.

   /**
    * Configure body shaping.
    * @param bodyShapeType The body shaping type.
    * @param value The level of body shaping.
    */
   setBodyShape(bodyShapeType: kQueenBeautyBodyShapeType, value: number) 

AR writing

1. Load the AR writing module.

    /**
    * Initialize the AR writing module.
    * @returns 
    */
   initArWriteResource(): Promise<boolean>

2. Enable AR writing.

    /**
    * Enable AR writing.
    * @param enable Specifies whether to enable AR writing. A value of true enables AR writing.
    * @param mode The AR writing mode. Valid values: 1 (writing) and 2 (drawing). 
    */
   setArWriting(enable: boolean, mode: number): void

3. Clear AR writing traces.

   /**
    * Clear AR writing traces.
    */
   cleanScreenArWriting(): void

Resource loading

All URLs in the configuration must be converted to path strings before they can be used. You can call the following methods to load the URL resources to the Queen SDK engine to generate path strings.

1. Load resources from URLs.

    /** 
    * Load the URL resources to the engine.
    * @param url The URL.
    * @param needUnZip Specifies whether decompression is required.
    * @returns 
    */
   loadResourceFileWithUrl(url: string, needUnZip: boolean): Promise<string>
   
   /**
    * Load the URL resources to the engine.
    * @param url The URL.
    * @param saveFileName The name of the saved file.
    * @param needUnZip Specifies whether decompression is required.
    * @returns 
    */
   loadResourceFileWithUrlSaveAs(url: string, saveFileName: string, needUnZip: boolean): Promise<string> 

2. Load resources by using the buffer.

   /**
    * Load the resources to the engine.
    * @param buffer The data buffer.
    * @param saveFileName The name of the saved file.
    * @param needUnZip Specifies whether decompression is required.
    * @returns 
    */
   loadResourceFileWithData(buffer: ArrayBuffer, saveFileName: string, needUnZip: boolean)

3. Check files.

   /**
   * Check whether the resource file exists.
   * @param fullFileName The file name that includes the full path.
   * @returns 
   */
   checkResourceFile(fullFileName: string)