WebRTC 初览(2) getUserMedia 介绍一

看完了第一篇的介绍之后 我们来动动手，制作第一个webrtc程序。

实现webrtc有如下3个步骤

1. 获取音频，视频流 或者其他的数据。
2. 获取网络信息，包含IP和端口号，并且和其他已知设备的WebRTC客户端进行交换。这个过程也包含了跨防火墙和NAT的连接建立。
3. 根据通讯信号返回错误和启动或者关闭会话。
4. 交换客户端的相关信息，包含分辨率和解码标准相关内容。
5. 传递视频流和音频流，还有其他各类数据。

WebRTC用如下API 实现了获取和交换数据流：

MediaStream(getUserMedia)：从用户的摄像头和麦克风获得视频音频的数据流。
RTCPeerConnection：用于传递音频或视频通话，并对连接进行加密和带宽管理。
RTCDataChannel：用于普通各类数据通信。

接下来我们详细说说各个API如何使用

getUserMedia 这是整个webrtc标准中的音视频流处理的api ,主要工作是获取音视频流，他可能是从计算机的摄像头和麦克风，也可能是从手机的摄像头和麦克风。我们不需要去关心他在不同设备中底层究竟做了什么 只需要知道，哇 用这么个API我们就能很简单的获取到了以前需要复杂api操作和流处理才能获取到的音视频流。

他的w3c官方api地址如下 API

这里有一个案例用于简单了解这个api的工作流程，用支持webrtc的浏览器，比如谷歌之类打开 网站

这是个实现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; // stream available to console
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

function errorCallback(error){
  console.log('navigator.getUserMedia error: ', error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

看看 是不是很简单？！

每一个MediaStream 都是一个输入流，你可以把这个输入流绑定到 标签，或者通过RTCPeerConnection 把他传递给其他终端，本地用&远程发送都很简单。

使用 getUserMedia()我们需要包含三个参数。

一个 约束对象，用于约束回传的流。 API如下.
一个成功回调函数，如果成功返回一个MediaStream对象
一个失败回调函数，如果失败返回一个error对象。

每个MediaStream都有一个标签,类似 ‘Xk7EuLhsuHKbnjLWkW4yYGNJJ8ONsgwHBvLQ’.这样
你可以通过getAudioTracks() 和 getVideoTracks() 方法 返回一个 MediaStreamTracks 的数组。

在 simpl.info/gum 例中 stream.getAudioTracks()方法返回了一个空数组，因为没有启用音频。当webcam摄像头启用时 stream.getVideoTracks() 返回了一个包含了MediaStreamTrack 的数组，其中的媒体数据直接从webcam获取。.每一种 MediaStreamTrack都对应了一种类型(‘video’ or ‘audio’), 和一个标签 (看起来像这样’FaceTime HD Camera (Built-in)’),这个标签用来区分不同的音频或者视频来源.例子中我们只使用了一个摄像头，并且没有使用音频，但在实际情况下 我们完全可以把他深入拓展下 举个例子，你可以开发一个聊天程序可以通过前置摄像头，后置摄像头，麦克风或者屏幕共享程序返回的不同数据流用来本地显示或者发送给远端的用户。

在下一篇博客中，我们来研究下如何获取并且绑定一个流到页面中的标签中。