To build screen sharing capabilities into a WebRTC video chat application you must first be able to capture the content on screen. In this post we’re going to see how to access the screen capture capabilities of Google Chrome from within a web application.

What you need

In order to build this project you will need:

Google Chrome

A text editor

A local web server – I like to use servedir for things like this

Screen sharing

As of right now, Chrome does not allow you to access the content of a screen via the mediaDevices API. There is a draft spec for a getDisplayMedia method but no browser has implemented it yet. Screen sharing on the web has many security concerns for the end user, so the browsers are handling this feature with concern.

What can we do right now then?

Well, in Chrome we can write a extension which will give us access to the screen, application windows, and browser tabs. Chrome extensions have extended permissions and APIs that allow access to resources that regular JavaScript on the page cannot.

Let’s write an extension that will give access to screen capture and then show the results of that on the page.

Building a Chrome Extension

The extension we are going to build is very simple. It consists of two parts: a manifest.json file that describes the extension and the script we want to run, which we’ll call extension.js .

The extension manifest