WebRTC 的媒體部分會說明如何存取可擷取影片和音訊的硬體 (例如相機和麥克風),以及媒體串流的運作方式。其中也包括顯示媒體,這是應用程式如何擷取螢幕畫面。
媒體裝置
所有瀏覽器支援的攝影機和麥克風,皆可透過 navigator.mediaDevices
物件存取及管理。應用程式可以擷取目前的連線裝置清單,並監聽變更,因為許多相機和微型 USB 都是透過 USB 進行連線,並且可在應用程式的生命週期內建立連線和中斷連線。由於媒體裝置的狀態隨時可能變動,因此我們建議應用程式註冊裝置變更,以妥善處理變更。
限制
存取媒體裝置時,建議您盡可能提供詳細的限制。雖然可以開啟設有簡單限制條件的預設相機和麥克風,但它可能會提供距離應用程式最合適的媒體串流。
具體限制是在 MediaTrackConstraint
物件中定義,一個用於音訊和一個用於影片。這個物件中的屬性屬於 ConstraintLong
、ConstraintBoolean
、ConstraintDouble
或 ConstraintDOMString
類型。這可以是特定的值 (例如數字、布林值或字串)、範圍 (具有最小值與最大值的 LongRange
或 DoubleRange
),或是含有 ideal
或 exact
定義的物件。如果是特定的值,瀏覽器會嘗試盡可能選擇最接近的值。
針對某個範圍,系統會使用該範圍內最佳值。如果指定了 exact
,則只會傳回與這項限製完全相符的媒體串流。
近距離
// Camera with a resolution as close to 640x480 as possible
{
"video": {
"width": 640,
"height": 480
}
}
範圍
// Camera with a resolution in the range 640x480 to 1024x768
{
"video": {
"width": {
"min": 640,
"max": 1024
},
"height": {
"min": 480,
"max": 768
}
}
}
Exact
// Camera with the exact resolution of 1024x768
{
"video": {
"width": {
"exact": 1024
},
"height": {
"exact": 768
}
}
}
如要判斷特定媒體串流適用的特定設定,可以呼叫 MediaStreamTrack.getSettings()
,傳回目前套用的 MediaTrackSettings
。
您也可以呼叫我們開啟的媒體裝置,透過在播放軌上呼叫 applyConstraints()
,更新音軌的限制條件。如此一來,應用程式不需重新關閉現有的串流,即可重新設定媒體裝置。
多媒體媒體
如果應用程式想要執行螢幕畫面擷取和記錄,就必須使用 Display Media API。getDisplayMedia()
函式 (屬於 navigator.mediaDevices
的一部分) 與 getUserMedia()
類似,可用於開啟螢幕的內容 (或其部分內容,例如視窗)。傳回的 MediaStream
運作方式與使用 getUserMedia()
時相同。
getDisplayMedia()
的限制與一般影片或音訊輸入使用的限制不同。
{
video: {
cursor: 'always' | 'motion' | 'never',
displaySurface: 'application' | 'browser' | 'monitor' | 'window'
}
}
以上程式碼是關於螢幕錄製的特殊限制運作方式。請注意,部分支援顯示媒體支援的瀏覽器可能不支援這些格式。
串流和音軌
MediaStream
代表媒體內容串流,其中包含音軌 (MediaStreamTrack
) 的音軌 (MediaStreamTrack
)。呼叫 MediaStream.getTracks()
可傳回 MediaStreamTrack
物件的陣列,您可以從 MediaStream
擷取所有音軌。
MediaStreamTrack
MediaStreamTrack
的 kind
屬性是 audio
或 video
,代表其代表的媒體類型。您可以切換每個音軌的 enabled
屬性,藉此將各個音軌設為靜音。測試群組具有一個布林值屬性 remote
,表示該屬性是否為 RTCPeerConnection
來源,且來自遠端對等點。