ApsaraVideo Live:Queen SDK for Web の組み込み

QueenEngine を初期化します。

const sdkLicenseKey = ""; // Queen SDK のライセンスキー
const queenEngine = new QueenEngine();
//const queenEngine = new QueenEnginePro(); // Queen SDK Pro Edition を初期化します。
queenEngine.create({
  SdkLicenseKey: sdkLicenseKey,
  OnInit: function(result: Boolean) {
      console.info("queen sdk initialized.", result)
  },
  Domain: '', // ドメイン。aliyuncs.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, // 初期化時にボディシェイプモデルが読み込まれないようにするには、`None` に設定します。
  InferenceBackend: kBackendType.WebGL, // モデル推論のバックエンド。この例では WebGL を使用します。
});

QueenEngineWorker インスタンスを初期化します。

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);
// あごの縦方向の長さを調整します。有効な値：[0,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.setMakeupEyeLash(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; // isBlue: false はグリーンバック、true はブルーバックのクロマキーを使用することを示します。
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);

renderMediaObjectToRenderCanvas を呼び出す前に、ビデオ要素の読み込みが完了していることを確認してください。ビデオの読み込みが完了していない場合、SDK はコンソールに次のエラーを出力し、キャンバスにはレンダリングされた出力が表示されません:

メディアオブジェクトの幅と高さは 0 にできません。

SDK は console.error を使用して、このエラーをコンソールにのみ出力します。例外はスローされないため、問題をトラブルシューティングするには、ブラウザーコンソールを確認する必要があります。

このエラーを回避するには、次のいずれかの方法を使用します：

• メソッドを loadedmetadata イベントコールバックで呼び出します：

  const sourceVideo = document.querySelector('video');
  sourceVideo.addEventListener('loadedmetadata', function() {
    if (sourceVideo.readyState >= 4 && sourceVideo.videoWidth > 0 && sourceVideo.videoHeight > 0) {
      queenEngine.renderMediaObjectToRenderCanvas(sourceVideo, sourceVideo.videoWidth, sourceVideo.videoHeight);
    }
  });

• メソッド呼び出し前の読み込み状態の確認

  if (sourceVideo.readyState >= 4 && sourceVideo.videoWidth > 0 && sourceVideo.videoHeight > 0) {
    queenEngine.renderMediaObjectToRenderCanvas(sourceVideo, sourceVideo.videoWidth, sourceVideo.videoHeight);
  }

readyState >= 4 (HAVE_ENOUGH_DATA) は、ビデオが問題なく再生できることを示します。

• レンダリングされた canvas を録画します。

  録画ビデオの解像度は、キャンバスの width と height によって決定されます。 録画ビデオの解像度を制御するには、renderMediaObjectToRenderCanvas を呼び出す前に、canvas.width と canvas.height を目的の解像度に設定します。

  // canvas のサイズを目的の録画解像度に設定します。
  canvasElement.width = 640;
  canvasElement.height = 360;
  // 加工後の動画を canvas にレンダリングします。
  queenEngine.renderMediaObjectToRenderCanvas(sourceVideo, sourceVideo.clientWidth, sourceVideo.clientHeight);
  // canvas からメディアストリームをキャプチャします。解像度は 640 x 360 です。
  const recordStream = canvasElement.captureStream(30);
  // MediaRecorder を使用してストリームを録画します。
  const recorder = new MediaRecorder(recordStream, { mimeType: "video/webm" });

  重要

  captureStream を呼び出した後にキャンバスサイズを変更しても、すでに作成されているストリームには影響しません。captureStream を呼び出す前にキャンバスサイズを設定する必要があります。

ビデオストリームをレンダリングします。

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