尝试使用getUserMedia和canvas捕获桌面图像 [英] Trying to capture desktop image using getUserMedia and canvas

问题描述

我制作了一个Chrome扩展程序，通过它我可以获得用户桌面的屏幕截图。我使用 chrome.desktopCapture API获取所选窗口的流。
我正在动态创建视频元素。一旦它的源设置，我调用 play（）方法。然后我创建了一个画布元素，并使用它来绘制视频的图像。我也能够使用 canvas.toDataURL（）获取dataURL，但是当我打开这个网址，我看不到图像。即使在新捕获期间，此网址值仍保持不变。

Manifest.json -

 code> {
name：桌面捕获示例，
description：显示桌面媒体选择器UI，
version：1 $ bmanifest_version：2，
background：{
persistent：false，
scripts：[background.js] 
}，
browser_action：{
default_title：拍摄桌面的屏幕截图！ 
}，
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）; 
} 
  
 
 
解决方案
视频实际加载流：重写您的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）; 
 //将在新选项卡中打开捕获的图像
 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）; 
  
 
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);
}

解决方案
You have to wait for the video actually loads the stream : rewrite your gotStream like so :
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();
  }
Also, in order to get a better quality image, you have to set the mandatory maxHeight and maxWidth of the getUserMedia() call : 
navigator.webkitGetUserMedia({
      audio:false,
      video: { mandatory: { chromeMediaSource: "desktop",
                            chromeMediaSourceId: id,
                            maxWidth: 4000,
                            maxHeight: 4000} }
  }, gotStream, getUserMediaError);


                        
这篇关于尝试使用getUserMedia和canvas捕获桌面图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！