WebRTC 之二 浏览器的多媒体获取

浏览器对媒体数据的处理方法

我的书：

购买链接：

京东购买链接

淘宝购买链接

当当购买链接

WebRTC的框架包括一系列基于Web的JavaScript API。API集主要包括三个逻辑组：

1. 本地和远程音视频的获取和管理。MediaStream接口（y以及RT和H5相关的

2. 连接管理。RTCPeerConnection 接口。

3 任意数据管理， RTCDataChannel 接口。

WebRTC使用的10个步骤

1. 为本地设备创建一个MediaStream对象，如麦克风阵列，web照相机

2. 从MediaStream获得一个URL blob。

3. 使用得到的URL blob作为本地的预览

4. 创建一个RTCPeerConnection对象

5. 将本地媒体流添加到新创建的连接中

6. 将本地的会话发送到对等的远端

7. 接收来自对远端的会话

8. 处理会话的信息并且把远端的媒体流添加到RTCPeerConnection

9. 从远端的媒体流获取URL blob

10. 使用获得的URL blob播放远端的音视频

Web的媒体数据获取

   《W3C Media Capture and Stream》文档定义了一系列JavaScript API。

http://dev.w3.org/2011/webrtc/editor/archives/20140817/getusermedia.html

MediaStream 接口用于表示媒体数据流。一个MediaStream可以包含0个或者多个track，每个track对应一个MediaStreamTrack对象。

本地媒体内容获取

getUserMedia() API

 

getUserMedia(constraints, successCallback, errorCallback)

 

URL方式获取媒体内容

createObjectUrl()方法指示浏览器根据本地文件或者二进制对象（blob）创建URL。et

 

createObjectURL(stream)
该API的典型应用是从MediaStream对象创建一个URL blob。

 

播放getUserMedia()获得的媒体

首先创建一个HTML网页，该网页的video标签用于播放视频， script标签去运行一个javascript，该javascript调用

 

 




  
getUserMedia() very simple demo

  
View page source to access both HTML and javascript code...

  

  

getUserMedia_2.js
//Look after different browser vendors' ways of calling the getUserMedia()
//API method:
//Opera --> getUserMedia
//Chrome --> webkitGetUserMedia
//Firefox --> mozGetUserMedia
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {audio: true, video: true};
var video = document.querySelector("video");

function successCallback(stream) {
  window.stream = stream; // make the returned stream available to console...
  if (window.URL) {
// Chrome case: URL.createObjectURL() converts a MediaStream to a blob URL
    video.src = window.URL.createObjectURL(stream);
  } else {
// Firefox and Opera: the src of the video can be set directly from the stream
    video.src = stream;
  }
  video.play();
}

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

navigator.getUserMedia(constraints, successCallback, errorCallback);

打开html页面并刷新该页面，既可以看到播放camera录制视频的同时也播放接收声音。