1. web RTC
web storage

2. webRTC 是什么？
• 1.RTC=== real time conminucation.
• webRTC 就能够在多个浏览器间进行实时数据，视频
，音频通信的架构技术。
• 是谷歌 2010 年以 6820 万美元收购 Global IP Solutions 公司
得的一 技 。获 项 术

3. webRTC 能干 用？啥
• 个例子：举两
• 第一个例子：假 巴黎有一个保 代理人，正在 找新客 。他搭建设 险 寻 户
了一个网站，同 投时 资 AdWords ， 售 示在网 上。如果让销 电话显 页
采用 WebRTC 技 ，那么客 只要在家打 他的网站，然后就可以术 户 开
直接 系到他。不必通联 过 OTT 服 。务
• 第二个例子：假如一个小 的 背包客 立的社交网站打算将里面的众 为 设
人 系起来， 一次出游。他 不必相互交联 计划 们 换 ID ，也不必安装某
个 音聊天 件，按一下按 ，就直接通 器面 面 。语 软 钮 过浏览 对 讨论

4. 我做的 demo
• 用 webRTC 行 捕进 视频 获

6. webRTC 技能树

7. 名字 功能解析
MediaStream 来自本地的音视频流，或者来自远程的
音视频流。 MediaStream 通过
getUserMedia() 获得
MediaStreamTrack 媒体数据源，一个媒体数据源构成一个
MediaStreamTrack ，比如音频数据源和
视频数据源，多个相互之间有关联的媒
体数据源（比如有同步关系的音频视频
媒体数据源）构成一个媒体流。
DataChannel 数据通道，两个 webRTC 终端的连接建
立后，他们可以通过这个数据通道传输
任意类型的数据。
Peer 通过 WebRTC 进行数据交互的节点或
用户或终端，它通常是一个 Web
App ，它们之间的发现，连接的建立和
断开通过 signalling （信令）控制。

8. PeerConection 表示一个 webRTC 通讯连接对象，它维
护与这个通讯相关联的，处理通讯相关
的双方信令事件，完成通讯数据的传输
。
Signalling 信令， webRTC 网络通过 Signalling 来发
现各个 Peer ，通过 Signalling 来控制各
个 Peer 之间连接的建立和断开。
信令的处理过程大致如下：
呼叫方发送 offer ；
被呼叫方接受这个 offer ；
被呼叫方方式 answer ；
呼叫方接受 answer 。

9. 总结
• WebRTC 技 是一 放式网 技 ，可 直接在 器中与朋友术 种开 络 术 让您 浏览
聊天，而无需任何插件。视频 getUserMedia API 能 捕 像 和够 获您摄 头
麦克 的 入信号，风 输 RTCPeerConnection 可将音 和 送 方频 视频发 给对
，而 RTCDataChannel 交 所有信息来使游 保持同步。在没则负责 换 戏
有防火 阻 的情况下，游 数据可通 点 点方式直接 送，能墙 挡 戏 过 对 发 够
大幅降低服 器 。务 开销

10. • 插件 demo
注释插件：点击截图。

11. web storage
在我在孔明的 个 目里都 到了需要用 技 的现 两 项 碰 这种 术
地方了： app 工厂，和 品化的微信后台。产

12. web storage （ ie8+ ）
• 背景： cookie
– cookie 在 在网 上是可 的，不加密的情况下很传输时 络 见
不安全，而且大小不能超过 4kb
• 判断 器是否支持浏览
• if(sessionStorage){...}
• if(localStorage){...}

13. • web storage ：
– session storage
– local storage
演示它俩的不同。

14. session storage
session storage ：
• 1. 用 窗口户关闭 / 器，浏览 session
storage 存 的数据就会被清除（除非储
是 器崩 了才有可能 在）浏览 溃 还
• 2. 数据只在 建他 的 内可构 们 标签 见

15. local storage
local storage （ 本地存 数据而为 储
生）：
•1. 除非主 除，否 会一直存在动删 则
•2. 可在同源下的窗口， 内共享标签
。

16. setItem （“ key” ， value ）；
getItem （“ key” ）；
ef ：
sessionStorage.setItem("key");
可以直接通 象的属性来 置和 取还 过对 设 获 值
sessionStorage.key = value;
sessionStorage.key;// 取获 该 key 的 value
localStorage 也是一 的。。样
存 字符串 ，存 象怎么存储 简单 对

17. • removeItem("key");
• clear() 清楚 域名下的所有存 。该 储
• key()+length 遍实现 历
• for(var
i=0,sessionLength=sessionStorage.length;i++){
• console.log(sessionStorage.key(i));
• }

18. web storage 的存 空 默 是储 间 认 5m ，
当超过 5m 的 候，有 器兼容时 浏览 问题
，有的会默 大存 空 ，有的会认扩 储 间
提示你 大几扩 m ，有的直接抛出 常异
。错误

19. 从控制台可以看到本地存 的储 web storage 信息