Javascript Chrome WebKitGetUserMedia
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12442864/
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
Chrome WebKitGetUserMedia
提问by anony115511
I'm trying to get a webcamera stream working on my page, and I want to do it using WebKitGetUserMedia. I've googled alot and it feels like i've tried all examples out there but noone works for me. I'm obviously doing something wrong but I have no idea what.
我正在尝试让网络摄像头流在我的页面上工作，并且我想使用 WebKitGetUserMedia 来实现。我在谷歌上搜索了很多，感觉就像我已经尝试了所有的例子，但没有人适合我。我显然做错了什么，但我不知道是什么。
So my question is, what do I have to do in order to get WebKitGetUserMedia working in chrome? I'm using Chrome v21. If someone have some complete html, js code example I'd be really happy to see it!
所以我的问题是，我该怎么做才能让 WebKitGetUserMedia 在 chrome 中工作？我正在使用 Chrome v21。如果有人有一些完整的 html、js 代码示例，我会很高兴看到它！
回答by Apoorv Saxena
Please elaborate on your point and as to what exactly, is the problem, what error is encountered, so that one can pin point your mistake easily.
请详细说明您的观点，究竟是什么问题，遇到了什么错误，以便人们可以轻松指出您的错误。
Though, I would suggest you an excellent read on Capturing Audio and Video from HTML5, http://www.html5rocks.com/en/tutorials/getusermedia/intro/.
不过，我建议您阅读有关从 HTML5 捕获音频和视频的优秀文章，http://www.html5rocks.com/en/tutorials/getusermedia/intro/。
Though, after following this article, I came across a bug, which does not allow one to load resource from localhost or one's machine on Google Chrome(which might also be the case with you) and which gets resolved once you host your HTML page on the net(try using Dropbox to upload your file publicly for free or get hosting for yourself).
但是，在完成这篇文章之后，我遇到了一个错误，它不允许在 Google Chrome 上从本地主机或自己的机器加载资源（您也可能是这种情况），并且一旦您将 HTML 页面托管在网络（尝试使用 Dropbox 免费公开上传您的文件或为自己托管）。
Here's the code that you can refer to start with:
以下是您可以参考的代码：
<html>
<head>
<title>HTML5 Webcam Test</title>
<style type="text/css">
body{
max-width: 300px;
max-height: 300px;
}
#live_video{
top: 0px;
height: 100%;
width: 100%;
left: 0px;
}
</style>
</head>
<body>
<video id="live_video" autoplay controls></video>
<script type="text/javascript">
video = document.getElementById("live_video");
navigator.webkitGetUserMedia({video:true, audio:true},
function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
}
);
</script>
</body>
</html>
