TXVideoEffectManager - 腾讯云 TXLivePusher SDK

Methods

enableMixing(enabled)

开启本地视频画面混流功能。

说明：

启用本地混流功能之前，预览和推送的流都是原始采集的流，启用之后，预览和推送的流都是经过浏览器本地混流处理之后的流，会有一定的浏览器性能开销。
在调用 TXVideoEffectManager 其他方法前必须先调用该接口启用本地混流功能。
没启用本地混流功能时，只能采集一路视频流和一路音频流。
启用本地混流功能成功后，可以采集多路流，比如执行两个 startCamera 采集两个不同的摄像头画面，或者先执行 startCamera 采集摄像头画面，再执行 startScreenCapture 采集屏幕画面。采集的多路流的画面和声音都会出现在最终的混流输出结果中。

Example

// enable
videoEffectManager.enableMixing(true);
// disable
videoEffectManager.enableMixing(false);

Parameters:

Name	Type	Description
`enabled`	boolean	是否开启本地混流功能，默认关闭。

setMixingConfig(config)

设置混流参数。不调用该接口进行设置时，默认混流参数直接使用 TXLivePusher 中方法 setVideoQuality() 和 setProperty() 设置之后的结果。

Example

videoEffectManager.setMixingConfig({
  videoWidth: 1280,
  videoHeight: 720,
  videoFramerate: 15,
  backgroundColor: 0x000000
});

Parameters:

Name	Type	Description
`config`	TXVideoEffectManager~TXMixingConfig	混流参数配置，数据结构请参考 TXMixingConfig 。

getMixingConfig() → {TXVideoEffectManager~TXMixingConfig}

获取最终采用的混流参数，优先使用 setMixingConfig() 设置的结果，其次使用 TXLivePusher 中方法 setVideoQuality() 和 setProperty() 设置之后的结果。

Example

const mixingConfig = videoEffectManager.getMixingConfig();
console.log('videoWidth: ', mixingConfig.videoWidth);
console.log('videoHeight: ', mixingConfig.videoHeight);
console.log('videoFramerate: ', mixingConfig.videoFramerate);
console.log('backgroundColor: ', mixingConfig.backgroundColor);

Returns:

混流参数配置，数据结构请参考 TXMixingConfig 。

Type: TXVideoEffectManager~TXMixingConfig

setLayout(config)

设置视频流的画中画布局参数。

说明：

开启本地混流之后，所有采集的流都会自动添加到最终输出的视频流当中，默认的布局参数是保证视频流画面紧贴左上角原点出现。
配置参数可以传对象数组，批量设置多个流的画中画布局效果，也可以只传对象单独设置指定的流。
如果不想显示采集流的画面，只想保留声音，可以将布局宽度和高度设置为 0 。

Example

// stream id - xxxxxx
videoEffectManager.setLayout({
  streamId: 'xxxxxx',
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  zOrder: 1
});

Parameters:

Name	Type	Description
`config`	TXVideoEffectManager~TXLayoutConfig \| Array.<TXVideoEffectManager~TXLayoutConfig>	画中画布局配置，支持传对象或者对象数组，数据结构请参考 TXLayoutConfig 。

getLayout(streamId) → {TXVideoEffectManager~TXLayoutConfig|null}

获取指定流的画中画布局参数。

Example

// stream id - xxxxxx
const layoutConfig = videoEffectManager.getLayout('xxxxxx');
if (layoutConfig) {
  console.log('width: ', layoutConfig.width);
  console.log('height: ', layoutConfig.height);
  console.log('position x: ', layoutConfig.x);
  console.log('position y: ', layoutConfig.y);
  console.log('zOrder: ', layoutConfig.zOrder);
}

Parameters:

Name	Type	Description
`streamId`	string	流 id，指定要获取画中画布局参数的流。

Returns:

返回指定流的画中画布局参数，如果流不存在，返回 null 。

