操作步驟

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。