狠狠撸

狠狠撸Share a Scribd company logo
WebRTC



    Dongdong Deng <LibFetion@gmail.com>
OverView

? 1、What's WebRTC

? 2、How does WebRTC work

? 3、How do I get started WebRTC
1、WebRTC
  WebRTC
1、WebRTC
  WebRTC
 由Google主导,在浏览器内部进行实时视频和
 音频通信的技术,通过浏览器提供简单的JS
 API就可以达到实时通讯能力

核心技术:
? 音视频的采集
? 编解码
? 网络传输
? 显示
1、WebRTC -- No Plugins
  WebRTC
1、WebRTC -- Device Ready
  WebRTC
1、WebRTC -- Powerful
  WebRTC
2、How does WebRTC work
  How
二、How does WebRTC work
  How
2、WebRTC Component
  WebRTC
API

?   Web API
    第三方开发人员用来开发基于Web的应用,如视频聊天



?   WebRTC Native c++ API
    浏览器厂商用于实现Web API的函数集
2、WebRTC Component
  WebRTC
Session

?   RTP Stack(webrtc/modules/rtp_rtcp)
    实时网络传输协议栈,针对Internet上多媒体数据流的一个传输协议

?   STUN/ICE(webrtc/modules/udp_transport)
    让WebRTC组件在不同类型的网络里建立通信链接的网络功能模块

?   Session Management(webrtc/third_party_mods/.*./app/webrtc_dev)
    抽象session层,支持调用构建和管理层,由应用开发者来决定如何实现
    协议
2、WebRTC Component
  WebRTC
VoiceEngine   -- 音频媒体链的框架,从声卡到网络

?   iSAC (webrtc/modules/audio_coding/codecs/iSAC)
    一种用于VoIP和流音频的宽带和超宽带音频编解码器,iSAC采用16 kHz
    或32 kHz的采样频率和12—52 kbps的可变比特率

?   iLBC (webrtc/modules/audio_coding/codecs/iLBC)
    用于VoIP和流音频的窄带语音编解码器,使用8 kHZ的采样频率,20毫
    秒帧比特率为15.2 kbps,30毫米帧的比特率为13.33 kbps,标准由
    IETF RFC 3951和3952定义

?   NetEQ for Voice(webrtc/modules/audio_coding/NetEQ)
    动态抖动缓存和错误隐藏算法,用于缓解网络抖动和丢包引起的负面影响。
    在保持高音频质量的同时尽可能降低延迟。
2、WebRTC Component
  WebRTC
VoiceEngine
? Acoustic Echo Canceler (AEC) (webrtc/modules/audio_processing/aec)
     回声抑制器是一个基于软件的信号处理元件,能实时的去除麦克
    风收集到的回声

? Noise Reduction (NR) (webrtc/modules/audio_processing/ns)
     噪音抑制是一个基于软件的信号处理元件,用于消除与相关 VoIP
    的某些类型的背景噪音 (嘶嘶声, 风扇噪音等等...)
2、WebRTC Component
  WebRTC
VideoEngine
-- 视频媒体链的框架,从相机像头到网络,从网络到屏幕。


?   VP8(webrtc/modules/video_coding/codecs/vp8)
     来自于WebM项目的视频编解码器,非常适合RTC,因为它是为低延迟
    而设计开发的。

?   Video Jitter Buffer(webrtc/modules/video_coding/main/source/jitter*)
      视频动态抖动缓存,用于缓解网络抖动和丢包引起的负面影响.

?   Image enhancements(webrtc/modules/video_processing/main/source/enhancemen*)
      图像增强组件,消除通过摄像头获取的图片的视频噪声。
3、Get Started WebRTC
  Get

? For Web Developers



? For App Developers
3.1、For Web Developers
3.1
提供JS API
  JS API来实现音视频采集,传输,显示的Web
                       Web
                       Web应用

? navigator.getUserMedia
  navigator.getUserMedia('audio,video', Stream);

? MediaStream
  MediaStreamRecorder record();
  void stop();

? PeerConnection
  sendSignalingChannel()
  receiveSignalingChannel()
3.1、For Web Developers
3.1
Example1:
Record a short audio message and
  upload it to the server.

example1.txt:
http://www.kgdb.info/wp-content/uploads/2011/11/example1.txt
3.1、For Web Developers
3.1
Example2:
PeerConnection Using

