/

如何使用getUserMedia()

如何使用getUserMedia()

了解如何使用getUserMedia()來從用戶端獲取音頻和視頻輸入。

由navigator.mediaDevices暴露的MediaDevices對象提供了getUserMedia()方法。

警告：navigator對象還公開了一個getUserMedia()方法，但已被標記為過時。這個API已經被移動到mediaDevices對象中以保持一致性。

以下是如何使用這個方法。

假設我們有一個按鈕：

1
<button>開始串流</button>

等待用戶點擊此按鈕，然後調用navigator.mediaDevices.getUserMedia()方法。

我們傳遞一個描述我們想要的媒體約束的對象。如果我們需要視頻輸入，我們將調用：

1
2
3
navigator.mediaDevices.getUserMedia({
  video: true
})

我們也可以對這些約束進行細化：

1
2
3
4
5
6
7
8
navigator.mediaDevices.getUserMedia({
  video: {
    minAspectRatio: 1.333,
    minFrameRate: 60,
    width: 640,
    height: 480
  }
})

您可以通過調用navigator.mediaDevices.getSupportedConstraints()來獲取設備支持的所有約束的列表。

如果我們只需要音頻，我們可以傳遞audio: true：

1
2
3
navigator.mediaDevices.getUserMedia({
  audio: true
})

如果我們需要音頻和視頻，則傳遞video: true和audio: true：

1
2
3
4
navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
})

此方法返回一個promise，因此我們將使用async/await來獲取結果到stream變量中：

1
2
3
4
5
document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  });
});

點擊按鈕會觸發瀏覽器中的一個面板，允許我們獲取使用媒體設備的權限：

權限面板

在完成後，我們從getUserMedia()獲取的stream對象現在可以用於各種用途。最直接的用法是在頁面中的video元素中顯示視頻流：

1
<button>開始串流</button> <video autoplay>開始串流</video>
1
2
3
4
5
6
document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  });
  document.querySelector('video').srcObject = stream;
});

以下是在Codepen上的例子：https://codepen.io/flaviocopes/pen/WWyGmr

示例

這是一個Codepen示例，該示例要求您訪問視頻攝像頭並將視頻在頁面中播放：

在HTML中添加一個按鈕以獲取訪問攝像頭，然後添加一個帶有autoplay屬性的video元素。

1
<button id="get-access">獲取訪問攝像頭</button> <video autoplay></video>

JavaScript偵聽按鈕的點擊事件，然後調用navigator.mediaDevices.getUserMedia()請求視頻。然後我們通過調用getUserMedia()的結果的stream.getVideoTracks()來獲取使用的攝像頭的名稱。

將stream設置為video標籤的源對象，以便進行播放：

1
2
3
4
5
6
7
8
9
10
11
12
13
document.querySelector('#get-access').addEventListener('click', async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    document.querySelector('video').srcObject = stream;
    document.querySelector('#get-access').setAttribute('hidden', true);
    setTimeout(() => {
      stream.getVideoTracks()[0].stop();
    }, 3 * 1000);
  } catch (error) {
    alert(`${error.name}`);
    console.error(error);
  }
});

getUserMedia()的參數可以指定視頻流的其他要求：

1
2
3
4
5
6
7
8
9
10
navigator.mediaDevices.getUserMedia(
  {
    video: {
      mandatory: { minAspectRatio: 1.333, maxAspectRatio: 1.334 },
      optional: [{ minFrameRate: 60 }, { maxWidth: 640 }, { maxHeight: 480 }]
    }
  },
  successCallback,
  errorCallback
);

要獲取音頻流，您需要要求音頻媒體對象，然後調用stream.getAudioTracks()而不是stream.getVideoTracks()。

在3秒的播放時間結束後，通過調用track.stop()停止視頻流。

tags: [“w3c”, “webapi”, “video”]