Trying to capture dektop image using getUserMedia and canvas

I am making an chrome extension through which i can get a screenshot of user’s desktop. I am using chrome.desktopCapture API to get stream of selected window.
I am creating video element dynamically. Once its source it set, I invoked the play() method. Then I created a canvas element and used it to draw an image of video. I am also able to get the dataURL using canvas.toDataURL() but when i open this url I see no image. And also this URL value remains same even during new capture.

Manifest.json –

{
  "name": "Desktop Capture Example",
  "description": "Show desktop media picker UI",
  "version": "1",
  "manifest_version": 2,
  "background": {
     "persistent": false,
      "scripts": ["background.js"]
  },
    "browser_action": {
    "default_title": "Take a screen shot of Desktop!"
  },
  "permissions": [
    "desktopCapture"
  ]
}

Background.js –

var pending_request_id = null;

chrome.browserAction.onClicked.addListener(function() {

   pending_request_id = chrome.desktopCapture.chooseDesktopMedia(["screen", "window"],onAccessApproved);

});

function gotStream(stream) {
  console.log("Received local stream");
  var video = document.createElement('video');
  video.src = URL.createObjectURL(stream);
  video.play();
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  ctx.drawImage(video, 0, 0, 640, 480);
   var url = canvas.toDataURL();
  console.log(url);
  //localstream = stream;
  //stream.onended = function() { console.log("Ended"); };
}

function getUserMediaError() {
  console.log("getUserMedia() failed.");
}

function onAccessApproved(id) {
  if (!id) {
    console.log("Access rejected.");
    return;
  }
  navigator.webkitGetUserMedia({
      audio:false,
      video: { mandatory: { chromeMediaSource: "desktop",
                            chromeMediaSourceId: id } }
  }, gotStream, getUserMediaError);
}


Source: html5

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.