当前推流SDK为内测版本为准发布多路流画面

说明：

目前推送SDK为内测版，相关计费规则以后续发布的正式版为准。

SDK提供视频流图像处理功能，包括多路视频流混合（画中画）、图像效果处理（镜像、滤镜）和其他元素的添加（水印、文字）。基本步骤如下：SDK先采集多条码流，然后对多条码流进行局部混合处理，合并图像，混合声音，最后进行其他效果处理。这些都依赖于浏览器自身功能的支持，所以对浏览器的性能有一定的要求。具体接口协议请参考TXVideoEffectManager。下面简单介绍一下局部混合的基本用法。

基本用法

要使用本地推流功能，需要完成SDK的初始化并获取SDK实例livePusher。初始化代码请参考。

第一步：获取视频效果管理实例

var videoEffectManager = livePusher.getVideoEffectManager();

第 2 步：启用本地复用

首先，您需要启用本地复用功能。默认情况下，SDK 只支持采集 1 个视频流和 1 个音频流。启用后视频直播sdk，可以捕获多个流，这些流将在浏览器本地混合。

videoEffectManager.enableMixing(true);

第三步：设置混合参数

设置混合参数，主要是设置最终混合后生成的视频的分辨率和帧率。

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

第 4 步：捕获多个流

开启本地复用后，开始采集多路流，例如先打开摄像头，再进行屏幕共享。注意流ID是保存的，后续操作需要用到流ID。

var cameraStreamId = null;
var screenStreamId = null;
livePusher.startCamera().then((streamId) => {
    cameraStreamId = streamId;
}).catch((error) => {
    console.log('打开摄像头失败：'+ error.toString());
});
livePusher.startScreenCapture().then((streamId) => {
    screenStreamId = streamId;
}).catch((error) => {
    console.log('屏幕分享失败：'+ error.toString());
});

第五步：设置屏幕布局

设置捕获的双通道图像的布局。这里我们主要展示的是屏幕共享画面，左上角出现了摄像头画面。具体参数配置请参考。

videoEffectManager.setLayout([{
    streamId: screenStreamId,
    x: 640,
    y: 360,
    width: 1280,
    height: 720,
    zOrder: 1
}, {
    streamId: cameraStreamId,
    x: 160,
    y: 90,
    width: 320,
    height: 180,
    zOrder: 2
}]);

第六步：设置镜像效果

相机拍摄的照片实际上是反转的。此处，相机画面左右翻转一次。

videoEffectManager.setMirror({
    streamId: cameraStreamId,
    mirrorType: 1
});

第 7 步：添加水印

先准备一个图片对象视频直播sdk，然后将该图片对象作为水印添加到视频流画面中，水印图片放在右上角。

var image = new Image();
image.src = './xxx.png'; // 图片地址注意不要跨域，否则会有跨域问题
videoEffectManager.setWatermark({
    image: image,
    x: 1230,
    y: 50,
    width: 100,
    height: 100,
    zOrder: 3
});

第 8 步：开始流式传输

以上操作完成后，我们最终得到一个由画中画布局、镜像效果和水印组成的视频流，然后将处理后的视频流推送到服务器。

livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');