本光头在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