Web rtc和webstorage技术讲解

1,038 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,038
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web rtc和webstorage技术讲解

  1. 1. web RTCweb storage
  2. 2. webRTC 是什么?• 1.RTC=== real time conminucation.• webRTC 就能够在多个浏览器间进行实时数据,视频,音频通信的架构技术。• 是谷歌 2010 年以 6820 万美元收购 Global IP Solutions 公司得的一 技 。获 项 术
  3. 3. webRTC 能干 用?啥• 个例子:举两• 第一个例子:假 巴黎有一个保 代理人,正在 找新客 。他搭建设 险 寻 户了一个网站,同 投时 资 AdWords , 售 示在网 上。如果让销 电话显 页采用 WebRTC 技 ,那么客 只要在家打 他的网站,然后就可以术 户 开直接 系到他。不必通联 过 OTT 服 。务• 第二个例子:假如一个小 的 背包客 立的社交网站打算将里面的众 为 设人 系起来, 一次出游。他 不必相互交联 计划 们 换 ID ,也不必安装某个 音聊天 件,按一下按 ,就直接通 器面 面 。语 软 钮 过浏览 对 讨论
  4. 4. 我做的 demo• 用 webRTC 行 捕进 视频 获
  5. 5. webRTC 技能树
  6. 6. 名字 功能解析MediaStream 来自本地的音视频流,或者来自远程的音视频流。 MediaStream 通过getUserMedia() 获得MediaStreamTrack 媒体数据源,一个媒体数据源构成一个MediaStreamTrack ,比如音频数据源和视频数据源,多个相互之间有关联的媒体数据源(比如有同步关系的音频视频媒体数据源)构成一个媒体流。DataChannel 数据通道,两个 webRTC 终端的连接建立后,他们可以通过这个数据通道传输任意类型的数据。Peer 通过 WebRTC 进行数据交互的节点或用户或终端,它通常是一个 WebApp ,它们之间的发现,连接的建立和断开通过 signalling (信令)控制。
  7. 7. PeerConection 表示一个 webRTC 通讯连接对象,它维护与这个通讯相关联的,处理通讯相关的双方信令事件,完成通讯数据的传输。Signalling 信令, webRTC 网络通过 Signalling 来发现各个 Peer ,通过 Signalling 来控制各个 Peer 之间连接的建立和断开。信令的处理过程大致如下:呼叫方发送 offer ;被呼叫方接受这个 offer ;被呼叫方方式 answer ;呼叫方接受 answer 。
  8. 8. 总结• WebRTC 技 是一 放式网 技 ,可 直接在 器中与朋友术 种开 络 术 让您 浏览聊天,而无需任何插件。视频 getUserMedia API 能 捕 像 和够 获您摄 头麦克 的 入信号,风 输 RTCPeerConnection 可将音 和 送 方频 视频发 给对,而 RTCDataChannel 交 所有信息来使游 保持同步。在没则负责 换 戏有防火 阻 的情况下,游 数据可通 点 点方式直接 送,能墙 挡 戏 过 对 发 够大幅降低服 器 。务 开销
  9. 9. • 插件 demo注释插件:点击截图。
  10. 10. web storage在我在孔明的 个 目里都 到了需要用 技 的现 两 项 碰 这种 术地方了: app 工厂,和 品化的微信后台。产
  11. 11. web storage ( ie8+ )• 背景: cookie– cookie 在 在网 上是可 的,不加密的情况下很传输时 络 见不安全,而且大小不能超过 4kb• 判断 器是否支持浏览• if(sessionStorage){...}• if(localStorage){...}
  12. 12. • web storage :– session storage– local storage演示它俩的不同。
  13. 13. session storagesession storage :• 1. 用 窗口户关闭 / 器,浏览 sessionstorage 存 的数据就会被清除(除非储是 器崩 了才有可能 在)浏览 溃 还• 2. 数据只在 建他 的 内可构 们 标签 见
  14. 14. local storagelocal storage ( 本地存 数据而为 储生):•1. 除非主 除,否 会一直存在动删 则•2. 可在同源下的窗口, 内共享标签。
  15. 15. setItem (“ key” , value );getItem (“ key” );ef :sessionStorage.setItem("key");可以直接通 象的属性来 置和 取还 过对 设 获 值sessionStorage.key = value;sessionStorage.key;// 取获 该 key 的 valuelocalStorage 也是一 的。。样存 字符串 ,存 象怎么存储 简单 对
  16. 16. • removeItem("key");• clear() 清楚 域名下的所有存 。该 储• key()+length 遍实现 历• for(vari=0,sessionLength=sessionStorage.length;i++){• console.log(sessionStorage.key(i));• }
  17. 17. web storage 的存 空 默 是储 间 认 5m ,当超过 5m 的 候,有 器兼容时 浏览 问题,有的会默 大存 空 ,有的会认扩 储 间提示你 大几扩 m ,有的直接抛出 常异。错误
  18. 18. 从控制台可以看到本地存 的储 web storage 信息

×