这一节开始，我们通过JavaScript API来开发简单的Web应用程序来学习WebRTC框架。WebRTC框架提供的API既可以用于实现简单的功能，比如一对一的视频、音频通话。也有足够的灵活性可以让有经验的开发人员实现各种复杂的功能。WebRTC为开发人员提供的API大体上可以分为三类：
MediaStreamInterface
RTCPeerConnection interface
RTCDataChannel interface
使用WebRTC API的基本步骤由以下10步构成：
在本节中，我们会一步一步的完成上述步骤中前3步。
在W3C Media Capture and Streams文档中，定义了一个JavaScript API的集合，通过这些API，应用程序可以向平台请求音频和视频流，也可以操作和处理流数据。
MediaStream接口用于表示多媒体数据的流。流的方向可以是输入也可以是输出，可以来自本地也可以来自远端。需要注意的是，一个MediaStream可以包含0个或者多个track。每个track则是一个MediaStreamTrack对象，这个对象代表某一种多媒体源。一个MediaStreamTrack包含的内容由一个或多个channel构成。如下图所示的一个MediaStream有一个视频track和两个独立的音频（左右channel）track组成。
在W3C Media Capture and Streams API文档中，定义了getUserMedia()和createObjectUrl()方法，接下来我们对这两个方法进行简单的介绍。
getUserMedia() API使用开发人员可以获取对本地多媒体设备的使用。通过这个方法设置一些约束和在异步操作的回调函数。
getUserMedia(constraints, successCallback, errorCallback)getUserMedia()会向用户发出使用其摄像头或音、视频输入的请求。
CreateObjectURL()方法控制浏览器创建和管理一个与本地文件或二进制对象（blob）关联的URL。
createObjectURL(stream)这个方法在WebRTC中最典型的应用是从MediaStream对象创建一个blob URL供HTML页面使用。
接下来我们通过一个简单的HTML+JavaScript网页来使用getUserMeida() API，通过这个网页访问本地摄像头并显示本地视频到网页之中。
getUserMedia.html：
<!DOCTYPE html> <html> <head> <title>getUserMedia very simple demo</title> </head> <body> <div id="mainDiv"> <h1><code>getUserMedia()</code> very simple demo</h1> <p>With this example, we simply call <code>getUserMedia()</code> and display the received stream inside an HTML5 <video> element</p> <p>View page source to access both HTML and javascript code...</p> <video autoplay></video> <script src="js/getUserMedia_2.js"></script> </div> </body> </html>getUserMedia.js
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {audio: false, video: true};
var video = document.querySelector("video");
function successCallback(stream) {
window.stream = stream; // make the returned stream available to console...
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
video.play();
}
function errorCallback(error){
console.log("navigator.getUserMedia error: ", error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);使用firefox浏览器打开getUserMedia.html：
点击“共享选中的设备“打开摄像头：
原文：http://blog.csdn.net/yamingwu/article/details/44628145