Type: TXVideoEffectManager~TXLayoutConfig | null

setMirror(config)

设置视频流的镜像效果，包括左右镜像和上下镜像。

说明：

配置参数可以传对象数组，批量设置多个流的镜像效果，也可以只传对象单独设置指定的流。

Example

// stream id - xxxxxx
videoEffectManager.setMirror({
  streamId: 'xxxxxx',
  mirrorType: 1
});

Parameters:

Name	Type	Description
`config`	TXVideoEffectManager~TXMirrorConfig \| Array.<TXVideoEffectManager~TXMirrorConfig>	镜像效果配置，支持传对象或者对象数组，数据结构请参考 TXMirrorConfig 。

setNormalFilter(config)

设置视频流的普通滤镜效果，包括对比度、亮度和饱和度。

说明：

配置参数可以传对象数组，批量设置多个流的普通滤镜效果，也可以只传对象单独设置指定的流。

Example

// stream id - xxxxxx
videoEffectManager.setNormalFilter({
  streamId: 'xxxxxx',
  contrast: 50,
  brightness: 50,
  saturation: 50
});

Parameters:

Name	Type	Description
`config`	TXVideoEffectManager~TXNormalFilterConfig \| Array.<TXVideoEffectManager~TXNormalFilterConfig>	普通滤镜效果配置，支持传对象或者对象数组，数据结构请参考 TXNormalFilterConfig 。

setWatermark(config)

设置水印，支持同时设置多个水印。

说明：

配置参数可以传对象数组，同时设置多个水印，也可以只传对象单独设置一个水印。
配置参数传 null 或者空数组表示删除已有水印。

Example

const image = new Image();
// image - red dot
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbybl'
  + 'AAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

// add watermark
videoEffectManager.setWatermark({
  image: image,
  x: 10,
  y: 10,
  width: 20,
  height: 20,
  zOrder: 5
});

// remove watermark
videoEffectManager.setWatermark(null);

Parameters:

Name	Type	Description
`config`	TXVideoEffectManager~TXWatermarkConfig \| Array.<TXVideoEffectManager~TXWatermarkConfig> \| null	水印配置参数，支持传对象、对象数组或者 null ，数据结构请参考 TXWatermarkConfig 。

setText(config)

设置文本，支持同时设置多个文本。

说明：

配置参数可以传对象数组，同时设置多个文本，也可以只传对象单独设置一个文本。
配置参数传 null 或者空数组表示删除已有文本。

Example

// add text
videoEffectManager.setText({
  text: 'Hello World',
  style: {
    font: 'Helvetica',
    font_size: 50,
    font_color: "#00fa8e",
    font_alpha: 100,
    bold: 1,
    italic: 1,
    shadow_color: "#1f095d",
    shadow_alpha: 80,
    stroke_color: "#01aef9",
    stroke_thickness: 2,
    background_color: "#fae500",
    background_alpha: 30
  },
  x: 640,
  y: 360,
  zOrder: 5
});

// remove text
videoEffectManager.setText(null);

Parameters:

Name	Type	Description
`config`	TXVideoEffectManager~TXTextConfig \| Array.<TXVideoEffectManager~TXTextConfig> \| null	文本配置参数，支持传对象、对象数组或者 null ，数据结构请参考 TXTextConfig 。

Type Definitions

TXMixingConfig

Properties:

Name	Type	Description
`videoWidth`	number	最终混流后的视频宽度。
`videoHeight`	number	最终混流后的视频高度。
`videoFramerate`	number	最终混流后的视频帧率。
`backgroundColor`	number	混合后画面的底色颜色，格式为十六进制数字，默认黑色，即 0x000000 。

混流参数配置。具体使用请参考 setMixingConfig() 和 getMixingConfig() 。

Type:

object

TXLayoutConfig

Properties:

