4

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

按照本教程。我收到以下错误：

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

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

if (navigator.getUserMedia)

现在，我确定在我的浏览器中启用了 navigator.getUserMedia，因为这里的这些示例可以完美运行

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

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

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

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

在这一行：

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

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

有任何想法吗？

提前致谢。

4

3 回答 3

18

如果您正在测试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
于 2012-09-13T15:26:13.800 回答
7

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

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

改为使用navigator.mediaDevices.getUserMedia(constraints);。

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

于 2019-07-08T17:16:57.903 回答
3

这是一项新技术。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();

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

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

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

于 2013-05-30T18:22:21.523 回答