WebRTC 协议推流：揭秘实时通信的未来趋势

云直播的推流 SDK TXLivePusher 专为 Web 推流设计，能够将通过浏览器采集的音视频数据利用 WebRTC 协议发送至直播服务器。目前，支持多种采集方式，包括摄像头、麦克风、屏幕分享、本地媒体文件以及用户自定义内容的采集，并可对这些内容进行本地混流处理后发送至后端服务器。

温馨提示

通过 WebRTC 协议进行推流时，每个推流域名默认为1000路并发的推流限制。如果您需要更多的推流通道，请通过 提交工单 的方式与我们联系申请扩展。

基础知识

在进行对接之前，您需了解以下基础信息：

推流地址的构成

使用腾讯云直播服务时，推流地址必须符合腾讯云标准直播推流 URL 的格式，具体结构如下所示，包含四个主要部分：

其中，鉴权 Key 部分是可选的，若需防止盗链，请确保启用推流鉴权功能。

浏览器兼容性

Web 推流是基于 WebRTC 实现的，因此其效果依赖于操作系统及浏览器对该协议的支持。目前，最新版本的 Chrome、Edge、Firefox 和 Safari 浏览器均已支持 Web 推流功能。

提示：

在移动端 H5 环境下，浏览器对音视频采集的某些功能存在限制，例如，移动端浏览器不支持屏幕分享功能，而 iOS 14.3 及更高版本才支持获取用户摄像头。

对接指南步骤1：页面准备

在直播页面中添加初始化脚本以进行准备。

说明

脚本需要在 HTML 的 body 部分引入，若放在 head 部分则会导致错误。

步骤2：添加容器

在页面中需要展示本地音视频画面的地方放置一个播放器容器，创建一个名为 local_video 的 div，所有本地视频画面将渲染在此容器内。您可以通过 CSS 样式来控制容器的大小，示例代码如下：

获取音视频开发学习资料→「链接」

步骤3：开始直播推流

创建推流 SDK 实例： 利用全局对象 TXLivePusher 创建 SDK 实例，后续的所有操作均通过此实例完成。

const livePusher = new TXLivePusher();

指定本地视频容器： 选择本地视频播放器的 div，浏览器采集的音视频将会渲染到此 div 中。

livePusher.setRenderView('local_video');

说明

通过 setRenderView 创建的视频元素默认带有声音，若播放麦克风采集的声音，可能会出现回声。您可以将视频元素静音，以避免此现象。

livePusher.videoView.muted = true;

设置音视频质量： 在采集音视频流之前，先进行质量设置。如果预设参数不符合要求，可以进行自定义调整。

// 设置视频质量
livePusher.setVideoQuality('720p');
// 设置音频质量
livePusher.setAudioQuality('standard');
// 自定义设置帧率
livePusher.setProperty('setVideoFPS', 25);

开始流媒体采集： 当前支持采集摄像头、麦克风、屏幕分享、本地媒体文件及自定义流。当音视频流成功采集后，播放器容器内将开始播放所采集的内容。

// 打开摄像头
livePusher.startCamera();
// 打开麦克风
livePusher.startMicrophone();

开始直播推流： 传入云直播推流地址，正式启动推流。

直播推流与设备管理全攻略

推流设置

在启动直播推流之前，务必要确保音频和视频流已经成功采集，否则推流过程将会出错。如果希望在采集到音视频流后自动开始推流，可以在确认音频和视频流均已准备好后再启动推流。

livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');

下面是监测音视频流的示例代码：

var hasVideo = false;
var hasAudio = false;
var isPush = false;
livePusher.setObserver({onCaptureFirstAudioFrame: function() {
   hasAudio = true;
   if (hasVideo && !isPush) {
     isPush = true;
     livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
   }
 },
 onCaptureFirstVideoFrame: function() {
   hasVideo = true;
   if (hasAudio && !isPush) {
     isPush = true;
     livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
   }
 }
});

要停止直播推流，可以使用以下代码：

livePusher.stopPush();

若需要停止音视频流的采集，可按如下方式操作：

// 关闭摄像头
livePusher.stopCamera();
// 关闭麦克风
livePusher.stopMicrophone();

进阶功能
兼容性检测

SDK 提供了一个静态方法，用于检查浏览器是否支持 WebRTC 技术。

TXLivePusher.checkSupport().then(function(data) {  
  // 检测 WebRTC 支持情况  
  if (data.isWebRTCSupported) {console.log('WebRTC 支持');  
  } else {console.log('WebRTC 不支持');  
  }  
  // 检测 H264 编码支持情况  
  if (data.isH264EncodeSupported) {console.log('支持 H264 编码');  
  } else {console.log('不支持 H264 编码');  
  }
});

回调事件管理

目前，SDK 提供了回调事件功能，用户可通过设置这些事件来获取 SDK 状态和 WebRTC 相关的统计数据。

livePusher.setObserver({
  // 推流警告信息
  onWarning: function(code, msg) {console.log(code, msg);
  },
  // 推流连接状态更新
  onPushStatusUpdate: function(status, msg) {console.log(status, msg);
  },
  // 推流统计信息更新
  onStatisticsUpdate: function(data) {console.log('视频每秒帧数为：' + data.video.framesPerSecond);
  }
});

设备管理功能

SDK 提供了 TXDeviceManager 实例，帮助用户进行设备列表的获取、切换等操作。

var deviceManager = livePusher.getDeviceManager();
// 获取设备列表
deviceManager.getDevicesList().then(function(data) {data.forEach(function(device) {console.log(device.deviceId, device.deviceName);  
  });
});
// 切换到指定的摄像头设备
deviceManager.switchCamera('camera_device_id');