Creating WebRTC based applications with Python

一、AIORTC WebRTC 是个啥？

简单来说，AIORTC WebRTC 是一个开源库，它把 WebRTC 的强大能力带给了 Python 开发者。WebRTC 本身是一套协议和 API，能让浏览器和设备之间直接进行实时通信，支持视频、音频和数据的点对点传输。这样一来，开发者就能轻松构建高性能的实时通信应用，完全不用依赖那些烦人的插件或额外软件。

AIORTC 在实时通信技术领域算是一把利器，它能帮助我们实现互联网上的无缝交互。通过利用 WebRTC 协议，AIORTC 提供了一个基于 Python 的框架，让我们可以在自己的应用里轻松加入实时音视频和数据通信功能。现在这个时代，像视频会议、直播、物联网集成这些场景，都离不开实时通信，所以这项技术也是越来越重要。

在这互联互通的世界里，实时通信已经是很多应用的核心了，从社交媒体到远程医疗，都离不开它。AIORTC 的牛掰之处在于，它提供了一套稳健的、以 Python 为中心的方案，让更多开发者都能上手，简化了实时功能的集成。而且它不仅能在桌面和移动应用上发挥作用，在服务器环境和物联网系统里也同样给力。

AIORTC 的核心亮点

• 点对点通信：直接在两个节点间建立连接，延迟更低，性能更好。
• 媒体流处理：高效管理音频和视频流，做视频会议、直播啥的很合适。
• 数据通道：方便地在节点间传输任意数据，比如做文件分享、协同编辑。
• Python 无缝集成：给 WebRTC 套上一层 Python 风格的接口，Python 开发者用起来会很顺手。

把 AIORTC 集成到 Python 应用里，开发者就能在自己熟悉的编程环境中玩转 WebRTC 的全部潜力。这对服务端应用和物联网设备尤其友好，毕竟 Python 在这两个领域因为简单灵活而广受欢迎。AIORTC 就像一座桥，把实时通信的需求和 Python 庞大的生态连接起来，为各种创新应用铺平了道路。

二、动手之前：准备工作

1. 搭建开发环境

动手写代码之前，先把环境搭好。确保你的电脑上装了 Python。建议用虚拟环境来管理项目依赖，这样更干净。

[a] 安装 Python

[b] 创建虚拟环境

python -m venv aiortc_env
source aiortc_env/bin/activate  # Windows 用户用 `aiortc_env\Scripts\activate`

2. 安装 AIORTC

环境准备好之后，就可以用 pip 安装 AIORTC 了。

[a] 安装命令

pip install aiortc

[b] 验证是否装好

写个简单的 Python 脚本试试导入：

import aiortc
print("AIORTC 安装成功！")

3. 项目结构建议

一个好的项目结构能让代码更好维护、更容易扩展。下面是一个推荐的结构：

aiortc_webrtc_app/
├── main.py          # 程序入口
├── signaling.py     # 信令处理
├── peer.py          # 对等连接和媒体流管理
├── static/
│   ├── css/         # 样式文件
│   └── js/          # 前端脚本
├── templates/
│   └── index.html   # 主页面
├── README.md
└── requirements.txt

• main.py：整个应用的启动文件。
• signaling.py：负责节点之间的信令交互。
• peer.py：管理对等连接和媒体流。
• static/：放静态资源，比如 CSS、JS。
• templates/：放 HTML 模板。
• README.md：项目说明文档。
• requirements.txt：项目依赖列表。

4. 应用架构概览

一个典型的 AIORTC WebRTC 应用遵循客户端-服务器模式，主要包括这几部分：

客户端

• HTML/CSS/JavaScript：负责界面和用户交互。
• WebRTC API：用来采集和传输媒体流。

服务端

• Python + AIORTC：管理信令、对等连接和媒体处理。
• WebSocket 服务器：用于客户端和服务器之间的实时信令通信。

工作流程：

1. 用户界面：让用户能加入会话、控制音视频、看到其他参与者。
2. 信令服务器：处理信令数据（比如会话发起、ICE 候选），帮节点之间建立连接。
3. 媒体处理：AIORTC 负责处理媒体流、编解码，以及对等连接的维护。

