9┃音视频直播系统之 WebRTC 控制传输速率以及关闭音视频-CFANZ编程社区

一、控制传输速率

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