ApsaraVideo Live:Integrasikan Queen SDK untuk Web

Inisialisasi QueenEngine dengan pendaftaran lisensi.

const sdkLicenseKey = ""; //queen sdk license key
const queenEngine = new QueenEngine();
//const queenEngine = new QueenEnginePro(); //Inisialisasi edisi Pro
queenEngine.create({
  SdkLicenseKey: sdkLicenseKey,
  OnInit: function(result: Boolean){
      console.info("queen sdk diinisialisasi.", result)
  },
  Domain: '',//Nama domain untuk aplikasi percobaan, Anda dapat menggunakan domain root, seperti aliyun.com
  OnProgress: function(progress: Number){
      console.info("queen sdk memuat:", progress);
  }
});

Inisialisasi dengan canvas tertentu.

Tipe canvasElement perlu ditentukan sebagai webgl2 atau dibiarkan kosong secara default.

const canvasElement = document.getElementById("canvas");
const queenEngine = new QueenEngine();
queenEngine.create({
  SdkLicenseKey: sdkLicenseKey,
  OnInit: function(result: Boolean){
      console.info("queen sdk diinisialisasi.", result)  
  },
  Domain: '',//Nama domain untuk aplikasi percobaan, Anda dapat menggunakan domain root
  OnProgress: function(progress: Number){
      console.info("queen sdk memuat:", progress);
  },
  RenderCanvas: canvasElement
});

Inisialisasi dengan model inferensi tertentu.

const queenEngine = new QueenEnginePro();
queenEngine.create({
  SdkLicenseKey: sdkLicenseKey,
  OnInit: function(result: Boolean){
      console.info("queen sdk diinisialisasi.", result)     
  },
  Domain: '',//Nama domain untuk aplikasi percobaan, Anda dapat menggunakan domain root
  OnProgress: function(progress: Number){
      console.info("queen sdk memuat:", progress);
  },
  RenderCanvas: canvasElement//dapat dikosongkan
  SegmentModel: kQueenModelShapeType.Vertical,//Model gambar vertikal, jika tidak ada skenario bisnis penghapusan gambar, gunakan kQueenModelShapeType.None
  PoseModel: kQueenModelShapeType.None,//Jangan muat model pembentukan tubuh saat inisialisasi
  InferenceBackend: kBackendType.WebGL,//Gunakan backend WebGL untuk inferensi
});

Integrasi Edisi 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(){
 //Callback setelah inisialisasi selesai
}, function(progress){
 //progress: bilah kemajuan pemuatan
}, canvasElement);

Konfigurasikan retouching wajah dasar.

// Aktifkan retouching dasar
queenEngine.setQueenBeautyType(kQueenBeautyType.SkinBuffing, true);
// Atur tingkat penghalusan kulit
queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinBuffing, 0.7);
// Atur tingkat ketajaman gambar
queenEngine.setQueenBeautyParams(kQueenBeautyParams.Sharpen, 0.5);
// Aktifkan pemutihan kulit
queenEngine.setQueenBeautyType(kQueenBeautyType.SkinWhiting, true);
// Atur tingkat pemutihan kulit
queenEngine.setQueenBeautyParams(kQueenBeautyParams.Whitening, 0.6);
// Atur tingkat pipi merona
queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);

Konfigurasikan retouching wajah lanjutan.

//Retouching wajah lanjutan
queenEngine.setQueenBeautyType(kQueenBeautyType.FaceBuffing, true);
// Atur tingkat penghilangan kantung mata
queenEngine.setQueenBeautyParams(kQueenBeautyParams.Pouch, 0.9);
// Atur tingkat penghilangan kerutan nasolabial
queenEngine.setQueenBeautyParams(kQueenBeautyParams.NasolabialFolds, 0.9);
// Atur tingkat pemutihan gigi
queenEngine.setQueenBeautyParams(kQueenBeautyParams.WhiteTeeth, 0.9);
// Atur tingkat lipstik
queenEngine.setQueenBeautyParams(kQueenBeautyParams.Lipstick, 0.2);
// Atur tingkat blush on
queenEngine.setQueenBeautyParams(kQueenBeautyParams.Blush, 0.1);
// Atur hue lipstik
queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickColorParam, 0.1);
// Atur saturasi lipstik
queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickGlossParam, 0.1);
// Atur kecerahan lipstik
queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickBrightnessParam, 0.1);
// Atur tingkat pencerahan mata
queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenEye, 0.9);
// Atur tingkat pipi merona
queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);
// Atur tingkat penghilangan kerutan
queenEngine.setQueenBeautyParams(kQueenBeautyParams.Wrinkles, 0.9);
// Atur tingkat pencerahan kulit
queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenFace, 0.3);

Konfigurasikan pembentukan wajah.

