WebRTC 入门：带有示例代码的实用指南
WebRTC（Web Real-Time Communication）是一项强大的技术，允许浏览器和移动应用进行实时音频、视频和数据共享，而无需安装插件或第三方软件。它被广泛应用于视频通话、在线会议、P2P文件传输等场景。本文将为您提供一个简单的 WebRTC 入门指南，并附上代码示例。
WebRTC 的基本架构
WebRTC 的架构主要由以下几个组件构成：
- MediaStream: 用于捕捉音频和视频流。
- RTCPeerConnection: 用于实现点对点连接。
- RTCDataChannel: 用于实现低延迟的双向数据传输。
在开始编写代码之前，确保您的浏览器支持 WebRTC。Chrome 和 Firefox 都是常用的支持 WebRTC 的浏览器。
示例代码
接下来，我们将构建一个简单的 WebRTC 应用程序，允许两个用户通过视频通话进行实时通信。我们将使用 Node.js 作为后端服务器。
1. 安装和设置 Node.js 服务器
首先，确保您已经安装了 Node.js 和 npm。然后，创建一个新的项目目录并初始化项目：
mkdir webrtc-demo
cd webrtc-demo
npm init -y
接下来，安装 Express 和 Socket.IO，这是我们进行实时通信所需的库：
npm install express socket.io
现在，创建一个 server.js 文件，编写以下代码：
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('offer', (offer) => {
socket.broadcast.emit('offer', offer);
});
socket.on('answer', (answer) => {
socket.broadcast.emit('answer', answer);
});
socket.on('candidate', (candidate) => {
socket.broadcast.emit('candidate', candidate);
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
2. 创建前端代码
在项目目录中创建一个名为 public 的文件夹，然后在其中创建一个 index.html 文件，编写以下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTC Demo</title>
<style>
video {
width: 50%;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>WebRTC Demo</h1>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<button id="startBtn">开始通话</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
let localStream;
let peerConnection;
const servers = {
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' }
]
};
const startBtn = document.getElementById('startBtn');
startBtn.onclick = startCall;
async function startCall() {
localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('localVideo').srcObject = localStream;
peerConnection = new RTCPeerConnection(servers);
localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
socket.emit('candidate', event.candidate);
}
};
peerConnection.ontrack = (event) => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
socket.emit('offer', offer);
}
socket.on('offer', async (offer) => {
if (!peerConnection) {
peerConnection = new RTCPeerConnection(servers);
localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
socket.emit('candidate', event.candidate);
}
};
peerConnection.ontrack = (event) => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
}
await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
socket.emit('answer', answer);
});
socket.on('answer', (answer) => {
peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
});
socket.on('candidate', (candidate) => {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
});
</script>
</body>
</html>
3. 运行应用
确保在命令行中运行 Node.js 服务器：
node server.js
然后打开浏览器，访问 http://localhost:3000，您可以在多个浏览器窗口中测试视频通话功能。
总结
在本教程中，我们演示了如何使用 WebRTC 创建一个基本的视频通话应用。我们介绍了 WebRTC 的基本组件，并提供了 Node.js 和 Socket.IO 的示例代码。尽管这个例子比较简单，但它为您理解 WebRTC 的工作原理和搭建自己的实时通信应用奠定了基础。后续，您可以进一步扩展功能，尝试添加聊天、文件传输等功能。希望这篇文章能为您的 WebRTC 学习之旅提供帮助！
