一个WebRTC 分辨率动态爬升问题记录与解决过程

1. 项目背景

        5月份，在项目开发过程中，我们遭遇到了前端使用webrtc像设备端推流的场景，由于设备端不能进行分辨率的自适应，需要推流时固定使用1280*720的分辨率进行推流。

        在这个尝试的过程中，我们首先考虑了，在媒体参数中”设置width=1280和height=720“的情况来处理,如下所示：

        

self.constraints = {audio: true,video: {width: { exact: 1280 },  // 强制宽度为 1280height: { exact: 720 }  // 强制高度为 720}};

        发现最终的导致的现象是，分辨率有一个动态爬升的过程，通过在chrome浏览器中键入”chrome://webrtc-internals/“可以观察到如下所示：

        

        

        验证发现，设置以后，最终的分辨率可以到达128*720，但这个爬升的过程会导致中间有几秒的等待，故不能接受；

        我们通过查询大量的资料以及验证，最终找到了处理办法成功解决该问题，效果如下所示：

                下面我将重点阐述验证环境以及涉及的改动点。     

2. 环境搭建

        实验环境如下：

                1. 前端推流采用srs.sdk.js的demo

                2. 后端服务器部署srs 6.0 

                3. 环境为Windows平台

       

3. 解决过程

        1. 思考过程

            通过检索网络资料，在webrtc中 api/media_stream_interface.h::VideoTrackInterface 类中，定义了如下枚举：

enum class ContentHint { kNone, kFluid, kDetailed, kText };

        对应代码解释如下：

enum class DegradationPreference {// Don't take any actions based on over-utilization signals. Not part of the// web API.DISABLED,// On over-use, request lower resolution, possibly causing down-scaling.MAINTAIN_FRAMERATE,// On over-use, request lower frame rate, possibly causing frame drops.MAINTAIN_RESOLUTION,// Try to strike a "pleasing" balance between frame rate or resolution.BALANCED,
};

        这几项分别是不采取动作、保持帧率、保持分辨率、平衡 模式4种。

        而我们这次正是需要保持分辨率的模式；

        2. 修改办法

        在srs.sdk.js的代码中，做如下调整：

        

        代码部分如下，其中最核心的部分为：设置了contenHint的属性为detail：

const videoTrack = stream.getVideoTracks()[0];console.log("实际分辨率:", `${videoTrack.getSettings().width}x${videoTrack.getSettings().height}`);if ('contentHint' in MediaStreamTrack.prototype) {console.log("当前ContentHint:", videoTrack.contentHint);} else {console.warn("当前浏览器不支持contentHint属性"); // 兼容旧版浏览器:ml-citation{ref="3" data="citationList"}}videoTrack.contentHint = "detail";const currentHint = videoTrack.contentHint; console.log("当前ContentHint:", currentHint); // @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrackstream.getTracks().forEach(function (track) {self.pc.addTrack(track);// Notify about local track when stream is ok.self.ontrack && self.ontrack({track: track});});

        3. 验证过程

        通过前端打开srs的demo，进行推流，浏览器观察后发现，能够实现分辨率的固定，如下图所示：

        

        实际分辨率调整情况如下：

        

        至此问题完整解决。

4. 需要完整demo文件的可以关注和私信。