MediaTrackSettings: screenPixelRatio 属性

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

MediaTrackSettings 字典的 screenPixelRatio 属性是一个数字,表示捕获显示表面的像素的物理大小(以其物理分辨率显示)与捕获屏幕上的 CSS 像素的逻辑大小(以其逻辑分辨率显示)之比。它不能用作约束或功能。

此属性允许使用 屏幕捕获 API 的应用程序通过以逻辑分辨率(或设备无关分辨率)发送屏幕捕获的视频来节省资源。

一个表示屏幕像素比的数字。

这是通过将捕获屏幕上缩放比例为 1.0 且 CSS 像素大小为 1.0CSS 像素除以捕获的 显示表面的像素垂直大小来计算的。

描述

屏幕上应用操作系统(OS)缩放是很常见的,例如,当显示器是高分辨率显示器时,您希望图形以与标准分辨率显示器相同的物理尺寸显示。应用缩放之前的分辨率称为逻辑分辨率,应用缩放之后的分辨率称为物理分辨率

如果发送方的捕获屏幕被缩放,则物理分辨率大于逻辑分辨率,因此视频会议应用程序可以通过以下方式节省带宽和 CPU:

  1. 移除操作系统对捕获显示表面的缩放。
  2. 以逻辑分辨率发送屏幕捕获的视频。
  3. 在远程客户端接收后重新应用缩放,将其尺寸调整回物理分辨率。

screenPixelRatio 属性描述了像素的物理大小与 CSS 像素的逻辑大小之比,因此允许应用程序计算应用了多少缩放因子,然后将视频限制为逻辑大小。

例如

  • 如果捕获的显示表面正在标准分辨率屏幕上显示,其中物理像素尺寸与 CSS 像素尺寸大致相同,则 screenPixelRatio 将返回 1
  • 但是,如果捕获的显示表面正在高 DPI 分辨率屏幕上显示,其中物理像素尺寸大约是 CSS 像素尺寸的两倍,则 screenPixelRatio 将返回 2

示例

基本 screenPixelRatio 用法

在此示例中,应用程序定义了一个常量 RESOLUTION_LIMIT,它代表发送应用程序应以逻辑分辨率而不是物理分辨率发送视频的缩放因子。

screenPixelRatio 超过此限制时,应用程序使用 screenPixelRatio 值根据物理分辨率计算逻辑分辨率,然后将捕获的 MediaStreamTrack 限制为逻辑分辨率。

js
const RESOLUTION_LIMIT = 1.5;

async function startCapture() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
  });
  const track = stream.getVideoTracks()[0];
  const settings = track.getSettings();
  const capabilities = track.getCapabilities();

  if (settings.screenPixelRatio > RESOLUTION_LIMIT) {
    const physicalWidth = capabilities.width.max;
    const physicalHeight = capabilities.height.max;
    const logicalWidth = physicalWidth / settings.screenPixelRatio;
    const logicalHeight = physicalHeight / settings.screenPixelRatio;
    await track.applyConstraints({
      width: logicalWidth,
      height: logicalHeight,
    });
  }
}

规范

规范
屏幕捕获
# dom-mediatracksettings-screenpixelratio

浏览器兼容性

另见