有奖捉虫:云通信与企业服务文档专题,速来> HOT
云直播提供了推流 SDK TXLivePusher 用于 Web 推流,负责将浏览器采集的音视频画面通过 WebRTC 协议推送到直播服务器。目前支持摄像头采集、麦克风采集、屏幕分享采集、本地媒体文件采集和用户自定义采集等采集方式,支持对采集到的内容进行本地混流处理,然后推送到后端服务器。
您可以在 Web 端进行 WebRTC 协议推流,在 PC 端,您还可以使用 OBS 工具进行 WebRTC 推流,具体操作方法请参考 OBS WebRTC 推流 相关内容。
使用 Web 进行 WebRTC 推流的优点是无需安装额外的软件,只需在浏览器中操作即可。本文将介绍采用 Web 进行推流的操作方式。
注意
使用 WebRTC 协议推流,每个推流域名默认限制1000路并发推流数,如您需要超过此推流限制,可通过 提交工单 的方式联系我们进行申请。

基础知识

对接前需要了解以下基础知识:

推流地址的拼装

使用腾讯云直播服务时,推流地址需要满足腾讯云标准直播推流 URL 的格式 ,如下所示,它由四个部分组成:



其中鉴权 Key 部分非必需,如果需要防盗链,请开启推流鉴权,具体使用说明请参见 自主拼装直播 URL 。

浏览器支持

Web 推流基于 WebRTC 实现,依赖于操作系统和浏览器对于 WebRTC 的支持,目前版本的 Chrome、Edge、Firefox 和 Safari 浏览器都支持 Web 推流。
注意:
浏览器采集音视频画面的部分功能在移动端 H5 受到限制,例如移动端浏览器不支持屏幕分享,iOS 14.3 及以上版本才支持获取用户摄像头设备。

对接攻略

步骤1:页面准备工作

在需要直播推流的页面中引入初始化脚本。
<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>
说明
需要在 HTML 的 body 部分引入脚本,如果在 head 部分引入会报错。

步骤2:在 HTML 中放置容器

在需要展示本地音视频画面的页面位置加入播放器容器,即放一个 div 并命名,例如 local_video,本地视频画面都会在容器里渲染。对于容器的大小控制,您可以使用 div 的 css 样式进行控制,示例代码如下:
<div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>

步骤3:直播推流

1. 生成推流 SDK 实例: 通过全局对象 TXLivePusher 生成 SDK 实例,后续操作都是通过实例完成。
const livePusher = new TXLivePusher();
2. 指定本地视频播放器容器: 指定本地视频播放器容器 div,浏览器采集到的音视频画面会渲染到这个 div 当中。
livePusher.setRenderView('local_video');
说明
调用 setRenderView 生成的 video 元素默认有声音,如果播放从麦克风采集的声音,可能会产生回声现象。可以将 video 元素进行静音,避免回声现象的出现。
livePusher.videoView.muted = true;
3. 设置音视频采集质量: 采集音视频流之前,先进行音视频质量设置,如果预设的质量参数不满足需求,可以单独进行自定义设置。
// 设置视频质量
livePusher.setVideoQuality('720p');
// 设置音频质量
livePusher.setAudioQuality('standard');
// 自定义设置帧率
livePusher.setProperty('setVideoFPS', 25);
4. 开始采集流: 目前支持采集摄像头设备、麦克风设备、屏幕分享、本地媒体文件和自定义的流。当音视频流采集成功时,播放器容器中开始播放本地采集到的音视频画面。
// 打开摄像头
livePusher.startCamera();
// 打开麦克风
livePusher.startMicrophone();
5. 开始直播推流: 传入云直播推流地址,开始推流。推流地址的格式参考拼装推流 URL
livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
说明
推流之前要确保已经采集到了音视频流,否则推流接口会调用失败。如果要实现采集到音视频流之后自动推流,可以等待视频流和音频流采集成功之后,再进行推流。
// 采集完摄像头画面后自动推流
livePusher.startCamera()
.then(function () {
livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
})
.catch(function (error) {
console.log('打开摄像头失败: '+ error.toString());
});

// 采集完摄像头和麦克风之后自动推流
Promise.all([livePusher.startCamera(), livePusher.startMicrophone()])
.then(function() {
livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
});
6. 停止直播推流:
livePusher.stopPush();
7. 停止采集音视频流:
// 关闭摄像头
livePusher.stopCamera();
// 关闭麦克风
livePusher.stopMicrophone();

进阶攻略

检测浏览器兼容性

SDK 提供静态方法 checkSupport() 用于检测浏览器对于 WebRTC 的兼容性。
TXLivePusher.checkSupport().then(function(data) {
// 是否支持WebRTC
if (data.isWebRTCSupported) {
console.log('WebRTC Support');
} else {
console.log('WebRTC Not Support');
}
// 是否支持H264编码
if (data.isH264EncodeSupported) {
console.log('H264 Encode Support');
} else {
console.log('H264 Encode Not Support');
}
});

回调事件通知

SDK 目前提供了回调事件通知,可以通过设置回调事件来了解 SDK 内部的状态信息和 WebRTC 相关的数据统计。具体内容请参考接口 setObserver()
livePusher.setObserver({
// 推流连接状态
onPushStatusUpdate: function(status, message) {
console.log(status, message);
},
// 推流统计数据
onStatisticsUpdate: function(data) {
console.log('video fps is ' + data.video.framesPerSecond);
}
});

设备管理

SDK 提供了设备管理实例 TXDeviceManager 帮助用户进行获取设备列表、切换设备等操作。
const deviceManager = livePusher.getDeviceManager();
let cameraDeviceId = null;

// 获取设备列表
deviceManager.getDevicesList().then(function(data) {
data.forEach(function(device) {
console.log(device.type, device.deviceId, device.deviceName);

if (device.type === 'video') {
cameraDeviceId = device.deviceId;
}
});

// 切换摄像头设备
if (cameraDeviceId) {
deviceManager.switchCamera(cameraDeviceId);
}
});

调整音量

SDK 提供了音频效果管理实例 TXAudioEffectManager 用来调整音频流的音量。
const audioEffectManager = livePusher.getAudioEffectManager();

audioEffectManager.setVolume(50);

视频效果

SDK 提供了视频效果管理实例 TXVideoEffectManager 用来设置视频流画中画、镜像、滤镜、水印、文本等效果。具体用法请参考 Web 端本地混流

API 接口协议

SDK 相关接口说明,请参考 Web 推流 SDK API