解决webrtc中屏幕共享质量不高

2,457 阅读2分钟

背景

在工作中,共享桌面质量不高,最终排查到问题如下。

解决方案

设置采集视频时的参数

  • height/width

设置分辨率

  • aspectRatio

设置屏幕比率

  • facingMode

摄像头

  • frameRate

帧率

修改sdp

  • Bit rate

比特率(英语:Bit rate,变量R[1])在电信和计算领域是指单位时间内传输送或处理的比特的数量。比特率经常在电信领域用作连接速度、传输速度、信息传输速率和数字带宽容量的同义词。在数字多媒体领域,比特率是单位时间播放连续的媒体如压缩后的音频或视频的比特数量。在这个意义上讲,它相当于术语数字带宽消耗量,或吞吐量。比特率规定使用“比特每秒”(bit/s或bps)为单位,经常和国际单位制词头关联在一起,如“千”(kbit/s或kbps),“兆”(百万)(Mbit/s或Mbps),“吉”(Gbit/s或Gbps)和“太”(Tbit/s或Tbps)。虽然经常作为“速度”的参考,比特率并不测量“‘距离’/时间”,而是被传输或者被处理的“‘二进制码数量’/时间”,所以应该把它和传播速度区分开来,传播速度依赖于传输的介质并且有通常的物理意义。毛比特率或粗比特率是每秒物理传送的总数量,包括了有效的数据和协议头。而净比特率或有效比特率是在物理层上的一个参考点来测量的,不包括底层的协议头,比如冗余的信道编码(前向错误纠正)。

设置

b=AS:BITRATE
在建立peerConnection时setLocalDescription和setRemoteDescription都需要修改bitrate

const S_CONSTRAINTS = {
  video: {
    height: 1920,
    width: 1080,
    frameRate: 15,
    cursor: "always" | "motion" | "never",
    displaySurface: "application" | "browser" | "monitor" | "window",
  },
};
const BITRATE = 2000000;

image.png

查看

chrome://webrtc-internals

image.png

检查

前端在sdp中设置后,需要在 chrome:webrtc-internals中检查是否设置成功,如果没成功的话需要服务端检查配合修改(本人就是这种状况),服务端限制了bitrate最高是800k,分享的视频永远是模糊的。

小结

音视频传输依赖底层协议以及服务更多,前端解决不了的问题,大多都是服务端和底层一些参数的设置。