第一步：打开已经搭建好的webRTC页面。
大家已经看到页面很简单，，有个start按钮，点一下就能开始视频了。那么我们看看整体网站的安装目录，有哪些文件，然后对文件的代码进行详细分析。
第二步：打开网站的安装目录。
CSS文件夹，当然就是放置css的容器，js文件夹就是放置JS文件的容器。test当然就是放置test文件的容器？错，没有test类型的文件，test英文是测试的意思，那么这个文件夹是作者定义的一个文件夹，具体里面放置什么暂时不清楚，一会分析代码的时候，会详细的介绍。
css是层叠样式表(英文全称：Cascading Style Sheets)，翻译成人类语言就是：用来美化网页的，网页是index.html，也就是用来美化index.html,比方布局、字体、颜色、背景和其它效果.之所以用css而不是从index.html直接美化，是因为调用css可以简单省事的解决整体页面的美观，让主页代码少了，所以打开速度也快了。同时一个css,可以美化多个网页的效果。js又是什么？JS是JavaScript的简称，轻量级的网页脚本，因为看起来想java,所以取名JavaScrip，但实际上它的语法风格与Self及Scheme较为接近。翻译成人话，就是html网页添加上这个js，能够增加互动，比如你可以从页面上，点击按钮，输入文字，提交表格等，第一次打开网页以后，下面就可以无刷新的显示内容，让网页打开速度更快。说白了，就是实现html页面的某个功能，模块化。
第三步：分析html源码。
可以右键用记事本打开index.html，我喜欢用Notepad+,这个小工具，更更清晰的把源码规规矩矩的显示出来。看到这里，有些人，可能会懵逼，其实有技巧的。几个技巧，就是把网页的上英文，先改成中文替换一下我们来看看。
我们用谷歌翻译，先把网页翻译一下，然后把对应的中文放到代码中。就是下面这个中文，当道代码中。最好的方法，就是下载一个
Dreamweaver中文版，可以直接更改。
这样是不是看着更顺眼呢。
下面开分析代码，index.html的代码一共70行，我们分段分析。
先分析前8行。
用谷歌翻译一下人类语言。
记住：<!-- 之间的内容，在网页中就是一个注释，就是一个说明，可有可无 --> 我们删掉就好了，省的看着不顺眼。当然只是用来学习，方便。商业上最好别这么干。这样代码还剩下63行。
先从第一行开始：<!DOCTYPE html> 是什么意思呢 DOCTYPE是document type(文档类型)的，html是网页类型， 而他在代码的开头，就是告诉浏览器，我的文件是html呀，你可别给我显示错了，比如给我显示成乱码之类的。 所以这一行最好保留，以便有些浏览器识别的时候，不知道你的代码是什么类型的。浏览器就会找html的内容，也就是body里面内容。一会再body里面分析。
<!DOCTYPE html>
-
!：强调的意思，比如：我长的真帅呀！这个感叹号的意思就是强调。
-
DOCTYPE：html 中的标签是不区分大小写的，一般推荐小写，唯独这几个字母的大写的，DOC的全称是document，文件的意思，type是类型的意思，连起来就是文件的类型是html。
总结：这个的代码，就是让浏览器兼容。兼容html. 所以必填！而且是开头。
<html>
<head>
在html中大多说标签都是成对出现的，例如<html>........</html>."/"表示结束代码，
<head>头部，这部分包含显示在网页标题栏中的标题和其他在网页中不显示的信息
<body>主体部分，显示页面中的文字图像连接等等，，
<html>表示代码是html，主要包含head和body两部分
<title>标题，例如百度主页“<title>百度一下，你就知道</title>”
一般顺序应该是这样的
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
记住这个小技巧： 远看一个人（html) ，从上往下看，脑袋（head),他带着一个胸牌<title>小明</title>，好了脑袋的相貌看完了</head> ，他的身体概括<body>长得其貌不扬的哈哈<body>，看完这个人了</html>
第四步：分析3-23行的代码， 也就是<head></head>，脑袋部分。
在html中大多说标签都是成对出现的，例如<html>........</html>."/"表示结束代码，
<head>头部，这部分包含显示在网页标题栏中的标题和其他在网页中不显示的信息
<body>主体部分，显示页面中的文字图像连接等等，，
<html>表示代码是html，主要包含head和body两部分
<title>标题，例如百度主页“<title>百度一下，你就知道</title>”
一般顺序应该是这样的
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
记住这个小技巧： 远看一个人（html) ，从上往下看，脑袋（head),他带着一个胸牌<title>小明</title>，好了脑袋的相貌看完了</head> ，他的身体概括<body>长得其貌不扬的哈哈<body>，看完这个人了</html>
第四步：分析3-23行的代码， 也就是<head></head>，脑袋部分。
<head>
中译：头描述 开始
中译：头描述 开始
<meta charset="utf-8">
中译：<标签 编码=utf-8 (这是国际通用格式，无论中文，还是英文，这样网页不会出现乱码）
<meta name="description" content="WebRTC code samples">
中译：<标签 名字=description 描述=WebRTC code samples（webrtc源码演示） 简单来说就是 内容的主题。但是不显示，一般告诉百度，这是个关键字。还有name="keywords"，（关键字）等等。
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
中译：<标签 名字=viewport(视窗）content（描述）=宽度指=device-width,（大概意思：自适应手机端屏幕，满屏的意思）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
中译：<标签 名字 =viewport(视窗）content（描述）=宽度指=device-width,，（大概意思：自适应手机端屏幕，满屏的意思）
中译：<标签 名字=viewport(视窗）content（描述）=宽度指=device-width,（大概意思：自适应手机端屏幕，满屏的意思）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
中译：<标签 名字 =viewport(视窗）content（描述）=宽度指=device-width,，（大概意思：自适应手机端屏幕，满屏的意思）
<meta itemprop="description" content="Client-side WebRTC code samples">
中译：标签 属性 = 描述 内容 =客户端 webRTC 源码 样本。
中译：标签 属性 = 描述 内容 =客户端 webRTC 源码 样本。
<meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
中译：标签 属性 = 图片 内容 =.目录下：/images/webrtc-icon-192x192.png
<meta itemprop="name" content="WebRTC code samples">
中译：标签 属性 = 名字 内容 =.目录下：webRTC 源码 样本
中译：标签 属性 = 名字 内容 =.目录下：webRTC 源码 样本
<meta name="mobile-web-app-capable" content="yes">
中译：标签 名字 = 支持移动web应用 .内容=是
<meta id="theme-color" name="theme-color" content="#ffffff">
中译：标签 ID = 名字=主题-颜色，内容=某色。
中译：标签 ID = 名字=主题-颜色，内容=某色。
<base target="_blank">
中译：基本目标=_空白
<title>Peer connection</title>
中译： <标题>Peer connection</标题>
中译： <标题>Peer connection</标题>
<link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
中译：<链接关系=icon"大小=192x192 连接点：目录下的/../images/webrtc-icon-192x192.png
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
中译：<链接关系 连接点=目录下的//fonts.googleapis.com/css?family=Roboto:300,400,500,700" 属性="stylesheet" type="text/css">
<link rel="stylesheet" href="../../../css/main.css"/>
中译：<链接关系 属性=样式 连接点=目录下../css/main.css"/>
<link rel="stylesheet" href="css/main.css"/>
中译：连接点 属性=样式 连接点 为css/main.css"
</head>
头描述结束！
head总结：head也就是网页的“内涵”，不会显示在主页面上一般。在head中间包含着 网站标题，标签信息，文字颜色等。其中在这个head中，用的最多的 代码是<meta和<link ，可见这两个代码的重要性，mata可以理解为定义某某某，link调用某某某，这样就完成了head的编写。
其中<mata 在这个网页中定义了以下信息。
1，网页的编码格式<meta charset="utf-8">
2，网页的关键字 <meta name="description" content="WebRTC code samples">
3，窗口的布局（网页自适应手机端）<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
4，定义文字和图片的属性 <meta itemprop="description" content="Client-side WebRTC code samples"> 和 <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
其中<iink 在这个网页中定义了以下信息。
超链接，比如调用css字体，样式等。 <link rel="stylesheet" href="../../../css/main.css"/>
那么head分析完毕后，我们并没有发现webrtc的重要代码，而都是网页文字和关键字 网页标签的描述。只能继续分析剩下的body代码。也就说明，一个网页如果调用webrtc的api,要在body里面调用？暂时这么认为吧。
第五步：分析<body>的37行代码。
中译：这就一段普通的字，加上一个超链接跳转，也就是点击 说明书，会跳转到说明网页。
以上代码，展示内容就是：
<video id="remoteVideo" playsinline autoplay></video>
人语：视频的ID是remoteVideo的时候，播放线路自动播放。
<button id="startButton">Start</button>
中译：新建一个按钮，ID是startButton，显示的按钮名字是：Start
<select id="sdpSemantics">
中译：新建一个选择框，ID是sdpSemantics
<option selected value="">Default</option>
中译：选项 选择值：Default （缺省默认）
<option value="unified-plan">Unified Plan</option>
中译：选项 选择值：unified-plan （综合统一）
<option value="plan-b">Plan B</option>
中译：选项 选择值：plan-b（B计划）
头描述结束！
head总结：head也就是网页的“内涵”，不会显示在主页面上一般。在head中间包含着 网站标题，标签信息，文字颜色等。其中在这个head中，用的最多的 代码是<meta和<link ，可见这两个代码的重要性，mata可以理解为定义某某某，link调用某某某，这样就完成了head的编写。
其中<mata 在这个网页中定义了以下信息。
1，网页的编码格式<meta charset="utf-8">
2，网页的关键字 <meta name="description" content="WebRTC code samples">
3，窗口的布局（网页自适应手机端）<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
4，定义文字和图片的属性 <meta itemprop="description" content="Client-side WebRTC code samples"> 和 <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
其中<iink 在这个网页中定义了以下信息。
超链接，比如调用css字体，样式等。 <link rel="stylesheet" href="../../../css/main.css"/>
那么head分析完毕后，我们并没有发现webrtc的重要代码，而都是网页文字和关键字 网页标签的描述。只能继续分析剩下的body代码。也就说明，一个网页如果调用webrtc的api,要在body里面调用？暂时这么认为吧。
第五步：分析<body>的37行代码。
<body> 也就是网页的内容，里面包含网页的信息，会展示在网页上面。
<div id="container">
中译：定义 一个 ID 为 container （容器的意思），人语：新建模块的名字是container
中译：定义 一个 ID 为 container （容器的意思），人语：新建模块的名字是container
<h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC示例</a>
中译：<标题1> 超链接是:WebRTC示例WebRTC示例 文字是WebRTC示例，人语：WebRTC示例 这几个字，给它来个超链接，点击这个几字，跳转到http://webrtc.github.io/samples
中译：<标题1> 超链接是:WebRTC示例WebRTC示例 文字是WebRTC示例，人语：WebRTC示例 这几个字，给它来个超链接，点击这个几字，跳转到http://webrtc.github.io/samples
<span>对等连接</span></h1>
中译：就是一行字 文字是对等连接，标题1结束
以上这几行代码，展示内容就是：
中译：就是一行字 文字是对等连接，标题1结束
以上这几行代码，展示内容就是：
<p>此示例说明如何使用<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection">RTCPeerConnection</a>在两个对等点之间建立连接 。还提供了用于指定连接的<a href="https://webrtc.org/web-apis/chrome/unified-plan/">SDP语义</a>的选项（统一计划，计划b或默认）。</p>
中译：这就一段普通的字，加上一个超链接跳转，也就是点击 说明书，会跳转到说明网页。
以上代码，展示内容就是：
<video id="localVideo" playsinline autoplay muted></video>
中译：<video id=“localVideo”播放线路自动播放静音></video>？？？
人语：视频的ID是 localVideo的时候，播放线路自动播放静音
人语：视频的ID是 localVideo的时候，播放线路自动播放静音
<video id="remoteVideo" playsinline autoplay></video>
人语：视频的ID是remoteVideo的时候，播放线路自动播放。
<div class="box">
中译：定义 class为box, class 属性在css里面，到时候box会调用css里面的属性。
中译：定义 class为box, class 属性在css里面，到时候box会调用css里面的属性。
<button id="startButton">Start</button>
中译：新建一个按钮，ID是startButton，显示的按钮名字是：Start
<button id="callButton">Call</button>
中译：新建一个按钮，ID是callButton，显示的按钮名字是：Call
中译：新建一个按钮，ID是callButton，显示的按钮名字是：Call
<button id="hangupButton">Hang Up</button>
中译：新建一个按钮，ID是hangupButton，显示的按钮名字是：Hang Up
中译：新建一个按钮，ID是hangupButton，显示的按钮名字是：Hang Up
</div>
中译：以上定义结束。
以上代码，在显示的内容是：
中译：以上定义结束。
以上代码，在显示的内容是：
<div class="box">
中译：又定义了另一个class的box
中译：又定义了另一个class的box
<span>SDP Semantics:</span>
中译：这就是一段明文：SDP Semantics
中译：这就是一段明文：SDP Semantics
<select id="sdpSemantics">
中译：新建一个选择框，ID是sdpSemantics
<option selected value="">Default</option>
中译：选项 选择值：Default （缺省默认）
<option value="unified-plan">Unified Plan</option>
中译：选项 选择值：unified-plan （综合统一）
<option value="plan-b">Plan B</option>
中译：选项 选择值：plan-b（B计划）
</select>
</div>
中译：定义的这个窗口，编写完毕。
以上代码在页面中显示：
以上代码在页面中显示：
<p>查看控制台以查看日志记录。该MediaStream对象localStream和RTCPeerConnection 对象pc1，并pc2在全球范围内，所以你可以在控制台检查它们。</p>
<p>有关RTCPeerConnection的更多信息，请参见<a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/" title="Sam Dutton撰写的有关WebRTC的HTML5 Rocks文章">WebRTC入门</a>。</p>
<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/peerconnection/pc1" title="在GitHub上查看此页面的源代码" id="viewSource">在GitHub上查看源代码</a></div>
中译：三行明文，都是说明。
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
中译：加载一个js脚本，网络上的：https://webrtc.github.io/adapter/adapter-latest.js
中译：加载一个js脚本，网络上的：https://webrtc.github.io/adapter/adapter-latest.js
<script src="js/main.js" async></script>
中译：再加载一个js脚本，本地的js/main.js
中译：再加载一个js脚本，本地的js/main.js
<script src="../../../js/lib/ga.js"></script>
中译：再加载一个js脚本，本地的绝对路径下的/js/lib/ga.js
中译：再加载一个js脚本，本地的绝对路径下的/js/lib/ga.js
</body>
中译：内容现实页编写完毕。
第六步：只剩下最后一行代码</html>
也就是编写完结！
总结：整个网页分析完毕后，一脸懵逼，这就完成了一个webRTC的语音视频聊天系统？？？原来webRTC就是一个远程的JS文件的API呀。也就是说，过去如果没有远程的这个JS，都是本地的JS，实现远程会有很多麻烦，现在又webRTC的js了，我们远程调用这个webRTC的JS，就能获得远程视频语音聊天了。 也许是这样，还需慢慢研究。
中译：内容现实页编写完毕。
第六步：只剩下最后一行代码</html>
也就是编写完结！
总结：整个网页分析完毕后，一脸懵逼，这就完成了一个webRTC的语音视频聊天系统？？？原来webRTC就是一个远程的JS文件的API呀。也就是说，过去如果没有远程的这个JS，都是本地的JS，实现远程会有很多麻烦，现在又webRTC的js了，我们远程调用这个webRTC的JS，就能获得远程视频语音聊天了。 也许是这样，还需慢慢研究。