WebRTC Demo - getUserMedia()
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()的更多相关文章
- webRTC demo
准备: 信令服务 前端页面用于视频通话 demo github 地址. 前端页面 为了使 demo 尽量简单,功能页面如下,即包含登录.通过对方手机号拨打电话的功能.在实际生成过程中,未必使用的手机号 ...
- [转] HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- Qt WebRTC demo
This is a very simple demonstration of how to stream from a native application to the browser using ...
- WebRTC–getUserMedia & Canvas
下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能(截取视频中的一帧). 基本思路是这样子的: getUserMedia获取一个MediaStream, s ...
- WebRTC学习与DEMO资源一览
一. WebRTC学习 1.1 WebRTC现状 本人最早接触WebRTC是在2011年底,那时Google已经在Android源码中加入了webrtc源码,放在/external/webrtc/ ...
- WebRTC学习笔记_Demo收集
1. WebRTC学习 1.1 WebRTC现状 本人最早接触WebRTC是在2011年底,那时Google已经在Android源代码中增加了webrtc源代码,放在/external/w ...
- WebRTC 简介及服务搭建、测试
WebRTC主要解决如下三个问题 1.获取音频和视频. 可以访问输入设备,如话筒.(网络)摄像机(头),可以从上述设备获取媒体数据流.目前需要硬件设备支持VP8/VP9,如果设备仅仅支持H.264/H ...
- WebRTC学习
1. WebRTC学习 1.1 WebRTC现状 本人最早接触WebRTC是在2011年底,那时Google已经在Android源码中加入了webrtc源码,放在/external/web ...
- 同网页的WebRTC实现与源码分析
基本按照Real time communication with WebRTC搭建(下面简称该网站为官方tutorial) 本文重视WebRTC的基于同页面通信的代码实现,主要讲述顺序是WebRTC的 ...
随机推荐
- iOS 中 Touch ID得使用方法
iPhone 5S公布以后,iOS设备基本都有集成Touch ID.而这个功能对自己的App也是一个非常好的扩展,关于Touch ID的使用方法.大致例如以下, Swift: 引入LocalAuthe ...
- Objective-C中NSArray和NSMutableArray的基本用法
/*---------------------NSArray---------------------------*/ //创建数组 NSArray *array1 = [NSArray arrayW ...
- 不允许在单例对象中创建Srping容器
spring.net在使用的时候,不允许在单例对象中创建Srping容器 需要将实例化模式转为单例singleton=“false”
- Jquery dom搜索之siblings()方法
如果给定一个dom的元素集合的算则其对象,siblings()方法允许我们在dom树中搜索这个元素集合的同胞元素,并匹配这些元素构造一个新的对象,Jquery文档里面是这么说的,那么让我来用简单易懂的 ...
- setInterval()与clearInterval()的用法
setInterval() 方法可按照指定的周期来调用函数或计算表达式. --简单地说就是过一段时间调用一次该函数 setInterval() 方法会不停地调用函数,直到 clearInterval ...
- ASP.NET之电子商务系统开发-1(数据列表)
一.前言 首先声明的是,这是我第一个与别人合作的.net项目,另一个人做的是后台管理,我做的前台,这是一个电子商务的系统,主要实现的功能是查看商品以及购物功能. 二.开始 首先看一下我截取的项目部分商 ...
- 面试题之java 编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串。 要求不能出现截半的情况
题目:10. 编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串. 但是要保证汉字不被截半个,如"我ABC"4,应该截为"我AB",输 ...
- BZOJ 2301 Problem b(莫比乌斯反演+分块优化)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=37166 题意:对于给出的n个询问,每次求有多少个数对(x,y),满 ...
- Java学习之equals和==的区别
转自:http://www.cnblogs.com/zhxhdean/archive/2011/03/25/1995431.html java中的数据类型,可分为两类: 1.基本数据类型 也称原始数 ...
- gridview回顾
第一看asp.net是在做项目之前,感觉收获也很大,第二次看gridview是在做完项目之后对GridView的回顾,这次的感觉是:我需要多想点,知识直到用时方觉少.直入正题吧,看gridview. ...