與getUserMedia火狐V41問題沒有看到Chrome或Firefox V36

Question

我使用（https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia）下面的代碼：

navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? { 
    getUserMedia: function(c) { 
    return new Promise(function(y, n) { 
     (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n); 
    }); 
    } 
} : null); 

設置使用的麥克風。此作品在Chrome（V45）和Firefox（V36）大，但在Firefox（V41）我在控制檯中出現以下錯誤：

Error: setting a property that has only a getter 
RecorderSvc.initAudio@http://fakewebsite.com/js/services/recorder.js:61:1 

我可以做解決問題：

if (navigator.mozGetUserMedia || navigator.webkitGetUserMedia) { 
    navigator.mediaDevices.getUserMedia = function(c) { 
     return new Promise(function(y, n) { 
      (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n); 
     }); 
    } 
} 

但這在Chrome或Firefox（v36）中不起作用。

• 在Chrome中，僅定義了navigator.webkitGetUserMedia。
• 在Firefox（v36）中，僅定義了navigator.mozGetUserMedia。
• 在Firefox（v41）中，navigator.mozGetUserMedia和 navigator.mediaDevices都已定義。

我不知道如何解決這個問題，而不會破壞其中一個瀏覽器。有任何想法嗎？

Answer 1

如果您將您的語句包圍在Try Catch塊中，它將起作用。

if (navigator.mediaDevices || (navigator.mozGetUserMedia || navigator.webkitGetUserMedia)) { 
    try { 
    navigator.mediaDevices = { 
     getUserMedia: function(c) { 
     return new Promise(function(y, n) { 
      (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n); 
     }); 
     } 
    }; 
    } 
    catch(err) { 
    navigator.mediaDevices.getUserMedia = function(c) { 
     return new Promise(function(y, n) { 
     (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n); 
     }); 
    } 
    } 
} else { 
    navigator.mediaDevices = null; 
} 

Answer 2

您複製的代碼（我寫順帶）做了糟糕的工作試圖填充工具navigator.mediaDevices.getUserMedia到沒有它本身還沒有瀏覽器。它已從您找到它的地方移除。感謝您發現它已損壞。

填充是棘手的業務，所以我強烈建議使用官方WebRTC填充的adapter.js，而不是試圖手動填充它。您可以直接使用最新版本adapter.js的，或者鏈接到最新總是一個，像這樣：

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> 

的是，在你所提到的瀏覽器上運行的這樣的一個例子見https://jsfiddle.net/srn9db4h/。

我不會嘗試更正您提到的代碼，因爲polyfilling navigator.mediaDevices正確地變得相當複雜。

這也是不夠的，因爲getUserMedia的位置不是the specification已更改的唯一的東西。的約束格式參數has changed as well，這就是爲什麼navigator.mediaDevices.getUsermedia仍處於實驗階段國旗後在Chrome 45

adapter.js照顧的這一切，直到瀏覽器趕上。