javascript 如何访问 navigator.getUserMedia()？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5845306/
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
How do I access navigator.getUserMedia()?
提问by b_d
I am currently running Chrome 11 and trying to access getUserMediafor HTML5 native audio and video stream support but I am getting an error saying that navigator.getUserMediais undefined. If it's not supported, how do I access it or do I need to wait until Chrome incorporates it?
我目前正在运行 Chrome 11 并尝试访问getUserMediaHTML5 本机音频和视频流支持，但我收到一条错误消息，指出navigator.getUserMedia未定义。如果它不受支持，我该如何访问它或者我是否需要等到 Chrome 合并它？
This is the the code I was using to test getUserMediawhich I found
这是我用来测试的代码getUserMedia，我发现
<h1>Snapshot Kiosk</h1>
<section id="splash">
<p id="errorMessage">Loading...</p>
</section>
<section id="app" hidden>
<p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
<p><input type=button value="📷" onclick="snapshot()">
</section>
<script>
navigator.getUserMedia('video user', gotStream, noStream);
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
function gotStream(stream) {
video.src = URL.getObjectURL(stream);
video.onerror = function () {
stream.stop();
noStream();
}
video.onloadedmetadata = function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
}
}
function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}
function snapshot() {
canvas.getContext('2d').drawImage(video, 0, 0);
}
</script>
回答by mwrf
The latest opera desktop build has support for getUserMedia() See here: http://labs.opera.com/news/2011/10/19/
最新的 Opera 桌面版本支持 getUserMedia() 请参见此处：http: //labs.opera.com/news/2011/10/19/
It's just a waiting game for other browsers to implement this. Now that opera has support, the other should soon follow.
这只是其他浏览器实现这一点的等待游戏。现在歌剧有了支持，其他应该很快就会跟进。
回答by Sam Dutton
Since last night (3 May 2012) getUserMedia() in Chrome Canary takes an object not a string.
从昨晚（2012 年 5 月 3 日）开始，Chrome Canary 中的 getUserMedia() 接受一个对象而不是字符串。
To try it out, you can run the following code from the console on any page (like this one) with a video element:
要尝试一下，您可以在任何带有视频元素的页面（如本页面）上的控制台运行以下代码：
navigator.webkitGetUserMedia(
{"video": true, "audio": true},
function(s){
document.querySelector('video').src =
window.webkitURL.createObjectURL(s);
},
function(e){console.log(e);}
);
回答by Ahi Tuna
Chrome Dev Channel JUST added WebRTC support, so NOW what you're asking here actually becomes plausible. See: https://groups.google.com/forum/#!topic/discuss-webrtc/LuY7zYLA8sA
Chrome Dev Channel 刚刚添加了 WebRTC 支持，所以现在你在这里问的实际上变得合理。请参阅：https: //groups.google.com/forum/#!topic/discuss-webrtc/LuY7zYLA8sA
Basically, you must use the webkit prefixe: webkitGetUserMedia() although documentation on this method is scarce, I'm currently trying to piece together a working demo of it.
基本上，您必须使用 webkit 前缀： webkitGetUserMedia() 虽然关于此方法的文档很少，但我目前正在尝试拼凑它的工作演示。
回答by benmmurphy
I think there is a stub method in the latest chrome dev (12.0.742.16 dev) but i can't get it to do anything on Mac OSX. At least I thought I saw it. I just checked and the method doesn't seem to be there anymore. Here is the webkit bug report for implementing getUserMedia: https://bugs.webkit.org/show_bug.cgi?id=56586
我认为最新的 chrome dev (12.0.742.16 dev) 中有一个存根方法，但我无法在 Mac OSX 上执行任何操作。至少我以为我看到了。我刚刚检查过，该方法似乎不再存在。这是实现 getUserMedia 的 webkit 错误报告：https://bugs.webkit.org/show_bug.cgi ?id =56586
I think the only working implementation at the moment is in Opera for Android. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
我认为目前唯一可行的实现是在 Opera for Android 中。http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
The chrome/webkit method is webkitGetUserMedia but it isn't implemented yet.
chrome/webkit 方法是 webkitGetUserMedia 但尚未实现。
