Question

这是Mac或Canary的BUG吗？

我需要通过Google Canary使用屏幕截图，这在之前的旧版本中有效。

但是，因为他们释放了Canary M37或M39，它不再起作用了。我的--enable-usermedia-screen-capture命令无效我执行它的方式吗？

$ alias canary="open /Applications/Google\ Chrome\ Canary.app/ --args --enable-usermedia-screen-capturing"
$ canary

现在，当我尝试启动屏幕捕获（在旧版本中工作）时，它给我的错误失败了：

getUserMedia error:  NavigatorUserMediaError {constraintName: "", message: "", name: "InvalidStateError"}

代码：

function start() {
  console.log("Requesting local stream");
  btn1.disabled = true;
  var video_constraints = { 
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'screen',
        maxWidth: 1024,
        maxHeight: 768,
        minWidth:800,
        minHeight:400,
        minFrameRate: 1,
        maxFrameRate: 2,
        //minAspectRatio: 1.333, maxAspectRatio: 1.334,
      }
    }
  };

  navigator.webkitGetUserMedia(video_constraints, function(stream){
    console.log("Received local stream");
    vid1.src = webkitURL.createObjectURL(stream);
    localstream = stream;


  }, function(e){

    console.log("getUserMedia error: ", e);
  });
}

编辑：

<html>
<head>
<style>
  body {
    background: white;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
  }
  video {
    width: 640px;
    height: 480px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  }
</style>
</head>
<body>
  <video id="video" autoplay></video>
  <p><button id="start">Start</button><button id="cancel">Cancel</button></p>
  <script>
// Copyright 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

function gotStream(stream) {
  console.log("Received local stream");
  var video = document.querySelector("video");
  video.src = URL.createObjectURL(stream);
  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);
}

var pending_request_id = null;

document.querySelector('#start').addEventListener('click', function(e) {
  pending_request_id = chrome.desktopCapture.chooseDesktopMedia(
      ["screen", "window"], onAccessApproved);
});

document.querySelector('#cancel').addEventListener('click', function(e) {
  if (pending_request_id != null) {
    chrome.desktopCapture.cancelChooseDesktopMedia(pending_request_id);
  }
});

  </script>
</body>
</html>

Answer 1

在较新版本的Chrome中，不推荐使用这种类型的屏幕截图，我相信已将其删除。

This started with Chrome M36+

The new DesktopCapture API要好得多，并提供更多选项。

编辑：

新API仅在通过扩展程序使用时才可用。 Chrome团队表示，出于安全原因，此更改已被更改。可能在将来，它将被移回到不需要构建扩展，但截至目前，它不能直接在页面中使用。

Answer 2

第1步 - 下载现成的蛋糕，开始使用

https://developer.chrome.com/extensions/examples/api/desktopCapture.zip

第2步 - RTFM

Load the extension
Extensions that you download from the Chrome Web Store are packaged up as .crx files, which is great for distribution, but not so great for development. Recognizing this, Chrome gives you a quick way of loading up your working directory for testing. Let's do that now.

Visit chrome://extensions in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox:  The menu's icon is three horizontal bars.. and select Extensions under the Tools menu to get to the same place).

Ensure that the Developer mode checkbox in the top right-hand corner is checked.

Click Load unpacked extension… to pop up a file-selection dialog.

Navigate to the directory in which your extension files live, and select it.

Alternatively, you can drag and drop the directory where your extension files live onto chrome://extensions in your browser to load it.

If the extension is valid, it'll be loaded up and active right away! If it's invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

第3步 - 启动应用

enter image description here

编辑：参考文献：

https://developer.chrome.com/extensions/manifest#web_accessible_resources

https://stackoverflow.com/a/17098011

https://stackoverflow.com/a/17120647

Answer 3

Firefox现在也有屏幕/窗口/等捕获。目前，出于与Chrome类似的原因，我们已将访问功能置于白名单背后（虽然扩展程序也可以扩展白名单;我们还没有原型）。

请参阅http://mozilla.github.io/webrtc-landing/gum_test.html（在Firefox 33或更高版本中 - 目前是Beta版;由于它是内部测试页，因此没有尝试进行polyfill）。

谷歌Canary - 在Macbook Air OSX 10.9.4上出错

3 个答案: