文章目录

1. RTCRtpSender
2. RTCRtpReceiver
3. RTC Media 属性
4. 实战

在 web端 WebRTC提供的 API 的接口中，RTCRtpSender 是通过peerConnection获取，该接口提供了控制和获取有关 MediaStreamTrack 是如何编码（设置编码的码率大小上下限制，编码最大帧率等）及是如何发送到对等方的详细信息的能力；同样的通过peeConnection获取的RTCRtpReceiver 是管理 RTCPeerConnection 上 MediaStreamTrack 的数据接收和解码。

1. RTCRtpSender

通过调用peerConnection的RTCRtpSender接口可以获取到一组sender对象，每一个本地的track都对应一个sender例如视频就有一个单独的sender；其接口定义如下：

   getSenders(): RTCRtpSender[];

RTCRtpSende的接口属性定义：

readonly dtmf: RTCDTMFSender | null;
readonly track: MediaStreamTrack | null;
readonly transport: RTCDtlsTransport | null;

dtmf：在RTP 会话上通过该属性可以使用 telephone-event（电话事件）有效负载来发送 DTMF 音调，仅音频轨道可以支持 DTMF，如果是null代表不支持；
track：媒体轨，如果是null代表不发送数据；
transport：媒体数据传输相关的属性，发送方通过其交换用于管理媒体和控制数据传输的 RTP 和 RTCP 数据包；
提供的方法：

    getParameters(): RTCRtpSendParameters;
    getStats(): Promise<RTCStatsReport>;
    replaceTrack(withTrack: MediaStreamTrack | null): Promise<void>;
    setParameters(parameters: RTCRtpSendParameters): Promise<void>;
    setStreams(...streams: MediaStream[]): void;

其作用主要如图：

方法	返回	说明
getParameters	RTCRtpSendParameters	描述 track 上媒体的编码和传输的当前配置
getStats	Promise	发送的所有流的统计数据
replaceTrack	Promise	可以使用此方法在设备上的前置摄像头和后置摄像头之间切换
setParameters	Promise	对参数进行更改，这些参数用于配置 track 的编码方式以及如何将其传输到远程对等方
setStreams	void	关联的 MediaStream

视频调试结果：
在这里插入图片描述

2. RTCRtpReceiver

调用peerConnection的getReceivers接口可以获取到一组receiver对象,用于接收数据；远端每一个track都会对应一个receiver；其接口定义如下：

getReceivers(): RTCRtpReceiver[];

同sender类似receiver也有track和transport对象，定义如下：

readonly track: MediaStreamTrack;
readonly transport: RTCDtlsTransport | null;

track：可以获取到于远端媒体相关的track信息
transport：和sender的作用相似
在其接口中定义的接口函数：

    getContributingSources(): RTCRtpContributingSource[];
    getParameters(): RTCRtpReceiveParameters;
    getStats(): Promise<RTCStatsReport>;
    getSynchronizationSources(): RTCRtpSynchronizationSource[];

其作用主要如图：

方法	返回	说明
getContributingSources	RTCRtpContributingSource[]	在最近十秒内收到的每个唯一 CSRC（贡献源）标识符
getParameters	RTCRtpReceiveParameters	包含有关如何解码 RTC 数据的信息
getStats	Promise	包含有关传入流及其依赖项的统计信息
getSynchronizationSources	RTCRtpSynchronizationSource[]	最近十秒钟内接收到的每个唯一 SSRC（同步源）标识符

3. RTC Media 属性

在上面两节的介绍中RTCRtpReceiver和RTCRtpSender都调用了getParameters方法，返回各自的parameters属性RTCRtpReceiveParameters和RTCRtpSendParameters，其中这两个类的各自的类关系如图：
在这里插入图片描述

其中RTCRtpReceiveParameters和RTCRtpSendParameters都继承自RTCRtpParameters，RTCRtpSendParameters中包含属性：

