使用 Javascript 打开网络摄像头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11046013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open webcam with Javascript
提问by Konrad Reiche
I just want to know how to open webCam in Js but i don't want any links to API or other librariesbecause i make my own code always but can't find a way to go.I just want the one or two line code on how to open the webcam with js and want some description as how it work,in which browser it work.
我只想知道如何在 Js 中打开网络摄像头，但我不想要任何 API 或其他库的链接，因为我总是编写自己的代码但找不到方法。我只想要一两行代码关于如何使用 js 打开网络摄像头并希望对其工作方式进行一些描述，以及它在哪个浏览器中工作。
回答by Konrad Reiche
I recommend you to use a third-party library like ScriptCam, but since you declared that you want to write your own code, I will give an explanation for using the new user media API.
我建议您使用第三方库，如ScriptCam，但由于您声明要编写自己的代码，我将解释如何使用新的用户媒体 API。
It was introduced with the W3C Working Draft HTML Media Capturewith getUserMedia(). The following browser experimentally support it:
它是随着 W3C 工作草案HTML 媒体捕获与getUserMedia(). 以下浏览器在实验上支持它：
- Chrome
- Opera
- 铬合金
- 歌剧
In Chrome 18 or higher the API can be enabled visiting the about:flagssite.
在 Chrome 18 或更高版本中，可以启用 API 访问about:flags网站。
In Opera you have to download one of the experimental Android or desktop builds.
在 Opera 中，您必须下载其中一种实验性的Android 或桌面版本。
In HTML you will need to use the videoElement
在 HTML 中，您需要使用videoElement
<video id="basic-stream" class="videostream" autoplay=""></video>
First you need to set the permissions:
首先你需要设置权限：
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);
If you want code that works in Chrome and Opera, the following code sample should do the work:
如果你想要在 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.
}
Whether the API is available can be checked with:
可以通过以下方式检查 API 是否可用：
function hasGetUserMedia() {
// Note: Opera builds are unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
Further information can be found in the tutorial Capturing Audio & Video in HTML
更多信息可以在教程Capturing Audio & Video in HTML 中找到
Syntax problems can arise from vendor prefixes, so look out for them.
供应商前缀可能会导致语法问题，因此请注意它们。
回答by Boris Ivanov
its quite new but its working:
它很新，但它的工作原理：
https://stackoverflow.com/questions/3922723/using-a-webcam-with-javascript
https://stackoverflow.com/questions/3922723/using-a-webcam-with-javascript
回答by Quentin
Requires Opera Mobile 12. If you add the webkit prefix it should also work in Chrome 21.
需要 Opera Mobile 12。如果添加 webkit 前缀，它也应该适用于 Chrome 21。
if(navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
}
See the documentation.
请参阅文档。
回答by Arcadien
This is the so called HTML5 Media Capture API. You will find sample code herefor some mobile browsers.
这就是所谓的HTML5 Media Capture API。您将在此处找到一些移动浏览器的示例代码。
