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

1. 项目背景

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

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

复制代码
self.constraints = {
        audio: true,
		
        video: {
            width: { exact: 1280 },  // 强制宽度为 1280
			height: { 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:

javascript 复制代码
        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_addTrack
        stream.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,进行推流,浏览器观察后发现,能够实现分辨率的固定,如下图所示:

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

至此问题完整解决。

  1. 需要完整demo文件的可以关注和私信。
相关推荐
_可乐无糖2 小时前
AWS WebRTC:我们的业务模式
云计算·音视频·webrtc·aws
小虎卫远程打卡app2 小时前
webRTC合并本地源码修改和官方更新
webrtc
SY.ZHOU1 天前
iOS上使用WebRTC推拉流的案例
ios·音视频·cocoa·webrtc
拾光拾趣录5 天前
WebRTC深度解析:从原理到实战
前端·webrtc
feiyangqingyun6 天前
Qt视音频推流/监控推流/自动重连推流/推流同时保存录像文件到本地/网页打开webrtc预览
qt·webrtc·qt推流·qt保存录像文件
_可乐无糖10 天前
AWS WebRTC 并发 Viewer 拉流失败分析:0.3 秒等待为何如此关键?
云计算·webrtc·aws
2501_9153743517 天前
WebRTC与RTMP
webrtc
_pengliang17 天前
WebRTC 双向视频通话
音视频·webrtc
~央千澈~18 天前
优雅草蜻蜓R实时音视频会议系统云原生私有化部署方案深度解析-优雅草卓伊凡|贝贝|clam|麻子|夜辰
webrtc·实时音视频
~央千澈~20 天前
优雅草蜻蜓T语音会议系统私有化部署方案与RTC技术深度解析-优雅草卓伊凡|clam
webrtc·实时音视频·rtc