搭好环境、装好 AIORTC、规划好项目结构，你就已经为构建一个健壮的 AIORTC WebRTC 应用打下了坚实的基础。接下来，我们将一步步深入实现细节，带你完成一个功能完整的实时通信应用。

三、第一步：编写 main.py —— 应用的入口

main.py 是整个应用的启动文件。我们要在这里做基础配置、导入必要的库，并编写主函数来初始化和运行应用。

1. 创建 main.py 文件

在项目根目录下新建一个 main.py 文件，核心逻辑都放这里。

2. 导入所需库

我们需要导入一些库来处理 WebRTC 功能、信令和启动服务器：

import asyncio
import logging
import json
from aiortc import RTCPeerConnection, RTCSessionDescription
from aiohttp import web

3. 基础配置

配置一下日志，并设置好 Web 服务器的基本路由：

logging.basicConfig(level=logging.INFO)

async def index(request):
    with open('templates/index.html', 'r') as f:
        content = f.read()
    return web.Response(content_type='text/html', text=content)

app = web.Application()
app.router.add_get('/', index)

4. 编写主函数

主函数负责启动 Web 服务器并管理 WebRTC 连接，包括创建信令机制和处理对等连接。

async def main():
    # 创建一个 WebRTC 对等连接
    pc = RTCPeerConnection()

    # 定义信令处理函数：处理客户端发来的 offer
    async def offer(request):
        params = await request.json()
        # 假设客户端发来的数据里包含 sdp 和 type
        offer = RTCSessionDescription(sdp=params['sdp'], type=params['type'])
        
        await pc.setRemoteDescription(offer)
        answer = await pc.createAnswer()
        await pc.setLocalDescription(answer)

        return web.Response(
            content_type='application/json',
            text=json.dumps({
                'sdp': pc.localDescription.sdp,
                'type': pc.localDescription.type
            })
        )

    app.router.add_post('/offer', offer)

    # 启动 Web 服务器
    runner = web.AppRunner(app)
    await runner.setup()
    site = web.TCPSite(runner, 'localhost', 8080)
    await site.start()

    logging.info("服务器已启动，访问地址: http://localhost:8080")

if __name__ == '__main__':
    asyncio.run(main())

信令流程说明：offer 函数接收客户端发来的 offer，把它设为远程描述，然后创建一个 answer 并发送回客户端。

5. 测试一下

启动服务器

确保虚拟环境已激活，然后运行：

python main.py

验证服务器是否正常运行

打开浏览器，访问 http://localhost:8080，如果能看到 index.html 的内容，说明服务器跑起来了。

到这里，你的 AIORTC WebRTC 应用的核心骨架就已经搭好了。main.py 现在扮演着后盾的角色，负责处理 WebRTC 对等连接和信令。接下来我们会在它的基础上添加更多组件和功能，一步步打造一个完整的实时通信应用。

四、第二步：把各个组件串起来

动手写代码之前，最好先规划一下应用的主要组件。这一步能帮你理清思路，知道用户界面长啥样，各个部分之间怎么配合。

1. 规划界面和用户体验

先草草画出应用的基本布局，主要包括：

• 加入界面：用户在这里输入信息并加入会话。
• 控制面板：提供静音/取消静音、开关视频等功能。
• 参与者视图：显示所有参与者的音视频流。

可以用 Figma、Sketch，甚至纸和笔来画个草图，作为后续开发的蓝图。

2. 定义核心组件及其职责

[a] 加入界面

这是用户首先看到的东西，要简洁直观。

• HTML：包含输入框（用户名）和“加入”按钮。
• CSS：保证界面干净、响应式。
• JavaScript：处理表单提交，触发连接建立。