Name	Type	Description
`streamId`	string	流 id，指定要设置的流。
`x`	number	布局 x 坐标。
`y`	number	布局 y 坐标。
`width`	number	布局宽度。
`height`	number	布局高度。
`zOrder`	number	布局层级。

画中画布局参数。具体使用请参考 setLayout() 。

说明：

以左上⻆为原点 (0, 0)，元素的坐标属性描述元素中心点。例如一个分辨率为 100*100 的视频流紧贴原点完整出现在最终生成视频流中，那么它的 x 、 y 坐标都是50。
zOrder 值越大，视频流会出现在越上方，覆盖其他视频流画面。

Type:

object

TXMirrorConfig

Properties:

Name	Type	Description
`streamId`	string	流 id，指定要设置的流。
`mirrorType`	number	镜像类型：0 - 无镜像效果，1 - 左右镜像，2 - 上下镜像，3 - 左右+上下镜像。

镜像参数。具体使用请参考 setMirror() 。

Type:

object

TXNormalFilterConfig

Properties:

Name	Type	Description
`streamId`	string	流 id，指定要设置的流。
`contrast`	number	对比度，取值范围 [-100, 100]，0 表示不处理。
`brightness`	number	亮度，取值范围 [-100, 100]，0 表示不处理。
`saturation`	number	饱和度，取值范围 [-100, 100]，0 表示不处理。

普通滤镜参数。具体使用请参考 setNormalFilter() 。

Type:

object

TXWatermarkConfig

Properties:

Name	Type	Description
`image`	HTMLImageElement	水印图片对象。
`x`	number	水印 x 坐标。
`y`	number	水印 y 坐标。
`width`	number	水印宽度。
`height`	number	水印高度。
`zOrder`	number	水印层级。

水印配置参数。具体使用请参考 setWatermark() 。

说明：

以左上⻆为原点 (0, 0)，元素的坐标属性描述元素中心点。例如一个分辨率为 100*100 的水印图片紧贴原点完整出现在最终生成视频流中，那么它的 x 、 y 坐标都是50。
zOrder 值越大，水印图片会出现在越上方，覆盖其他视频流画面。

Type:

object

TXTextConfig

Properties:

Name Type Description

text

string

文本内容，不能为空字符串。

style

object

文本样式，可以参考对应的 css 样式设置。

Properties

Name	Type	Attributes	Description
`font`	string	<optional>	字体名。
`font_size`	number	<optional>	字体大小。
`font_color`	string	<optional>	字体颜色，十六进制表示，例如 #000000 。
`font_alpha`	number	<optional>	字体透明度，范围 [0, 100]，默认 100（不透明）。
`bold`	number	<optional>	字体加粗，0 - 不加粗，1 - 加粗，默认 0 。
`italic`	number	<optional>	字体倾斜，0 - 正常，1 - 斜体，默认 0 。
`shadow_color`	string	<optional>	文字阴影颜色，十六进制表示，例如 #000000 。
`shadow_alpha`	number	<optional>	文字阴影透明度，范围 [0, 100]，shadow_color 存在时有效，默认 100（不透明）。
`stroke_color`	string	<optional>	文字描边颜色，十六进制表示，例如 #000000 。
`stroke_thickness`	number	<optional>	文字描边粗细，默认 0，即没有描边。
`background_color`	string	<optional>	背景颜色，十六进制表示，例如 #000000 。
`background_alpha`	number	<optional>	背景透明度，范围 [0, 100]，background_color 存在时有效，默认 100（不透明）。

x

number

文本 x 坐标。

y

number

文本 y 坐标。

zOrder

number

文本层级。

文本配置参数。具体使用请参考 setText() 。

说明：

以左上⻆为原点 (0, 0)，元素的坐标属性描述元素中心点。假设文本的最终宽度是 100px，高度是 50px，如果文本要紧贴原点出现在最终生成视频流中的话，它的 x 坐标是 50， y 坐标是 25。
zOrder 值越大，文本会出现在越上方，覆盖其他视频流画面。

Type:

object