基于webRTC的网页、android视频通信学习笔记（一）

最新推荐文章于 2024-08-15 14:48:21 发布

一个坚果

最新推荐文章于 2024-08-15 14:48:21 发布

阅读量2.5k

点赞数 4

分类专栏： webRTC 文章标签： webrtc 视频通信 javascript

本文链接：https://blog.csdn.net/mhxy199288/article/details/44244949

版权

本文介绍了基于WebRTC实现网页和Android视频通信的学习过程。WebRTC是一种让浏览器间无需插件即可进行点对点视频和语音通信的技术。主要内容包括MediaStream、RTCPeerConnection和RTCDataChannel的API介绍，以及在NAT环境下如何借助服务器进行信令交换和网络穿透。通过一个简单的WebRTC视频通信示例，展示了如何在Chrome浏览器中实现通信。

摘要由CSDN通过智能技术生成

公司有项目需要用到视频通信，本人自告奋勇（脑子一热）接下了这个重任。。经过几天的资料搜索，最终选定了使用WebRTC来做视频通信，关于这方面的资料现在国内还不是很多。。看英文看的头都大了，故记录一下学习过程，希望以后可以帮到别人。

首先了解一下什么是webRTC:

http://segmentfault.com/blog/skyinlayer/1190000000436544 这篇文章讲的比较详细。

简单来说就是能够让浏览器拥有和其他浏览器建立点对点（peer-to-peer）的连接进行视频或语音通信的能力，属于浏览器本身集成的功能，而不需要通过插件，flash之类的帮助，目前实现了webRTC的浏览器有谷歌浏览器，opera，以及火狐浏览器。

浏览器提供相应的javascript API 让开发者能够简单的使用到webRTC的功能，主要的API主要包括以下三个方面

1、MediaStream：通过MediaStream的API可以打开摄像头和麦克风，获取视频音频的媒体流（包括编解码之类的）。

2、RTCPeerConnection：核心组件，与其他浏览器之间建立稳定高效的点对点连接，进行音频和视频数据流的交换。

3、RTCDataChannel：RTCPeerConnection类似，可以进行任意数据的传输（例如文件，文本之类的）

从以上来看，使用WebRTC完全可以实现一个WebQQ。。。怎能让人不激动。

下面讲讲如何使用webRTC实现浏览器之间的视频通信。

虽然上面说到WebRTC是基于点对点的通信，但不是说它可以完全抛弃服务器，至少它需要服务器来为它和另一个浏览器进行信令的交换，信令大致包括以下东西：

1. 用来控制通信开启或者关闭的连接控制消息
2. 发生错误时用来彼此告知的消息
3. 媒体流元数据，比如像解码器、解码器的配置、带宽、媒体类型等等
4. 用来建立安全连接的关键数据
5. 外界所看到的的网络上的数据，比如IP地址、端口等

简单来说就是在建立点对点连接之前，浏览器并不知道对方“是谁”、“在哪”，所以需要服务器中转一些信息，等完成信令的交换后，服务器就算宕机了也没事。。

除此之外，有时候（应该说大多时候）用户所处的网络环境是经过NAT之后的，也就是说只有内网IP，此时浏览器之间因为没有公网IP无法直接建立连接，所以需要服务器来帮助其做网络穿透或者就直接转发了。

下面是一个简单的例子。

页面：index.html （主要是两个video标签，用于呈现视频）

<!DOCTYPE html>
<!--
 *  Copyright (c) 2014 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
-->
<html>
<head>
  <meta name="keywords" content="WebRTC, HTML5, JavaScript">
  <meta name="description" content="Client-side WebRTC code samples.">
  <meta http-equiv="Content-Type" con