Screen capture in Microsoft Edge
Tags: javascript, webrtc, video, edge
Published: 2018-05-25 02:07:34

---
title: Screen capture in Microsoft Edge
published: true
description: The Edge browser supports screen capture via the W3C spec, let's see how to use it.
tags: javascript, webrtc, video, edge
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qpsbjqvcd6utljrgg68t.png
canonical_url: https://www.twilio.com/blog/2018/05/screen-capture-in-microsoft-edge.html
---

We've looked before at how to capture a user's screen in <a href="https://www.twilio.com/blog/2017/10/screen-capture-in-google-chrome.html">Chrome</a> and <a href="https://www.twilio.com/blog/2017/10/screen-capture-in-firefox.html">Firefox</a>. Good news, another browser has support now, Microsoft's Edge.

Let's see how we can capture the screen with Edge.

<img alt="The result of the code in this post. When you visit the project in Edge, you can capture the screen and show it in a video on the page." src="https://twilioinc.wpengine.com/wp-content/uploads/2018/05/Xy9veXGKIqjoU6gqk0XoBElSSzuT68ZwxKa2e0TOCMa7X4kjuJEiVHox63uYSyWc7WbWWaoOsJaox_wcmQ1Vs0Zq6ZGCQmAwC10ZHe4_9pIv_P8PzqCstXq4cp3jo_lTfgamdyg.png" class="aligncenter">

## What you need