// Aktifkan pembentukan wajah. Parameter pembentukan wajah ditunjukkan oleh kQueenBeautyFaceShapeType
queenEngine.setQueenBeautyType(kQueenBeautyType.FaceShape, true);
// Atur tulang pipi. Nilai valid: [0,1]. Nilai default: 0
queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutCheek, 0.6);
// Atur penyempitan tulang pipi. Nilai valid: [0,1]. Nilai default: 0
queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutFace, 0.7);
// Atur penyusutan wajah. Nilai valid: [0,1]. Nilai default: 0
queenEngine.setFaceShape(kQueenBeautyFaceShapeType.ThinFace, 0.8);
// Atur panjang wajah. Nilai valid: [0,1]. Nilai default: 0
queenEngine.setFaceShape(kQueenBeautyFaceShapeType.LowerJaw, 0.8);
// Atur pemanjangan dagu. Nilai valid: [-1,1]. Nilai default: 0
queenEngine.setFaceShape(kQueenBeautyFaceShapeType.HigherJaw, 0.6); 

Konfigurasikan sumber daya riasan.

• Gunakan sumber daya riasan bawaan dari SDK.

  Saat menggunakan sumber daya bawaan, SDK mengunduh materi retouching dari Alibaba Cloud CDN.

  //Aktifkan makeup
  queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
  //Atur efek alis
  await queenEngine.setMakeupEyeBrow(Assets.kResMakeupEyeBrow.BiaoZhunMei, 0.6);
  //Atur efek bulu mata
  await queenEngine.setMackupEyeLash(Assets.kResMakeupEyeLash.ChenJing, 0.6);
  //Atur efek bayangan mata
  await queenEngine.setMakeupEyeShadow(Assets.kResMakeupEyeShadow.DaDiSe, 0.5);
  //Atur efek eyeliner
  await queenEngine.setMakeupEyeLiner(Assets.kResMakeupEyeLiner.DaYan, 0.4);
  //Atur efek lensa kontak berwarna
  await queenEngine.setMakeupEyeBall(Assets.kResMakeupEyeBall.BiMuYu, 0.5);
  //Atur efek lipstik
  await queenEngine.setMakeupMouth(Assets.kResMakeupMouth.AnYeZi, 0.3);
  //Atur efek blush on
  await queenEngine.setMakeupBlush(Assets.kResMakeupBlush.BlushWuGu, 0.2);
  //Atur efek highlight
  await queenEngine.setMakeupHighlight(Assets.kResMakeupHighLight.Highlight, 0.1);
  //Hapus efek makeup - Hapus lensa kontak berwarna
  queenEngine.removeMakeupWithType(kQueenBeautyMakeupType.Eyeball);
  //Untuk informasi lebih lanjut, lihat file antarmuka QueenEngin.d.ts

• Gunakan sumber daya riasan lokal Anda.

  const makeupPackage = "./mouth.zip"
  const makeupName = "1.2.3.png";
  const band = kQueenBeautyBlend.LabMix;
  // Aktifkan makeup. Parameter makeup ditunjukkan oleh kQueenBeautyMakeupType
  queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
  // Atur transparansi efek lipstik
  queenEngine.setMakeupAlphaWithType(kQueenBeautyMakeupType.Mouth, true, 0.6);
  // Atur efek lipstik
  queenEngine.setMakeupWithPackage(kQueenBeautyMakeupType.Mouth, makeupPackage, makeupName, band).then(() => {
  
  });

Atur filter.

• Gunakan filter bawaan.

  await queenEngine.setLutByType(Assets.kResLut.M1, 0.5);

• Gunakan filter kustom.

  const lutImageUrl = "./lut.png";
  queenEngine.setLutImageUrl(lutImageUrl).then(function () {
    queenEngine.setQueenBeautyType(kQueenBeautyType.LUT, true);
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.LUT, 0.5);
  });

Konfigurasikan stiker.

1. Gunakan stiker bawaan.

   queenEngine.addMaterialWithType(Assets.kResSticker.ILoveChina);
   //atau
   queenEngine.addMaterialWithIndex(0);
   //Atur beberapa stiker secara bersamaan
   queenEngine.addMaterialWithIndexs([0,1]);

2. Gunakan stiker kustom.

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

Konfigurasikan pengaturan matting citra.

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

Konfigurasikan chroma keying layar hijau.

const backgroundUrl = "./bg.png";
const isBlue = false;//Apakah menggunakan layar biru
queenEngine.setGreenScreenWithUrl(isBlue, backgroundUrl).then(() => {
 });

Konfigurasikan pemrosesan latar belakang.

//Kaburkan latar belakang
queenEngine.enableBokehBackground(true);
//Latar belakang transparan
queenEngine.enableTransparentBackground(true);

Render aliran kamera.

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

Terapkan media yang dirender ke kanvas.

Kanvas adalah yang ditentukan saat mesin diinisialisasi.

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

Render aliran video.

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

Render gambar.

fetch(URL Gambar)
.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);
});
});

Render tekstur.

const canvas = document.getElementById("sourceCanvas");
let outTexture = queenEngine.renderMediaObjectToTexture(canvas, canvas.width, canvas.height);
queenEngine.drawOutTexture(outTexture);//Tekstur akan digambar pada kanvas yang dilewatkan selama inisialisasi

Render input tekstur.

let inputTexture = queenEngine.generateTextureId();
queenEngine.updateTexture(inputTexture, imageData);
let outTexture = queenEngine.renderTextureId(inputTexture, width, height);
queenEngine.drawOutTexture(outTexture)//Tekstur akan digambar pada kanvas yang dilewatkan selama inisialisasi

Render aliran pipeline.

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