我如何访问navigator.getUserMedia()?

时间:2011-04-30 23:26:58

标签: javascript html

我目前正在运行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>

5 个答案:

答案 0 :(得分:6)

答案 1 :(得分:4)

最新的opera桌面版本支持getUserMedia() 见这里:http://labs.opera.com/news/2011/10/19/

这只是其他浏览器实现此功能的等待游戏。现在歌剧有了支持, 另一个应该很快就会跟进。

答案 2 :(得分:4)

自昨晚(2012年5月3日)以来,Chrome Canary中的getUserMedia()获取的对象不是字符串。

要试用它,您可以在控制台的任何页面(例如this one)上使用视频元素运行以下代码:

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

答案 3 :(得分:3)

我认为最新的chrome dev(12.0.742.16 dev)中存在一个存根方法,但我无法在Mac OSX上做任何事情。至少我以为我看到了它。我刚检查过,方法似乎不再存在了。以下是用于实现getUserMedia的webkit错误报告:https://bugs.webkit.org/show_bug.cgi?id=56586

我认为目前唯一可行的实现是Opera for Android。 http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

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

答案 4 :(得分:3)

Chrome开发者频道JUST添加了WebRTC支持,所以现在你在这里问的问题实际上变得合情合理。请参阅:https://groups.google.com/forum/#!topic/discuss-webrtc/LuY7zYLA8sA

基本上,您必须使用webkit前缀:webkitGetUserMedia(),尽管此方法的文档很少,但我目前正在尝试拼凑它的工作演示。