English | 简体中文
P2P
multi-person video chat room based on WebRTC
can make multi-person video calls, share screens, switch devices & start and stop, send messages, and also support disconnection and reconnection, video recording, picture editing and other functions. The code supporting the realization of RTC
related functions is packaged as an SDK
, and the API document of this SDK
will be given later. For example, video recording, picture editing and other functions I package as related hooks
or custom commands.
The data generated by the client is transmitted directly through the WebRTC
protocol without the need to worry about privacy issues. The server is only responsible for forwarding the SDP
to establish the WebRTC
connection. The server can be deployed on the public network and the client can be deployed on the public network.
- There are two versions of Vue3 and React
- Vue3:
Vue3
、TypeScript
、Vite4
、Socket.IO
- React:
React18
、TypeScript
、Webpack5
、Socket.IO
- Vue3:
- Server technology stack:
Express
、Socket.IO
- Code repository:
npm
npm install
npm run start
yarn
yarn
yarn start
pnpm
pnpm install
pnpm start
new RTCClient(options)
options
configuration:
RTCConfigurationconstraints:
MediaStreamConstraintssocketConfig:
host:
domain or ipport?:
number
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,
}
})
binding events
unbind event
turn on video sharing
cancel video sharing
join room
leave the room
get device list
get currently used video input device information
get information about the currently used audio input device
send messages using RTCDataChannel data channel
switch device media track
switch video media track
switch audio media tracks
switch device status
disable microphone
enable microphone
disable camera
enable camera
get local media stream
get shared screen media stream
close the rtcclient instance
triggered when the list of connected clients changes or updates
rtc.on('connectorInfoListChange', (data) => {
console.log('onConnectorInfoListChange', data);
})
triggered when the shared screen media stream changes
rtc.on('displayStreamChange', async (stream) => {
displayStream = stream
})
triggered when the local media stream changes
rtc.on('localStreamChange', async (stream) => {
localStream = stream
})
triggered when the RTCDataChannel data channel receives data
rtc.on('message', async (message: MessageItem) =>{
message.isSelf = false
messageList.push(message)
console.log(message);
})