WebRTC 入门 02 通过浏览器使用摄像头 I

浏览数：196 / 时间：2015年06月09日

这一节开始，我们通过JavaScript API来开发简单的Web应用程序来学习WebRTC框架。WebRTC框架提供的API既可以用于实现简单的功能，比如一对一的视频、音频通话。也有足够的灵活性可以让有经验的开发人员实现各种复杂的功能。WebRTC为开发人员提供的API大体上可以分为三类：

本地和远端音频、视频的获取和管理：

MediaStreamInterface

连接管理

RTCPeerConnection interface

数据管理

RTCDataChannel interface

使用WebRTC的基本步骤

使用WebRTC API的基本步骤由以下10步构成：

为本地设备（摄像头、麦克风）创建MediaStream对象。
从本地MediaStream获取URL blob。
使用URL blob在本地进行预览。
创建RTCPeerConnection对象。
将本地stream添加到新创建的连接中。
发送你的会话描述信息给远端节点。
接收从远端节点发来的会话描述信息。
处理收到的会话描述信息并将它远端stream添加到你的RTCPeerConnection中。
从远端stream中获取URL blob。
使用获取到的URL blob来播放来自远端节点的音频和视频。

在本节中，我们会一步一步的完成上述步骤中前3步。

Media capture和streams

在W3C Media Capture and Streams文档中，定义了一个JavaScript API的集合，通过这些API，应用程序可以向平台请求音频和视频流，也可以操作和处理流数据。

MediaStream 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()会向用户发出使用其摄像头或音、视频输入的请求。

URL

CreateObjectURL()方法控制浏览器创建和管理一个与本地文件或二进制对象（blob）关联的URL。

createObjectURL(stream)

这个方法在WebRTC中最典型的应用是从MediaStream对象创建一个blob URL供HTML页面使用。

使用getUserMedia() API

接下来我们通过一个简单的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：

技术分享