Screen Capture API

在此页

Screen Capture API concepts and usage
Additions to existing interfaces
Additions to existing dictionaries
字典
Feature Policy validation
规范
浏览器兼容性
另请参阅
相关话题

The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.

Screen Capture API concepts and usage

The Screen Capture API is relatively simple to use. Its sole method is MediaDevices.getDisplayMedia() , whose job is to ask the user to select a screen or portion of a screen to capture in the form of a MediaStream .

To start capturing video from the screen, you call getDisplayMedia() on the instance of Media navigator.mediaDevices :

captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

Promise 返回通过 getDisplayMedia() resolves to a MediaStream which streams the captured media.

See the article Using the Screen Capture API for a more in-depth look at how to use the API to capture screen contents as a stream.

Additions to existing interfaces

The Screen Capture API doesn't have any interfaces of its own; instead, it adds one method to the existing MediaDevices 接口。

MediaDevices interface

MediaDevices.getDisplayMedia(): getDisplayMedia() method is added to the MediaDevices interface. Similar to getUserMedia() , this method creates a promise that resolves with a MediaStream containing the display area selected by the user, in a format that matches the specified options.

Additions to existing dictionaries

The Screen Capture API adds properties to the following dictionaries defined by other specifications.

MediaTrackConstraints

MediaTrackConstraints.cursor: ConstrainDOMString indicating whether or not the cursor should be included in the captured display surface's stream, and if it should always be visible or if it should only be visible while the mouse is in motion.
MediaTrackConstraints.displaySurface: ConstrainDOMString indicating what type of display surface is to be captured. The value is one of application , 浏览器 , monitor ，或 window .
MediaTrackConstraints.logicalSurface: Indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen). A value of true indicates a logical display surface is to be captured.

MediaTrackSettings

MediaTrackSettings.cursor: A string which indicates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. The value is one of always , motion ，或 never .
MediaTrackSettings.displaySurface: A string indicating what type of display surface is currently being captured. The value is one of application , 浏览器 , monitor ，或 window .
MediaTrackSettings.logicalSurface: A Boolean value which is true if the video being captured doesn't directly correspond to a single onscreen display area.

MediaTrackSupportedConstraints

MediaTrackSupportedConstraints.cursor: A Boolean which is true if the user agent and device support the MediaTrackConstraints.cursor constraint.
MediaTrackSupportedConstraints.displaySurface: A Boolean which is true if the current environment supports the MediaTrackConstraints.displaySurface constraint.
MediaTrackSupportedConstraints.logicalSurface: A Boolean which is true if the current environment supports the constraint MediaTrackConstraints.logicalSurface .

字典

The following dictionaries are defined by the Screen Capture API.

CursorCaptureConstraint: An enumerated string type used to provide the value for the cursor property for the settings and constraints. The possible values are always , motion ，和 never .
DisplayCaptureSurfaceType: An enumerated string type which is used to identify the kind of display surface to capture. This type is used for the displaySurface property in the constraints and settings objects, and has the possible values application , 浏览器 , monitor ，和 window .

Feature Policy validation

User agents that support Feature Policy (either using HTTP's Feature-Policy header or the <iframe> 属性 allow ) can specify a desire to use the Screen Capture API using the policy control directive display-capture :

<iframe allow="display-capture" src="/some-other-document.html">

The default allow list is self , which lets the any content within the document use Screen Capture.

见 Using Feature Policy for a more in-depth explanation of how Feature Policy is used.

规范

规范	状态	注释
Screen Capture	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`getDisplayMedia()`	Chrome 72 72 70 — 72 注意事项 Disabled Available as a member of `Navigator` 而不是 `MediaDevices` in Chrome 70 and 71. Disabled ). To change preferences in Chrome, visit	Edge 79 79 17 注意事项 Available as a member of `Navigator` 而不是 `MediaDevices` .	Firefox 66 66 33 — 66 注意事项 Since Firefox 33 you can capture screen data using `getUserMedia()` ，采用 `视频` constraint called `mediaSource` . Prior to 52 it relied on a client-configurable list of allowed sites.	IE 不支持 No	Opera 60 60 57 — 60 注意事项 Disabled Available as a member of `Navigator` 而不是 `MediaDevices` in Opera 57 and 58. Disabled From version 57 until version 60 (exclusive): this feature is behind the `Experimental Web Platform features` preference (needs to be set to `启用` ).	Safari 13	WebView Android 不支持 No 注意事项 No 注意事项 API is available, but will always fail with `NotAllowedError` .	Chrome Android 不支持 No	Firefox Android 不支持 No 注意事项 No 注意事项 API is available, but will always fail with `NotAllowedError` .	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Audio capture support	Chrome 74 注意事项 74 注意事项 On Windows and Chrome OS the entire system audio can be captured, but on Linux and Mac only the audio of a tab can be captured.	Edge ≤79 注意事项 ≤79 注意事项 On Windows and Edge OS the entire system audio can be captured, but on Linux and Mac only the audio of a tab can be captured.	Firefox 不支持 No	IE 不支持 No	Opera ?	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
兼容性未知 ?

用户必须明确启用此特征。

另请参阅

元数据

最后修改： May 8, 2019

在此页