[知識篇]MediaStreams API - getUserMedia 相容性處理

MediaStreams APIs經過演變更新下，新舊版api略微不同，getUserMedia也是其中之一， 包含其參數constraints，因為是基於MediaStreamConstraints，各瀏覽器新舊版可能實作方式不同， 也因此為了提高各瀏覽器相容性，我們需要做點基本相容性處理。

學習目標

本章將會了解到:

• getUserMedia 基本新舊版差異與相容處理

實作範例

這邊程式碼可以延續上一章，來接續補上相容處理。

...如果遇到舊版瀏覽器支援度問題

舊版瀏覽器可能不支援mediaDevices，因此這時只能用舊有apigetUserMedia。

注意: 使用getUserMedia會因各瀏覽器而有不同的前綴字(prefix)

// 舊方法 (處理舊瀏覽器相容性問題)
function OldGetUserMedia(){
    return navigator.getUserMedia
                    || navigator.webkitGetUserMedia
                    || navigator.mozGetUserMedia
                    || navigator.msGetUserMedia;
}

// Initializes media stream.
function getUserMedia(constraints) {
  if ('mediaDevices' in navigator) {
    return navigator.mediaDevices.getUserMedia(constraints)
  }
  // 相容處理，依照新接口
  navigator.mediaDevices = {};

  navigator.mediaDevices.getUserMedia = function(constraints) {
    const getUserMedia = OldGetUserMedia()

    // 不支援的情況下
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    // 保持跟原先api一樣故將其封裝成promise
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }

  return navigator.mediaDevices.getUserMedia(constraints)
}

使用如下：

getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream)
  .catch(handleMediaStreamError)

Try it

在瀏覽器上打開你的index.html，結果應該會如下圖所示：

總結

自己實作過後，大致了解新舊版相容的問題及處理方式。

而官方推薦使用：

• adapter.js polyfill套件，有興趣也能看看套件源碼是如何處理相容性的！

為了排除相容問題，後面的實作接會引入此套件，幫我們處理掉相容問題，讓我們能更focus在學習 WebRTC 上～