通过WebRTC实现实时视频通信(一)

通过WebRTC实现实时视频通信(一)

通过WebRTC实现实时视频通信(二)

通过WebRTC实现实时视频通信(三)

WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla基金会、Opera支持下被包括进万维网联盟的W3C推荐标准。

不需要插件的实时通信

想像一下,如果你的手机、电视、电脑都可以通过一个平台进行通信,想像一下你可以在Web应用中轻松地加入视频聊天和p2p数据分享,你还没有兴奋吗?这就是WebRTC

想试一试吗?WebRTC现在已经被集成到Chrome,Opera和火狐上了,你可以试试这个应用:

apprtc.appspot.com:

  1. 在Chrome、Opera或Firefox中打开apprtc.appspot.com。
  2. 点击允许按钮允许应用使用你的摄像头。
  3. 在新的选项卡,甚至在另外一台电脑上打开正文显示的URL。

这里是这个应用的具体教程: later in this article

开始

如果你没有时间阅读这个系列的文章,想直接编码,你可以这样:

  1. 看一看Gooogle关于WebRTC的幻灯片(here)
  2. 你果你没有用过getUserMedia,要先学习一下它,教程:HTML5 Rocks article ,Demo:simpl.info/gum
  3. 掌握RTCPeerConnection API,教程:simple example below ,Demo:simpl.info/pc,。
  4. 了解一下WebRTC的实现、防火墙和NAT转发,教程:apprtc.appspot.com.
  5. webRTC使用大头照拍摄:gbtags.com/gb/share/2491.htm

或者你可以直接跳到这一步:在WebRTC codelab上一步一步的学习如何构建一个完整的视频聊天应用程序,包括一个简单的信号服务器。

关于WebRTC的小故事

其实一个Web开发的终极挑战就是通过音频和视频进行实时通信,视频通信应该像文本通信一样自然,如果没有它,我们在用户交互方面的创新能力会受到限制。

在过去,实时通信都比较复杂,需要非常丰富的音频和视频技术才能被进行开发。 完整的实现实时通信需要整合大量的数据和服务,在Web上实现尤其困难。

2008年,Gmail视频聊天火了。2011年谷歌发布了Hangouts,收购了GIPS,GIPS是一个RTC方向的公司,然后开源了它的相关技术,在同年5月,爱立信构建了 第一个WebRTC的实现

Hangouts 是谷歌在2013年的Google I/O大会上发布了统一消息服务,整合了此前的Google Talk、Google+ Messenger和 Hangouts视频聊天服务等产品。新的Hangouts完全基于云计算技术,将成为谷歌其他服务的一大支柱。尽管谷歌在热门的移动消息应用市场动作较 慢,但谷歌正在为未来的发展做准备。从表面来看,Hangouts是类似WhatsApp和Facebook Messenger的又一款消息应用。

WebRTC目前用做实时通信、免费视频插件、音频和视频数据传输。以下是实际的应用:

  • 很多Web服务已经使用了RTC,但是都需要下载插件或是原生app,比如Skype,Facebook和Google Hangouts。
  • 下载安装更新插件非常麻烦。
  • 插件不容易发现问题,测试很困难,大部分都需要授权,开发成本太高。

安全性

这里有几个实时通信应用可以出现的安全性问题:

  • 未加密的媒体数据流可以会在浏览器或通信途中被获取。
  • 应用可能会在用户不知情的情况下记录视频和其它信息。
  • 恶意软件或病毒可能被安装在一个不起眼的插件或应用中。

WebRTC通过各种特性避免了这些问题:

  • WebRTC 实现很多用户安全协议,比如DTLSSRTP
  • 对数据流和信号量进行编码加密。
  • 。WebRTC 不是一个插件,可以运行在浏览器的沙箱中,组件不需要单独安装。
  • 摄像头和手机必须通过严格的授权,只有在显示用户界面的时候才能调用。

关于WebRTC安全性的详细讨论不在本文的讲解范围内,如果你想了解更多这方面的问题,可以看一看IETF提供的 WebRTC Security Architecture

开发者工具

    • 当WebRTC会话被创建的时候,chrome://webrtc-internals (opera://webrtc-internals )就会提供会话详细的数据流和图表:

      chrome://webrtc-internals 截图

在哪里使用WebRTC

WebRTC有以下三个API:

getUserMedia 可以在Chrome, Opera 和 Firefox中实现。 你可以看看这个跨平台的Demo:simpl.info/gum 和Chris Wilson的 例子 ,让getUserMedia作为音频的输入。

RTCPeerConnection 是在Chrome中和Android设备中使用,经过几次迭代之后RTCPeerConnection现在支持 Chrome and Opera 作为webkitRTCPeerConnection,Firefox 作为mozRTCPeerConnection。

RTCDataChannel 支持Chrome 25, Opera 18 和Firefox 22 以上的版本。

通常有报道说一个平台支持WebRTC,一般都说他们支持getUserMedia,而不支持其它RTC组件,开发的时候需要先弄清楚。

我的第一个WebRTC项目

