Suche senden
Hochladen
Web rtc和webstorage技术讲解
•
Als PPT, PDF herunterladen
•
1 gefällt mir
•
1,081 views
吴 晓兰
Folgen
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 19
Jetzt herunterladen
Empfohlen
Lysander radioactive components and human health in vieques
Lysander radioactive components and human health in vieques
lysanderborrero
05 iaea sandstone-hari
05 iaea sandstone-hari
Monatom Mgl
Alejandrocastrejonmedios
Alejandrocastrejonmedios
alejandrocastrejonc
Rise nitrate paper2.0 (1) (1)
Rise nitrate paper2.0 (1) (1)
lysanderborrero
Aedes albopictus larvae
Aedes albopictus larvae
lysanderborrero
Cv amit
Cv amit
Amit Parashar
Witnessing Slavery
Witnessing Slavery
hpuengprof
Challenge@RuleML2015 Exchanging Data and Ontological Definitions in Multi-Age...
Challenge@RuleML2015 Exchanging Data and Ontological Definitions in Multi-Age...
RuleML
Empfohlen
Lysander radioactive components and human health in vieques
Lysander radioactive components and human health in vieques
lysanderborrero
05 iaea sandstone-hari
05 iaea sandstone-hari
Monatom Mgl
Alejandrocastrejonmedios
Alejandrocastrejonmedios
alejandrocastrejonc
Rise nitrate paper2.0 (1) (1)
Rise nitrate paper2.0 (1) (1)
lysanderborrero
Aedes albopictus larvae
Aedes albopictus larvae
lysanderborrero
Cv amit
Cv amit
Amit Parashar
Witnessing Slavery
Witnessing Slavery
hpuengprof
Challenge@RuleML2015 Exchanging Data and Ontological Definitions in Multi-Age...
Challenge@RuleML2015 Exchanging Data and Ontological Definitions in Multi-Age...
RuleML
La reaccion que causa la marihuana
La reaccion que causa la marihuana
Nicol Solorzano
2010 oblicza krymu
2010 oblicza krymu
Szymon Konkol - Publikacje Cyfrowe
Pca skin signature facial
Pca skin signature facial
Nicky Williams
The role of technology has for the learning
The role of technology has for the learning
marcVella
Uranium (Josh Dorman)
Uranium (Josh Dorman)
kwalters00
Style cytowań stosowane w naukowych czasopismach pedagogicznych
Style cytowań stosowane w naukowych czasopismach pedagogicznych
Ewa A. Rozkosz
Comic analysis powerpoint
Comic analysis powerpoint
Westminster MassComm
Rule of Thumb
Rule of Thumb
Tony Arena
2014 Billing Household Survey from Fiserv
2014 Billing Household Survey from Fiserv
Fiserv
The occlusal rims and record
The occlusal rims and record
Muaiyed Mahmoud Buzayan
Flat cristina visits philadelphia
Flat cristina visits philadelphia
Laulib
Ciencias prueba primer año
Ciencias prueba primer año
daniela-figueroa
Html5
Html5
cazhfe
1 docker风起云ppt v1
1 docker风起云ppt v1
Jiang Shang
客户端存储与计算
客户端存储与计算
xiaotao ning
Android 4-app
Android 4-app
lydiafly
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
2014 Hpocon 吴磊 ucloud - 由点到面 提升公有云服务可用性
2014 Hpocon 吴磊 ucloud - 由点到面 提升公有云服务可用性
Michael Zhang
Docker + CI pipeline 的高效率 ChatBot 開發方法
Docker + CI pipeline 的高效率 ChatBot 開發方法
Philip Zheng
大鱼架构演进
大鱼架构演进
Jun Liu
Cnut 容器大会 京东
Cnut 容器大会 京东
tommy tommy
Weitere ähnliche Inhalte
Andere mochten auch
La reaccion que causa la marihuana
La reaccion que causa la marihuana
Nicol Solorzano
2010 oblicza krymu
2010 oblicza krymu
Szymon Konkol - Publikacje Cyfrowe
Pca skin signature facial
Pca skin signature facial
Nicky Williams
The role of technology has for the learning
The role of technology has for the learning
marcVella
Uranium (Josh Dorman)
Uranium (Josh Dorman)
kwalters00
Style cytowań stosowane w naukowych czasopismach pedagogicznych
Style cytowań stosowane w naukowych czasopismach pedagogicznych
Ewa A. Rozkosz
Comic analysis powerpoint
Comic analysis powerpoint
Westminster MassComm
Rule of Thumb
Rule of Thumb
Tony Arena
2014 Billing Household Survey from Fiserv
2014 Billing Household Survey from Fiserv
Fiserv
The occlusal rims and record
The occlusal rims and record
Muaiyed Mahmoud Buzayan
Flat cristina visits philadelphia
Flat cristina visits philadelphia
Laulib
Ciencias prueba primer año
Ciencias prueba primer año
daniela-figueroa
Andere mochten auch
(12)
La reaccion que causa la marihuana
La reaccion que causa la marihuana
2010 oblicza krymu
2010 oblicza krymu
Pca skin signature facial
Pca skin signature facial
The role of technology has for the learning
The role of technology has for the learning
Uranium (Josh Dorman)
Uranium (Josh Dorman)
Style cytowań stosowane w naukowych czasopismach pedagogicznych
Style cytowań stosowane w naukowych czasopismach pedagogicznych
Comic analysis powerpoint
Comic analysis powerpoint
Rule of Thumb
Rule of Thumb
2014 Billing Household Survey from Fiserv
2014 Billing Household Survey from Fiserv
The occlusal rims and record
The occlusal rims and record
Flat cristina visits philadelphia
Flat cristina visits philadelphia
Ciencias prueba primer año
Ciencias prueba primer año
Ähnlich wie Web rtc和webstorage技术讲解
Html5
Html5
cazhfe
1 docker风起云ppt v1
1 docker风起云ppt v1
Jiang Shang
客户端存储与计算
客户端存储与计算
xiaotao ning
Android 4-app
Android 4-app
lydiafly
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
2014 Hpocon 吴磊 ucloud - 由点到面 提升公有云服务可用性
2014 Hpocon 吴磊 ucloud - 由点到面 提升公有云服务可用性
Michael Zhang
Docker + CI pipeline 的高效率 ChatBot 開發方法
Docker + CI pipeline 的高效率 ChatBot 開發方法
Philip Zheng
大鱼架构演进
大鱼架构演进
Jun Liu
Cnut 容器大会 京东
Cnut 容器大会 京东
tommy tommy
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
Scourgen Hong
美团技术沙龙04 美团下一代分布式存储系统
美团技术沙龙04 美团下一代分布式存储系统
美团点评技术团队
使用GoogleAppEngine建立个人信息中心
使用GoogleAppEngine建立个人信息中心
Du Yamin
Huawei cloud computing
Huawei cloud computing
ssuser220dc6
《氪周刊:互联网创业必读》(第43期)
《氪周刊:互联网创业必读》(第43期)
36Kr.com
How to build your own robot with ibm bluemix&watson
How to build your own robot with ibm bluemix&watson
湯米吳 Tommy Wu
HKPC 行業專題培訓講座, 雲計算 ~ 在零售業 (II) 實踐篇
HKPC 行業專題培訓講座, 雲計算 ~ 在零售業 (II) 實踐篇
Dennis. Lee
Comboware ComboStack 202105
Comboware ComboStack 202105
Elroy Peng
twMVC#42 Azure IoT Hub for Smart Factory
twMVC#42 Azure IoT Hub for Smart Factory
twMVC
Toutiao 2013 Jan Series B Funding Deck
Toutiao 2013 Jan Series B Funding Deck
Matthew Brennan
Ähnlich wie Web rtc和webstorage技术讲解
(20)
Html5
Html5
1 docker风起云ppt v1
1 docker风起云ppt v1
客户端存储与计算
客户端存储与计算
Android 4-app
Android 4-app
Html5移动网站开发实践
Html5移动网站开发实践
[2008]网站重构 -who am i
[2008]网站重构 -who am i
2014 Hpocon 吴磊 ucloud - 由点到面 提升公有云服务可用性
2014 Hpocon 吴磊 ucloud - 由点到面 提升公有云服务可用性
Docker + CI pipeline 的高效率 ChatBot 開發方法
Docker + CI pipeline 的高效率 ChatBot 開發方法
大鱼架构演进
大鱼架构演进
Cnut 容器大会 京东
Cnut 容器大会 京东
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
美团技术沙龙04 美团下一代分布式存储系统
美团技术沙龙04 美团下一代分布式存储系统
使用GoogleAppEngine建立个人信息中心
使用GoogleAppEngine建立个人信息中心
Huawei cloud computing
Huawei cloud computing
《氪周刊:互联网创业必读》(第43期)
《氪周刊:互联网创业必读》(第43期)
How to build your own robot with ibm bluemix&watson
How to build your own robot with ibm bluemix&watson
HKPC 行業專題培訓講座, 雲計算 ~ 在零售業 (II) 實踐篇
HKPC 行業專題培訓講座, 雲計算 ~ 在零售業 (II) 實踐篇
Comboware ComboStack 202105
Comboware ComboStack 202105
twMVC#42 Azure IoT Hub for Smart Factory
twMVC#42 Azure IoT Hub for Smart Factory
Toutiao 2013 Jan Series B Funding Deck
Toutiao 2013 Jan Series B Funding Deck
Web rtc和webstorage技术讲解
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 行 捕进 视频 获
5.
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 信息
Jetzt herunterladen