Javascript 使用WebRTC创建视频聊天应用程序时出现问题_Javascript_Node.js_Webrtc_Videochat_Peerjs

Javascript 使用WebRTC创建视频聊天应用程序时出现问题

javascript node.js webrtc

Javascript 使用WebRTC创建视频聊天应用程序时出现问题,javascript,node.js,webrtc,videochat,peerjs,Javascript,Node.js,Webrtc,Videochat,Peerjs,我想创建一个视频聊天应用程序。但我的应用程序没有显示其他人参与的视频。请帮忙。当其他人加入时。我的窗口上没有显示他的视频。这是我的密码。提前谢谢这是服务器的代码。 Server.js- const express = require('express'); const app = express(); const server = require('http').Server(app); const io = require('socket.io')(

我想创建一个视频聊天应用程序。但我的应用程序没有显示其他人参与的视频。请帮忙。当其他人加入时。我的窗口上没有显示他的视频。这是我的密码。提前谢谢

这是服务器的代码。 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>


快速移动
const ROOM_ID=“”

您需要

STUN

和

转动

服务器。这两个服务器帮助连接/查找NAT后面的用户

以下是一些基本的：

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>",
            }
        ]
    }
});

var peer=new peer（未定义{
路径：'/peerjs'，
主机：“/”，
端口：“3030”，键：“peerjs”，
配置：{
“ICEServer”：[
{url:“stun:：5349”}，
{ 
URL:“转向：：5349”，
用户名：“”，
凭据：“”，
}
]
}
});

您可以使用

coturn

设置自己的

STUN/TURN

服务器，这是一种免费且易于安装的方式

我相信谷歌提供免费的

STUN

服务器，但我发现没有人提供免费的

TURN

服务器。

你需要

STUN

和

TURN