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即可