本光头在N久之前的一门教学中说到，WEBRTC的原理，不知道同学们有没有看过那一篇，如果没有的话那就先去看看那篇课程，或者大家可以搜索一下webrtc的相关通信原理再来看本篇文章。本篇会介绍端对端连接的基本流程，也就是peer 2 peer，这次为演示方便，就不准备使用真实的服务器进行介绍（毕竟服务器带宽也不便宜呀）。也就是说本篇不涉及到跨网络的应用，而是在同一个页面里面，在其中一个video标签里头展示我们采集到的音频，视频流，之后创建两个peerConnection，然后将这个媒体流数据加入到其中一个
本光头在N久之前的一门教学中说到，WEBRTC的原理，不知道同学们有没有看过那一篇，如果没有的话那就先去看看那篇课程，或者大家可以搜索一下webrtc的相关通信原理再来看本篇文章。
本篇会介绍端对端连接的基本流程，也就是peer 2 peer，这次为演示方便，就不准备使用真实的服务器进行介绍（毕竟服务器带宽也不便宜呀）。也就是说本篇不涉及到跨网络的应用，而是在同一个页面里面，在其中一个video标签里头展示我们采集到的音频，视频流，之后创建两个peerConnection，然后将这个媒体流数据加入到其中一个的peerConnection里面，然后再让他们连接，连接之后，再通过本机底层的peerConnection连接到另一端的peerConnection，当另一个端的peerConnection收到数据之后他就回调onAddStream事件,那么当另一个端收到onAddStream事件之后，将这个视频流数据转给video标签，那视频就被渲染起来了。
虽然这个流程没有经过实际的跨网络的调用，没有信令服务器，但是其流程与真实的网络流程是一样的。我们先从这一个简单的例子中，了解一下webrtc的基本传输流程，在后续的介绍中，本光头将会把真实的网络加入到代码中，让大家从浅入深，逐步了解webrtc的传输原理以及如何搭建自己的webrtc服务器。
我们的代码分为展示部分与控制部分，展示部分为html,而控制部分则是js调用webrtc的api。
建立一个文件夹
mkdir webrtc
cd webrtc
mkdir js
vim index.html
输入以下内容：
<html>
<head>
<title>非真实网络应用视频传输</title>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div>
<!-- 收到数据之后要自动播放 -->
<video id="localVideo" autoplay playsinline></video>
<!-- 展示远端的视频 -->
<video id="remoteVideo" autoplay playsinline></video>
<div>
<!-- 开始采集，将数据设置到localVideo -->
<button id="start">start</button>
<!-- 当start，采集到数据之后，调用call之后,创建双方的RtcPeerConnection，当两个peerConnection创建之后，他们就要
协商，协商处理之后就要进行双方的cadidate采集，也就是双方的有效地址采集，采集完之后进行交换 ，然后cadidate pair
要进行检测，筛选，最终找到最有效的传输链路，之后就再将localVideo的数据，展示到另一端，另一端收到数据之后会触发
onAddStream事件或onTrack事件，说明我收到数据了，当收到这事件之后，再将它设置到remoteVideo的标签中，这样remoteV
ideo就能展示出来了-->
<button id="call">call</button>
<!-- 挂起 -->
<button id="hangup">stop</button
最低0.47元/天 解锁文章
6607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
