Question

我正在一个网站上将用户的网络摄像头回传给他们。我的浏览器显示一个图标，指示该网站正在使用我的相机，但我的网站上没有提要。使用的软件包：https://franticbomb.github.io/Camera-Web-App/

这只是js部分

(function() {
  var video = document.getElementById("video"),
    vendorUrl = window.URL || window.webkitURL;

  navigator.getMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia;

  // Capture video
  navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      video.src = vendorUrl.createObjectURL(stream);
      video.play();
    },
    function(error) {
      // An error occured
      // error.code
    }
  );
})();

我希望将摄像头反馈显示给用户。

Answer 1

您的代码已完全过时...

首先，不赞成使用navigator.getUserMedia，而建议基于Promise的navigator.mediaDevices.getUserMedia。

所以您的第一部分应该看起来像

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then(function(stream) {
 ...

但这不是阻止脚本运行的原因。如果您确实打开了浏览器的网络控制台，则可能会发现

无法在“ URL”上执行“ createObjectURL”：找不到与提供的签名匹配的功能。

那是因为我们不能再从MediaStreams创建blob-URL。相反，您应该使用HTMLMediaElement的srcObject property：

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then(function(stream) {
  video.srcObject = stream;
  return video.play();
});

Camera js Web App无法获取相机供稿

1 个答案: