Web端API说明,有哪些基本概念和术语_视频直播(LIVE)-阿里云帮助中心

美颜特效渲染

基于imageData对象渲染

/**
 * 图片渲染 
 * 返回ImageData对象
 * @param imageData 图片ImageData
 * @param imageWidth 宽
 * @param imageHeight 高
 * @param renderCallback 图片渲染回调
 */
render = function(imageData, imageWidth, imageHeight, renderCallback);

开启摄像头并美颜

 /**
 * 启用摄像头美颜
 * 需要Chrome 94+版本浏览器支持
 * @param constraints 摄像头参数
 * @returns 美颜视频流
 */
openCameraAndRender(constraints?: MediaStreamConstraints): Promise<MediaStream>

直接渲染到Canvas

 /**
 * 美颜渲染媒体对象到RenderCanvas
 * RenderCanvas为初始化时指定的Canvas
 * @param mediaObject 媒体对象 TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 */
renderMediaObjectToRenderCanvas(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): void

基于媒体对象渲染

/**
 * 媒体对象渲染
 * 返回渲染后ImageData对象
 * @param mediaElement 媒体对象 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

基于纹理渲染

/**
 * 基于纹理渲染
 * 输入媒体对象返回纹理对象
 * @param mediaElement 媒体对象 imageElement、videoElement、canvasElement、videoframe、imagebitmap
 * @param width 媒体对像宽度
 * @param height 媒体对像高度
 * @returns 
 */
renderMediaObjectToTexture = function(mediaElement, width, height);

纹理渲染

**
 * 基于纹理ID渲染
 * 输入纹理ID 返回纹理ID
 * @param inTextureId 输入纹理ID
 * @param width 媒体对像宽度
 * @param height 媒体对像高度
 * @returns 
 */
renderTextureId = function(inTextureId, width, height);

基于流渲染

/**
 * 视频流渲染 返回渲染视频流
 * 需要Chrome 94+版本浏览器支持
 * @param inputMediaStream 输入媒体流
 */
renderMediaStream(inputMediaStream: MediaStream): MediaStream 
renderMediaStreamTrack(videoMediaStreamTrack: MediaStreamVideoTrack, width?: number, height?: number): MediaStreamVideoTrack
getTransformStream(): TransformStream;//返回美颜转换流处理器

美颜引擎注销

**
 * 美颜引擎注销
 */
engineDestory = function();

Animoji表情

Animoji初始化

/**
 * Animoji初始化
 * @param animojiUrl animoji资源地址
 * @param width 宽
 * @param height 高
 * @param scale 放大尺寸
 * @returns 
 */
 animojiInit = function (animojiUrl: string, width: number, height: number, scale: number)

Animoji 图片渲染

/**
 * Animoji 图片渲染
 * @param imageData 图片imageData
 * @param imageWidth 宽
 * @param imageHeight 高
 * @param renderCallBack 渲染回调 
 */
 animojiRender = function (imageData: Uint8Array, imageWidth: number, imageHeight: number, renderCallBack: any)

媒体对象Animoji渲染

/**
 * Animoji渲染
 * @param mediaSource 媒体对象 TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param imageWidth 宽
 * @param imageHeight 高
 * @param renderCallBack 渲染回调
 */
animojiRenderWithMediaObject(mediaObject: TexImageSourceWebCodecs | Uint8Array, width: number, height: number, renderCallback: (outImageData: Uint8Array, imageWidth: number, imageHeight: number) => void): void

媒体对象Animoji渲染纹理输出

/**
 * Animoji渲染
 * @param mediaObject 媒体对象 TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param width 宽
 * @param height 高
 * @returns 渲染后纹理对象
 */
animojiRenderMediaObjectToTexture(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): WebGLTexture | null

基于纹理IdAnimoji渲染

/**
 * Animoji渲染
 * @param inTextureId 纹理ID
 * @param width 宽
 * @param height 高
 * @returns 渲染后纹理对象
 */
animojiRenderTextureId(inTextureId: number, width: number, height: number): WebGLTexture | null

Animoji纹理渲染

/**
 * Animoji纹理渲染
 * 返回渲染后纹理
 * @param imageSource 媒体对象 image、video、canvas、videoframe、imagebitmap
 * @param imageWidth 宽
 * @param imageHeight 高
 */
animojirenderMediaObjectToTexture = function (mediaSource: any, imageWidth: number, imageHeight: number)

Animoji大小调整

/**
 * Animoji大小调整
 * @param scale 推荐：0.8~1.5
 */
animojiResize = function (scale: number)

设置Animoji背景模式

