ApsaraVideo Live:Web 用 Queen SDK の統合

ライセンス登録で QueenEngine を初期化します。

const sdkLicenseKey = ""; //queen sdk ライセンスキー
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 は Alibaba Cloud 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 は、エンジンの初期化時に指定されたものです。

 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(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'); //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);