example2.txt:
http://www.kgdb.info/wp-content/uploads/2011/11/example2.txt
3.2、For App Developers
3.2
Build WebRTC from source:

Create a    working directory, enter it, and run:
$ gclient   config http://webrtc.googlecode.com/svn/trunk
$ gclient   sync --force
sync will   generate native build files for your environment using gyp

Build
$cd trunk
$make
3.2、For App Developers
3.2
Sample application:
 a simple video chat client and server using the PeerConnection C++ API.
3.2、For App Developers
3.2

PeerConnection C++ API



PeerConnection.htm:
http://www.kgdb.info/wp-content/uploads/2011/11/PeerConnection.htm
Thanks

Make Presentation much more fun

                                  @WPS官方微博
                                  @WPS官方微博
                                  @kingsoftwps

More Related Content

What's hot (8)

Introduction to Docker
Introduction to DockerIntroduction to Docker
Introduction to Docker
Chris Chen
?
再生龙於云端环境之应用
再生龙於云端环境之应用再生龙於云端环境之应用
再生龙於云端环境之应用
Chenkai Sun
?
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB ServerPHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server
志賢 黃
?
Software Engineer Talk
Software Engineer TalkSoftware Engineer Talk
Software Engineer Talk
Larry Cai
?
滨辞罢开发平台狈辞诲别惭颁鲍
滨辞罢开发平台狈辞诲别惭颁鲍滨辞罢开发平台狈辞诲别惭颁鲍
滨辞罢开发平台狈辞诲别惭颁鲍
承翰 蔡
?
Gentoo linux
Gentoo linuxGentoo linux
Gentoo linux
Jiang Yan-Ting
?
Docker 基礎介紹與實戰
Docker 基礎介紹與實戰Docker 基礎介紹與實戰
Docker 基礎介紹與實戰
Bo-Yi Wu
?
Introduction to Docker
Introduction to DockerIntroduction to Docker
Introduction to Docker
Chris Chen
?
再生龙於云端环境之应用
再生龙於云端环境之应用再生龙於云端环境之应用
再生龙於云端环境之应用
Chenkai Sun
?
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB ServerPHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server
志賢 黃
?
Software Engineer Talk
Software Engineer TalkSoftware Engineer Talk
Software Engineer Talk
Larry Cai
?
滨辞罢开发平台狈辞诲别惭颁鲍
滨辞罢开发平台狈辞诲别惭颁鲍滨辞罢开发平台狈辞诲别惭颁鲍
滨辞罢开发平台狈辞诲别惭颁鲍
承翰 蔡
?
Docker 基礎介紹與實戰
Docker 基礎介紹與實戰Docker 基礎介紹與實戰
Docker 基礎介紹與實戰
Bo-Yi Wu
?

Viewers also liked (20)

