最近导师让研究一下webrtc，希望将来用到我们的ICT2系统中。

但是从来没有过做web的基础，无论前端还是后端，html、js全都从头学起。html还好说，没有太过复杂的东西。

js就有点难度了，大致翻了一下js权威指南的书，了解了一下基本的语法，也算足够应付。但是对其中浏览器内置的各种对象，完全不了解。

只能慢慢熟悉，一步一步来。

第一部分 获取webcamera

这个比较简单，主要使用了getUserMedia()这个函数。下面是从网上获取的资料：

1、navigator.getUserMedia()

提示用户需要权限去使用像摄像头或麦克风之类的媒体设备.如果用户提供了这个权限，successCallback函数会被调用，且接收一个LocalMediaStream 对象作为参数.

navigator.getUserMedia ( constraints, successCallback, errorCallback );

示例

下面使用浏览器前缀来调用getUserMedia().

navigator.getMedia = ( navigator.getUserMedia ||                       navigator.webkitGetUserMedia ||                       navigator.mozGetUserMedia ||                       navigator.msGetUserMedia);navigator.getMedia (   // constraints   {      video: true,      audio: true   },   // successCallback   function(localMediaStream) {      var video = document.querySelector(‘video‘);      video.src = window.URL.createObjectURL(localMediaStream);      video.onloadedmetadata = function(e) {         // Do something with the video here.      };   },   // errorCallback   function(err) {    console.log("The following error occured: " + err);   });

参数

constraints

constraints参数是一个 MediaStreamConstraints 对象，包含两个值为布尔值的成员: video 及 audio. 这个参数描述了被 LocalMediaStream对象所支持的媒体类型，使用时，需要在constraints参数里指定某个类型或者两个类型.如果某特定类型不被浏览器所支持， getUserMedia 会调用errorCallback函数，并传入错误类型NOT_SUPPORTED_ERROR. 如果浏览器不能得到特定类型的音频或者视频流, getUserMedia 会调用 errorCallback 函数，并传入错误类型MANDATORY_UNSATISFIED_ERR.

若某种媒体类型未被指定，他的值默认为false。下面的例子描述了如何去设置constraints函数接收audio与video:

{ video: true, audio: true }

successCallback

getUserMedia 函数会调用successCallback 并传入LocalMediaStream 对象，这个对象包含媒体流。你可以将这个对象分配给适合的元素，之后处理，就像下面例子所做的一样。

function(localMediaStream) {   var video = document.querySelector(‘video‘);   video.src = http://www.mamicode.com/window.URL.createObjectURL(localMediaStream);>

errorCallback

getUserMedia 函数调用errorCallback 时会包含一个 code 参数，如下所示：

参考https://developer.mozilla.org/zh-CN/docs/WebRTC/navigator.getUserMedia

webrtc学习———记录一