瀏覽器兼容性檢查

可以檢測當前瀏覽器環境是否支持相應的推流及采集能力。

const checkResult = await AliRTSPusher.checkSupport();
console.log('checkResult: ', checkResult);

檢查結果，請參見ISupportResult。

設備管理

可以獲取當前瀏覽器可以獲取到的麥克風列表和攝像頭列表。

const deviceManager = await pushClient.getDeviceManager();
// 獲取攝像頭列表
const cameraList = await deviceManager.getCameraList();
// 獲取麥克風列表
const micList = await deviceManager.getMicList();

詳細信息，請參見APIDeviceManager。

關注推流狀態

通過監聽connectStatusChange事件，請隨時關注推流網絡狀態，給出相應提示，必要時做重試處理。

pushClient.on('connectStatusChange', (event) => {
 switch (event.status) {
 case 1:
 // 連接中
 break;
 case 2:
 // 已連接
 break;
 case 3:
 // 自動重連中，注意此時推流已暫時中斷，應及時提示用戶
 break;
 case 0:
 // 連接中斷，推流結束，應提示用戶，必要時重新調用 startPush 進行推流
 break;
 }
})

詳細信息，請參見狀態枚舉EConnectStatus。

混流模式下設置推流碼率

目前混流模式下setMixingConfig尚不支持設置最大碼率，可以通過以下方式設置：

/**
 * 設置碼率、發送幀率（請在推流成功后再調用）
 * @param pushClient 當前推流sdk實例
 * @param config 碼率、幀率設置
 * @param config.maxBitrate 最大碼率（kbps）
 * @param config.maxFramerate 最大幀率
 *
 *
 * @example
 * ```ts
 * setSenderParams(aliPusher, { maxBitrate: 3000, maxFramerate: 20 })
 * ```
 */

function setSenderParams(pushClient, config) {
 const pcm = pushClient.publisher?.peerconnection;
 if (pcm) {
 pcm.setVideoSenderParams(config);
 }
}

本地混流

1. 獲取視頻效果管理器實例。

   const videoEffectManager = pushClient.getVideoEffectManager();

   詳細信息，請參見APIgetVideoEffectManager。

2. 開啟本地混流模式。

   推流SDK默認只支持一路視頻流，開啟本地混流后可以采集多路視頻流和一路音頻流，并按照需要調整這些視頻流的位置和大小。

   請在采集音視頻之前開啟。

   videoEffectManager.enableMixing(true);

   詳細信息，請參見APIenableMixing。

3. 設置混流輸出參數。

   設置混流生成畫面的分辨率和幀率等。

   您可以在開啟本地混流前，使用setVideoQuality設置輸出參數。開啟本地混流后，請不要再使用setVideoQuality設置輸出參數。

   videoEffectManager.setMixingConfig({
    videoWidth: 1280,
    videoHeight: 720,
    videoFramerate: 30
   })

   詳細信息，請參見APIsetMixingConfig。

4. 采集多路流。

   支持采集多路攝像頭、屏幕共享流，和一路音頻流。采集后返回的streamId將會在之后的畫面布局設置用使用到。

   const cameraStreamId = await pushClient.startCamera();
   const screenStreamId = await pushClient.startScreenCapture();
   const micStreamId = await pushClient.startMicrophone();

   詳細信息，請參見APIstartCamera、startMicrophone和startScreenCapture。

5. 設置畫面布局。

   調整不同視頻流的大小、位置、層級。

   此處示例有一路屏幕共享流和一路攝像頭流，屏幕共享鋪滿整個畫面，攝像頭流在畫面左上角。請注意 x、y 的值，采用的是視頻源寬高的一半，因為視頻源的定位原點在視頻源的中心而不在左上角。

   videoEffectManager.setLayout([
    { streamId: 'screenStreamId', x: 1280/2, y: 720/2, width: 1280, height: 720, zOrder: 1 },
    { streamId: 'cameraStreamId', x: 320/2, y: 180/2, width: 320, height: 180, zOrder: 2 },
   ]);

   詳細信息，請參見APIsetLayout。

6. 開始推流。

   將本地混流后的視頻推流到遠端。

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

   詳細信息，請參見APIstartPush。

7. 音頻混流。

   混流模式下，您可以將麥克風和屏幕共享采集的聲音混流為一路音頻，并分別設置音量。以下示例采集了麥克風和屏幕共享聲音，并將麥克風音量降低一半。詳細信息，請參見setVolume。

   // 開啟麥克風
   const micStreamId = await pushClient.startMicrophone();
   // 開啟屏幕共享并采集音頻
   const screenStreamId = await pushClient.startScreenCapture(true);
   // 獲取音頻效果管理器
   const audioEffectManager = pushClient.getAudioEffectManager();
   // 設置麥克風音量
   audioEffectManager.setVolume(50, micStreamId);

   在某些設備上，混流的效果可能較差，比如有雜音或者斷斷續續，這是由于麥克風的噪聲抑制或音量增益引起的，可以通過以下方式關閉音頻3A算法以獲得更好的混流效果。詳細信息，請參見startMicrophone。

   const micStreamId = await pushClient.startMicrophone({
     echoCancellation: false, autoGainControl: false, noiseSuppression: false
   });