iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
0
Software Development

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

[知識篇]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的狀態。有兩種狀態:liveended,在 live 狀態時,代表以連接到輸入裝置,並且可以透過 enabled屬性來控制 on/off;相對的,ended 則代表與輸入裝置斷開連接。

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

    https://ithelp.ithome.com.tw/upload/images/20200921/20129521xRSKillZKY.png

  • 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 物件以及其功能

參考

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

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


上一篇
[知識篇] MediaStreams API - MediaStream Object
下一篇
[實作篇]MediaStreams API - 基本應用(搭配canvas)
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30

尚未有邦友留言

立即登入留言