Html navigator.getusermedia

navigator.getusermedia

提问by john smith

I was playing around with the html5 new specifications, precisely the webcam functionalities.

我在玩 html5 新规范，准确地说是网络摄像头功能。

By following this tutorial. I was getting the following error:

通过遵循本教程。我收到以下错误：

Native web camera streaming (getUserMedia) is not supported in this browser. 

which was taken by this if statement:

这是由这个 if 语句所采取的：

if (navigator.getUserMedia)

now, I am sure that navigator.getUserMedia is enabled in my browser, as these examples herework perfectly

现在，我确定在我的浏览器中启用了 navigator.getUserMedia，因为这些示例在这里工作得很好

so, I modified the code in the if, with the following:

所以，我修改了 if 中的代码，如下：

if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)

but now, I am getting a javascript error:

但是现在，我收到了一个 javascript 错误：

Uncaught TypeError: Object #<Navigator> has no method 'getUserMedia' 

at this line here:

在这一行：

navigator.getUserMedia('video', successCallback, errorCallback);

which doesn't really make sense! it IS working on the last link i posted!

这真的没有意义！它正在处理我发布的最后一个链接！

Any ideas?

有任何想法吗？

Thanks in advance.

提前致谢。

回答by robertc

If you're testing for navigator.getUserMedia, navigator.webkitGetUserMedia, navigator.mozGetUserMediaand navigator.msGetUserMediathen you have no guarantee that navigator.getUserMedia()is available. It could be that or any one of the other three. You could try something like this (from getUserMedia.js):

如果你正在测试navigator.getUserMedia，navigator.webkitGetUserMedia，navigator.mozGetUserMedia和navigator.msGetUserMedia那么你就不能保证navigator.getUserMedia()是可用的。它可能是那个或其他三个中的任何一个。你可以尝试这样的事情（来自getUserMedia.js）：

navigator.getUserMedia_ = (   navigator.getUserMedia
                           || navigator.webkitGetUserMedia 
                           || navigator.mozGetUserMedia 
                           || navigator.msGetUserMedia);

if ( !! navigator.getUserMedia_) {
    navigator.getUserMedia_('video', successCallback, errorCallback);
    //The rest of your code

回答by Pier

navigator.getUserMedia()is deprecated. See MDN.

navigator.getUserMedia()已弃用。请参阅 MDN。

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

Use navigator.mediaDevices.getUserMedia(constraints);instead.

使用navigator.mediaDevices.getUserMedia(constraints);来代替。

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

回答by gal007

This is a new technology. Yoy must have a Firefox/Chrome/Opera browser and it has to be updated. Then, try this:

这是一项新技术。Yoy 必须有 Firefox/Chrome/Opera 浏览器，并且必须更新。然后，试试这个：

function showCamera()  {   var streaming = false,
      video        = window.content.document.createElement("video"),
      cover        = window.content.document.createElement("div"),
      canvas       = window.content.document.createElement("canvas"),
      photo        = window.content.document.createElement("img"),
      startbutton  = window.content.document.createElement("button"),
      width = 320,
      height = 0;

  photo.src = "http://placekitten.com/g/320/261";   window.content.document.body.insertBefore(video, window.content.document.body.firstChild);

  var navigator = window.navigator;
    navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);
    navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }   );
    video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }   }, false);
    function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);   }
    startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();   }, false);   }


showCamera();

If your browser is Firefox and still not working, go to about:config and set/add a boolean variable with a true value called media.navigator.enabled

如果您的浏览器是 Firefox 并且仍然无法正常工作，请转到 about:config 并设置/添加一个名为 media.navigator.enabled 的值为 true 的布尔变量

Source: https://developer.mozilla.org/en-US/docs/WebRTC/Taking_webcam_photos

来源：https: //developer.mozilla.org/en-US/docs/WebRTC/Taking_webcam_photos

P/d: I used this code in a Greasemonkey script and it worked. I did some few changes on firsts lines of the original code.

P/d：我在 Greasemonkey 脚本中使用了这段代码，它工作正常。我对原始代码的第一行做了一些改动。