码迷,mamicode.com
首页 > Web开发 > 详细

WebRTC Demo - getUserMedia()

时间:2014-09-10 12:16:30      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:des   style   http   io   使用   java   ar   strong   for   

WebRTC介绍

WebRTC提供三类API:

  • MediaStream,即getUserMedia
  • RTCPeerConnection
  • RTCDataChannel

getUserMedia已经由Chrome, Opera和Firefox支持。

RTCPeerConnection目前则由Chrome, Opera和Firefox支持。Chrome和Opera提供的接口名字为webkitRTCPeerConnection,Firefox则命名为mozRTCPeerConnection。

RTCDataChannel则只有Chrome 25, Opera 18和Firefox 22及以上版本才支持。

一个WebRTC应用需要做如下几件事情

  • 获取流(Streaming),包括音频,视频,以及其它数据
  • 获取网络信息,如IP和端口(PORT),并与其它WebRTC Client交换信息,有的时候还需要穿越防火墙或NAT
  • 信令(Signaling),用于报告错误、初始化或关闭会话
  • 交换多媒体以及Client的支持能力信息,比如分辩率、编解码信息等
  • 流通信

 

MediaStream(getUserMedia)

每一个MediaStream都有一个输入(Input)和输出(Output)。输入可以是由navigator.getUserMedia()生成的多媒体流。输出则可以是html5的video元素或者一个RTCPeerConnection。

咱们看一个简单的示例。

index.html文件内容如下:

<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="WebRTC, HTML5, JavaScript" />
<meta name="description" content="WebRTC Demo" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<base target="_blank">
<title>getUserMedia</title>
<link rel="stylesheet" href="../../css/main.css" />
</head>
<body>
<div id="container">

  <h1><a href="#" title="WebRTC samples homepage">WebRTC samples</a> <span>getUserMedia</span></h1>

  <!--video元素,视频将输出到这里--//>
  <video autoplay></video>

  <p>在video元素中显示<code>getUserMedia()</code>生成的视频流。</p>

  <p><code>MediaStream</code>对象<code>window.stream</code>是全局对象。 <code>getUserMedia()</code> callback对window.stream赋值。你可以在控制台中查看他的值。</p>

<a href="#" title="View source for this page on Github" id="viewSource">源代码</a>
</div>

<!--getUserMedia示例代码--//>
<script src="js/main.js"></script>
</body>
</html>

index.html主要由一个video元素和一个main.js文件构成。video元素负责输出getUserMedia生成的MediaStream;main.js是主要的代码代码逻辑。

main.js文件内容如下:

// 全局变量,inspector的console中可以查看
video = document.querySelector("video"); // get video element ref
constraints = {audio: false, video: true}; // only need video
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

/**
 * successCallback
 * getUerMedia成功获得一个MediaStream时,会回调此方法
 **/
function successCallback(stream){
  window.stream = stream; // stream available to console
  if (window.URL) { // 生成视频流的地址,将其做为video的输入
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

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

navigator.getUserMedia(constraints, successCallback, errorCallback);

点击看DEMO。

getUserMedia()方法需要三个参数:

  • 一个约束对象,如main.js中的constraints

  • 一个success callback,成功时,会回调此方法,参数是一个MediaStream

  • 一个error callback,失败时,会回调此方法,参数是一个error对象

MediaStream由id,label,MediaStreamTracks(video tracks和audio tracks)构成。读者可以在console中查看window.stream对象,了解其构成及方法。

在Chrome和Opera中,URL.createObjectURL()方法把一个MediaStream转化为一个Blob Url。这样,Video元素就可以使用此地址作为其输入。

WebRTC Demo - getUserMedia()

标签:des   style   http   io   使用   java   ar   strong   for   

原文地址:http://www.cnblogs.com/lotushy/p/3964076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!