degradationPreference表示使用那种编码偏好设置具体的含义请阅读WebRTC系列–视频编码偏好DegradationPreference及开启“实验特性” FieldTrials这篇文章里面有详细的介绍；
encodings：编码器相关的参数；也可以通过调用sender的setParamater设置相关编码器的参数参数的含义
1. active：设置此路编码是否使用，
2. maxBitrate: 设置最大编码码率单位是bits/s
3. priority: 标识这一路流是高分辨率还是低，一般联播的时候使用主要属性有：“high” | “low” | “medium” | “very-low”;
4. scaleResolutionDownBy：设置视频的缩放比例，按照2的倍数缩放，不支持负值和小数；
transactionId 这一路流对应的transport的标识；
他们的父类RTCRtpParameters中包含有媒体的详细参数，比如音频的声道数采样率等；
视频的parameters如下：

其中codecs的某一个codedc如下：

音频的parameters如下：

其中codecs的某一个codedc如下：

结下来的章节会从实战的角度去查看及分析使用这些参数；

4. 实战

这节在之前demo的基础上实现带宽的调节；首先要在index.html中新增一个选择器用于选择带宽：

<div style="margin-top: 10px;">
       <label>视频输入带宽限制:</label>
        <select id="videoBindwidth" style="width: fit-content;" disabled>
            <option value="3000" selected>3000kbps</option>
            <option value="2000">2000kbps</option>
            <option value="1000">1000kbps</option>
            <option value="800">800kbps</option>
            <option value="500">500kbps</option>
            <option value="250">250kbps</option>
            <option value="125">125kbps</option>
        </select>
 </div>

js 中先获取选择器标签：

var videoBindwidthSelect = document.getElementById('videoBindwidth');

然后在其监听事件中获取选择的属性及设置最大码率，代码如下：

videoBindwidthSelect.onchange = () =>{
    //  先使标签不可见
    videoBindwidthSelect.disabled = true;
    // 获取选择的值
    const bw = videoBindwidthSelect.options[videoBindwidthSelect.selectedIndex].value;
    console.log('用户选择的大小是：'+bw);
    var vSender = null;
    var aSender = null;
    // 从peer connection中获取senders 然后遍历查找到视频的sender
    peerconnetion.getSenders().forEach(sender => {
             if (sender && sender.track.kind === 'video') {
                 vSender = sender;
             }
             if (sender && sender.track.kind === 'audio') {
                aSender = sender;
            }
    });
    // 从视频sender中获取parameters
    var paramaters = vSender.getParameters();
    var aParamaters = aSender.getParameters();
    if (!paramaters.encodings) {
        return;
    }
    if (!aParamaters.encodings) {
        // return;
    }
    // 如果有联播这里需要使用循环去设置每一个的值
    //  这里只有一个所以直接获取第一个进行设置
    paramaters.encodings[0].maxBitrate = bw * 1000;
    // 将参数应用到sender中
    vSender.setParameters(paramaters).then(()=>{
        console.log('设置限制最大码率成功');
        videoBindwidthSelect.disabled = false;
    }).catch((e) => {
        videoBindwidthSelect.disabled = false;
        console.log(e);
    });

};

其核心的代码流程已经在注释中说明；效果如图：
在这里插入图片描述
当视频链接后就可以进行选择（这里的逻辑参看源码）；因为这些参数的改变从直观上很难察觉我们需要使用Google提供的工具去分析；

在浏览器中输入chrome://webrtc-internals/就能打开chrome中的调试界面：
在这里插入图片描述
注意尖头位置选择图中的stats展现形式，便于分析；在三个标签中，我这里选择如图中绿色的查看：

这里我是将demo中的带宽限制到了500kbps,所以可以看到带宽一直在500以下；我们修改到2000kbps看下：

可以看到发送方的带宽提升上去了；

WebRTC系列-RTCRTPSender和RTCRTPReceover

文章目录

1. RTCRtpSender

2. RTCRtpReceiver

3. RTC Media 属性

4. 实战

猜你喜欢