使用 WebRTC 创建视频聊天应用程序时遇到的问题
Problem in creating A Video Chat App With WebRTC
我想创建一个视频聊天应用程序。但是我的应用程序没有显示其他人参与的视频。请帮忙。当其他人参与加入。它没有在我的 window 上显示他的视频。这是我的代码。提前致谢。
这是服务器的代码。
Server.js -
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server)
const { v4: uuidV4 } = require('uuid')
const { ExpressPeerServer } = require('peer');
const peerServer = ExpressPeerServer(server,{
debug: true
})
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use('/peerjs', peerServer)
app.get('/', (req,res)=>{
res.redirect(`/${uuidV4()}`)
})
app.get('/:room', (req, res) => {
res.render('room', { roomId: req.params.room })
})
io.on('connection',socket =>{
socket.on('join-room',(roomId, userId)=>{
socket.join(roomId);
socket.to(roomId).broadcast.emit('user-connected', userId);
})
})
server.listen(process.env.PORT || 3030);
是主脚本。
Script.js-
const socket = io('/')
const videoGrid = document.getElementById('video_grid')
let myVideoStream;
const myVideo = document.createElement('video')
myVideo.muted = true;
var peer = new Peer(undefined, {
path: '/peerjs',
host: '/',
port: '3030'
});
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
myVideoStream = stream;
addVideoStream(myVideo, stream)
peer.on('call', call=>{
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream=>{
addVideoStream(video, userVideoStream)
})
})
socket.on('user-connected', userId =>{
connecToNewUSer(userId, stream);
alert('Somebody connect', userId)
})
}
)
peer.on('open', id =>{
socket.emit('join-room', ROOM_ID, id) ;
})
const connecToNewUSer = (userId, stream) => {
const call = peer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream =>{
addVideoStream(video, userVideoStream)
})
}
function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}
是ejs文件。
room.ejs-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZOOM</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script>
const ROOM_ID = "<%= roomId %>"
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="video_grid">
</div>
<script src="script.js"></script>
</body>
</html>
您需要 STUN
和 TURN
服务器。这两个服务器帮助 NAT 后面的 connect/find 用户。
这是一些基本的:
var peer = new Peer(undefined, {
path: '/peerjs',
host: '/',
port: '3030',key: "peerjs",
config: {
"iceServers" : [
{urls: "stun:<yourstunserver.addres>:5349"},
{
urls: "turn:<yourturnserver.address>:5349",
username: "<turn username>",
credential: "<turn password>",
}
]
}
});
您可以使用 coturn
设置您自己的 STUN/TURN
服务器,安装免费且简单。
我相信 google 提供免费 STUN
服务器,但我发现没有人提供免费 TURN
服务器。
我想创建一个视频聊天应用程序。但是我的应用程序没有显示其他人参与的视频。请帮忙。当其他人参与加入。它没有在我的 window 上显示他的视频。这是我的代码。提前致谢。
这是服务器的代码。 Server.js -
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server)
const { v4: uuidV4 } = require('uuid')
const { ExpressPeerServer } = require('peer');
const peerServer = ExpressPeerServer(server,{
debug: true
})
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use('/peerjs', peerServer)
app.get('/', (req,res)=>{
res.redirect(`/${uuidV4()}`)
})
app.get('/:room', (req, res) => {
res.render('room', { roomId: req.params.room })
})
io.on('connection',socket =>{
socket.on('join-room',(roomId, userId)=>{
socket.join(roomId);
socket.to(roomId).broadcast.emit('user-connected', userId);
})
})
server.listen(process.env.PORT || 3030);
是主脚本。 Script.js-
const socket = io('/')
const videoGrid = document.getElementById('video_grid')
let myVideoStream;
const myVideo = document.createElement('video')
myVideo.muted = true;
var peer = new Peer(undefined, {
path: '/peerjs',
host: '/',
port: '3030'
});
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
myVideoStream = stream;
addVideoStream(myVideo, stream)
peer.on('call', call=>{
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream=>{
addVideoStream(video, userVideoStream)
})
})
socket.on('user-connected', userId =>{
connecToNewUSer(userId, stream);
alert('Somebody connect', userId)
})
}
)
peer.on('open', id =>{
socket.emit('join-room', ROOM_ID, id) ;
})
const connecToNewUSer = (userId, stream) => {
const call = peer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream =>{
addVideoStream(video, userVideoStream)
})
}
function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}
是ejs文件。 room.ejs-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZOOM</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script>
const ROOM_ID = "<%= roomId %>"
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="video_grid">
</div>
<script src="script.js"></script>
</body>
</html>
您需要 STUN
和 TURN
服务器。这两个服务器帮助 NAT 后面的 connect/find 用户。
这是一些基本的:
var peer = new Peer(undefined, {
path: '/peerjs',
host: '/',
port: '3030',key: "peerjs",
config: {
"iceServers" : [
{urls: "stun:<yourstunserver.addres>:5349"},
{
urls: "turn:<yourturnserver.address>:5349",
username: "<turn username>",
credential: "<turn password>",
}
]
}
});
您可以使用 coturn
设置您自己的 STUN/TURN
服务器,安装免费且简单。
我相信 google 提供免费 STUN
服务器,但我发现没有人提供免费 TURN
服务器。