Angular 2 – Using DesktopCapturer in your electron apps.

Hi Friends,

In this post we will write some code that will help us to use the desktopCapturer API in our apps.

I will make use of the repo created by us already available here.

The code explained in this tutorial is available here.

A video screencast of this post:


Clone that repo using the below command

Install the deps using npm install.

Now, add the deps for electron using the below steps so that we could use it along with typescript.

Open up typings.json and modify it as shown below.

Now run the below command

This will install the typings.

Now open up webpack.config.js file and modify the plugins(at the bottom) property as shown below.

We are simply adding the electron-renderer process to our webpack config file.

Now open up app.ts and add the below code.

Let’s break this down. (Most of the above code is copied from the electron docs).

  1.  If you look closely, you could see that this is similar to navigator.getUserMedia .
  2. Now the getSources method is used to get all the sources available in the desktop. This includes the entire screen and the different windows that are currently open or minimized.
  3. The console.log(sources) displays all the available sources in an array. Pick a source.
  4. Add that source in this line. Here I have my home folder opened. So I have given it as home.

    if (sources[i].name === ‘Home’)

  5. We are then using this stream and passing it as a src to the video element in our page. I have simply typecasted the video element so that its source path could be set in our code.

Run the app using the below commands.

Now run the below command.

You would see an output as shown below.

Screenshot 2016-06-22 19:03:36

This is how you could use the desktopCapturer in our electron apps.

Hope this helped you guys.

Thanks for reading. Peace. :)