一、控制傳輸速率

• 音視訊服務質量變差主要由以下幾個方面

• 物理鏈路質量：包括丟包、延遲和抖動

• 頻寬大小：頻寬大小指的是每秒鐘可以傳輸多少資料

• 傳輸速率：主要包括音視訊壓縮位元速率、傳輸控制位元速率

• 解析度與幀率：視訊的解析度越高，視訊就越清晰，但同時它的資料量也就越大

• 所以我們可以通過壓縮位元速率、控制傳輸速度來控制速率，其中WebRTC 只使用第一種壓縮位元速率的方式來主動控制速率

• 首先從 RTCPeerConnection 中獲取視訊的傳送者，即 kind 為 video 的 sender

• 然後取出 sender 中的 parameters 物件

• 其中的 maxBitrate

  屬性就是用於控制傳輸位元速率的

• 將你期望的最大位元速率設定好後，再將 parameters 物件設定回去，就可以控制視訊某路流的位元速率了

var pc = new RTCPeerConnection(null);
// 定義 video sender 變數
var vsender = null;
// 從 RTCPeerConnection 中獲得所有的 sender
var senders = pc.getSenders();

// 遍歷每個 sender
senders.forEach( sender => {
   // 找到視訊的 sender
   if(sender && sender.track.kind === 'video'){
      vsender = sender; 
   }
});

// 取出視訊 sender 的引數
var parameters = vsender.getParameters();

// 判斷引數裡是否有 encoding 域
if(!parameters.encodings){
 		return;
}

// 通過 在 encoding 中的 maxBitrate 可以限掉傳輸位元速率,設定傳輸速率
parameters.encodeings[0].maxBitrate = 2048*1000

// 將調整好的位元速率重新設定回 sender 中去，這樣設定的位元速率就起效果了
sender.setParameters(parameters)
  .then(()=>{
 			console.log('Successed to set parameters!');
 	}).catch(err => {
 			console.error(err);
	});
 

二、關閉音視訊

• 直播系統中最常見的功能：將遠端的聲音靜音、將自己的聲音靜音、關閉遠端的視訊、關閉自己的視訊

• 將遠端的聲音靜音：將聲音靜音，可以在 video 標籤中設定 muted 屬性即可、或者在接收端丟掉音訊流、或者傳送端不採集音訊、或者傳送端關閉通道

• 將自己的聲音靜音：採集時停止對音訊資料進行採集就可以，將 constraints 中的 auido 屬性設定為 false 即可

• 關閉遠端的視訊：顯示端不將視訊資料給 video 標籤來達到不顯示視訊的效果、一種是控制遠端不傳送資料，其實原理跟將聲音靜音類似，只是這是處理的是視訊流

• 關閉本地視訊：不將視訊資料與 RTCPeerConnection

  物件進行繫結即可

// 方法一：將遠端的聲音靜音：新增muted屬性
<video id="remoteVideo" autoplay muted playsinline />
  
// 取消靜音
var remotevideo = document.getElementById('remoteVideo');
remotevideo.muted = false;

// 方法二：播放端控制：丟掉音訊流
var pc = new RTCPeerConnection();
pc.ontrack = getRemoteStream;

function getRemoteStream(e){
 		// 得到遠端的音視訊流
		remoteStream = e.streams[0];
 		// 找到所有的音訊流
 		remoteStream.getAudioTracks().forEach((track)=>{
 				if (track.kind === 'audio') {
 					// 從媒體流中移除音訊流
 					remoteStream.removeTrack(track);
 				}
 		}); 
 		// 顯示視訊
		remoteVideo.srcObject = e.streams[0];
}

// 方法三：傳送端控制：不採集音訊
navigator.mediaDevices.getUserMedia({audio: false, video: true}, function(stream) {
		// ...
})

// 方法四：傳送端控制：關閉通道
var localStream = null;
// 建立 peerconnection 物件
var pc = new RTCPeerConnection();

// 獲得流
function gotStream(stream){
 	localStream = stream;
}

//peerconnection 與 track 進行繫結
function bindTrack() {
 //add all track into peer connection
 localStream.getTracks().forEach((track)=>{
 		if(track.kink !== 'audio') {
    	pc.addTrack(track, localStream);
 		}
	});
}