基于WebRTC从0到1实现一个视频聊天室，有Vue3和React两个版本，看下项目视频演示

前言

  写这个项目的原因有两点，起初是因为在上家公司的项目中有这方面业务，但是自己并没有参与其中开发，且自己对这方面还比较感兴趣，想着有时间得学一学玩一玩；因为最近没有工作，刚好满足第一点中的有时间，所有就开始学习并实现了；此项目WebRTC相关模块全程根据MDN文档编写，主要是学习原生WebRTC，未使用其他成熟的开源WebRTC相关库，我也是这方面的初学者，写的不好的地方请多多包涵（我是菜只因，轻点喷），如果你也感兴趣，可以与我交流。

项目介绍

项目概述

  基于WebRTC实现的能够多人视频通话、共享屏幕、设备启停、实时通讯的匿名视频聊天室，项目并不依赖数据库，只依赖信令服务器完成WebRTC连接与断开后重连，核心在前端部分。

  目前项目还比较小，只有一个单页面和几个组件，都是些业务代码，支撑功能实现的代码本菜鸡封装为了一个SDK，不依赖开发框架，可以直接移植使用，项目核心就在于此，文章后面会给出此SDK的API文档；目前还有一些想法没有实现，还在开发当中。

• 前端技术栈：有Vue3和React两个版本
  • Vue3：Vue3、TypeScript、Vite4.4、Socket.IO
  • React：React18、TypeScript、Webpack5、Socket.IO
• 后端技术栈：Express、Socket.IO
• 代码仓库：
  • Vue3：milletlovemouse/rtc-chatroom(github.com)
  • React：milletlovemouse/chatroom(github.com)
  • Server：milletlovemouse/chatroom-server(github.com)

 拉取代码即可在本地部署，部署到服务器需要ssl证书，阿里云可以申请免费证书。

项目展示

基于WebRTC实现了一个视频聊天室，有Vue3和React两个版本

B站传送门 点击预览体验

RTCClient

Syntax

new RTCClient(options)

Parameters

options

• configuration: RTCConfiguration
• constraints: MediaStreamConstraints
• socketConfig:
  • host: 域名或者ip
  • port?: 端口号

import RTCClient from 'rtc-client';

const host = 'https://127.0.0.1'
const port = 3000

const rtc = new RTCClient({
   
   
  configuration: {
   
   
    iceServers: [
      {
   
   
        urls: `turn:stun.l.google.com:19302`,
        username: "webrtc",
        credential: "turnserver",
      },
    ],
  },
  constraints: {
   
   
    audio: true,
    video: true
  },