有奖捉虫:云通信与企业服务文档专题,速来> HOT
Web 推流 SDK TXLivePusher 提供了对视频流画面的处理功能,包括多路视频流的混合(画中画)、画面效果的处理(镜像、滤镜)和其他元素的添加(水印、文本)。基本步骤是 SDK 首先采集多路流,然后对多路流进行本地混流处理,对画面进行合并,声音进行混合,最后再进行其他效果处理。这些都依赖于浏览器本身功能的支持,因此会有一定的浏览器性能开销。具体的接口协议可以参考 TXVideoEffectManager ,下面简单介绍下本地混流的基础用法。


基础使用

使用本地混流功能需要先完成 SDK 的初始化并获取 SDK 实例 livePusher ,初始化代码请参考 对接攻略

步骤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');
说明
SDK 相关接口说明,请参考 Web 推流 SDK API