[知識篇]MediaStreams API - MediaStreamTrack Object

學習目標

• 了解 MediaStreamTrack 物件包含了哪些屬性及功能

還不知道如何取得MediaStreamTrack 物件的話，可以先觀看該章節

MediaStream 與 MediaStreamTrack

現在可以發現，MedaiStream object 與 MediaStreamTrack object 彼此有著依賴關係在 。

  const constraints = {
    video: true,
    audio: true
  }

  const handleSuccess = mediaStream => {
    const mediaStreamTracks = mediaStream.getTracks()
    console.log(mediaStreamTracks)
  }

  navigator.mediaDevices
      .getUserMedia(constraints)
      .then(handleSuccess)
      .catch(/** 略... */);

能夠透過 MedaiStream object 取得 MediaStreamTrack object。

每個 MediaStream object 包含了數個 MediaStreamTrack object，其分別是來自不同的影音輸入裝置( video/audio input devices)， 每個 MediaStreamTrack object 則可能包含數個 channel (聲道(如：左右聲道))。

MediaStreamTrack Object

• 包含幾個屬性：

  • MediaStreamTrack.contentHint: 此可選提示允許 MediaStreamTrack 使用者（例如 PeerConnection 或 MediaRecorder）使用更適合所使用內容類型的方法對軌道媒體進行編碼或處理。詳細設定可參考w3c文件
  • MediaStreamTrack.enabled: 是否啟用，設為false時為禁用，畫面上的就不會渲染出medai stream object且會呈現黑畫面跟靜音。
  • MediaStreamTrack.id: unique id
  • MediaStreamTrack.kind: 類別，audio track則為"audio"，video track則為"video"
  • MediaStreamTrack.label: 輸入裝置的名稱。
  • MediaStreamTrack.muted: 是否靜音。總覺得這屬性跟enabled有點重疊，而官網是建議用 enabled 屬性來實作 "muted" 功能。
  • MediaStreamTrack.readyState: 該track的狀態。有兩種狀態：live跟ended，在 live 狀態時，代表以連接到輸入裝置，並且可以透過 enabled屬性來控制 on/off;相對的，ended 則代表與輸入裝置斷開連接。

  console 出 mediaStream.getTracks() 的內容如下：

  

• Method:

  • MediaStreamTrack.applyConstraints(): 能夠指定特定屬性值，瀏覽器會依照其能夠符合的理想值來約束返回的多媒體數據。
  • MediaStreamTrack.clone(): 複製一份 MediaStreamTrack。
  • MediaStreamTrack.getCapabilities(): 返回瀏覽器能夠支援的屬性及範圍值。
  • MediaStreamTrack.getConstraints(): 返回最後透過 applyConstraints 方法所設定的屬性值。
  • MediaStreamTrack.getSettings(): 返回目前的 MediaStreamTrack 中設定的屬性值。
  • MediaStreamTrack.stop(): 停止播放與該 MediaStreamTrack 關聯的媒體來源，當兩者取消關聯後，MediaStreamTrack 的 readyState 狀態會改為 ended。

• Event Handler:

  • onended
  • onmuted
  • onunmuted

延伸思考:

• 當單一 MediaStream object 中所包含的所有 MediaStreamTrack object都stop後，會發現 MediaStream object中的 inactive event觸發了!!!
• 透過 getCapabilities() 方法看看有哪些屬性能夠自定義。

總結

本章節了解到:

• 何謂 MediaStreamTrack 物件以及其功能

參考

• MDN - MediaStreamTrack
• W3C - MediaStreamTrack contentHint