Present simple and continuous
Present simple and continuousPresent simple and continuous
Present simple and continuous
sta clara
?
V52 Marketing Class
V52 Marketing ClassV52 Marketing Class
V52 Marketing Class
Andrei John Cantilleps
?
ALS passers
ALS passersALS passers
ALS passers
Andrei John Cantilleps
?
Gdb principle
Gdb principleGdb principle
Gdb principle
libfetion
?
Перезентация сайта www.Proznanie.ru
Перезентация сайта www.Proznanie.ruПерезентация сайта www.Proznanie.ru
Перезентация сайта www.Proznanie.ru
Proznanie.ru
?
Образование независимых государств в Латинской Америке
Образование независимых государств в Латинской АмерикеОбразование независимых государств в Латинской Америке
Образование независимых государств в Латинской Америке
Proznanie.ru
?
Presentation1 abe
Presentation1 abePresentation1 abe
Presentation1 abe
anitamcauley
?
The current panama brochure
The current panama brochureThe current panama brochure
The current panama brochure
Tiff412
?
Asia
AsiaAsia
Asia
Proznanie.ru
?
Babel
BabelBabel
Babel
Proznanie.ru
?
Общественная мысль эпохи просвещения. Просвещенный абсолютизм
Общественная мысль эпохи просвещения. Просвещенный абсолютизмОбщественная мысль эпохи просвещения. Просвещенный абсолютизм
Общественная мысль эпохи просвещения. Просвещенный абсолютизм
Proznanie.ru
?
Scott Slater TEDxWestVancouverEd May 11 2013
Scott Slater TEDxWestVancouverEd May 11 2013Scott Slater TEDxWestVancouverEd May 11 2013
Scott Slater TEDxWestVancouverEd May 11 2013
slater_45
?
Crown Long ppt.pps
Crown Long ppt.ppsCrown Long ppt.pps
Crown Long ppt.pps
kzally
?
Toastmasters award application tutorial
Toastmasters award application tutorialToastmasters award application tutorial
Toastmasters award application tutorial
Andrei John Cantilleps
?
Всероссийская Ежегодная премия в области кардиологии "Пурпурное сердце" - 201...
Всероссийская Ежегодная премия в области кардиологии "Пурпурное сердце" - 201...Всероссийская Ежегодная премия в области кардиологии "Пурпурное сердце" - 201...
Всероссийская Ежегодная премия в области кардиологии "Пурпурное сердце" - 201...
Business Connection
?
Vice President Education
Vice President EducationVice President Education
Vice President Education
Andrei John Cantilleps
?
Подъем и спад демократической волны
Подъем и спад демократической волныПодъем и спад демократической волны
Подъем и спад демократической волны
Proznanie.ru
?
TheRecruiteryTheRecruitery
TheRecruitery
alejandrourgalduran
?
Present simple and continuous
Present simple and continuousPresent simple and continuous
Present simple and continuous
sta clara
?
Перезентация сайта www.Proznanie.ru
Перезентация сайта www.Proznanie.ruПерезентация сайта www.Proznanie.ru
Перезентация сайта www.Proznanie.ru
Proznanie.ru
?
Образование независимых государств в Латинской Америке
Образование независимых государств в Латинской АмерикеОбразование независимых государств в Латинской Америке
Образование независимых государств в Латинской Америке
Proznanie.ru
?
The current panama brochure
The current panama brochureThe current panama brochure
The current panama brochure
Tiff412
?
Общественная мысль эпохи просвещения. Просвещенный абсолютизм
Общественная мысль эпохи просвещения. Просвещенный абсолютизмОбщественная мысль эпохи просвещения. Просвещенный абсолютизм
Общественная мысль эпохи просвещения. Просвещенный абсолютизм
Proznanie.ru
?
Scott Slater TEDxWestVancouverEd May 11 2013
Scott Slater TEDxWestVancouverEd May 11 2013Scott Slater TEDxWestVancouverEd May 11 2013
Scott Slater TEDxWestVancouverEd May 11 2013
slater_45
?
Crown Long ppt.pps
Crown Long ppt.ppsCrown Long ppt.pps
Crown Long ppt.pps
kzally
?
Всероссийская Ежегодная премия в области кардиологии "Пурпурное сердце" - 201...
Всероссийская Ежегодная премия в области кардиологии "Пурпурное сердце" - 201...Всероссийская Ежегодная премия в области кардиологии "Пурпурное сердце" - 201...
Всероссийская Ежегодная премия в области кардиологии "Пурпурное сердце" - 201...
Business Connection
?
Подъем и спад демократической волны
Подъем и спад демократической волныПодъем и спад демократической волны
Подъем и спад демократической волны
Proznanie.ru
?
TheRecruiteryTheRecruitery
TheRecruitery
alejandrourgalduran
?

Similar to Webrtc (20)

