如何访问navigator.getUserMedia() ?
How do I access navigator.getUserMedia()?
我目前正在运行Chrome 11,并试图访问getUserMedia
的HTML5原生音频和视频流支持,但我得到一个错误说,navigator.getUserMedia
是未定义的。如果它不受支持,我如何访问它,或者我需要等到Chrome合并它?
这是我用来测试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>
最新的opera桌面版本支持getUserMedia()详见:http://labs.opera.com/news/2011/10/19/
这只是一个等待游戏,其他浏览器实现这一点。现在歌剧有了支持,另一个应该很快跟上。
自从昨晚(2012年5月3日)getUserMedia()在Chrome金丝雀接受一个对象不是字符串。
要尝试一下,可以从控制台在任何带有video元素的页面(比如这个页面)上运行以下代码:navigator.webkitGetUserMedia(
{"video": true, "audio": true},
function(s){
document.querySelector('video').src =
window.webkitURL.createObjectURL(s);
},
function(e){console.log(e);}
);
我认为在最新的chrome开发(12.0.742.16 dev)中有一个存根方法,但我无法让它在Mac OSX上做任何事情。至少我以为我看到了。我刚检查过,这个方法似乎已经不在那里了。以下是实现getUserMedia的webkit bug报告:https://bugs.webkit.org/show_bug.cgi?id=56586
我认为目前唯一有效的实现是在Android的Opera中。http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
chrome/webkit方法是webkitGetUserMedia,但它还没有实现。
Chrome开发通道刚刚添加了WebRTC支持,所以现在你在这里问的实际上变得合理。参见:https://groups.google.com/forum/# !主题/discuss-webrtc LuY7zYLA8sA
基本上,您必须使用webkit前缀:webkitGetUserMedia(),尽管关于此方法的文档很少,但我目前正在尝试拼凑它的工作演示
- chrome扩展中的navigator.geolocation.getCurrentPosition
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 使用(navigator.geolocation)检测浏览器功能错误
- 在百度地图中显示navigator.geolocation.getCurrentPosition
- 类型错误'未定义'不是对象(正在评估'navigator.connection.type'
- 使用navigator.getUserMedia(Javascript)访问移动麦克风
- 在React Native+Redux中使用Navigator
- 如果 window.navigator.userAgent 被弃用,我应该改用什么
- 无法使用 navigator.geolocation,因为“只允许安全源”
- Navigator.sendBeacon() 数据大小限制
- navigator.serviceWorker.controller始终保持为空
- navigator.plugins如何查找并返回安装在web浏览器上的插件对象数组
- Cordova嵌入式网络视图未响应navigator.camera未定义
- navigator.notification.alert is not working
- Windows 8 - Cordova - navigator.camera.getPicture
- "navigator.msLaunchUri”;在IE Edge中,始终返回成功
- navigator.geolocation给出错误的结果
- navigator.userAgent检测javascript浏览器的语法说明
- Javascript 函数调用 navigator.geolocation.getCurrentPosition 经常提
- phonegap navigator.app.loadUrl error