Javascript 从浏览器访问相机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12024770/
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
Access camera from a browser
提问by Justin
Is it possible to access the camera (built-in on Apples) from a browser?
是否可以从浏览器访问相机（Apple 内置）？
Optimal solution would be client-side javascript. Looking to avoid using Java or Flash.
最佳解决方案是客户端 javascript。希望避免使用 Java 或 Flash。
回答by xbonez
The HTML5 spec does allow accessing the webcamera, but last I checked, it is far from finalized, and has very, very little browser support.
HTML5 规范确实允许访问网络摄像头，但上次我检查过，它还远未最终确定，并且对浏览器的支持非常非常少。
This is a link to get you started: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
这是一个让您入门的链接：http: //www.html5rocks.com/en/tutorials/getusermedia/intro/
You'll probably have to use flash if you want it to work cross-browser.
如果你想让它跨浏览器工作，你可能不得不使用 flash。
回答by vadi taslim
As of 2017, WebKit announces support for WebRTC on Safari
截至 2017 年，WebKit 宣布在 Safari 上支持 WebRTC
Now you can access them with videoand standard javascript WebRTC
现在您可以使用video标准的 javascript WebRTC访问它们
E.g.
例如
var video = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.style.width = '200px';
video.style.height = '200px';
/* Setting up the constraint */
var facingMode = "user"; // Can be 'user' or 'environment' to access back or front camera (NEAT!)
var constraints = {
audio: false,
video: {
facingMode: facingMode
}
};
/* Stream it to video element */
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
video.srcObject = stream;
});
Have a play with it.
玩玩吧。
回答by alex
There is a really cool solution from Danny Markov for that. It uses navigator.getUserMedia method and should work in modern browsers. I have tested it successfully with Firefox and Chrome. IE didn't work:
Danny Markov 有一个非常酷的解决方案。它使用 navigator.getUserMedia 方法，应该在现代浏览器中工作。我已经用 Firefox 和 Chrome 成功地测试了它。IE没有工作：
Here is a demo:
这是一个演示：
https://tutorialzine.github.io/pwa-photobooth/
https://tutorialzine.github.io/pwa-photobooth/
Link to Danny Markovs description page:
链接到 Danny Markovs 描述页面：
http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/
http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/
Link to GitHub:
GitHub 链接：
回答by Justin
回答by Daniil Ryzhkov
You can use HTML5 for this:
您可以为此使用 HTML5：
<video autoplay></video>
<script>
var onFailSoHard = function(e) {
console.log('Reeeejected!', e);
};
// Not showing vendor prefixes.
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);
</script>
回答by blasteralfred Ψ
Video Tutorial: Accessing the Camera with HTML5 & appMobi APIwill be helpful for you.
视频教程：使用 HTML5 和 appMobi API 访问相机将对您有所帮助。
Also, you may try the getUserMediamethod (supported by Opera 12)
另外，您可以尝试该getUserMedia方法（Opera 12 支持）
