时间戳

首页 > 解决方案 > Camera js Web App无法获取相机供稿

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

问题描述

我正在开发一个将用户的网络摄像头传回给他们的网站。我的浏览器显示一个图标，表明该网站正在使用我的相机，但我的网站上没有提要。使用的包：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
    }
  );
})();

我希望将相机反馈显示给用户。

标签： javascripthtmlcss

解决方案

你的代码完全过时了......

首先，navigator.getUserMedia已弃用基于 Promise 的navigator.mediaDevices.getUserMedia.

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

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

但这并不是阻止您的脚本工作的原因。
如果您确实打开了浏览器的网络控制台，您可能会发现一条类似以下内容的消息

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

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

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

推荐阅读