WebRTC是一个免费的开源项目，它通过简单的API为浏览器和移动应用程序提供实时通信功能。本文将向你展示WebRTC的基本概念和功能，并指导你使用Node.js构建自己的WebRTC视频直播。
先决条件：
- 具有Java经验
- 掌握Socket.io基本知识
WebRTC基础
WebRTC支持在网络世界中进行实时通信，主要用于在网络上传输视频和音频数据。 在开始编写代码之前，我们首先来看一下WebRTC的最重要概念。
- 信令：
WebRTC用于浏览器中的通信流，但还需要一种机制来协调通信并发送控制消息，该过程称为信令。
信令用于以下任务：
- 初始化和关闭通讯
- 与外界共享网络配置（IP地址，端口）
- 报告连接错误
信令方法不是WebRTC指定的，开发人员可以自行选择（本教程将使用Socket.io）。
STUN和TURN服务器：
如果主要的WebRTC对等连接遇到问题，则将STUN和TURN服务器用作备用方法。 STUN服务器用于获取计算机的IP地址，而TURN服务器用作对等连接失败的中继。
既然我们已经了解了WebRTC的基本概念，就可以继续开发上面讨论的项目。
使用Socket.io发出信号
在使用WebRTC通过对等连接发送视频广播之前，我们首先需要使用信令方法（在本例中为Socket.IO）实例化该连接。
为此，我们创建项目并使用npm安装所需的依赖项：
mkdir WebSocketsVideoBroadcast && cd WebSocketsVideoBroadcast
npm install express socket.io --save
之后，我们创建以下文件夹结构：
我们从一个简单的Socket.io服务器框架开始：
const express = require("express");
const app = express();
const port = 4000;
const http = require("http");
const server = http.createServer(app);
const io = require("socket.io")(server);
app.use(express.static(__dirname + "/public"));
io.sockets.on("error", e => console.log(e));
server.listen(port, () => console.log(`Server is running on port ${port}`));
然后，我们需要实现客户端和直播者与服务器的连接。 直播者的Socket ID保存到一个变量中，以便我们以后知道客户端需要连接到的位置。
let broadcaster
io.sockets.on("connection", socket => {
socket.on("broadcaster", () => {
broadcaster = socket.id;
socket.broadcast.emit("broadcaster");
});
socket.on("watcher", () => {
socket.to(broadcaster).emit("watcher", socket.id);
});
socket.on("disconnect", () => {
socket.to(broadcaster).emit("disconnectPeer", socket.id);
});
});
之后，我们将实现socket.io事件以初始化WebRTC连接。 双方将使用这些事件来实例化对等连接。
socket.on("offer", (id, message) => {
socket.to(id).emit("offer", socket.id, message);
});
socket.on("answer", (id, message) => {
socket.to(id).emit("answer", socket.id, message);
});
socket.on("candidate", (id, message) => {
socket.to(id).emit("candidate", socket.id, message);
});
这就是我们Socket.io的服务器实现的全部内容，现在我们可以继续进行布局以及双方通信的实现。
Layouts
我们的布局由两个基本HTML文件组成，其中包含一个视频视图（稍后将显示我们正在发送的视频流）和一个CSS文件（用于某些基本样式）。
index.html文件包含一个视频视图，该视图将显示来自广播公司的视频流。 它还会导入socket.io依赖项和我们的watch.js文件。
<!DOCTYPE html>
<html>
<head>
<title>Viewer</title>
<meta charset="UTF-8" />
<link href="/styles.css" rel="stylesheet">
</head>
<body>
<video playsinline autoplay></video>
<script src="/socket.io/socket.io.js"></script>
<script src="/watch.js"></script>
</body>
</html>
broadcast.html文件与主布局非常相似，但会导入broadcast.js文件而不是watch.js。
<!DOCTYPE html>
<html>
<head>
<title>Broadcaster</title>
<meta charset="UTF-8" />
<link href="/styles.css" rel="stylesheet">
</head>
<body>
<video playsinline autoplay muted></video>
<script src="/socket.io/socket.io.js"></script>
<script src="/broadcast.js"></script>
</body>
</html>
我还为视频视图提供了一些简单的CSS样式。
html {
overflow: hidden;
height: 100%;
}
video {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
object-fit: cover;
}
body {
background-color: black;
margin: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
RTCPeerConnection
RTCPeerConnections帮助我们将位于本地网络中的两台计算机相互连接。 在谈论这些类型的连接时，会涉及到很多术语：
- ICE-互联网连接建立
- STUN-通过网络地址转换器[NAT]进行的用户数据报协议[UDP]的会话遍历
由于当今大多数设备都在NAT路由器后面，因此无法直接连接。 这就是为什么必须由STUN服务器初始化对等连接的原因，STUN服务器将返回我们可以连接的ICE候选对象。
![]()
在本指南中，我们有两个不同的连接部分。 一个是视频直播方，可以与客户端建立多个对等连接，并使用流发送视频。 第二个是客户端，它与当前视频直播方只有一个连接。
直播方
首先，我们为对等连接和摄像机创建配置对象。
const peerConnections = {};
const config = {
iceServers: [
{
urls: ["stun:stun.l.google.com:19302"]
}
]
};
const socket = io.connect(window.location.origin);
const video = document.querySelector("video");
// Media contrains
const constraints = {
video: { facingMode: "user" }
// Uncomment to enable audio
// audio: true,
};
我们使用正式的google STUN服务器进行点对点连接，并使用媒体限制条件配置摄像机。 你也可以通过取消注释音频线路来启用音频。
在创建对等连接之前，我们首先需要从摄像机获取视频，以便将其添加到我们的连接中。
navigator.mediaDevices
.getUserMedia(constraints)
.then(stream => {
video.srcObject = stream;
socket.emit("broadcaster");
})
.catch(error => console.error(error));
接下来，我们将使用以下代码创建一个RTCPeerConnection：
socket.on("watcher", id => {
const peerConnection = new RTCPeerConnection(config);
peerConnections[id] = peerConnection;
let stream = video.srcObject;
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
peerConnection.onicecandidate = event => {
if (event.candidate) {
socket.emit("candidate", id, event.candidate);
}
};
peerConnection
.createOffer()
.then(sdp => peerConnection.setLocalDescription(sdp))
.then(() => {
socket.emit("offer", id, peerConnection.localDescription);
});
});
socket.on("answer", (id, description) => {
peerConnections[id].setRemoteDescription(description);
});
socket.on("candidate", (id, candidate) => {
peerConnections[id].addIceCandidate(new RTCIceCandidate(candidate));
});
每次有新客户端加入时，我们都会创建一个新的RTCPeerConnection并将其保存在我们的peerConnections对象中。
然后，我们使用addTrack（）方法将本地流添加到连接中，并传递流和跟踪数据。
当我们收到一个ICE候选者时，将调用peerConnection.onicecandidate事件，并将其发送到我们的服务器。
之后，我们通过调用peerConnection.createOffer（）将连接提议发送给客户端，然后调用peerConnection.setLocalDescription（）来配置连接。
当客户端断开连接时，关闭连接是应用程序的另一个重要部分，我们可以使用以下代码来实现：
socket.on("disconnectPeer", id => {
peerConnections[id].close();
delete peerConnections[id];
});
最后，如果用户关闭窗口，我们将关闭socket连接。
window.onunload = window.onbeforeunload = () => {
socket.close();
};
客户端
客户端（观看视频的一方））具有几乎相同的功能。 唯一的区别是，他仅打开了与当前视频直播方的一个对等连接，并且他获取了视频，而不是流式传输视频。
我们还需要为RTCPeerConnection创建一个配置。
let peerConnection;
const config = {
iceServers: [
{
urls: ["stun:stun.l.google.com:19302"]
}
]
};
const socket = io.connect(window.location.origin);
const video = document.querySelector("video");
然后，我们可以创建我们的RTCPeerConnection并从视频直播方获取视频流。
socket.on("offer", (id, description) => {
peerConnection = new RTCPeerConnection(config);
peerConnection
.setRemoteDescription(description)
.then(() => peerConnection.createAnswer())
.then(sdp => peerConnection.setLocalDescription(sdp))
.then(() => {
socket.emit("answer", id, peerConnection.localDescription);
});
peerConnection.ontrack = event => {
video.srcObject = event.streams[0];
};
peerConnection.onicecandidate = event => {
if (event.candidate) {
socket.emit("candidate", id, event.candidate);
}
};
});
在这里，我们像上面一样使用配置对象创建了一个新的RTCPeerConnection。 唯一的区别是，我们调用createAnswer（）函数将连接应答发送回视频直播方的请求。
建立连接后，我们可以继续使用peerConnection对象的ontrack事件侦听器获取视频流。
我们还需要为点对点连接实现其他生命周期功能，这将有助于我们打开和关闭新连接。
socket.on("candidate", (id, candidate) => {
peerConnection
.addIceCandidate(new RTCIceCandidate(candidate))
.catch(e => console.error(e));
});
socket.on("connect", () => {
socket.emit("watcher");
});
socket.on("broadcaster", () => {
socket.emit("watcher");
});
window.onunload = window.onbeforeunload = () => {
socket.close();
peerConnection.close();
};
至此，该应用程序已完成，可以继续在浏览器中对其进行测试。
测试应用程序
现在我们已经完成了该应用程序，是时候对其进行测试，看看它是否可以工作了。
我们可以使用以下命令启动该应用程序：
node server.js
该应用程序现在应该在你的localhost：4000上运行，并且可以通过连接到localhost：4000 / broadcast来添加新的视频直播品程序进行测试。
之后，只需要访问localhost：4000即可作为客户端连接到服务器，并且你应该获得从视频直播方的流式传输的视频。
结论
我希望本文能帮助您了解WebRTC的基础知识以及如何使用它来流式传输视频直播。
EasyRTC视频会议云服务
基于WebRTC技术而开发的EasyRTC，是TSINGSEE青犀视频团队在音视频领域多年的技术积累而研发的， 它是覆盖全球的实时音频开发平台，支持一对一、一对多等视频通话。
EasyRTC拥有MCU和SFU两种架构，无需安装客户端与插件，纯H5在线视频会议系统，支持微信小程序、H5页面、APP、PC客户端等接入方式，极大满足语音视频社交、在线教育和培训、视频会议和远程医疗等场景需求。
随着移动互联网的高速发展，AI、5G等等新兴技术的到来，结合WebRTC技术，也将衍生出更多的应用场景，改变人类的衣、食、住、行等生活方式。
