MediaStream Image Capture API

MediaStream 影像捕獲的概念和用法

檢索影像或影片流的過程如下所述。示例程式碼改編自 Chrome 的影像捕獲示例。

首先，透過呼叫 MediaDevices.getUserMedia() 來獲取裝置引用。下面的示例表示提供任何可用的影片裝置，但 getUserMedia() 方法允許請求更具體的功能。此方法返回一個 Promise，該 Promise 會解析為一個 MediaStream 物件。

navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // Do something with the stream.
});

接下來，分離媒體流的可視部分。透過呼叫 MediaStream.getVideoTracks() 來實現。這將返回一個 MediaStreamTrack 物件陣列。下面的程式碼假定 MediaStreamTrack 陣列中的第一個項是要使用的項。您可以使用 MediaStreamTrack 物件的屬性來選擇您需要的那個。

const track = mediaStream.getVideoTracks()[0];

此時，您可能希望在捕獲影像之前配置裝置功能。您可以透過在執行其他任何操作之前，在軌道物件上呼叫 applyConstraints() 來實現此目的。

let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// Check whether zoom is supported or not.
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });

最後，將 MediaStreamTrack 物件傳遞給 ImageCapture() 建構函式。雖然 MediaStream 包含幾種型別的軌道並提供了多種檢索它們的方法，但如果 MediaStreamTrack.kind 不是 "video"，則 ImageCapture 建構函式將丟擲型別為 NotSupportedError 的 DOMException。

let imageCapture = new ImageCapture(track);

介面

ImageCapture

透過有效的 MediaStreamTrack 引用從攝影裝置捕獲影像的介面。

規範

瀏覽器相容性

另見

• MediaStream
• MediaStreamTrack