tencent cloud

云直播

动态与公告
公告
新手指南
产品简介
产品概述
子产品简介
基本概念
产品功能
应用场景
产品优势
使用限制
购买指南
计费概述
基础服务费
增值服务费
预付费资源包
购买流程
计费变更
退款说明
账单查询
续费说明
欠费停服说明
计费常见问题
标准直播
概述
应用场景
快速入门
SDK 接入说明
快直播(超低延时直播)
概述
快直播和标准直播区别
应用场景
快速入门
SDK 接入说明
云导播台
概述
应用场景
功能区介绍
云导播台管理
通用云导播
配置节目单和自动导播
控制台指南
控制台介绍
概览
域名管理
流管理
资源包管理
AI 智能
功能配置
拉流转推
计费用量
业务监控
常用工具
无忧直播
CAM 访问控制
功能实践
直播推流与播放
直播增值功能
典型场景实践
云端原生录制
直播安全
海外直播
回调事件消息通知
常见第三方工具指南
SDK 实践
0. SDK 接入引导
1. 推流
2. 播放
3. 高级功能
API 文档
History
Introduction
API Category
Making API Requests
Live Pad APIs
Live Stream Mix APIs
Time Shifting APIs
Monitoring Data Query APIs
Billing Data Query APIs
Live Transcoding APIs
Delayed Playback Management APIs
Domain Name Management APIs
Watermark Management APIs
Certificate Management APIs
Stream Pulling APIs
Recording Management APIs
Live Callback APIs
Screencapturing and Porn Detection APIs
Authentication Management APIs
Live Stream Management APIs
Data Types
Error Codes
运维指南
优化视频卡顿
推流失败问题排查
播放失败问题排查
CLS 协助直播问题排查
直播延迟问题排查
拉流视频质量不清晰问题排查
COS bucket 授权给直播实现截图存储
故障处理
直播混流报错:InvalidParameter.OtherError
常见问题
服务地区相关
直播基础相关
推流播放相关
直播计费相关
直播海外相关
直播录制相关
云端混流相关
域名配置相关
云导播台相关
适配苹果 ATS 相关
服务等级协议
云直播服务等级协议
CSS 政策
隐私协议
数据处理和安全协议
词汇表

Web 端本地混流

PDF
聚焦模式
字号
最后更新时间: 2023-11-29 16:55:35

SDK 提供了对视频流画面的处理功能,包括多路视频流的混合(画中画)、画面效果的处理(镜像、滤镜)和其他元素的添加(水印、文本)。基本步骤是为:SDK 首先采集多路流,然后对多路流进行本地混流处理,对画面进行合并,声音进行混合,最后再进行其他效果处理。这些都依赖于浏览器本身功能的支持,因此对浏览器的性能有一定要求。具体的接口协议可以参考 TXVideoEffectManager,下面简单介绍本地混流的基础用法。

基础使用

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

步骤1:获取视频效果管理实例

var videoEffectManager = livePusher.getVideoEffectManager();

步骤2:开启本地混流

首先需要启用本地混流功能。默认情况下 SDK 只支持采集一路视频流和一路音频流,启用之后,就可以采集多路流,这些流将在浏览器本地进行混合处理。
videoEffectManager.enableMixing(true);

步骤3:设置混流参数

对混流参数进行设置,主要是设置最终混流后生成视频的分辨率和帧率。
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());
});

步骤5:设置画面布局

对采集的两路画面进行布局设置。这里我们主要显示屏幕分享画面,摄像头画面出现在左上角。具体参数配置请参见 TXLayoutConfig
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:添加水印

先准备好一个图片对象,然后将这个图片对象作为水印添加到视频流画面中,这里把水印图片放置在右上角。
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');
说明:
WebRTC 混流相关接口说明,请参见 API 概览


帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