MediaTrackConstraints: displaySurface 属性

MediaTrackConstraints 字典的displaySurface 属性是一个 ConstrainDOMString，描述了 displaySurface 可约束属性的首选值。

这是由应用程序设置的，用于向用户代理标识应用程序首选的显示界面类型 (window、browser 或 monitor)。它不会影响用户可以分享的内容，但可以用来以不同的顺序呈现选项。

如果需要，可以通过检查 MediaTrackSupportedConstraints.displaySurface 的值来确定是否支持此约束，该值由调用 MediaDevices.getSupportedConstraints() 返回。但是，通常情况下，这是不必要的，因为浏览器会忽略任何它们不熟悉的约束。

值

一个 ConstrainDOMString，它指定了应用程序首选的显示界面类型。此值不会在浏览器的用户界面中添加或删除显示源，但可能会重新排序它们。您不能使用此属性将用户限制在三个显示界面值 (window、browser 和 monitor) 的子集中——但，正如您将在下面看到的那样，您可以查看所选内容并拒绝它。

请参阅 约束是如何定义的.

注意：您不能在 displaySurface: "monitor" 的同时设置 monitorTypeSurfaces: "exclude"，因为这两个设置相互矛盾。尝试这样做会导致关联的 getDisplayMedia() 调用失败，并抛出 TypeError。

使用说明

在通过 getDisplayMedia() 创建显示媒体后，可以通过调用显示媒体视频的 MediaStreamTrack 上的 getSettings() 来检查用户代理选择的设置，然后检查返回的 MediaTrackSettings 对象的 displaySurface 对象的值。

例如，如果您的应用程序不希望分享监视器——这意味着可能正在捕获非内容背景——它可以使用类似于以下代码的代码

js
let mayHaveBackdropFlag = false;
let displaySurface = displayStream
  .getVideoTracks()[0]
  .getSettings().displaySurface;

if (displaySurface === "monitor") {
  mayHaveBackdropFlag = true;
}

在执行完这段代码后，如果流中包含的显示界面类型为 monitor，则 mayHaveBackdrop 为 true。后续代码可以使用此标志来确定是否执行特殊处理，例如删除或替换背景，或从接收到的视频帧中“剪切”出各个显示区域。

示例

以下是使用 displaySurface 属性的 getDisplayMedia() 的一些示例约束对象。

js
dsConstraints = { displaySurface: "window" }; // 'browser' and 'monitor' are also possible
applyConstraints(dsConstraints);
// The user still may choose to share the monitor or the browser,
// but we indicated that a window is preferred.

此外，请参阅 约束练习器 示例，它演示了约束的使用方式。

规范

规范
屏幕捕获
# dom-mediatrackconstraintset-displaysurface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