ApsaraVideo Live：整合Web端美顏特效SDK

註冊License初始化Queen引擎。

const sdkLicenseKey = ""; //queen sdk 授權licenseKey
const queenEngine = new QueenEngine();
//const queenEngine = new QueenEnginePro(); //Pro版本初始化
queenEngine.create({
  SdkLicenseKey: sdkLicenseKey,
  OnInit: function(result: Boolean){
      console.info("queen sdk initialized.", result)
  },
  Domain: '',//申請試用的網域名稱，可以用根網域名稱,如aliyun.com
  OnProgress: function(progress: Number){
      console.info("queen sdk loading:", progress);
  }
});

指定canvas初始化。

需要指定的canvasElement type為webgl2類型或預設為空白。

const canvasElement = document.getElementById("canvas");
const queenEngine = new QueenEngine();
queenEngine.create({
  SdkLicenseKey: sdkLicenseKey,
  OnInit: function(result: Boolean){
      console.info("queen sdk initialized.", result)  
  },
  Domain: '',//申請試用的網域名稱，可以用根網域名稱
  OnProgress: function(progress: Number){
      console.info("queen sdk loading:", progress);
  },
  RenderCanvas: canvasElement
});

指定推理模型初始化。

const queenEngine = new QueenEnginePro();
queenEngine.create({
  SdkLicenseKey: sdkLicenseKey,
  OnInit: function(result: Boolean){
      console.info("queen sdk initialized.", result)     
  },
  Domain: '',//申請試用的網域名稱，可以用根網域名稱
  OnProgress: function(progress: Number){
      console.info("queen sdk loading:", progress);
  },
  RenderCanvas: canvasElement//可為空白
  SegmentModel: kQueenModelShapeType.Vertical,//豎向圖模型，如果沒有摳圖業務情境，則傳kQueenModelShapeType.None
  PoseModel: kQueenModelShapeType.None,//初始化時不載入美體變形模型
  InferenceBackend: kBackendType.WebGL,//用Webgl後端推理
});

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

設定基礎美顏。

// 開啟基礎美顏
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);

設定進階美顏。

//進階美顏
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);

設定美型。

// 開啟美型功能開關，美型參數詳見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); 

設定美妝。

• 使用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(() => {
  
  });

設定濾鏡。

• 使用內建濾鏡。

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

設定頭像貼紙。

1. 使用內建貼紙。

   queenEngine.addMaterialWithType(Assets.kResSticker.ILoveChina);
   //或
   queenEngine.addMaterialWithIndex(0);
   //同時設定多個
   queenEngine.addMaterialWithIndexs([0,1]);

2. 使用自訂貼紙。

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

配置實景摳圖。

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

配置綠幕摳圖。

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

配置背景處理。

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

網路攝影機流渲染。

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

渲染到Canvas。

渲染的Canvas為初始化引擎時傳入的Canvas。

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

視頻流渲染。

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

圖片渲染。

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

紋理渲染。

const canvas = document.getElementById("sourceCanvas");
let outTexture = queenEngine.renderMediaObjectToTexture(canvas, canvas.width, canvas.height);
queenEngine.drawOutTexture(outTexture);//紋理會繪製到初始化傳入的canvas

紋理輸入渲染。

let inputTexture = queenEngine.generateTextureId();
queenEngine.updateTexture(inputTexture, imageData);
let outTexture = queenEngine.renderTextureId(inputTexture, width, height);
queenEngine.drawOutTexture(outTexture)//紋理會繪製到初始化傳入的canvas

管道流渲染。

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