快速接入

使用说明

本文中引入的Web RTS推流SDK的版本号1.4.2仅供参考，获取最新的版本，请参见Web RTS推流SDK。

操作步骤

1. 在页面引入SDK。

   • 方法一：在 HTML head中引入推流 SDK 脚本。

     <script src="https://g.alicdn.com/apsara-media-box/imp-web-rts-pusher/1.4.2/aliyun-rts-pusher.js"></script>

   • 方法二：以 npm 包的方式引入。

     npm install aliyun-rts-pusher --save

     import { AliRTSPusher } from 'aliyun-rts-pusher';

2. 初始化SDK。

   创建一个推流 client 实例，并监听事件。

   // 创建推流实例
   const pushClient = AliRTSPusher.createClient();
   // 监听错误事件
   pushClient.on('error', (err) => { console.log(err.errorCode) });

   详细信息，请参见API createClient，事件监听 IEventListener。错误码信息，请参见错误码说明。

3. 设置本地预览容器。

   在HTML中插入一个div元素作为推流画面的本地预览容器。

   <div id="videoContainer"></div>

   将容器ID传给SDK，SDK会在其中创建一个video标签并播放预览画面。

   重要

   setRenderView方法执行需要确保传入的DOM元素已经完成渲染，否则可能会造成本地预览画面无法正常显示等问题。如在Vue或uni-app中，您可以在mounted及以后的生命周期中调用此方法，React中可以在useEffect函数中调用此方法。

   const videoEl = pushClient.setRenderView('videoContainer');
   // 如果希望将本地预览静音（推出去的流不会静音）
   videoEl.muted = true;

   详细信息，请参见API setRenderView。

4. 设置视频质量。

   采集之前先设置好视频质量，可选的预设参数请参考 VideoProfileMap（您可以遍历查看出键值对的内容，key就是setVideoQuality需要的参数，value就是对应的详细配置）。如果不设置，默认值是 720p_2。

   pushClient.setVideoQuality('720p_1');

   详细信息，请参见API setVideoQuality。

5. 开始采集音视频。

   可以开启摄像头、麦克风或屏幕共享。

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

   详细信息，请参见API startCamera、startMicrophone和startScreenCapture。

   说明

   • 如成功设置了本地预览容器，采集成功后预览容器内会出现本地预览画面。

   • 此操作只是获取推流源，不会开始推流。

6. 开始推流。

   传入RTS推流地址并开始推流。

   说明

   超低延时直播Web端推流的编码格式为：

   • 视频：H.264

   • 音频：OPUS

   pushClient.startPush('artc://domain/appName/streamName');

   详细信息，请参见API startPush。

7. 停止推流。

   pushClient.stopPush();

   详细信息，请参见API stopPush。

8. 停止采集音视频。

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

   详细信息，请参见API stopCamera、stopMicrophone和stopScreenCapture。