1.getUserMedia
1.1概述
navigator.getUserMedia方法目前主要用于，在浏览器中获取音频（通过麦克风）和视频（通过摄像头），将来可以用于获取任意数据流，比如光盘和传感器。
下面的代码用于检查浏览器是否支持getUserMedia方法。
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;if (navigator.getUserMedia) { // 支持} else { // 不支持} Chrome 21, Opera 18和Firefox 17，支持该方法。目前，IE还不支持，上面代码中的msGetUserMedia，只是为了确保将来的兼容。
getUserMedia方法接受三个参数。
navigator.getUserMedia({ video: true, audio: true}, onSuccess, onError); getUserMedia的第一个参数是一个对象，表示要获取哪些多媒体设备，上面的代码表示获取摄像头和麦克风;onSuccess是一个回调函数，在获取多媒体设备成功时调用；onError也是一个回调函数，在取多媒体设备失败时调用。
下面是一个例子。
var constraints = {video: true};function onSuccess(stream) { var video = document.querySelector("video"); video.src = window.URL.createObjectURL(stream);}function onError(error) { console.log("navigator.getUserMedia error: ", error);}navigator.getUserMedia(constraints, onSuccess, onError); 如果网页使用了getUserMedia方法，浏览器就会询问用户，是否同意浏览器调用麦克风或摄像头。如果用户同意，就调用回调函数onSuccess；如果用户拒绝，就调用回调函数onError。
onSuccess回调函数的参数是一个数据流对象stream。stream.getAudioTracks方法和stream.getVideoTracks方法，分别返回一个数组，其成员是数据流包含的音轨和视轨（track）。使用的声音源和摄影头的数量，决定音轨和视轨的数量。比如，如果只使用一个摄像头获取视频，且不获取音频，那么视轨的数量为1，音轨的数量为0。每个音轨和视轨，有一个kind属性，表示种类（video或者audio），和一个label属性（比如FaceTime HD Camera (Built-in)）。
onError回调函数接受一个Error对象作为参数。Error对象的code属性有如下取值，说明错误的类型。
PERMISSION_DENIED：用户拒绝提供信息。NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。MANDATORY_UNSATISFIED_ERROR：无法发现指定的硬件设备。
1.2范例：获取摄像头
下面通过getUserMedia方法，将摄像头拍摄的图像展示在网页上。
首先，需要先在网页上放置一个video元素。图像就展示在这个元素中。
然后，用代码获取这个元素。
function onSuccess(stream) { var video = document.getElementById('webcam');} 接着，将这个元素的src属性绑定数据流，摄影头拍摄的图像就可以显示了。
function onSuccess(stream) { var video = document.getElementById('webcam'); if (window.URL) { video.src = window.URL.createObjectURL(stream); } else { video.src = stream; } video.autoplay = true; // 或者 video.play();}if (navigator.getUserMedia) { navigator.getUserMedia({video:true}, onSuccess);} else { document.getElementById('webcam').src = 'somevideo.mp4';} 在Chrome和Opera中，URL.createObjectURL方法将媒体数据流（MediaStream）转为一个二进制对象的URL（Blob URL），该URL可以作为video元素的src属性的值。 在Firefox中，媒体数据流可以直接作为src属性的值。Chrome和Opera还允许getUserMedia获取的音频数据，直接作为audio或者video元素的值，也就是说如果还获取了音频，上面代码播放出来的视频是有声音的。
获取摄像头的主要用途之一，是让用户使用摄影头为自己拍照。Canvas API有一个ctx.drawImage(video, 0, 0)方法，可以将视频的一个帧转为canvas元素。这使得截屏变得非常容易。
1.3范例：捕获麦克风声音
通过浏览器捕获声音，需要借助Web Audio API。
window.AudioContext = window.AudioContext || window.webkitAudioContext;var context = new AudioContext();function onSuccess(stream) { var audioInput = context.createMediaStreamSource(stream); audioInput.connect(context.destination);}navigator.getUserMedia({audio:true}, onSuccess); 1.4捕获的限定条件
getUserMedia方法的第一个参数，除了指定捕获对象之外，还可以指定一些限制条件，比如限定只能录制高清（或者VGA标准）的视频。
var hdConstraints = { video: { mandatory: { minWidth: 1280, minHeight: 720 } }};navigator.getUserMedia(hdConstraints, onSuccess, onError);var vgaConstraints = { video: { mandatory: { maxWidth: 640, maxHeight: 360 } }};navigator.getUserMedia(vgaConstraints, onSuccess, onError); 1.5MediaStreamTrack.getSources()
如果本机有多个摄像头/麦克风，这时就需要使用MediaStreamTrack.getSources方法指定，到底使用哪一个摄像头/麦克风。
MediaStreamTrack.getSources(function(sourceInfos) { var audioSource = null; var videoSource = null; for (var i = 0; i != sourceInfos.length; ++i) { var sourceInfo = sourceInfos[i]; if (sourceInfo.kind === 'audio') { console.log(sourceInfo.id, sourceInfo.label || 'microphone'); audioSource = sourceInfo.id; } else if (sourceInfo.kind === 'video') { console.log(sourceInfo.id, sourceInfo.label || 'camera'); videoSource = sourceInfo.id; } else { console.log('Some other kind of source: ', sourceInfo); } } sourceSelected(audioSource, videoSource);});function sourceSelected(audioSource, videoSource) { var constraints = { audio: { optional: [{sourceId: audioSource}] }, video: { optional: [{sourceId: videoSource}] } }; navigator.getUserMedia(constraints, onSuccess, onError);} 上面代码表示，MediaStreamTrack.getSources方法的回调函数，可以得到一个本机的摄像头和麦克风的列表，然后指定使用最后一个摄像头和麦克风。