iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
0
Software Development

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列 第 6

[知識篇]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,看看在各瀏覽器是否能正常運作!(除了IE以外...


總結

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

而官方推薦使用:

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

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

新手入門,如有錯誤,歡迎指正~~~

系列文章同步更新於部落格


上一篇
[知識篇] MediaStreams API - getUserMedia 介紹
下一篇
[知識篇] MediaStreams API - MediaStream Object
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30

尚未有邦友留言

立即登入留言