基于WebRTC实现了一个视频聊天室，有Vue3和React两个版本，项目比较简单，容易学习

前言

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

项目介绍

项目概述

基于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/Tool-library(github.com)
  • React：milletlovemouse/chatroom(github.com)
  • Server：milletlovemouse/chatroom-server(github.com)

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

项目展示

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
  },
  socketConfig: {
    host,
    port,
  }
})

Instance methods

on

添加监听事件

• 类型

RTCClient.on<K extends keyof MittEventType, Args extends MittEventType[K]>(type: K, listener: (args: Args) => void): void

• 示例

rtc.on('connectorInfoListChange', (data) => {
  console.log('onConnectorInfoListChange', data);
})

off

移除监听事件

• 类型

RTCClient.off(type: keyof MittEventType, listener?: (...args: any[]) => void): void

join

加入房间

• 类型

RTCClient.join(data: {username: string; roomname: string;}): void

leave

退出房间

• 类型

RTCClient.leave(): void

shareDisplayMedia

开启共享屏幕

• 类型

RTCClient.shareDisplayMedia(): Promise<MediaStream>

cancelShareDisplayMedia

取消共享屏幕

• 类型

RTCClient.cancelShareDisplayMedia(): void

getDevicesInfoList

获取设备信息列表

• 类型

RTCClient.getDevicesInfoList(): Promise<MediaDeviceInfo[]>

getVideoDeviceInfo

获取当前使用的视频输入设备信息

• 类型

RTCClient.getVideoDeviceInfo(): Promise<MediaDeviceInfo>

getAudioDeviceInfo

获取当前使用的音频输入设备信息

• 类型

RTCClient.getAudioDeviceInfo(): Promise<MediaDeviceInfo>

getLocalStream

获取本地媒体流

• 类型

RTCClient.getLocalStream(): Promise<MediaStream>

getDisplayStream

获取本地屏幕媒体流

• 类型

RTCClient.getDisplayStream(): Promise<MediaStream>

replaceTrack

切换设备媒体轨道

• 类型

RTCClient.replaceTrack(deviceId: string, kind: Kind): Promise<void>

replaceVideoTrack

切换视频输入设备媒体轨道

• 类型

RTCClient.replaceVideoTrack(deviceId: string): Promise<void>

replaceAudioTrack

切换音频输入设备媒体轨道

• 类型

RTCClient.replaceAudioTrack(deviceId: string): Promise<void>

deviceSwitch

切换设备状态

• 类型

RTCClient.deviceSwitch(state: boolean, kind: Kind): Promise<void>

disableAudio

禁用音频输入设备

• 类型

RTCClient.disableAudio(): Promise<void>

enableAudio

启用音频输入设备

• 类型

RTCClient.enableAudio(): Promise<void>

disableVideo

禁用视频输入设备

• 类型

RTCClient.disableVideo(): Promise<void>

enableVideo

启用视频输入设备

• 类型

RTCClient.enableVideo(): Promise<void>

channelSendMesage

依赖RTCDataChannel发送消息

• 类型

RTCClient.channelSendMesage(data: Message): void

close

关闭RTCClient实例

• 类型

RTCClient.close(): void

Events

connectorInfoListChange

当与连接的客户端列表发生改变或者更新时触发

• 示例

rtc.on('connectorInfoListChange', (connectorInfoList) => {
  console.log('onConnectorInfoListChange', connectorInfoList);
})

displayStreamChange

当与连接的客户端列表发生改变或者更新时触发

• 示例

rtc.on('displayStreamChange', async (stream) => {
  displayStream = stream
})

localStreamChange

当与连接的客户端列表发生改变或者更新时触发

• 示例

rtc.on('localStreamChange', async (stream) => {
  localStream = stream
})

message

当与连接的客户端列表发生改变或者更新时触发

• 示例

rtc.on('message', (message: MessageItem) =>{
  message.isSelf = false
  messageList.push(message)
  console.log(message);
})

结语

第一次写文章，有什么不足的欢迎帮忙指出；最后，如果你也对我做的这些感兴趣或者对你有帮助的话，希望你能给我的项目一个Star，感激不尽！