Tutorial: 入门指南

步骤 1 页面准备工作

在需要直播推流的页面中引入初始化脚本。

<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.2.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.getRenderView().muted = true;

3、设置音视频采集质量

采集音视频流之前，先进行音视频质量设置，如果预设的质量参数不满足需求，可以单独进行自定义设置。

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

4、开始采集流

目前支持采集摄像头设备、麦克风设备、屏幕分享、本地媒体文件和自定义的流。当音视频流采集成功时，播放器容器中开始播放本地采集到的音视频画面。

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

5、开始直播推流

传入腾讯云快直播推流地址，开始推流。推流地址的格式参考 拼装推流 URL ，只需要将 RTMP 推流地址前面的 rtmp:// 替换成 webrtc:// 即可。

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();