navigator.getusermedia

Question

我正在玩html5新規格，正是網絡攝像頭的功能。

通過following this tutorial。我收到以下錯誤：

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

if語句這是採取這樣的：

if (navigator.getUserMedia) 

現在，我相信navigator.getUserMedia在我的瀏覽器，因爲這些例子here工作完美

所以，我修改的代碼在如果，具有下列：

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

但現在，我得到一個JavaScript錯誤：

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

在這條線的位置：

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

不真正意義！它正在我發佈的最後一個鏈接上工作！

任何想法？

在此先感謝。

Answer 1

如果你正在爲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 

Answer 2

這是一項新技術。 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腳本中使用了這段代碼，它工作正常。我在原始代碼的第一行做了一些改變。