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