TurboMeet：一个基于WebRTC实现的视频会议全栈开发项目
category
Web
date
Jul 13, 2023
icon
slug
turbomeet
status
Published
summary
一个基于 WebRTC 实现的视频会议的全栈开发项目，支持音频，视频，共享屏幕，消息发送的方式来进行交互。同时项目是基于TypeScript的全栈开发，并使用 pnpm monorepo 进行项目管理
tags
Next
WebRTC
TypeScript
Fastify
Mediasoup
type
Post
TurboMeet
一个基于 WebRTC 实现的视频会议的全栈开发项目，支持音频，视频，共享屏幕，消息发送的方式来进行交互。同时项目是基于TypeScript的全栈开发，并使用 pnpm monorepo 进行项目管理
技术栈
客户端
- NextJS
- ReactJS
- Tailwind CSS
- Chakra UI
- Zustand
服务器端
- Fastify
- Mediasoup
功能
登录界面
可以按自己的喜好去选择音视频
会议房间
本地
- 控制音视频的开关
- 共享屏幕
- 音频可视化
- 自定义切换音视频设备
远程
- 查看音视频是否打开
- 音频可视化
简易的消息通信
页面展示
登录界面
会议房间
桌面端
移动端
屏幕共享
自定义音视频设备
消息发送
项目运行
首先拉取源代码，完成后，进入目录并执行
再分别进入
client 和 server 先配置 config.ts 中的ip（可以设置成内网ip，127.0.0.1因为一些原因在服务器端无法使用）再分别执行
运行后，服务器端地址:
https://ip:8080，客户端地址: https://ip:3001，就可以访问了打包运行
如果想要进行打包的话，可以分别进入
client 和 server执行mediasoup 的简单介绍
Mediasoup 是推出时间不长的 WebRTC 流媒体服务器开源库，其地址为：Mediasoup
由应用层和数据处理层组成。应用层是通过 Node.js 实现的；数据处理层由 C++ 语言实现，包括 DTLS 协议实现、ICE 协议实现、SRTP/SRTCP 协议实现、路由转发等。
架构
Mediasoup 把每个实例称为一个 Worker，在 Worker 内部有多个 Router，每个 Router 相当于一个房间。在每个房间里可以有多个用户或称为参与人，每个参与人在 Mediasoup 中由一个 Transport 代理。换句话说，对于房间（Router）来说，Transport 就相当于一个用户。
更加详细的使用可以去看看我之前写的一篇文章