未捕获的类型错误：无法执行“webkitGetUserMedia”在“导航器”上：必须至少请求音频和视频之一

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'])

，或者也许我对此一无所知，但它的意思是什么

未捕获类型错误：无法在“Navigator”上执行“webkitGetUserMedia”：必须请求至少音频和视频之一
在选择桌面媒体

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

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

---

Screen Capture

另一方面，要运行屏幕捕获，您将使用 getDisplayMedia() 访问 Screen Capture 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()