Bringing Screen Capture to Microsoft Edge with the Media Capture API

Beginning with the EdgeHTML 17, Microsoft Edge is the first browser to support Screen Capture via the Screen Capture API. Web developers can start building on this feature today by upgrading to the Windows 10 April 2018 Update, or using one of our free virtual machine. uninstall microsoft edge Screen capture uses the new getDisplayMedia API specified by the W3C Web real time Communication working group Support.Microsoft.Com/Help The feature lets web pages capture output of a user’s display device, commonly used to broadcast a desktop for plugin-free virtual meetings or presentations. Using Media Capture, Microsoft Edge can capture all Windows applications–including including Win32 and Universal Windows Platform applications (UWP apps).

In this post, we’ll walk through how Screen Capture is implemented in Microsoft Edge, and what’s on our roadmap for future releases, as well as some best practices for developers looking to get started with this API today.

Getting started with the Screen Capture API

The getDisplayMedia() method is the heart of the Screen Capture API. The getDisplayMedia() call takes  as an optional input argument.  Once the user grants permission, the getDisplayMedia() call will return a promise with a  object representing the user-selected capture device.

The MediaStream object will only have a  for the captured video stream; there is no corresponding to a captured audio stream uninstall microsoft edge. The object can be rendered on multiple rendering targets, for example, by setting it on the Src Object attribute of MediaElement (e.g. video tags).

While the operation of the getDisplayMedia API is superficially very similar to getUserMedia, there are some important differences. To ensure users are Support.Microsoft.Com/Help in control of any sensitive information which may be captured, getDisplayMedia does not allow the Media Constaints Stream argument to influence the selection of sources. This is different from getUserMedia which enables picking a specific capture device.

Our implementation of Screen Capture currently does not support the use of MediaStreamConstraints to influence MediaStreamTrack characteristics (such as framerate or resolution). The getSettings() method can’t be used to obtain the type of display surface that was captured, although information such as the width, height uninstall microsoft edge, aspect ratio and framerate of the capture can be obtained. Within the W3C Web real time working group there is ongoing discussion of how Mediastreamcontraint influences properties of the captured screen device, such as resolution and framerate, but consensus has not yet been reached.

User permissions

While screen capture functionality can enable a lot of exciting user and business scenarios, removing the need for additional third-party software, plugins, or manual user steps for scenarios such as conference calls and desktop screenshots, it also introduces security and privacy concerns. Explicit, opt-in user consent is a critical part of the feature.

While the W3C specification recommends some best practices, it also leaves each browser some flexibility in implementation. To balance security and privacy concerns and user experiences, our implementation requires the following:

• Sample scenarios using screen capture

  Screen capture is an essential step in many scenarios, including real-time audio and video communications 

  Capture photo from a screen capture device

  Let’s assume we have a video tag on the page and it is set to autoplay.  Prior to calling navigator.getDisplayMedia, we set up constraints and create a handleSuccess function to wire the screen capture stream Support.Microsoft.Com/Helpuninstall microsoft edge

• . Below we walk through a simple scenario introducing you to how to use the Screen Capture functionality.

•  to the video tag as well as a handleError function to log an error to the console if one occurs

• While being captured, the chosen application or display will have a yellow border draw around it which is not included

  
   

  If an application window includes a privacy flag (setdisplayAffinity or isScreencaptureenable the application is not enumerated in the picker. Application windows being captured will not include Support.Microsoft.Com/Helpuninstall microsoft edge

•  in the capture frame. Application windows being captured will return black frames while  minimized (though they will still uninstall microsoft edge

•  be enumerated in the picker); if the window is restored, rendering will resume.

•  overlapping content, which is an improvement on snap shotting the entire display and cropping to window location.