如何通过JavaScript访问网络摄像头

Question

我需要通过JavaScript打开网络摄像头。我知道可以通过<video>访问html5，但需要使用纯JavaScript访问网络摄像头。有人能帮助我或给我一些想法吗？ 我只需要用JavaScript访问网络摄像头，对不起我的英语，我正在使用Google翻译。我不能使用标签“<video>”。

- Leonardo Lacerda

---

你需要通过 JavaScript 或其他方式访问网络摄像头吗？ - Chris Baker

http://www.html5rocks.com/en/tutorials/getusermedia/intro/ - Denys Séguret

http://stackoverflow.com/a/12680547/638127 - zz3599

请访问 http://www.webrtc.org/ 了解更多信息。尝试使用它，如果遇到任何问题，请回来反馈。 - Daniel Moses

这里有另一个可用的示例 https://github.com/saineshwar/WebCamASP.NETCORE - NoWar

Answer 1

正如我在评论中所说，我对你的措辞感到困惑。你说，你知道“HTML5”可以访问网络摄像头，但你需要使用纯Javascript。

好吧，如果你不知道，HTML5引入了所谓的WebRTC，它是实时通信的缩写。其中一部分是新事物navigator.getUserMedia()navigator.mediaDevices.getUserMedia(constraints)。这是一个ECMAscript对象，允许你访问用户机器上的网络摄像头和麦克风设备。

正如你所见，整个功能集嵌入在HTML5发布/规范中，因此我们无法真正将Javascript与HTML5分离。

更多阅读：

• https://developer.mozilla.org/en-US/docs/WebRTC
• https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia
• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

- jAndy

Answer 2

这是一个仅在HTML5回退情况下使用Flash的JavaScript库：

https://github.com/jhuckaby/webcamjs

以下是代码示例：

<script src="webcam.js"></script>

<div id="my_camera" style="width:320px; height:240px;"></div>
<div id="my_result"></div>

<script language="JavaScript">
    Webcam.attach( '#my_camera' );

    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
</script>

<a href="javascript:void(take_snapshot())">Take Snapshot</a>

- Luke Cummings

---

太简单了！（+1）。 - Jose Manuel Abarca Rodríguez

但是它不允许在服务器中使用HTTP与相机。 - CHARITRA SHRESTHA

它会显示这个错误 "Webcam.js错误：找不到要附加到的DOM元素。" 有什么进一步的解决方案吗？ - Sudhir Dehade

@SudhirDehade，你添加了两个<div>标签“my_camera”和“my_result”吗？ - Jose Manuel Abarca Rodríguez

@JoseManuelAbarcaRodríguez 是的。https://stackoverflow.com/questions/58910224/webcam-js-error-could-not-locate-dom-element-to-attach-to 请查看此链接。 - Sudhir Dehade

Answer 3

有一个来自HTML5rocks的很棒的教程（链接）。

基本上，getUserMedia允许浏览器请求权限，然后让您使用相机。

您必须知道它仍然受到很差的支持，并且API可能会再次更改，特别是如果您想将这些流发送到互联网。

- Denys Séguret

Answer 4

现在有几个用于此目的的JavaScript库。

• Script Cam: http://www.scriptcam.com/（已关闭）
• jQuery Webcam：http://www.xarg.org/project/jquery-webcam-plugin/

- o2bjang

---

它们不是基于HTML5的。它们两个都需要Flash。 - Denys Séguret

@dystroy 那又怎样？OP并没有明确指定答案只能包括基于HTML5的解决方案。他使用了HTML5标签，但他的问题文本中根本没有提到这是一个要求。 - Chris Baker

我在强调一些从简短回答中可能不明显的东西，我并没有说答案不好。话虽如此，即使问题远非明确，我也读到了“通过纯JavaScript访问html5但需要访问网络摄像头”的要求。 - Denys Séguret