WebRTC 项目需要做以下几件事情:

  • 取到音频、视频或其它数据的数据流。
  • 得到网络信息,如IP地址和端口,通过网络和其它WebRTC客户端交换数据,解决防火墙的NAT转发的问题。
  • 协调信号来报告错误,启动或关闭会话。
  • 交换媒体和客户端信息,处理如分辨率和编码解码器问题。dia and client capability, such as resolution and codecs.
  • 数据流通信。

为了实现数据流之间的通信,WebRTC实现了以下的接口:

总结

大家应该大概明白WebRTC的概要了。在下一篇文章中,我们会针对这三个API来具体的讲解构建WebRTC的流程。

时间: 2024-10-07 02:57:31

通过WebRTC实现实时视频通信(一)的相关文章

通过WebRTC实现实时视频通信(二)

通过WebRTC实现实时视频通信(一) 通过WebRTC实现实时视频通信(二) 通过WebRTC实现实时视频通信(三) 在上一篇文章中,我们讲解了WebRTC的概述.历史.安全性和开发者工具.接下来我们通过WebRTC的三个API来具体的讲解构建WebRTC的流程,这篇文章会对MediaStream进行讲解. MediaStream (别名 getUserMedia) MediaStream API 代表媒体数据流的同步.举个例子,从相机获取的视频流的同步和跟踪. 理解MediaStream最简

通过WebRTC实现实时视频通信(三)

通过WebRTC实现实时视频通信(一) 通过WebRTC实现实时视频通信(二) 通过WebRTC实现实时视频通信(三) 在这篇文章中我们继续了解WebRTC的相关API,RTCPeerConnectiont和RTCDataChannel. RTCPeerConnection RTCPeerConnection是是WebRTC的组件,用来解决数据流通信的稳定性和高效性.下面这张是WebRTC的架构图,展示了RTCPeerConnection的规则,你会发现,绿色的部分是相当复杂的. 从JavaSc

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

webrtc接入freeswitch的sip音视频传输

1.安装freeswitch https://www.cnblogs.com/dong1/p/10412847.html 我将fs安装到了百度云,按我这个配置就行,默认已经打开了ws和wss <!-- for sip over websocket support -->    <param name="ws-binding"  value=":5066"/> <!-- for sip over secure websocket supp

h264 profile &amp; level

转自:http://blog.csdn.net/sphone89/article/details/17492433 H.264 Profiles H.264有四种profile,每个profile支持一组特定的编码功能,并支持一类特定的应用,分别是BP.EP.MP.HP: 1.BP-Baseline Profile: a.I/P slices b.Multiple reference frames (–refs <int>, >1 in the x264 CLI) c.In-loop d

码流 / 码率 / 比特率 / 帧速率 / 分辨率 / 高清的区别

GOP/ 码流 /码率 / 比特率 / 帧速率 / 分辨率 GOP(Group of picture) 关键帧的周期,也就是两个IDR帧之间的距离,一个帧组的最大帧数,一般而言,每一秒视频至少需要使用 1 个关键帧.增加关键帧个数可改善质量,但是同时增加带宽和网络负载. 需要说明的是,通过提高GOP值来提高图像质量是有限度的,在遇到场景切换的情况时,H.264编码器会自动强制插入一个I帧,此时实际的GOP值被缩短了.另一方面,在一个GOP中,P.B帧是由I帧预测得到的,当I帧的图像质量比较差时,

视频音频编码器介绍

里只对常见的视频音频编码做一个系统的简单介绍,并不进行详细 探讨.由于我的知识有限,难免有错误的地方,欢迎来信指正.MPEG 系列MPEG 即 (Moving Pictures Experts Group) 运动图象专家组,属于 ISO(International Organization for Standardization) 国际标准组织,他们开发了一系列视频音频编 码,最为大家熟悉的就是 MP3,MPEG-1/2/4.MPEG-1 较早的视频编码,质量 比较差,主要用于 CD-ROM 存

视频压缩算法的相关知识

视频压缩算法的相关知识MPEG-1MPEG 视频压缩编码后包括三种元素:I帧(I-frames).P帧(P-frames)和B帧(B-frames).在MPEG编码的过程中,部分视频帧序列压缩成为I帧:部分压缩成P帧:还有部分压缩成B帧.I帧法是帧内压缩法,也称为“关键帧”压缩法.I帧法是基于离散余弦变换DCT( Discrete Cosine Transform )的压缩技术,这样的算法与JPEG压缩算法相似.採用I帧压缩可达到1/6的压缩比而无明显的压缩痕迹. 在保证图像质量的前提下实现高压

Web开发者和设计师必须要知道的 iOS 8 十个变化

概述 简介 iOS 8 上的 Safari 的更新 iPhone 6 和 iPhone 6 Plus 新 Api 支持 Safari 新功能和支持 iOS 8 原生优化 Safari 插件 新的设计 视频增强 iOS 8上的JS Bug 和问题 已经习惯了苹果官方的高冷,这次,苹果依旧没有更新任何与 Safari 或者 iOS 相关的文档,所以下面的所有数据和资料都是基于我自己的测试和 WWDC 上公布的信息. iOS 8 上的 Safari 支持HTML5新APIs: WebGL (3D ca