用Javascript打开网络摄像头

Question

我只是想知道如何在Js中打开webCam，但我不想要任何API或其他库的链接因为我总是自己制作代码但是找不到办法去。我只想要一两行代码来了解如何使用js打开网络摄像头，并想要一些描述如何工作，在哪个浏览器中工作。

Answer 1

我建议你使用像ScriptCam这样的第三方库，但是既然你声明要编写自己的代码，我会给出使用新用户媒体API的解释。

W3C工作草案HTML Media Capture与getUserMedia()一起推出。以下浏览器以实验方式支持它：

• 铬
• 戏

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

在Opera中，您必须下载其中一个实验Android or desktop builds。

---

在HTML中，您需要使用video元素

<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

中找到

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

Answer 2

它很新但它的工作：

http://www.scriptcam.com/

https://stackoverflow.com/questions/3922723/using-a-webcam-with-javascript

http://chemicaloliver.net/internet/getusermedia-the-new-api-webcam-in-browser-using-javascript-and-html5-video/

Answer 3

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

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

请参阅the documentation。

Answer 4

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