* The latest version of <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a>, which is currently version 42 with EdgeHTML version 17 (if you're on a Mac like me, you can get a <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">free virtual machine with Windows 10 and Edge installed</a> to test on)
* A text editor
* A local web server - I like to use <a href="https://www.npmjs.com/package/serve">serve</a> for things like this
* Either<a href="https://ngrok.com/"> </a><a href="https://ngrok.com/">ngrok</a> or an equivalent tunnelling service or TLS certificates set up for localhost (we’ll see why later)

## Screen Capture

Whereas Chrome required an extension to be built and Firefox used `getUserMedia` with a `mediaSource` constraint of `"screen"` to get a handle on the stream of the screen, once again Edge uses a different method. While this doesn't sound great, it's actually better for Edge as they are following the proposed <a href="https://w3c.github.io/mediacapture-screen-share/">W3C spec for screen capture</a>.

This support was shipped as part of the April update to Windows 10 and Edge and is part of the <a href="https://docs.microsoft.com/en-us/microsoft-edge/dev-guide#whats-new-in-edgehtml-17">EdgeHTML engine version 17</a>. So how does it work?

### The code

To get access to a media stream of the screen in Edge, the code looks a bit like this:

```javascript
navigator.getDisplayMedia().then(returnedStream => {
  // use the stream
});
```

If you compare this to the <a href="https://www.twilio.com/blog/2017/10/screen-capture-in-firefox.html">Firefox version</a> it is a little simpler. Rather than calling `navigator.mediaDevices.getUserMedia` and passing a media constraint of `{ video: { mediaSource: 'screen' } }` you just call <a href="https://w3c.github.io/mediacapture-screen-share/">`getDisplayMedia`</a>. In this version, `getDisplayMedia` doesn't take any media constraints, so the user gets to choose whether to display their application or their desktop.

To explore how this all fits together, let's build the same example application that we built for Chrome and Firefox, capturing the screen and then showing it in a `<video>` element.

## Building screen capture

Create a new directory and an `index.html` file. We're going to use the same HTML structure as the <a href="https://github.com/philnash/screen-capture/blob/master/chrome/index.html">Chrome example</a>. Add the following to your `index.html` file:

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Screen</title>
</head>

<body>
  <h1>Show my screen</h1>

  <video autoplay id="screen-view" width="50%"></video>

  <button id="get-screen">Get the screen</button>
  <button id="stop-screen" style="display:none">Stop the screen</button>

  <script>
    // Fill in the rest here
  </script>
</body>

</html>
```

This gives us a simple HTML page with a `<video>` element and a couple of buttons.

The rest of our code goes between the `<script>` tags. We start by getting references to the elements we're going to use. Then we define a variable for the stream of the screen and an event listener that stops the stream when you click the stop stream button.

```javascript
(() => {
  const video = document.getElementById('screen-view');
  const getScreen = document.getElementById('get-screen');
  const stopScreen = document.getElementById('stop-screen');
  let stream;
 
  // Fill in the rest here
 
  stopScreen.addEventListener('click', event => {
    stream.getTracks().forEach(track => track.stop());
    video.src = '';
    stopScreen.style.display = 'none';
    getScreen.style.display = 'inline';
  });
})();
```

Now, when a user clicks on the "Get the screen" button we'll call the `getDisplayMedia` function:

```javascript
let stream;

getScreen.addEventListener('click', event => {
  navigator.getDisplayMedia();
});
```

Calling `getDisplayMedia` will show a prompt to the user asking for permission to use their screen. The user can then select the window or entire desktop they want to share. The `getDisplayMedia` method returns a <a href="https://www.twilio.com/blog/2016/10/guide-to-javascript-promises.html">promise</a>, so once that has completed successfully the promise will resolve with a stream of the screen. We then need to set that as the source of the `<video>`:

```javascript
let stream;

getScreen.addEventListener('click', event => {
  navigator.getDisplayMedia().then(returnedStream => {
    stream = returnedStream;
    video.src = URL.createObjectURL(stream);
    getScreen.style.display = "none";
    stopScreen.style.display = "inline";
  }).catch(err => {
    console.error('Could not get stream: ', err);
  });
});
```

We add a `catch` to the promise to deal with errors or if the user denies permission, and that is all the code we need.

## Capture the screen</h3>
To run the example we do need to serve the HTML from a local web server. I like to do this with an npm module called <a href="https://www.npmjs.com/package/serve">serve</a>. If you have Node.js and npm installed, you can install it with:

```bash
npm install serve -g
```

You can then navigate using the command line to the directory where you saved your `index.html` file and serve it on `localhost:5000` by entering:

```bash
serve .
```

If you have another method you use to serve static files on localhost, you can use that too.

We're not done yet, much like Firefox, Edge requires the site to be served on HTTPS in order to allow developers access to the screen capture API. Rather than try to sort out self signed certificates on your development machine, I suggest using ngrok to sidestep this issue. I normally use <a href="https://www.twilio.com/blog/2015/09/6-awesome-reasons-to-use-ngrok-when-testing-webhooks.html">ngrok to test webhooks locally</a>, but it has the added benefit of giving you an HTTPS URL that points at your local machine. <a href="https://ngrok.com/download">Install ngrok</a> (check out <a href="https://www.twilio.com/docs/usage/tutorials/how-use-ngrok-windows-and-visual-studio-test-webhooks">these instructions if you are installing on Windows</a>) and start it up to point at localhost:5000:

```bash
ngrok http 5000
```

Grab the HTTPS URL and enter that in Edge.

<img alt="The screen when ngrok is running. Select the URL that begins with HTTPS" src="https://twilioinc.wpengine.com/wp-content/uploads/2018/05/F6pXOvjX5kA1q1YrZa-9gxSvqGbJXp31bTUb3IWeO6m_ZSROVaZJMQEQWvZFYf23qkge_XD-7Wfx7sDlD5EvlXIif0DyuBON8ELbNAgwf1SFKLKK1yx858Z-HnINXBZH4rO94T4.png"  class="aligncenter">

Press the “Get the screen” button and you will be able to get a stream of the user's choice of application or desktop.

<img alt="Success! Now, when you click 'Get the screen' the permissions pop up shows and when you allow it, you can choose the application or screen to show." src="https://twilioinc.wpengine.com/wp-content/uploads/2018/05/v1jyWBvESpG8jDtkNu4Uul33FFikEL4fewltXOyHGY8yt-Zy0S0mDyLbvkC6h0ANLFv23DElo3FgyLV-j9xNGZs-vDmBPVQ-OuWhByDkkLAoqojzmEDfO4kOwoHuvubjJQCpVAU.png" class="aligncenter">

## Next steps

Now we've seen screen capture in <a href="https://www.twilio.com/blog/2017/10/screen-capture-in-google-chrome.html">Chrome</a>, <a href="https://www.twilio.com/blog/2017/10/screen-capture-in-firefox.html">Firefox</a> and Edge. If you want to take a look at the code for all three, <a href="https://github.com/philnash/screen-capture">check out the GitHub repo</a>.

As you can see, <a href="https://w3c.github.io/mediacapture-screen-share/">`getDisplayMedia`</a> is a much easier way of getting hold of a user's screen than building an extension or checking specific versions of Firefox. If you think this spec should be implemented by those browsers, get in touch with them by raising or <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1321221">supporting their open bugs</a>.

Do you have any ideas or plans for screen capture in browsers? Tell me what you're thinking in the comments below. Or feel free to reach out on Twitter at<a href="https://www.twitter.com/philnash"> </a><a href="https://www.twitter.com/philnash">@philnash</a> or by email at philnash@twilio.com.

___

_[Screen Capture in Microsoft Edge](https://www.twilio.com/blog/2018/05/screen-capture-in-microsoft-edge.html) was originally published on the [Twilio blog](https://www.twilio.com/blog) on May 16th, 2018._