Terapkan Efek AR dan Rendering melalui Live SDK - ApsaraVideo Live

Render retouching effects

Lakukan rendering gambar

/**
 * Perform image rendering. 
 * The imageData object is returned.
 * @param imageData Data citra.
 * @param imageWidth Lebar citra.
 * @param imageHeight Tinggi citra.
 * @param renderCallback Callback untuk rendering gambar.
 */
render = function(imageData, imageWidth, imageHeight, renderCallback);

Aktifkan kamera dan lakukan retouching

 /**
 * Enable retouching for the camera stream.
 * Chrome 94 or later is required.
 * @param constraints Parameter kamera.
 * @returns Aliran kamera yang telah diretouch.
 */
openCameraAndRender(constraints?: MediaStreamConstraints): Promise<MediaStream>

Render media ke canvas

 /**
 * Render the retouched media object to renderCanvas.
 * RenderCanvas is the canvas that was specified during initialization.
 * @param mediaObject Objek media TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 */
renderMediaObjectToRenderCanvas(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): void

Lakukan rendering berdasarkan objek media

/**
 * Render the media object.
 * Return the rendered ImageData object.
 * @param mediaElement Objek media TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param width 
 * @param height 
 * @param renderCallback 
 */
renderWithMediaObject(mediaObject: TexImageSourceWebCodecs | Uint8Array, width: number, height: number, renderCallback: (outImageData: Uint8Array, imageWidth: number, imageHeight: number) => void): void

Lakukan rendering tekstur

/**
 * Perform texture rendering.
 * Import the media object. The texture object is returned.
 * @param mediaElement Objek media, seperti imageElement, videoElement, canvasElement, videoframe, atau imagebitmap.
 * @param width Lebar objek media.
 * @param height Tinggi objek media.
 * @returns 
 */
renderMediaObjectToTexture = function(mediaElement, width, height);

Render tekstur

/**
 * Render a texture based on the texture ID.
 * Enter a texture ID. The texture ID is returned.
 * @param inTextureId ID tekstur.
 * @param width Lebar objek media.
 * @param height Tinggi objek media.
 * @returns 
 */
renderTextureId = function(inTextureId, width, height);

Lakukan rendering berdasarkan aliran

/**
 * Render the video stream. The rendered video stream is returned.
 * Chrome 94 or later is required.
 * @param inputMediaStream Aliran media input.
 */
renderMediaStream(inputMediaStream: MediaStream): MediaStream 
renderMediaStreamTrack(videoMediaStreamTrack: MediaStreamVideoTrack, width?: number, height?: number): MediaStreamVideoTrack
getTransformStream(): TransformStream;// Return the stream retouching processor.

Hancurkan engine

/**
 * Destroy the engine.
 */
engineDestory = function();

Konfigurasi animoji

Inisialisasi animoji

/**
 * Initialize an animoji.
 * @param animojiUrl URL resource animoji.
 * @param width Lebar.
 * @param height Tinggi.
 * @param scale Ukuran penskalaan.
 * @returns 
 */
 animojiInit = function (animojiUrl: string, width: number, height: number, scale: number)

Lakukan rendering gambar untuk animoji

/**
 * Perform image rendering for an animoji.
 * @param imageData Data citra.
 * @param imageWidth Lebar objek media.
 * @param imageHeight Tinggi objek media.
 * @param renderCallBack Callback untuk rendering. 
 */
 animojiRender = function (imageData: Uint8Array, imageWidth: number, imageHeight: number, renderCallBack: any)

Render objek media Animoji

/**
 * Render the Animoji.
 * @param mediaSource Objek media TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param imageWidth Lebar objek media.
 * @param imageHeight Tinggi objek media.
 * @param renderCallBack Callback untuk rendering.
 */
animojiRenderWithMediaObject(mediaObject: TexImageSourceWebCodecs | Uint8Array, width: number, height: number, renderCallback: (outImageData: Uint8Array, imageWidth: number, imageHeight: number) => void): void

Render objek media Animoji dan kembalikan output tekstur

/**
 * Render the Animoji.
 * @param mediaObject Objek media TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param width Lebar.
 * @param height Tinggi.
 * @returns Objek tekstur yang telah dirender.
 */
animojiRenderMediaObjectToTexture(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): WebGLTexture | null

Render Animoji berdasarkan ID tekstur

/**
 * Render the Animoji.
 * @param inTextureId ID tekstur.
 * @param width Lebar.
 * @param height Tinggi.
 * @returns Objek tekstur yang telah dirender.
 */
animojiRenderTextureId(inTextureId: number, width: number, height: number): WebGLTexture | null

Lakukan rendering tekstur untuk animoji

/**
 * Perform texture rendering for an animoji.
 * The rendered textures are returned.
 * @param imageSource Objek media, seperti citra, video, canvas, videoframe, atau imagebitmap.
 * @param imageWidth Lebar objek media.
 * @param imageHeight Tinggi objek media.
 */
animojirenderMediaObjectToTexture = function (mediaSource: any, imageWidth: number, imageHeight: number)

Ubah ukuran animoji

/**
 * Resize an animoji.
 * @param scale Ukuran penskalaan. Nilai yang disarankan: 0,8 hingga 1,5.
 */
animojiResize = function (scale: number)

Atur mode latar belakang untuk animoji

/**
* Set the background mode for an animoji.
* @param mode Mode latar belakang. Nilai 0 berarti tanpa latar belakang. Nilai 1 berarti video dari kamera digunakan sebagai latar belakang. Nilai 2 berarti citra digunakan sebagai latar belakang.
* @param backgroundImgUrl URL citra latar belakang. Parameter ini wajib jika parameter mode diatur ke 2.
*/
setAnimojiBackgroundWithMode = function (mode, backgroundImgUrl)

Hancurkan engine animoji

 /**
 * Destroy the animoji engine.
 */
animojiDestroy = function ()

Konfigurasi image matting

Untuk mengaktifkan modul chroma key, tambahkan dependensi berikut:

$ npm add @tensorflow/tfjs
$ npm add @tensorflow/tfjs-backend-webgl
$ npm add @tensorflow/tfjs-backend-webgpu

Konfigurasi image matting layar hijau atau layar biru

/**
 * Configure green-screen or blue-screen image matting.
 * If you enable green-screen or blue-screen image matting, pure-color image matting is disabled. 
 * @param isBlue Menentukan apakah menggunakan layar biru. Nilai true berarti menggunakan layar biru. Nilai false berarti menggunakan layar hijau.
 * @param backgroundImgUrl URL citra latar belakang.
	*/
setGreenScreenWithUrl = function (isBlue, backgroundImgUrl)

Konfigurasi penggantian latar belakang

/**
 * Configure AI-based background replacement.
 * @param backgroundImgUrl URL citra latar belakang.
 */
setSegmentBackgroundUrl = function (backgroundImgUrl)

Konfigurasi image matting warna murni

/**
 * Configure pure-color image matting. 
 * @param backgroundImgUrl URL citra latar belakang.
 */
setPureColorBackgroundUrl = function (backgroundImgUrl)

Parameter

Konfigurasi efek retouching

 /**
 * Configure retouching effects.
 * @param type Efek retouching, yaitu nilai parameter kQueenBeautyType.
 * @param enable Menentukan apakah efek retouching diaktifkan.
 */
 setQueenBeautyType = function (type: number, enable: boolean)

Tentukan parameter retouching

/**
 * Specify retouching parameters.
 * @param param Parameter retouching, yaitu nilai parameter kQueenBeautyParams.
 * @param value Nilai parameter.
 */
setQueenBeautyParams = function (param: number, value: number);

Konfigurasi filter LUT

 /**
 * Use a built-in LUT filter.
 * @param lutType Filter LUT, yang dienumerasi oleh Assets.kResLut.
 * @returns 
 */
setLutByType(lutType: Assets.kResLut): Promise<void>
 
/**
 * Specify a LUT filter.
 * @param imageUrl URL filter yang ingin ditentukan.
 * @returns 
 */
setLutImageUrl(imageUrl: string): Promise<void>

Konfigurasi efek pembentukan wajah

/**
* @brief Specify a face shaping effect. Before you specify the face shaping effect, specify the kQueenBeautyType.FaceShape parameter to enable face shaping.
* @param faceShapeType Efek pembentukan wajah. Parameter ini mirip dengan parameter QueenBeautyFaceShapeType.
* @param value Nilai parameter.
*/
setFaceShape = function (faceShapeType: number, value: number)

Konfigurasi makeup

Gunakan resource makeup bawaan

