媒體擷取和限制

WebRTC 的媒體部分涵蓋如何存取可擷取視訊和音訊的硬體 (例如攝影機和麥克風)，以及媒體串流的運作方式。本課程也會介紹顯示媒體，也就是應用程式擷取螢幕內容的方式。

媒體裝置

瀏覽器支援的所有攝影機和麥克風，都會透過 navigator.mediaDevices 物件存取及管理。應用程式可以擷取目前的連線裝置清單，也可以監聽變更，因為許多攝影機和麥克風都是透過 USB 連線，而且可能會在應用程式生命週期內連線和中斷連線。媒體裝置的狀態隨時可能變更，因此建議應用程式註冊裝置變更，以便正確處理變更。

限制

存取媒體裝置時，建議盡可能提供詳細的限制條件。雖然可以使用簡單的限制開啟預設攝影機和麥克風，但傳送的媒體串流可能遠非應用程式的最佳選擇。

具體限制定義於 MediaTrackConstraint 物件中，音訊和視訊各有一個。這個物件中的屬性屬於 ConstraintLong、ConstraintBoolean、ConstraintDouble 或 ConstraintDOMString 類型。這些可以是特定值 (例如數字、布林值或字串)、範圍 (LongRange 或 DoubleRange，並設有最小值和最大值)，或是具有 ideal 或 exact 定義的物件。如果是特定值，瀏覽器會盡可能挑選最接近的值。如果是範圍，系統會使用該範圍內最佳的值。如果指定 exact，系統只會傳回完全符合該限制的媒體串流。

Near

// 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
        }
    }
}

完全

// 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)。如要從 MediaStream 擷取所有軌跡，請呼叫 MediaStream.getTracks()，這會傳回 MediaStreamTrack 物件的陣列。

MediaStreamTrack

MediaStreamTrack 具有 kind 屬性，該屬性為 audio 或 video，表示所代表的媒體類型。只要切換音軌的 enabled 屬性，即可將音軌設為靜音。音軌具有布林值屬性 remote，指出音軌是否來自 RTCPeerConnection，且來自遠端對等互連。