Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested

Question

我正在尝试通过我正在构建的 chrome 扩展程序在 Chrome 浏览器中对页面进行简单的音频视频捕获。我是运行内容脚本中的以下代码。

我不明白为什么它很难接受我的配置，我已经包含了音频和视频，但它仍然抱怨

Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested
    at chooseDesktopMedia

这是我试过的代码：

chooseDesktopMedia();

function chooseDesktopMedia(){
    navigator.webkitGetUserMedia(
        ["screen"]
    , function onSuccess(stream) {
        showScreenShare(
            {
                audio: true,
                video: {
                    mandatory: {
                        chromeMediaSource: 'desktop',
                        chromeMediaSourceId: streamId
                    }   
                }   
            }            
        );
    }, function onError(e) {
        console.error(e);
        alert('Failed to get user media.');
    });
}

function showScreenShare(conf){
    var ve = document.getElementById("screen-share");

   navigator.mediaDevices.getUserMedia(conf)
    .then(function(stream){
        var url = window.URL.createObjectURL(stream);
        ve.src = url;
    })
    .catch(function(e){
        console.log(e);
        alert(e);
    });

}

Answer 1

我不认为有类似的东西

navigator.mediaDevices.getUserMedia(['screen'])

也许我对此一无所知，但

是什么意思

Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested at chooseDesktopMedia

因为在你的getUserMedia中，你没有定义音频或视频的约束，应该是这样的

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(mediaStream) {
  //...
  };
})

屏幕截图

另一方面，对于运行屏幕截图，您将使用 getDisplayMedia() 访问屏幕截图 API， 而不是 getUserMedia()

async function startCapture(displayMediaOptions) {
  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch(err) {
    console.error("Error: " + err);
  }
  return captureStream;
}

由于权限政策，我不能运行在 SO 片段中举例，但是你可以做些什么来尝试这个，复制下面的代码，在开发者工具中打开你的控制台，然后运行这个

*免责声明：运行风险自负

let getCanvas = document.getElementById('canvas')
if (getCanvas == undefined) {
  var videoElem = document.createElement("video");
  videoElem.setAttribute("id", "canvas");
  videoElem.setAttribute("autoplay", true);

  videoElem.style.width = '98%'
  videoElem.style.maxWidth = '860px'
  videoElem.style.position = 'fixed'

  videoElem.style.zIndex = '99999'

  videoElem.style.top = '0'

  videoElem.style.left = '0'
  document.body.insertBefore(videoElem, document.body.firstChild)
}


var displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: false
};

async function startCapture() {
  let canvas = document.getElementById('canvas')

  try {
    canvas.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    dumpOptionsInfo(canvas);
  } catch (err) {
    console.error("Error: " + err);
  }
}

function dumpOptionsInfo(canvas) {
  const videoTrack = canvas.srcObject.getVideoTracks()[0];
  videoTrack.onended = function() {
    canvas.remove()
  };
  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}


await startCapture()

Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested

Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested

javascript

google-chrome-extension

屏幕截图