/**
 * Set the eyebrow effect.
 * @param eyeBrowType Jenis alis, yang dienumerasi oleh kResMakeupEyeBrow.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend.
 * @returns 
 */
setMakeupEyeBrow(eyeBrowType: Assets.kResMakeupEyeBrow, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * Set the eyelash effect.
 * @param eyelashType Jenis bulu mata, yang dienumerasi oleh kResMakeupEyeLash.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend.
 * @returns 
 */
setMackupEyeLash(eyelashType: Assets.kResMakeupEyeLash, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * Set the eye shadow effect.
 * @param eyeShadowType Jenis eyeshadow, yang dienumerasi oleh kResMakeupEyeShadow.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend.
 * @returns 
 */
setMakeupEyeShadow(eyeShadowType: Assets.kResMakeupEyeShadow, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * Set the eyeliner effect.
 * @param eyeLinerType Jenis eyeliner, yang dienumerasi oleh kResMakeupEyeLiner.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend.
 * @returns 
 */
setMakeupEyeLiner(eyeLinerType: Assets.kResMakeupEyeLiner, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * Set the colored eye contacts effect.
 * @param eyeballType Jenis lensa kontak berwarna, yang dienumerasi oleh kResMakeupEyeBall.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend.
 * @returns 
 */
setMakeupEyeBall(eyeballType: Assets.kResMakeupEyeBall, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * Set the lipstick effect.
 * @param mouthType Jenis lipstik, yang dienumerasi oleh kResMakeupMouth.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend.
 * @returns 
 */
setMakeupMouth(mouthType: Assets.kResMakeupMouth, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * Set full face makeup.
 * @param wholeType Jenis makeup wajah penuh, yang dienumerasi oleh Assets.kResMakeupWhole.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend.
 * @returns 
 */
setMakeupWhole(wholeType: Assets.kResMakeupWhole, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * Set the blush effect.
 * @param blushType Jenis blush, yang dienumerasi oleh kResMakeupBlush.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend. 
 * @returns 
 */
setMakeupBlush(blushType: Assets.kResMakeupBlush, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * Set the highlight effect.
 * @param highlightType Jenis highlight, yang dienumerasi oleh kResMakeupHighLight.
 * @alpha Transparansi.
 * @param blend Jenis pencampuran, yang dienumerasi oleh kQueenBeautyBlend. 
 * @returns 
 */
setMakeupHighlight(highlightType: Assets.kResMakeupHighLight, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

Tentukan jenis makeup dan jalur material makeup

/**
* @brief Specify a makeup type and the paths of makeup materials. Before you specify the makeup type, specify the kQueenBeautyType.Makeup parameter to enable makeup.
* @param makeupType Jenis makeup.
* @param imageUrl URL material makeup, yang mengarah ke paket ZIP.
* @param blend Jenis pencampuran makeup.
*/
setMakeupWithUrl = function (makeupType: number, imageUrl: string, blend: number)

Tentukan jenis makeup dan jalur material makeup

/**
* @brief Specify a makeup type and the paths of makeup materials. Before you specify the makeup type, specify the kQueenBeautyType.Makeup parameter to enable makeup.
* @param makeupType Jenis makeup.
* @param packageUrl URL paket resource.
* @param imageName Nama citra dalam paket.
* @param blend Jenis pencampuran makeup.
*/
setMakeupWithPackage = function (makeupType: number, packageUrl: string, imageName: string, blend: number);

/**
* @brief Specify a makeup type and the paths of makeup materials.
* @param makeupType Jenis makeup.
* @param imagePaths Jalur material makeup.
* @param blend Jenis pencampuran makeup.
*/
setMakeupWithType = function (makeupType: number, imagePaths: string, blend: number)

/**
* @brief Specify a makeup type and the paths of makeup materials.
* @param makeupType Jenis makeup.
* @param imagePaths Jalur material makeup. Pisahkan beberapa jalur dengan koma (,).
* @param blend Jenis pencampuran makeup.
* @param fps Laju frame.
*/
setMakeupWithTypeFps = function (makeupType: number, imagePaths: string, blend: number, fps: number)

Konfigurasi transparansi makeup

 /**
* @brief Set the transparency for a makeup type for female.
* @param makeupType Jenis makeup.
* @param alpha Transparansi untuk jenis makeup tersebut.
*/
setMakeupFemaleAlpha = function (makeupType: number, alpha: number)

/**
* @brief Set the transparency for a makeup type for male.
* @param makeupType Jenis makeup.
* @param alpha Transparansi untuk jenis makeup tersebut.
*/
setMakeupMaleAlpha = function (makeupType: number, alpha: number)

/**
* @brief Set the transparency for a makeup type. You can specify the gender.
* @param makeupType Jenis makeup.
* @param isFeMale Menentukan apakah jenis kelamin perempuan. Nilai true berarti perempuan. Nilai false berarti laki-laki. Makeup laki-laki disediakan untuk penggunaan mendatang. Atur nilainya ke true.
* @param alpha Transparansi untuk jenis makeup tersebut.
*/
setMakeupAlphaWithType = function (makeupType: number, isFeMale: boolean, alpha: number)

Konfigurasi pencampuran makeup

 /**
 * @brief Specify the type of mixed makeup.
 * @param makeupType Jenis makeup.
 * @param blend Jenis pencampuran makeup.
 */
 setMakeupBlendWithType = function (makeupType: number, blend: number)

Hapus makeup

 /**
 * @brief Clear all makeup effects.
 */
 resetAllMakeupType = function ()

Konfigurasi stiker

Tambahkan stiker

/**
* @brief Add a material, such as a sticker, texture, or background image. Supported formats include glTF, TAOPAI, and mediaAI.
* @param materialZipUrl URL material yang ingin ditambahkan.
*/
addMaterialWithUrl = function (materialZipUrl: string)

Hapus stiker

 /**
 * @brief Remove a material, such as a sticker, texture, or background image.
 * @param materialZipUrl URL material yang ingin dihapus.
 */
removeMaterialWithUrl = function (materialZipUrl: string)

Penulisan augmented reality (AR)

Muat modul penulisan AR

 /**
 * Initialize the AR writing module.
 * @returns 
 */
initArWriteResource(): Promise<boolean>

Aktifkan penulisan AR

 /**
 * Enable AR writing.
 * @param enable Menentukan apakah penulisan AR diaktifkan. Nilai true mengaktifkan penulisan AR.
 * @param mode Mode penulisan AR. Nilai yang valid: 1 (menulis) dan 2 (menggambar). 
 */
setArWriting(enable: boolean, mode: number): void

Hapus jejak penulisan AR

/**
 * Clear AR writing traces.
 */
cleanScreenArWriting(): void

Debug fitur pengenalan wajah

Tampilkan titik-titik kunci wajah

 /**
 * @brief Show facial keypoints.
 * @param show Menentukan apakah triangulasi wajah ditampilkan.
 */
 showFaceDetectPoint = function (show: boolean)

Tampilkan triangulasi wajah

/**
 * @brief Show face triangulation.
 * @param show Menentukan apakah triangulasi wajah ditampilkan.
 */
 showMakeupLine = function (show: boolean)

Memuat sumber daya

Semua URL harus dikonversi menjadi string jalur sebelum digunakan. Anda dapat memanggil metode berikut untuk memuat URL resource ke engine SDK Queen guna menghasilkan string jalur.

Muat resource dari URL

 /** 
 * Load resource URLs to the engine.
 * @param url URL.
 * @param needUnZip Menentukan apakah diperlukan dekompresi.
 * @returns 
 */
loadResourceFileWithUrl = function (url: string, needUnZip: boolean)

 /** 
 * Load resource URLs to the engine.
 * @param url URL.
 * @param saveFileName Nama file yang disimpan.
 * @param needUnZip Menentukan apakah diperlukan dekompresi.
 * @returns 
 */
loadResourceFileWithUrlSaveAs = function (url: string, saveFileName:string, needUnZip: boolean) {

Muat resource menggunakan buffer

/**
 * Load resources by using the buffer.
 * @param buffer Data arrayBuffer.
 * @param saveFileName Nama file yang disimpan.
 * @param needUnZip Menentukan apakah diperlukan dekompresi.
 * @param loadCallback Callback saat berhasil.
 * @returns 
 */
loadResourceFileWithData = function(buffer: ArrayBuffer, saveFileName: string, needUnZip: boolean);

Periksa file

/**
* Check whether the resource file exists.
* @param fullFileName Nama file yang mencakup jalur lengkap.
* @returns 
*/
checkResourceFile(fullFileName: string)