Javascript 如何访问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="&#x1F4F7;" 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>

快照亭
正在加载


getUserMedia（'video user'，gotStream，noStream）；
var video=document.getElementById（'monitor'）；
var canvas=document.getElementById（'photo'）；
函数gotStream（stream）{
video.src=URL.getObjectURL（流）；
video.onerror=函数（）{
stream.stop（）；
鼻流（）；
}
video.onloadedmetadata=函数（）{
canvas.width=video.videoWidth；
canvas.height=video.videoHeight；
document.getElementById（'splash'）.hidden=true；
document.getElementById（'app'）。hidden=false；
}
}
函数noStream（）{
document.getElementById（'errorMessage'）。textContent='No camera available'；
}
函数快照（）{
canvas.getContext（'2d'）.drawImage（视频，0,0）；
}

我认为最新的chrome开发版（12.0.742.16开发版）中有一个存根方法，但我无法让它在Mac OSX上做任何事情。至少我以为我看到了。我刚检查过，方法似乎不再存在了。以下是实现getUserMedia的webkit错误报告：

我认为目前唯一有效的实现是Opera for Android

---

chrome/webkit方法是webkitGetUserMedia，但尚未实现。

最新的opera桌面版本支持getUserMedia（） 请看这里：

这只是一个等待其他浏览器实现的游戏。既然opera得到了支持，

---

另一个应该很快就会出现。

Chrome开发频道刚刚添加了WebRTC支持，所以现在您在这里提出的问题实际上是有道理的。见：

基本上，您必须使用webkit前缀：webkitGetUserMedia（），尽管关于此方法的文档很少，但我目前正在尝试拼凑一个工作演示。

从昨晚（2012年5月3日）开始，Chrome Canary中的getUserMedia（）使用的是对象而不是字符串

要进行尝试，您可以在控制台的任何页面（如）上使用视频元素运行以下代码：

navigator.webkitGetUserMedia(
  {"video": true, "audio": true}, 
  function(s){
    document.querySelector('video').src = 
      window.webkitURL.createObjectURL(s);
  }, 
  function(e){console.log(e);}
);

如果你有兴趣看到一个演示在行动。。。