Page 285 - Web性能权威指南

mandatory: { ➍
width: { min: 320 },
height: { min: 180 }
},
optional: [ ➎
{ width: { max: 1280 }},
{ frameRate: 30 },
{ facingMode: "user" }
]
}
}
navigator.getUserMedia(constraints, gotStream, logError); ➏

function gotStream(stream) { ➐
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
}

function logError(error) { ... }
</script>
➊ HTML 的 video 元素，用于输出
➋ 指定请求音频 Track
➌ 指定请求视频 Track
➍ 对视频 Track 的强制约束条件
➎ 对视频 Track 的可选约束条件
➏ 从浏览器中请求音频和视频流
➐ 处理 MediaStream 对象的回调函数

这个例子示范了一种稍微复杂的场景：在浏览器中同时请求音频和视频 Track，同
时指定了最小解析度和必须使用的摄像机类型，以及针对 720p 高清视频的一组可选
约束。getUserMedia() API 负责获准访问用户的麦克风和摄像机，并获取符合指定
要求的流——大致就这意思吧。

这里的 API 同样允许应用操作个别的 Track，复制它们，修改约束，等等。另外，
取得流之后，还可以将它们提供给其他浏览器 API：

• 通过 Web Audio API 在浏览器中处理音频；
• 通过 Canvas API 采集个别视频帧并加以处理；
• 通过 CSS3 和 WebGL API 为输出的流应用各种 2D/3D 特效。

长话短说，getUserMedia() 就是从底层平台取得音频和视频流的简单 API。得到的
媒体都经过了 WebRTC 音频和视频引擎的自动优化、编码、解码，然后可以输出到

WebRTC ｜ 275