/**
* 设置Animoji背景模式
* @param mode 背景模式：0：无，1：摄像头背景 2：指定背景图片
* @param backgroundImgUrl 背景图片，如果mode=2时需要指定
*/
setAnimojiBackgroundWithMode = function (mode, backgroundImgUrl)

Animoji引擎注销

 /**
 * Animoji引擎注销
 */
animojiDestroy = function ()

背景抠图

启用抠图模块需要增加以下依赖：

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

绿幕/蓝幕抠图

/**
 * 绿幕/蓝幕抠图
 * 开启此抠图功能，纯色背景抠图（setPureColorToBackground）会关闭。
 * @param isBlue 绿幕:false，蓝幕:true
 * @param backgroundImgUrl 背景图片Url
	*/
setGreenScreenWithUrl = function (isBlue, backgroundImgUrl)

实景抠图

/**
 * 实景AI抠图
 * @param backgroundImgUrl 背景图片Url
 */
setSegmentBackgroundUrl = function (backgroundImgUrl)

纯色抠图

/**
 * 纯色背景抠图。
 * @param backgroundImgUrl 背景图片Url
 */
setPureColorBackgroundUrl = function (backgroundImgUrl)

参数配置

配置美颜类型

 /**
 * 配置美颜类型
 * @param type kQueenBeautyType枚举
 * @param enable 是否启用
 */
 setQueenBeautyType = function (type: number, enable: boolean)

配置美颜参数值

/**
 * 参数类型
 * @param param kQueenBeautyParams检举
 * @param value 参数值
 */
setQueenBeautyParams = function (param: number, value: number);

配置LUT滤镜

 /**
 * 使用内置Lut滤镜
 * @param lutType Assets.kResLut枚举
 * @returns 
 */
setLutByType(lutType: Assets.kResLut): Promise<void>
 
/**
 * 设置Lut滤镜
 * @param imageUrl 所要设置的滤镜图片Url
 * @returns 
 */
setLutImageUrl(imageUrl: string): Promise<void>

设置美型类型

/**
* @brief 设置美型类型,设置前需要将kQueenBeautyType.FaceShape打开
* @param faceShapeType 需要设置美型的类型，参考QueenBeautyFaceShapeType
* @param value 需要设置的值
*/
setFaceShape = function (faceShapeType: number, value: number)

美妆API

使用内置资源进行美妆。

/**
 * 设置美妆眉毛
 * @param eyeBrowType 眉毛类型,kResMakeupEyeBrow枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupEyeBrow(eyeBrowType: Assets.kResMakeupEyeBrow, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆睫毛
 * @param eyelashType 睫毛类型,kResMakeupEyeLash枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMackupEyeLash(eyelashType: Assets.kResMakeupEyeLash, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆眼影
 * @param eyeShadowType 眼影类型,kResMakeupEyeShadow
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupEyeShadow(eyeShadowType: Assets.kResMakeupEyeShadow, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆眼线
 * @param eyeLinerType 眼线类型,kResMakeupEyeLiner检举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupEyeLiner(eyeLinerType: Assets.kResMakeupEyeLiner, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆美瞳
 * @param eyeballType 美瞳类型,kResMakeupEyeBall枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupEyeBall(eyeballType: Assets.kResMakeupEyeBall, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆口红
 * @param mouthType 口红类型,kResMakeupMouth枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupMouth(mouthType: Assets.kResMakeupMouth, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆整妆
 * @param wholeType 美妆整妆类型 Assets.kResMakeupWhole枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupWhole(wholeType: Assets.kResMakeupWhole, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆腮红
 * @param blushType 腮红类型,kResMakeupBlush检举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举 
 * @returns 
 */
