Web 推流 SDK
TXLivePusher 提供了对视频流画面的处理功能，包括多路视频流的混合（画中画）、画面效果的处理（镜像、滤镜）和其他元素的添加（水印、文本）。基本步骤是 SDK 首先采集多路流，然后对多路流进行本地混流处理，对画面进行合并，声音进行混合，最后再进行其他效果处理。这些都依赖于浏览器本身功能的支持，因此会有一定的浏览器性能开销。具体的接口协议可以参考 TXVideoEffectManager ，下面简单介绍下本地混流的基础用法。
基础使用
步骤1：获取视频效果管理实例
const videoEffectManager = livePusher.getVideoEffectManager();
步骤2：开启本地混流
首先需要启用本地混流功能。默认情况下 SDK 只支持采集一路视频流和一路音频流，启用之后，就可以采集多路流，这些流将在浏览器本地进行混合处理。
videoEffectManager.enableMixing(true);
步骤3：设置混流参数
对混流参数进行设置，主要是设置最终混流后生成视频的分辨率和帧率。
videoEffectManager.setMixingConfig({videoWidth: 1280,videoHeight: 720,videoFramerate: 15});
步骤4：采集多路流
启用本地混流之后，开始采集多路流，例如先打开摄像头，再进行屏幕分享。注意保存流 ID ，后续操作都需要使用流 ID 。
let cameraStreamId = null;let 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());});
步骤5：设置画面布局
对采集的两路画面进行布局设置。这里我们主要显示屏幕分享画面，摄像头画面出现在左上角。
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}]);
步骤6：设置镜像效果
摄像头采集到的画面实际上是反的，这里对摄像头画面进行一次左右翻转。
videoEffectManager.setMirror({streamId: cameraStreamId,mirrorType: 1});
步骤7：添加水印
先准备好一个图片对象，然后将这个图片对象作为水印添加到视频流画面中，这里把水印图片放置在右上角。
const 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');
说明
