9┃音视频直播系统之 WebRTC 控制传输速率以及关闭音视频

〝古人学问遗无力，少壮功夫老始成〞

随着5G技术的发展，音视频直播领域发生了翻天覆地的变化，尤其是 2011 年 Google 推出 WebRTC 技术后，大大降低了音视频技术的门槛，你再也不必自己去实现回音消除算法了，也不用自己去实现各种音视频的编解码器了，更不必去考虑跨平台的问题了。如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。

目录

一、控制传输速率

二、关闭音视频

一、控制传输速率

音视频服务质量变差主要由以下几个方面
物理链路质量：包括丢包、延迟和抖动
带宽大小：带宽大小指的是每秒钟可以传输多少数据
传输速率：主要包括音视频压缩码率、传输控制码率
分辨率与帧率：视频的分辨率越高，视频就越清晰，但同时它的数据量也就越大
所以我们可以通过压缩码率、控制传输速度来控制速率，其中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);
 		}
	});
}

9┃音视频直播系统之 WebRTC 控制传输速率以及关闭音视频

〝 古人学问遗无力，少壮功夫老始成 〞

一、控制传输速率

二、关闭音视频

猜你喜欢

〝古人学问遗无力，少壮功夫老始成〞