快速接入

操作步骤

1. 在页面引入SDK。

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

     <script src="https://g.alicdn.com/AliyunVideoClient/H5RTSPusher/1.1.1/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) });

   详细信息，请参见APIcreateClient，事件监听IEventListener。错误码信息，请参见错误码。

3. 设置本地预览容器。

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

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

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

   const videoEl = pushClient.setRenderView('videoContainer');

   详细信息，请参见APIsetRenderView。

4. 设置视频质量。

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

   pushClient.setVideoQuality('720p_1');

   详细信息，请参见APIsetVideoQuality。

5. 开始采集音视频。

   可以开启摄像头、麦克风或屏幕共享。采集成功后页面会出现本地预览画面。

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

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

6. 开始推流。

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

   说明

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

   • 视频：H.264

   • 音频：OPUS

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

   详细信息，请参见APIstartPush。

7. 停止推流。

   pushClient.stopPush();

   详细信息，请参见APIstopPush。

8. 停止采集音视频。

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

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