title: Record the desktop using Electron
body: <p>I am building an electron in which I need the <code>desktopCapturer</code> api, but I don't fully understand how to use it.</p>
  
  <p>From the api official page (and this example app: <a href="https://github.com/hokein/electron-sample-apps/tree/master/desktop-capture" rel="nofollow noreferrer">https://github.com/hokein/electron-sample-apps/tree/master/desktop-capture</a>) I see that the <code>desktopCapturer</code> only gives me the id's of the sources, not the video streams themselves. For that, I should use <code>navigator.mediaDevices.getUserMedia()</code>.  But the constraints object no longer has the <code>mandatory</code> property and because I am using typescript I am getting an error if I try to use it. </p>
  
  <p>I've tried to use the <code>deviceId</code> property instead, but I am getting this error:
  <code>Uncaught (in promise) DOMException: Requested device not found</code> (on a device with a webcam I would get the webcam stream instead of that error). Here is my code:</p>
  
  <pre><code>import { desktopCapturer, DesktopCapturerSource } from "electron";
  
  function onLoad(){
      desktopCapturer.getSources({
          thumbnailSize: {
              width: 256,
              height: 256,
          },
          types: ["screen", "window"]
      }, (error: Error, srcs: DesktopCapturerSource[]) =&gt; {
          if (error)
              throw error;
          let video: HTMLVideoElement | null = document.querySelector("video");
          for (let src of srcs)
              navigator.mediaDevices.getUserMedia({
                  video:{
                      deviceId : src.id
                  }
              }).then((stream:MediaStream)=&gt;{
                  if(video){
                      video.srcObject = stream;
                      video.play();
                  }
              })
      })
  }
  
  document.addEventListener("DOMContentLoaded", onLoad);
  </code></pre>
  
  <p>I also tried using <code>navigator.getDisplayMedia()</code>, but I wouldn't get the pop-up prompting to select a source as I would get in Chrome. What should I do to get this working? Thanks in advance!</p>