通过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的流程。

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

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

    通过WebRTC实现实时视频通信(一) 通过WebRTC实现实时视频通信(二) 通过WebRTC实现实时视频通信(三) 在这篇文章中我们继续了解WebRTC的相关API,RTCPeerConnecti ...

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

    通过WebRTC实现实时视频通信(一) 通过WebRTC实现实时视频通信(二) 通过WebRTC实现实时视频通信(三) 在上一篇文章中,我们讲解了WebRTC的概述.历史.安全性和开发者工具.接下来我 ...

  3. WebRTC学习资料大全

    在学习WebRTC,找了些资料,记录一下,供以后查询. 有些需要FQ才能看 WebRTC 介绍 官网在这里:https://webrtc.org/.然后这里有一个官方的Getting Started: ...

  4. 单独编译使用WebRTC的音频处理模块

    块,每块个点,(12*64=768采样)即AEC-PC仅能处理48ms的单声道16kHz延迟的数据,而 - 加载编译好的NS模块动态库 接下来只需要按照 此文 的描述在 android 的JAVA代码 ...

  5. 1.3、WebRTC架构

    文章导读:本文的讲解的是webrtc系统架构,每个人都要Get到这些知识:第一.了解webrtc架构分层:第二.对每层技术有一个清晰的认知.学完本节内容可以为我们后面学习核心API起到至关重要的作用, ...

  6. 基于webrtc的资源释放问题(二)

    基于webrtc的资源释放问题(二) ——建立连接的过程中意外中断 应用背景: 我们在打电话的时候会不会遇到这种情况?打电话的时候未接通之前挂掉了电话,或者在接通之后建立的连接的过程中挂掉电话? 特别 ...

  7. Android IOS WebRTC 音视频开发总结(五四)-- WebRTC标准之父谈WebRTC

    本文主要是整理自国内首届WebRTC大会上对Daniel的一些专访,转载必须说明出处,欢迎关注微信公众号blacker,更多说明详见www.rtc.help 说明:以下内容主要整理自InfoQ的专访, ...

  8. WebRTC学习笔记_Demo收集

    1.     WebRTC学习 1.1   WebRTC现状 本人最早接触WebRTC是在2011年底,那时Google已经在Android源代码中增加了webrtc源代码,放在/external/w ...

  9. 可以用WebRTC来做视频直播吗?

    https://www.zhihu.com/question/25497090   作者:韦易笑链接:https://www.zhihu.com/question/25497090/answer/72 ...

随机推荐

  1. 【洛谷】2473:[SCOI2008]奖励关【期望DP(倒推)】

    P2473 [SCOI2008]奖励关 题目背景 08四川NOI省选 题目描述 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不 ...

  2. python学习两月总结_汇总大牛们的思想_值得收藏

    下面是我汇总的我学习两个月python(version:3.3.2)的所有笔记 你可以访问:http://www.python.org获取更多信息 你也可以访问:http://www.cnblogs. ...

  3. nginx 站点代理,负载均衡

    nginx服务器IP是192.168.1.201 web服务器 IP 192.168.1.200,192.168.1.199 1.主配置文件是/etc/nginx/下的nginx.conf,另外一个是 ...

  4. 使用Layui和Vue实现分页

    原理就是利用Layui的分页组件和Vue组件的模板渲染功能. 我下面直接贴代码,比较直观. index.html <!DOCTYPE html> <html> <head ...

  5. Java_模拟comet的实现

    本文没有使用任何comet服务器, 只是利用tomcat模拟实现了一下comet, 不是真正的comet哦,因为不会有这样的应用场景, 只是模拟实现, 仅供参考. 一. 需求. 实现将服务端的时间推送 ...

  6. linux下TP5安装好Workerman 报错:Class 'think\worker\Server' not found

    今天把功能放到服务器,本地测试正常,上传到服务器上报错Class 'think\worker\Server' not found 首先想到的是Windows和Linux下大小写的问题,查看了代码,并没 ...

  7. [Android] 字体使用dp单位避免设置系统字体大小对排版的影响

    [Android] 字体使用dp单位避免设置系统字体大小对排版的影响 以魄族mx3为例,在设置->显示->字体大小中能够选择字号大小例如以下图: 图1. 魄族mx3 会导致软件在有固定定高 ...

  8. ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  9. 用Qemu模拟vexpress-a9 (一) --- 搭建Linux kernel调试环境

    参考: http://blog.csdn.net/linyt/article/details/42504975 环境介绍: Win7 64 + Vmware 11 + ubuntu14.04 32 u ...

  10. SQL语句200条(转)

    //重建数据库 101, create database testdatabase;use database testdatabase; 102, create table tt1(id int, n ...