setMakeupBlush(blushType: Assets.kResMakeupBlush, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆高光
 * @param highlightType 高光类型kResMakeupHighLight枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举 
 * @returns 
 */
setMakeupHighlight(highlightType: Assets.kResMakeupHighLight, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

设置美妆类型和图片素材路径

/**
* @brief 设置美妆类型和图片素材路径，设置美妆需要将kQueenBeautyType.Makeup 打开
* @param makeupType 美妆类型
* @param imageUrl 美妆素材地址，一般为zip包
* @param blend 混合类型
*/
setMakeupWithUrl = function (makeupType: number, imageUrl: string, blend: number)

设置美妆类型和图片素材路径

/**
* @brief 设置美妆类型和图片素材路径，设置美妆需要将kQueenBeautyType.Makeup 打开
* @param makeupType 美妆类型
* @param packageUrl 资源压缩包url
* @param imageName 包内图片名称
* @param blend 混合类型
*/
setMakeupWithPackage = function (makeupType: number, packageUrl: string, imageName: string, blend: number);

/**
* @brief 设置美妆类型和图片素材路径，设置美妆需要将kQueenBeautyType.Makeup 打开
* @param makeupType 美妆类型
* @param imagePaths 美妆素材地址集合
* @param blend 混合类型
*/
setMakeupWithType = function (makeupType: number, imagePaths: string, blend: number)

/**
* @brief 设置美妆类型和图片素材路径
* @param makeupType 美妆类型
* @param imagePaths 美妆素材地址集合（多个资源则,号分开）
* @param blend 混合类型
* @param fps 对应的帧率
*/
setMakeupWithTypeFps = function (makeupType: number, imagePaths: string, blend: number, fps: number)

设置美妆透明度

 /**
* @brief 设置女性美妆透明度，可指定性别
* @param makeupType 美妆类型
* @param alpha 妆容透明度
*/
setMakeupFemaleAlpha = function (makeupType: number, alpha: number)

/**
* @brief 设置男性美妆透明度，可指定性别
* @param makeupType 美妆类型
* @param alpha 妆容透明度
*/
setMakeupMaleAlpha = function (makeupType: number, alpha: number)

/**
* @brief 设置美妆透明度，可指定性别
* @param makeupType 美妆类型
* @param isFeMale 是否是女性，女性:true，男性:false，（男性为接口预留，这里均传女性即true即可）
* @param alpha 妆容透明度
*/
setMakeupAlphaWithType = function (makeupType: number, isFeMale: boolean, alpha: number)

设置美妆类型的混合类型

 /**
 * @brief 设置美妆类型的混合类型
 * @param makeupType 美妆类型
 * @param blend 混合类型
 */
 setMakeupBlendWithType = function (makeupType: number, blend: number)

清除所有美妆

 /**
 * @brief 清除所有美妆
 */
 resetAllMakeupType = function ()

贴纸API

增加贴纸

/**
* @brief 增加贴纸/贴图/实景抠图需要替换的背景，素材统一接口，支持GLTF,TAOPAI,MEDIAAI 类型
* @param materialZipUrl 要添加的素材的Url
*/
addMaterialWithUrl = function (materialZipUrl: string)

移除贴纸

 /**
 * @brief 删除贴纸/贴图/实景抠图需要替换的背景
 * @param materialZipUrl 要删除的素材的URL
 */
removeMaterialWithUrl = function (materialZipUrl: string)

AR隔空写字

装载AR隔空写字模块

 /**
 * 初始化AR写字模块
 * @returns 
 */
initArWriteResource(): Promise<boolean>

开启Ar写字

 /**
 * 开启Ar写字
 * @param enable true： 开启
 * @param mode 1: 写字, 2: 画画。
 */
setArWriting(enable: boolean, mode: number): void

清除AR写字痕迹

/**
 * 清除AR写字痕迹
 */
cleanScreenArWriting(): void

人脸识别功能调试

展示人脸识别点位

 /**
 * @brief 展示人脸识别点位
 * @param show 是否展示
 */
 showFaceDetectPoint = function (show: boolean)

展示人脸区域三角剖分线

/**
 * @brief 展示人脸区域三角剖分线
 * @param show 是否展示
 */
 showMakeupLine = function (show: boolean)

资源载入

参数配置中所有的URL均需要转成PATH才能正常使用，需要通过下面的API将URL资源文件载入到Queen引擎中生成PATH。

通过URL载入资源

 /** 
 * 载入URL资源到引擎
 * @param url URL链接
 * @param needUnZip 是否需要解压
 * @returns 
 */
loadResourceFileWithUrl = function (url: string, needUnZip: boolean)

 /** 
 * 载入URL资源到引擎
 * @param url URL链接
 * @param saveFileName 保存文件名
 * @param needUnZip 是否需要解压
 * @returns 
 */
loadResourceFileWithUrlSaveAs = function (url: string, saveFileName:string, needUnZip: boolean) {

通过buffer写入

/**
 * 通过buffer写入资源
 * @param buffer arrayBuffer数据
 * @param saveFileName 保存文件名
 * @param needUnZip 是否需要解压
 * @param loadCallback 成功回调
 * @returns 
 */
loadResourceFileWithData = function(buffer: ArrayBuffer, saveFileName: string, needUnZip: boolean);

文件检查

/**
* 验证资源文件是否存在
* @param fullFileName 完整的路径文件名
* @returns 
*/
checkResourceFile(fullFileName: string)