2

我只想知道如何在 Js 中打开 webCam，但我不想要任何指向 API 或其他库的链接，因为我总是自己编写代码但找不到路。我只想要一两行代码关于如何使用 js 打开网络摄像头并希望对其工作方式、在哪个浏览器中工作进行一些描述。

4

4 回答 4

15

我推荐你使用像ScriptCam这样的第三方库，但是由于你声明你想编写你自己的代码，我将解释如何使用新的用户媒体 API。

它是与 W3C 工作草案HTML 媒体捕获一起引入的，带有getUserMedia(). 以下浏览器实验性地支持它：

  • 铬合金
  • 歌剧

在 Chrome 18 或更高版本中，可以启用 API 访问该about:flags站点。

在 Chrome 的 about:flags 页面中启用 getUserMedia()。

在 Opera 中，您必须下载一个实验性的Android 或桌面版本。

在 HTML 中，您将需要使用videoElement

<video id="basic-stream" class="videostream" autoplay=""></video>

首先需要设置权限：

navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(localMediaStream);

  // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
  // See crbug.com/110938.
  video.onloadedmetadata = function(e) {
  // Ready to go. Do some stuff.
  };
}, onFailSoHard);

如果您想要在 Chrome 和 Opera 中运行的代码，以下代码示例应该可以完成工作：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

var video = document.querySelector('video');

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    if (navigator.webkitGetUserMedia) {
      video.src = window.webkitURL.createObjectURL(stream);
    } else {
      video.src = stream; // Opera
    }
  }, onFailSoHard);
} else {
  video.src = 'somevideo.webm'; // fallback.
}

可以通过以下方式检查 API 是否可用：

function hasGetUserMedia() {
   // Note: Opera builds are unprefixed.
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

更多信息可以在教程Capturing Audio & Video in HTML中找到

供应商前缀可能会引起语法问题，因此请注意它们。

于 2012-07-02T18:32:57.967 回答
1

需要 Opera Mobile 12。如果添加 webkit 前缀，它应该也可以在 Chrome 21 中使用。

if(navigator.getUserMedia) {
  navigator.getUserMedia('video', successCallback, errorCallback);
}

请参阅文档。

于 2012-07-02T12:14:56.180 回答
1

这就是所谓的HTML5 Media Capture API。您将在此处找到一些移动浏览器的示例代码。

于 2012-07-02T12:18:56.630 回答