Html5 最重要的部分
Html5 最重要的部分Html5 最重要的部分
Html5 最重要的部分
Tom Fan
?
Re Introduce Web Development
Re Introduce Web DevelopmentRe Introduce Web Development
Re Introduce Web Development
finian lau
?
奥别产搁罢颁实作视讯通话软体
奥别产搁罢颁实作视讯通话软体奥别产搁罢颁实作视讯通话软体
奥别产搁罢颁实作视讯通话软体
副社 王
?
常用开发工具介绍
常用开发工具介绍常用开发工具介绍
常用开发工具介绍
haozes
?
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
?
Koubei banquet 28
Koubei banquet 28Koubei banquet 28
Koubei banquet 28
Koubei UED
?
Mini2440 manual 2010060901
Mini2440 manual 2010060901Mini2440 manual 2010060901
Mini2440 manual 2010060901
hudikm
?
Mini2440 manual part1
Mini2440 manual part1Mini2440 manual part1
Mini2440 manual part1
vineyugave
?
Docker容器微服務 x WorkShop
Docker容器微服務 x WorkShopDocker容器微服務 x WorkShop
Docker容器微服務 x WorkShop
Philip Zheng
?
Html5
Html5Html5
Html5
cazhfe
?
WEB 安全基础
WEB 安全基础WEB 安全基础
WEB 安全基础
xki
?
Windows Mobile 多媒體應用程式開發
Windows Mobile 多媒體應用程式開發Windows Mobile 多媒體應用程式開發
Windows Mobile 多媒體應用程式開發
Chui-Wen Chiu
?
Micro2440 manual 20100609
Micro2440 manual 20100609Micro2440 manual 20100609
Micro2440 manual 20100609
jrogulj
?
迟飞惭痴颁#31网站上线了然后呢
迟飞惭痴颁#31网站上线了然后呢迟飞惭痴颁#31网站上线了然后呢
迟飞惭痴颁#31网站上线了然后呢
twMVC
?
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
?
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
?
real-time Web的運用
real-time Web的運用real-time Web的運用
real-time Web的運用
Robin Su
?
CYBERSEC 2020 臺灣資安大會 - 第一次使用 k8s 就不埋漏洞
CYBERSEC 2020 臺灣資安大會 - 第一次使用 k8s 就不埋漏洞CYBERSEC 2020 臺灣資安大會 - 第一次使用 k8s 就不埋漏洞
CYBERSEC 2020 臺灣資安大會 - 第一次使用 k8s 就不埋漏洞
Secview
?
Html5 最重要的部分
Html5 最重要的部分Html5 最重要的部分
Html5 最重要的部分
Tom Fan
?
Re Introduce Web Development
Re Introduce Web DevelopmentRe Introduce Web Development
Re Introduce Web Development
finian lau
?
奥别产搁罢颁实作视讯通话软体
奥别产搁罢颁实作视讯通话软体奥别产搁罢颁实作视讯通话软体
奥别产搁罢颁实作视讯通话软体
副社 王
?
常用开发工具介绍
常用开发工具介绍常用开发工具介绍
常用开发工具介绍
haozes
?
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
?
Koubei banquet 28
Koubei banquet 28Koubei banquet 28
Koubei banquet 28
Koubei UED
?
Mini2440 manual 2010060901
Mini2440 manual 2010060901Mini2440 manual 2010060901
Mini2440 manual 2010060901
hudikm
?
Mini2440 manual part1
Mini2440 manual part1Mini2440 manual part1
Mini2440 manual part1
vineyugave
?
Docker容器微服務 x WorkShop
Docker容器微服務 x WorkShopDocker容器微服務 x WorkShop
Docker容器微服務 x WorkShop
Philip Zheng
?
WEB 安全基础
WEB 安全基础WEB 安全基础
WEB 安全基础
xki
?
Windows Mobile 多媒體應用程式開發
Windows Mobile 多媒體應用程式開發Windows Mobile 多媒體應用程式開發
Windows Mobile 多媒體應用程式開發
Chui-Wen Chiu
?
Micro2440 manual 20100609
Micro2440 manual 20100609Micro2440 manual 20100609
Micro2440 manual 20100609
jrogulj
?
迟飞惭痴颁#31网站上线了然后呢
迟飞惭痴颁#31网站上线了然后呢迟飞惭痴颁#31网站上线了然后呢
迟飞惭痴颁#31网站上线了然后呢
twMVC
?
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
?
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
?
real-time Web的運用
real-time Web的運用real-time Web的運用
real-time Web的運用
Robin Su
?
CYBERSEC 2020 臺灣資安大會 - 第一次使用 k8s 就不埋漏洞
CYBERSEC 2020 臺灣資安大會 - 第一次使用 k8s 就不埋漏洞CYBERSEC 2020 臺灣資安大會 - 第一次使用 k8s 就不埋漏洞
CYBERSEC 2020 臺灣資安大會 - 第一次使用 k8s 就不埋漏洞
Secview
?

