WebRTC学习笔记_Demo收集
1. WebRTC学习
1.1 WebRTC现状
本人最早接触WebRTC是在2011年底,那时Google已经在Android源代码中增加了webrtc源代码,放在/external/webrtc/,可是Android并没实用到它,更没有被浏览器使用。当时试图在Android
2.3(Gingerbread)高通平台的手机上用H.264 硬件codec替换掉WebRTC缺省使用的VP8软codec,费了不少劲勉强换掉后效果非常差仅仅得放弃。
近期得知Google最新版的Chrome for Android已经支持WebRTC,应老板的要求搭一个手机浏览器上视频通信的demo,为此在网上搜集各种资料,发现经过一年多的发展,国内外研究和使用WebRTC的人明显多起来,可用的demo也非常多。在此做一个笔记,留作日后參考。
眼下基于WebRTC的开发事实上有两个方向,一个是基于浏览器的WebRTC应用开发,编程语言主要是JavaScript、HTML等,这也是WebRTC作为HTML5标准的组成部分原本的目的;还有一个是C层面的移植和开发,作为一款非常强大的开源软件,非常多领域的软件项目都能够利用到WebRTC的音视频通信和处理能力,这些场合的应用程序可能是C语言写的,也不一定与浏览器有关。本文是属于前一种方向。
1.2 WebRTC基本概念学习
WebRTC的官方资料能够从其官网http://www.webrtc.org/和W
3C站点http://www.w3.org/TR/webrtc/上看到。
学习WebRTC基础知识比較好的站点是《Getting Started with WebRTC》,网址是http://www.html5rocks.com/en/tutorials/webrtc/basics/,这个也是官网上推荐的。
对浏览器来说,WebRTC事实上就是提供了3个API:
MediaStream (即getUserMedia),用于获取媒体数据,比如来自摄像头和麦克风的视频流和音频流;
RTCPeerConnection,用于peer跟peer之间呼叫和建立连接以便传输音视频数据流;
RTCDataChannel,用于peer跟peer之间传输音视频之外的一般数据。
须要注意的是这几个API的名称在不同浏览器及同一浏览器的不同版本号之间略有差异,比方PeerConnection在FireFox上叫做mozRTCPeerConnection,而在当前版本号的Chrome上叫做webkitRTCPeerConnection,将来WebRTC标准化完毕后会把这些前缀去掉使用统一的名称。
眼下网上找到的WebRTC demo都仅仅用到了getUserMedia和RTCPeerConnection这两个API,还有一个API即RTCDataChannel似乎眼下还不太成熟。
WebRTC是实现peer to peer的实时通信(可以两个或多个peer之间),在可以通信前peer跟peer之间必须建立连接,这是RTCPeerConnection的任务,为此须要借助一个信令server(signaling
server)来进行,信令包含3种类型的信息:
Session control messages: 初始化和关闭通信,及报告错误;
Network configuration: 两方的IP地址和port号(局域网内部IP地址需转换为外部的IP地址);
Media capabilities: 两方的浏览器支持使用何种codecs以及多高的视频分辨率。
WebRTC并未规定使用何种信令机制和消息协议,象SIP、XMPP、XHR、WebSocket这些技术都能够用作WebRTC的信令通信。
除了信令server,peer跟peer建立连接还须要借助还有一种server(称为STUN
server)实现NAT/Firewall穿越,由于非常多peer是处于私有局域网中,使用私有IP地址,必须转换为公有IP地址才干相互之间数据传输。这当中涉及到一些专业术语包含STUN、TURN、ICE等,详细的本人还有待学习。网上找到的WebRTC
demo好象都用的是Google提供的STUN server。
peer跟peer之间一旦建立连接就能够直接传输音视频数据流,并不须要借助第三方server中转。
2. WebRTC封装库
WebRTC的目的是为了简化基于浏览器的实时数据通信的开发工作量,但实际应用编程还是有点复杂,尤其调用RTCPeerConnection必须对怎样建立连接、交换信令的流程和细节有较深入的理解。因此有高人为我们开发了WebRTC封装库,将WebRTC的调用细节封装起来,包装成更简单的API,使开发应用程序更简单。封装库的还有一个目的是为了屏蔽不同浏览器之间的差异,比如上面说的API名称的差异。当然,这些库都是开源的,能够依据自己的须要又一次改动。
眼下网上找到的有两种WebRTC封装库,一个是webrtc.io,网址是https://github.com/webRTC/webRTC.io,上面有具体说明和用法,有非常多demo使用它;还有一个是SimpleWebRTC,网址是https://github.com/HenrikJoreteg/SimpleWebRTC,貌似比webrtc.io用起来更简单。
3. WebRTC
demo试用
网上能够找到一堆WebRTC demo,在code.google.com上也能找到不少WebRTC应用项目的源代码。有些demo是直接调用WebRTC
API开发的,但大多数是调用上述两种WebRTC封装库开发的。因为WebRTC API的名称在不同浏览器及同一浏览器的不同版本号之间存在差异,所以不是全部demo都能执行在全部浏览器上。
为了找到一个可在公司局域网环境中跑在手机上的WebRTC demo,本人试用了不少demo,以下选几个有代表性的介绍,当中有两个经改动后已在本人公司的局域网环境中执行成功。
先说一下本人的測试环境:手机上的浏览器是Chrome for Android 26.0.1410.49,执行在Android
4.1.2上,这个Chrome版本号本身是beta版,支持WebRTC但缺省是关闭WebRTC功能的,须要在chrome://flags中使能WebRTC并重新启动Chrome,或者在启动Chrome时添加命令行选项--enable-webrtc。本人在PC上执行WebRTC的浏览器是Chrome
26.0.1410.43,操作系统是Windows 7。
3.1 http://www.webrtc.org/demo(https://apprtc.appspot.com/)
这是官方的demo,功能非常全,可惜不知为何https://apprtc.appspot.com/这个网址已经连不上了,只是其源代码还是能够下载到的,在https://code.google.com/p/webrtc-samples/。此demo没实用不论什么封装库。
这个demo所使用的信令机制使用了XHR和Google
App Engine Channel API ,详细我不懂。
在我的公司局域网环境里无法执行该demo。
3.2 爱立信实验室开发的WebRTC
demo
据说是第一个基于浏览器的WebRTC视频通信demo,爱立信为此还开发了一个浏览器用于支持WebRTC,好象也是基于WebKit的,叫做Bowser
browser(当时市场上可能还没有支持WebRTC的浏览器),该项目网址是https://labs.ericsson.com/apps/bowser。这个Bowser
browser好象仅仅支持Ubuntu 11.04 and 11.10(见https://labs.ericsson.com/apis/web-real-time-communication/downloads)。
该demo的网址是http://webrtc.labs.ericsson.net:8082。
在我的公司局域网环境里无法执行该demo。
3.3 人脸检測识别
利用WebRTC的getUserMedia从摄像头获取图像进行人脸识别的demo,比如这两个:
http://neave.com/webcam/html5/face/
http://www.raymondcamden.com/demos/2012/mar/29/test1.html
这两个demo在PC和手机上的Chrome上都可执行。
3.4 http://www.simpl.info
这个demo演示HTML, CSS and JavaScript的各种feature和用法,包含WebRTC的3个API:getUserMedia、RTCPeerConnection、RTCDataChannel的演示,但遗憾的是RTCPeerConnection的演示仅仅是本地camera的画面传回给本地,并没有实现真正的设备之间音视频通信。
该项目的源代码在https://github.com/samdutton/simpl。
3.5 Framegrabber
这是一个基于WebRTC实现屏幕共享(screensharing)的Chrome扩展,源代码在https://github.com/samdutton/rtcshare,有关介绍可參考这篇文章:http://blog.sina.com.cn/s/blog_51396f890102es7k.html。
本人没有试用过。
3.6 http://webrtc.dennis.is
这个demo是基于库webrtc.io实现的,是webrtc.io官方的demo,使用WebSocket作为信令手段。
在我的公司局域网环境里无法执行该demo;在家里无线路由器环境下可成功执行,但仅仅能单向传输视频。
3.7 http://v.kainy.cn
国内牛人做的,相当于是汉化版的http://webrtc.dennis.is,自然也是基于webrtc.io实现的,但使用的webrtc.io版本号较老,不支持新版本号Chrome所使用的API名称webkitRTCPeerConnection,所以无法在新版本号Chrome上执行。详细介绍在http://blog.kainy.cn/2013/01/webrtc实现的视频聊天室应用/。
3.8 http://conversat.io
这个demo是基于库SimpleWebRTC实现的,是SimpleWebRTC官方的demo,使用WebSocket作为信令手段。
在我的公司局域网环境里无法执行该demo;在家里无线路由器环境下可成功执行,且可双向传视频,支持多个peer同一时候视频通信。
经改动后在本人公司局域网成功执行,试过两个手机和一个笔记本电脑同一时候视频通信OK。改动和执行步骤:
1. 从http://www.nodejs.org/download/下载nodejs最新版并安装,我是在Windows7
64位上安装的;
2. 在命令行下依次执行例如以下命令(安装执行signaling
server所需的模块):
npm install express
npm install yetify
npm install getconfig
npm install node-uuid
npm install socket.io
3. 从https://github.com/andyet/signalmaster下载信令server源代码,该信令server是SimpleWebRTC缺省使用的,解开该源代码后执行node
server.js,该服务器监听8888port,通过WebSocket与浏览器通信。
4. 在同一台PC上执行apache
server,将从http://conversat.io站点扒下来的文件放到该server上(可在Chrome浏览器中打开http://conversat.io然后鼠标右键单击在菜单中选“另存为”、“网页,所有”就可以),改动当中的 index.html 和 simplewebrtc.js,将当中 url 改为'http://10.100.156.83:8888'(当中IP地址是我的PC在公司局域网中的IP地址)。
5. 在同一局域网中的其它设备上打开Chrome浏览器,地址栏输入http://10.100.156.83,输入同样的room名称(随便起)就可以開始多方视频通信,也可改动上述index.html中的“var
room”一行,设定为固定的room名称,就不须要每次在每一个设备上手工输入room名称了。
3.9 国内牛人开发的视频聊天室应用
这个demo是国内牛人赵书剑开发的视频聊天室,基于webrtc.io实现。
该项目源代码和文档下载地址是http://ishare.iask.sina.com.cn/f/35083616.html,源代码在https://github.com/zsj2145676。
经改动后在本人公司局域网成功执行,试过两个手机和一个笔记本电脑同一时候视频通信OK。改动和执行步骤:
1. 从http://ishare.iask.sina.com.cn/f/35083616.html下载webrtc.chatdemo.zip,解压缩,改动当中public\javascripts\client.js中的rtc.connect一行,将实际的server地址写进去,比如改为:rtc.connect("ws://10.100.156.83:8001",
room);
2. 同上文3.8节步骤1、2安装nodejs
3. 执行node
app.js,注意该demo本身已包括http server,不须要其它的比方apache
server
4. 在同一局域网中的其它设备上打开Chrome浏览器,地址栏输入http://10.100.156.83:8000,输入同样的room名称(随便起)就可以開始多方视频通信。
转自:http://blog.sina.com.cn/s/blog_69a04cf401016gz4.html
本人使用3.8在本地调试执行成功。
WebRTC学习笔记_Demo收集的更多相关文章
- webrtc学习笔记2(Android端demo代码结构)
最近正在修改webrtc的Android端demo和服务器交互的内容,介绍一下demo的大体结构吧,以便能快速回忆. 环境:Android5.0以上.libjingle_peerconnection_ ...
- webrtc学习笔记1(建立连接基本流程)
最近在做一个基于webrtc的视频软件,以下是自己对于上层建立通话连接流程的基本理解,记录于此. 假设A和B要建立视频通话,A为房间创建端,B为加入房间端: 1.A通过http登录.获取其他服务器地址 ...
- webrtc学习笔记
获取笔记本摄像头视频流 <html> <meta http-equiv="Content-Type" content="text/html; chars ...
- webrtc学习笔记积累
https://blog.csdn.net/xyphf/article/details/106536584
- JavaSE中Collection集合框架学习笔记(3)——遍历对象的Iterator和收集对象后的排序
前言:暑期应该开始了,因为小区对面的小学这两天早上都没有像以往那样一到七八点钟就人声喧闹.车水马龙. 前两篇文章介绍了Collection框架的主要接口和常用类,例如List.Set.Queue,和A ...
- ASP.Net开发基础温故知新学习笔记
申明:本文是学习2014版ASP.Net视频教程的学习笔记,仅供本人复习之用,也没有发布到博客园首页. 一.一般处理程序基础 (1)表单提交注意点: ①GET通过URL,POST通过报文体: ②需在H ...
- Sharepoint学习笔记—习题系列--70-576习题解析 --索引目录
Sharepoint学习笔记—习题系列--70-576习题解析 为便于查阅,这里整理并列出了70-576习题解析系列的所有问题,有些内容可能会在以后更新. 需要事先申明的是: 1. ...
- 《Java学习笔记(第8版)》学习指导
<Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...
- spark学习笔记总结-spark入门资料精化
Spark学习笔记 Spark简介 spark 可以很容易和yarn结合,直接调用HDFS.Hbase上面的数据,和hadoop结合.配置很容易. spark发展迅猛,框架比hadoop更加灵活实用. ...
随机推荐
- 获取checkbox 的选中状态的id、checkbox的一些操作
var id_array=new Array(); $('input[name="id"]:checked').each(function(){ id_array.push($(t ...
- php笔试算法题:顺时针打印矩阵坐标-蛇形算法
这几天参加面试,本来笔试比较简单,但是在面试的时候,技术面试官说让我现场写一个算法,顺时针打印矩阵的坐标,如图所示 顺序为,0,1,2,3,4,9,14,19,24,23,22,21,20,15,10 ...
- Silverlight并行下载与串行下载
思路清晰后仅仅只需百来行代码便可轻松编写出一套完整的资源动态下载组件- SerialDownloader和ParallelDownloader,它们共用一个完成资源表,且串行下载集成了优先机制(Dow ...
- 第一个只出现一次的字符,josephus环,最大子数组和
#include<stdio.h> #include<stdlib.h> #include<string.h> #define MAXINT 0x7fffffff ...
- Repeat Number
Problem B: Repeat Number Time Limit: 1 Sec Memory Limit: 32 MB Description Definition: a+b = c, if ...
- Linux主要发行版本介绍
Linux主要发行版本介绍 1.Red Hat Linux Red Hat是一个比较成熟的Linux版本,无论在销售还是装机量上都比较可观.该版本从4.0开始同时支持Intel.Alpha及Sparc ...
- 不要将 Array、Object 等类型指定给 prototype
在 JavaScript 中,注意不要将 Array.Object 等类型指定给 prototype,除非您的应用需要那么做.先观察如下代码: function Foo(){}Foo.prototyp ...
- NYOJ-252 01串
01串 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 ACM的zyc在研究01串,他知道某一01串的长度,但他想知道不含有"11"子串的这样的长 ...
- 关于java同步包中ConcurrentLinkedQueue类的深入分析与理解
一,官方描写叙述 一个基于连接节点的无界线程安全队列.这个队列的顺序是先进先出.队列头部的元素是留在队列中时间最长的,队列尾部的元素是留在队列中时间最短的.新元素被插入到元素的尾部,队列从队列的头部检 ...
- Spring MVC 简单介绍
Spring MVC 是典型的mvc架构,适合web开发. controler 输入输出的控制器,也是对外view提供数据的接口,调用service层. model 数据,由bean组成(相应表),关 ...