示例：index.html 中的加入界面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AIORTC WebRTC 示例</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>
<body>
    <div id="join-screen">
        <h2>加入会话</h2>
        <input type="text" id="username" placeholder="输入你的名字">
        <button id="join-button">加入</button>
    </div>
    <div id="control-panel" style="display: none;">
        <button id="mute-button">静音</button>
        <button id="video-button">关闭视频</button>
    </div>
    <div id="participant-view" style="display: none;">
        <!-- 视频元素会动态添加到这里 -->
    </div>
    <script src="static/js/main.js"></script>
</body>
</html>

[b] 控制面板

让用户可以控制自己的音视频。

• HTML：各个控制按钮。
• CSS：好看的样式。
• JavaScript：按钮的点击事件处理。

控制面板示例

<div id="control-panel">
    <button id="mute-button">静音</button>
    <button id="video-button">关闭视频</button>
</div>

[c] 参与者视图

动态显示所有人的视频流。

• HTML：用于容纳视频流的容器元素。
• CSS：响应式的网格布局。
• JavaScript：动态添加/移除视频元素的逻辑。

参与者视图示例

<div id="participant-view">
    <!-- 视频元素会动态添加到这里 -->
</div>

3. 组件间的协作

• 加入界面：用户输入名字点“加入”后，JavaScript 会捕获输入并开始 WebRTC 连接流程。服务端（main.py）收到请求后建立对等连接。
• 控制面板：点击按钮可以静音/开关视频，JavaScript 更新本地媒体流的状态。
• 参与者视图：每当有新的媒体流到达，ontrack 事件会动态创建 <video> 元素并添加到容器中；用户离开时，对应的视频元素也会被移除。

五、第三步：实现加入界面

加入界面是用户进入会话的门户。

1. 样式设计（static/css/style.css）

body {
    font-family: 'Microsoft YaHei', sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#join-screen {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: center;
    width: 300px;
}

#join-screen h2 {
    margin-bottom: 20px;
    color: #333;
}

#join-screen input {
    width: 90%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}

#join-screen button {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#join-screen button:hover {
    background-color: #0056b3;
}

#control-panel, #participant-view {
    margin-top: 20px;
    text-align: center;
}

2. 前端逻辑（static/js/main.js）

document.addEventListener('DOMContentLoaded', () => {
    const joinButton = document.getElementById('join-button');
    const muteButton = document.getElementById('mute-button');
    const videoButton = document.getElementById('video-button');
    const participantView = document.getElementById('participant-view');

    let localStream = null;
    let pc = null;

    joinButton.addEventListener('click', async () => {
        const username = document.getElementById('username').value.trim();
        if (username) {
            try {
                await joinSession(username);
                document.getElementById('join-screen').style.display = 'none';
                document.getElementById('control-panel').style.display = 'block';
                participantView.style.display = 'flex';
            } catch (error) {
                console.error('加入会话失败:', error);
                alert('加入失败，请检查网络或重试');
            }
        } else {
            alert('请输入你的名字');
        }
    });

    muteButton.addEventListener('click', () => {
        if (localStream) {
            const audioTrack = localStream.getAudioTracks()[0];
            audioTrack.enabled = !audioTrack.enabled;
            muteButton.textContent = audioTrack.enabled ? '静音' : '取消静音';
        }
    });

    videoButton.addEventListener('click', () => {
        if (localStream) {
            const videoTrack = localStream.getVideoTracks()[0];
            videoTrack.enabled = !videoTrack.enabled;
            videoButton.textContent = videoTrack.enabled ? '关闭视频' : '开启视频';
        }
    });

    async function joinSession(username) {
        // 1. 先获取本地媒体流
        localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
        
        // 2. 创建 RTCPeerConnection
        pc = new RTCPeerConnection();
        
        // 3. 当收到远程流时，显示视频
        pc.ontrack = (event) => {
            const video = document.createElement('video');
            video.srcObject = event.streams[0];
            video.autoplay = true;
            video.style.width = '30%';
            video.style.margin = '10px';
            participantView.appendChild(video);
        };

        // 4. 把本地轨道加到连接中
        localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

        // 5. 创建 offer 并发送给服务器
        const offer = await pc.createOffer();
        await pc.setLocalDescription(offer);

        const response = await fetch('/offer', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                sdp: pc.localDescription.sdp,
                type: pc.localDescription.type,
                username: username
            })
        });

        if (!response.ok) {
            throw new Error('发送 offer 失败');
        }

        const data = await response.json();
        const answer = new RTCSessionDescription(data);
        await pc.setRemoteDescription(answer);
    }
});

3. 服务端配合（修改 main.py）

在 main.py 中调整 offer 函数，接收用户名并建立连接：

async def offer(request):
    params = await request.json()
    username = params.get('username')
    offer = RTCSessionDescription(sdp=params['sdp'], type=params['type'])
    
    await pc.setRemoteDescription(offer)
    answer = await pc.createAnswer()
    await pc.setLocalDescription(answer)

    response_data = {
        'sdp': pc.localDescription.sdp,
        'type': pc.localDescription.type,
        'username': username
    }
    return web.Response(
        content_type='application/json',
        text=json.dumps(response_data)
    )

现在用户输入名字点击加入，就能触发 WebRTC 连接流程了。

六、第四步：实现控制功能

控制面板让用户能够管理自己的音视频流。

1. 样式补充（static/css/style.css）

#control-panel button {
    padding: 8px 20px;
    margin: 0 10px;
    border: none;
    border-radius: 6px;
    background-color: #28a745;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

#control-panel button:hover {
    background-color: #218838;
}

#participant-view {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

2. 前端逻辑已在第三步中包含

在 main.js 中，我们已经添加了 muteButton 和 videoButton 的点击处理，分别用来开关音频和视频轨道。

3. 服务端新增 answer 路由

在 main.py 中添加：

async def answer(request):
    params = await request.json()
    answer = RTCSessionDescription(sdp=params['sdp'], type=params['type'])
    await pc.setRemoteDescription(answer)
    return web.Response(status=200)

app.router.add_post('/answer', answer)

这样，控制面板就完整了：用户可以静音/取消静音、开关视频，前端会实时更新按钮状态和媒体流。

七、第五步：实现参与者视图

参与者视图负责动态显示所有人的视频。

1. 样式已经就绪

之前定义的 #participant-view 使用了 flex 布局，视频元素会自动换行。

2. 前端动态处理

在 joinSession 函数中，我们通过 pc.ontrack 回调来动态添加视频元素。当远程流到达时，自动创建 <video> 标签并添加到容器中。

3. 处理参与者离开

为了在有人离开时移除对应的视频元素，可以在 main.js 中添加 onremovetrack 处理：

pc.onremovetrack = (event) => {
    const stream = event.streams[0];
    const videos = document.querySelectorAll('#participant-view video');
    for (const video of videos) {
        if (video.srcObject === stream) {
            video.remove();
            break;
        }
    }
};

把这个代码块加到 joinSession 函数中创建 pc 之后即可。这样当对等连接移除某个轨道时，对应的视频画面就会从界面上消失。

八、第六步：运行你的代码

1. 启动服务

确保虚拟环境已激活，运行：

python main.py

2. 测试功能

打开浏览器访问 http://localhost:8080：

• 输入名字，点击“加入”。
• 检查控制面板和参与者视图是否显示。
• 测试静音/取消静音、开关视频按钮。
• 可以再开一个浏览器窗口（或换一台设备），模拟多个参与者，看看视频是否都能正常显示。

3. 常见问题排查

• 没有视频/音频：检查浏览器是否给了摄像头和麦克风权限。
• 连接失败：查看服务端控制台和浏览器控制台的报错信息，确认信令交互是否正常。
• 界面不更新：确认 JavaScript 没有报错，DOM 操作是否正确。

九、总结

在这篇文章里，我们一步步地实现了用 AIORTC WebRTC 构建实时通信应用的全过程：

1. 搭好了开发环境，装了 AIORTC。
2. 规划了项目结构。
3. 实现了加入界面、控制面板、参与者视图等核心组件。
4. 编写了前端 JavaScript 和后端 Python 代码，让它们协同工作。
5. 最后做了测试，并讨论了部署时的注意事项。