我如何访问navigator.getUserMedia（）？

问题描述

我目前正在运行Chrome 11并尝试访问 getUserMedia 以支持HTML5原生音频和视频流，但我收到一条错误消息，指出 navigator .getUserMedia 未定义。如果它不被支持，我该如何访问它，或者我需要等到Chrome加入它？

这是我用来测试<$ c $的代码c> getUserMedia 我发现

 < h1> Snapshot Kiosk< / h1> 
< section id =splash> 
< p id =errorMessage>正在加载...< / p> 
< / section> 
< section id =apphidden> 
< p>< video id =monitorautoplay>< / video> < canvas id =photo>< / canvas> 
< p><输入类型=按钮值=&＃x1F4F7;的onclick = 快照（） > 
< / section> 
< script> 
 navigator.getUserMedia（'video user'，gotStream，noStream）; 
 var video = document.getElementById（'monitor'）; 
 var canvas = document.getElementById（'photo'）; 
函数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; 
 
 
函数noStream（）{
 document.getElementById（'errorMessage'）。textContent ='没有相机可用。'; 
} 
 function snapshot（）{
 canvas.getContext（'2d'）。drawImage（video，0，0）; 
} 
< / script> 
  

解决方案

这里有一整篇文章播放

I am currently running Chrome 11 and trying to access getUserMedia for HTML5 native audio and video stream support but I am getting an error saying that navigator.getUserMedia is undefined. If it's not supported, how do I access it or do I need to wait until Chrome incorporates it?

This is the the code I was using to test getUserMedia which I found

 <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>

解决方案

There is a whole article on it here http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/

这篇关于我如何访问navigator.getUserMedia（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！