WebRTC 的媒体部分涵盖了如何访问能够捕获视频和音频的硬件(例如摄像头和麦克风),以及媒体流的工作方式。它还介绍了显示媒体,即应用如何进行屏幕捕获。
媒体设备
浏览器支持的所有摄像头和麦克风都通过 navigator.mediaDevices 对象进行访问和管理。应用可以检索当前已连接设备的列表,还可以监听更改,因为许多相机和麦克风通过 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
}
}
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 属性,该属性为 audio 或 video,用于指示其表示的媒体类型。您可以通过切换每个轨道的 enabled 属性来将其静音。轨道具有一个布尔值属性 remote,用于指示轨道是否由 RTCPeerConnection 提供,以及是否来自远程对等方。