尝试使用 getUserMedia 和 canvas 捕获桌面图像

Question

我正在制作一个 chrome 扩展程序，通过它我可以获取用户桌面的屏幕截图。我正在使用 chrome.desktopCapture API 来获取所选 window 的流。我正在动态创建视频元素。一旦设置了源，我就调用了 play() 方法。然后我创建了一个 canvas 元素并用它来绘制视频图像。我也可以使用 canvas.toDataURL() 获取数据 URL，但是当我打开这个 url 时，我看不到任何图像。而且这个 URL 值即使在新捕获期间也保持不变。

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);
}

Answer 1

您必须等待视频实际加载流：像这样重写您的 gotStream :

function gotStream(stream) {
  console.log("Received local stream");
  var video = document.createElement('video');
  video.addEventListener('loadedmetadata',function(){
      var canvas = document.createElement('canvas');
      canvas.width = this.videoWidth;
      canvas.height = this.videoHeight;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(this, 0, 0);
      var url = canvas.toDataURL();
      console.log(url);
      // will open the captured image in a new tab
      window.open(url);
    },false);
  video.src = URL.createObjectURL(stream);
  video.play();
  }

此外，为了获得更好质量的图像，您必须设置 getUserMedia() 调用的强制性 maxHeight 和 maxWidth ：

navigator.webkitGetUserMedia({
      audio:false,
      video: { mandatory: { chromeMediaSource: "desktop",
                            chromeMediaSourceId: id,
                            maxWidth: 4000,
                            maxHeight: 4000} }
  }, gotStream, getUserMediaError);

尝试使用 getUserMedia 和 canvas 捕获桌面图像

Trying to capture desktop image using getUserMedia and canvas

html

javascript

canvas

google-chrome-extension

google-chrome-app