媒体捕获和约束

WebRTC 的媒体部分涵盖了如何访问能够捕获视频和音频的硬件(例如摄像头和麦克风),以及媒体流的工作方式。它还介绍了显示媒体,即应用如何进行屏幕捕获。

媒体设备

浏览器支持的所有摄像头和麦克风都通过 navigator.mediaDevices 对象进行访问和管理。应用可以检索当前已连接设备的列表,还可以监听更改,因为许多相机和麦克风通过 USB 连接,并且可以在应用生命周期内连接和断开连接。由于媒体设备的状态可能随时发生变化,因此建议应用注册设备更改,以便正确处理更改。

限制条件

访问媒体设备时,最好提供尽可能详细的限制条件。虽然可以通过简单的限制条件打开默认摄像头和麦克风,但这样可能会提供远非应用最佳的媒体流。

具体约束条件在 MediaTrackConstraint 对象中定义,一个用于音频,一个用于视频。此对象中的属性属于 ConstraintLongConstraintBooleanConstraintDoubleConstraintDOMString 类型。这些可以是特定值(例如数字、布尔值或字符串)、范围(LongRangeDoubleRange,带有最小值和最大值),也可以是具有 idealexact 定义的对象。对于特定值,浏览器会尝试选择尽可能接近的值。 对于范围,系统将使用该范围内的最佳值。如果指定了 exact,则仅返回与该约束完全匹配的媒体流。

近距离

// Camera with a resolution as close to 640x480 as possible
{
    "video": {
        "width": 640,
        "height": 480
    }
}

Range

// 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.getTracks()MediaStream 中检索所有轨道,该方法会返回一个 MediaStreamTrack 对象数组。

MediaStreamTrack

MediaStreamTrack 具有 kind 属性,该属性为 audiovideo,用于指示其表示的媒体类型。您可以通过切换每个轨道的 enabled 属性来将其静音。轨道具有一个布尔值属性 remote,用于指示轨道是否由 RTCPeerConnection 提供,以及是否来自远程对等方。