Webrtc

  • 1. WebRTC Dongdong Deng <LibFetion@gmail.com>
  • 2. OverView ? 1、What's WebRTC ? 2、How does WebRTC work ? 3、How do I get started WebRTC
  • 4. 1、WebRTC WebRTC 由Google主导,在浏览器内部进行实时视频和 音频通信的技术,通过浏览器提供简单的JS API就可以达到实时通讯能力 核心技术: ? 音视频的采集 ? 编解码 ? 网络传输 ? 显示
  • 5. 1、WebRTC -- No Plugins WebRTC
  • 6. 1、WebRTC -- Device Ready WebRTC
  • 10. 2、WebRTC Component WebRTC API ? Web API 第三方开发人员用来开发基于Web的应用,如视频聊天 ? WebRTC Native c++ API 浏览器厂商用于实现Web API的函数集
  • 11. 2、WebRTC Component WebRTC Session ? RTP Stack(webrtc/modules/rtp_rtcp) 实时网络传输协议栈,针对Internet上多媒体数据流的一个传输协议 ? STUN/ICE(webrtc/modules/udp_transport) 让WebRTC组件在不同类型的网络里建立通信链接的网络功能模块 ? Session Management(webrtc/third_party_mods/.*./app/webrtc_dev) 抽象session层,支持调用构建和管理层,由应用开发者来决定如何实现 协议
  • 12. 2、WebRTC Component WebRTC VoiceEngine -- 音频媒体链的框架,从声卡到网络 ? iSAC (webrtc/modules/audio_coding/codecs/iSAC) 一种用于VoIP和流音频的宽带和超宽带音频编解码器,iSAC采用16 kHz 或32 kHz的采样频率和12—52 kbps的可变比特率 ? iLBC (webrtc/modules/audio_coding/codecs/iLBC) 用于VoIP和流音频的窄带语音编解码器,使用8 kHZ的采样频率,20毫 秒帧比特率为15.2 kbps,30毫米帧的比特率为13.33 kbps,标准由 IETF RFC 3951和3952定义 ? NetEQ for Voice(webrtc/modules/audio_coding/NetEQ) 动态抖动缓存和错误隐藏算法,用于缓解网络抖动和丢包引起的负面影响。 在保持高音频质量的同时尽可能降低延迟。
  • 13. 2、WebRTC Component WebRTC VoiceEngine ? Acoustic Echo Canceler (AEC) (webrtc/modules/audio_processing/aec) 回声抑制器是一个基于软件的信号处理元件,能实时的去除麦克 风收集到的回声 ? Noise Reduction (NR) (webrtc/modules/audio_processing/ns) 噪音抑制是一个基于软件的信号处理元件,用于消除与相关 VoIP 的某些类型的背景噪音 (嘶嘶声, 风扇噪音等等...)
  • 14. 2、WebRTC Component WebRTC VideoEngine -- 视频媒体链的框架,从相机像头到网络,从网络到屏幕。 ? VP8(webrtc/modules/video_coding/codecs/vp8) 来自于WebM项目的视频编解码器,非常适合RTC,因为它是为低延迟 而设计开发的。 ? Video Jitter Buffer(webrtc/modules/video_coding/main/source/jitter*) 视频动态抖动缓存,用于缓解网络抖动和丢包引起的负面影响. ? Image enhancements(webrtc/modules/video_processing/main/source/enhancemen*) 图像增强组件,消除通过摄像头获取的图片的视频噪声。
  • 15. 3、Get Started WebRTC Get ? For Web Developers ? For App Developers
  • 16. 3.1、For Web Developers 3.1 提供JS API JS API来实现音视频采集,传输,显示的Web Web Web应用 ? navigator.getUserMedia navigator.getUserMedia('audio,video', Stream); ? MediaStream MediaStreamRecorder record(); void stop(); ? PeerConnection sendSignalingChannel() receiveSignalingChannel()
  • 17. 3.1、For Web Developers 3.1 Example1: Record a short audio message and upload it to the server. example1.txt: http://www.kgdb.info/wp-content/uploads/2011/11/example1.txt
  • 18. 3.1、For Web Developers 3.1 Example2: PeerConnection Using example2.txt: http://www.kgdb.info/wp-content/uploads/2011/11/example2.txt
  • 19. 3.2、For App Developers 3.2 Build WebRTC from source: Create a working directory, enter it, and run: $ gclient config http://webrtc.googlecode.com/svn/trunk $ gclient sync --force sync will generate native build files for your environment using gyp Build $cd trunk $make
  • 20. 3.2、For App Developers 3.2 Sample application: a simple video chat client and server using the PeerConnection C++ API.
  • 21. 3.2、For App Developers 3.2 PeerConnection C++ API PeerConnection.htm: http://www.kgdb.info/wp-content/uploads/2011/11/PeerConnection.htm
  • 22. Thanks Make Presentation much more fun @WPS官方微博 @WPS官方微博 @kingsoftwps