vue项目基于WebRTC实现一对一音视频通话

效果

前端代码

  
    
      
      
      
        
等待对方接听...
        
      
      
        
收到视频邀请...
        
          
          
        
      
    
    
      发起视频
      挂断视频
    
  

服务端代码

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地址： http://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即可