# [知識篇]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 idMediaStreamTrack.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 物件以及其功能