效果

前端代码

服务端代码

const socket = require('socket.io'); const http = require('http');  const server = http.createServer()  const io = socket(server, {     cors: {         origin: '*' // 配置跨域     } });  io.on('connection', sock => {     console.log('连接成功...')     // 向客户端发送连接成功的消息     sock.emit('connectionSuccess');      sock.on('joinRoom',(roomId)=>{         sock.join(roomId);         console.log('joinRoom-房间ID：'+roomId);     })      // 广播有人加入到房间     sock.on('callRemote',(roomId)=>{         io.to(roomId).emit('callRemote')     })      // 广播同意接听视频     sock.on('acceptCall',(roomId)=>{         io.to(roomId).emit('acceptCall')     })      // 接收offer     sock.on('sendOffer',({offer,roomId})=>{         io.to(roomId).emit('sendOffer',offer)     })      // 接收answer     sock.on('sendAnswer',({answer,roomId})=>{         io.to(roomId).emit('sendAnswer',answer)     })      // 收到candidate     sock.on('sendCandidate',({candidate,roomId})=>{         io.to(roomId).emit('sendCandidate',candidate)     })      // 挂断结束视频     sock.on('hangUp',(roomId)=>{         io.to(roomId).emit('hangUp')     }) })  server.listen(3000, () => {     console.log('服务器启动成功'); }); 

完整代码gitee地址： https://gitee.com/wade-nian/wdn-webrtc.git

参考文章：基于WebRTC实现音视频通话_npm create vite@latest webrtc-client -- --template-CSDN博客y

要是在拨打电话过程中，无法打开摄像头或者麦克风，浏览器也没有弹出获取摄像头及麦克风的权限运行，这是需要进行浏览器安全源的设置，步骤如下：

1、在 chrome 中 输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure

2、找到Insecure origins treated as secure

3、添加你服务器的地址 例如：http://192.168.1.10:8080

4、选择Enabled属性

5、点击右下角的Relaunch即可