在此页

• 句法
• 用法注意事项
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

MediaDevices 接口的 getDisplayMedia() method prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a window) as a MediaStream . The resulting stream can then be recorded using the MediaStream 录制 API or transmitted as part of a WebRTC session.

见 Using the Screen Capture API for more details and an example.

句法

var promise = navigator.mediaDevices.getDisplayMedia(constraints);
					

参数

constraints 可选

An optional MediaStreamConstraints object specifying requirements for the returned MediaStream 。由于 getDisplayMedia() requires a video track, the returned stream will have one even if no video track is expressly requested by the constraints 对象。

返回值

A Promise 解析为 MediaStream containing a video track whose contents come from a user-selected screen area, as well as an optional audio track.

注意： Browser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the which audio source or sourcoes are supported. Check the 兼容性表格 for details for each browser.

异常

Rejections of the returned promise are made by passing a DOMException error object to the promise's failure handler. Possible errors are:

AbortError

An error or failure that doesn't match any of the other exceptions below occurred.

InvalidStateError

调用 getDisplayMedia() was not made from code running due to a user action, such as an event handler. Another potential cause for this event: the document in whose context getDisplayMedia() was called is not fully active; for example, perhaps it is not the frontmost tab.

NotAllowedError

Permission to access a screen area was denied by the user, or the current browsing instance is not permitted access to screen sharing.

NotFoundError

No sources of screen video are available for capture.

NotReadableError

The user selected a screen, window, tab, or other source of screen data, but a hardware or operating system level error or lockout occurred, preventing the sharing of the selected source.

OverconstrainedError

After creating the stream, applying the specified constraints fails because no compatible stream could be generated.

TypeError

指定 constraints include constraints which are not permitted when calling getDisplayMedia() . These unsupported constraints are advanced and any constraints which in turn have a member named min or exact .

用法注意事项

Privacy and security

因为 getDisplayMedia() could be used in nefarious ways, it can be a source of significant privacy and security concerns. For that reason, the specification details measures browsers are required to take in order to fully support getDisplayMedia() .

• 指定 constraints can't be used to limit the options available to the user. Instead, they must be applied after the user chooses a source, in order to generate output that matches the constraints.
• The go-ahead permission to use getDisplayMedia() cannot be persisted for reuse. The user must be prompted for permission every time.
• 调用 getDisplayMedia() must be made from code which is running in response to a user action, such as in an event handler.
• Browsers are encouraged to provide a warning to users about sharing displays or windows that contain browsers, and to keep a close eye on what other content might be getting captured and shown to other users.

范例

In the example below, a startCapture() method is created which initiates screen capture given a set of options specified by the displayMediaOptions parameter. The options are specified in the form of a MediaStreamConstraints object which specifies the preferred stream configuration and the display surface from which video is to be captured.

async function startCapture(displayMediaOptions) {
  let captureStream = null;
  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch(err) {
    console.error("Error: " + err);
  }
  return captureStream;
}
						

This uses await to asynchronously wait for getDisplayMedia() to resolve with a MediaStream which contains the display contents as requested by the specified options. The stream is then returned to the caller for use, perhaps for adding to a WebRTC call using RTCPeerConnection.addTrack() to add the video track from the stream.

规范

规范	状态	注释
Screen Capture The definition of 'MediaDevices.getDisplayMedia()' in that specification.	工作草案	初始定义

浏览器兼容性

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

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

见实现注意事项。

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

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

另请参阅

• Screen Capture API
• Using the Screen Capture API
• Media Capture and Streams API
• WebRTC API
• getUserMedia() : Capturing media from a camera and/or microphone

元数据

• 最后修改： Mar 17, 2020

相关话题

1. 指南

   1. Using the Screen Capture API
2. 特性

   1. MediaTrackConstraints.cursor
   2. MediaTrackConstraints.displaySurface
   3. MediaTrackConstraints.logicalSurface
   4. MediaTrackSettings.cursor
   5. MediaTrackSettings.displaySurface
   6. MediaTrackSettings.logicalSurface
   7. MediaTrackSupportedConstraints.cursor
   8. MediaTrackSupportedConstraints.displaySurface
   9. MediaTrackSupportedConstraints.logicalSurface
3. 方法

   1. MediaDevices.getDisplayMedia()