腾讯云云直播Web 端本地混流_音视频解决方案_同尘科技

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。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案