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

Question

I want to create a video chat app.我想创建一个视频聊天应用程序。 But My app is not showing others participate video.但我的应用程序没有显示其他人参与的视频。 Please help.请帮忙。 When others participate joined.当其他人参与时加入。 It doesn't show his video on my window.它没有在我的 window 上显示他的视频。 Here is my code.这是我的代码。 Thanks in advance.提前致谢。

Here is the code for the server.这是服务器的代码。 Server.js -服务器.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);

It is the main script.它是主脚本。 Script.js- 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)
  }

It is the ejs file.它是 ejs 文件。 room.ejs -房间.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>

Answer 1

You need STUN and TURN server.你需要STUN和TURN服务器。 These two servers help connect/find users behind the NAT.这两个服务器帮助连接/查找 NAT 后面的用户。

Here's some basic:这里有一些基本的：

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

You can setup your own STUN/TURN server using coturn , it's free and easy installation.您可以使用coturn设置自己的STUN/TURN服务器，它是免费且易于安装的。

I believe that google provide FREE STUN server, but I find noone provide free TURN server.我相信谷歌提供免费的STUN服务器，但我发现没有人提供免费的TURN服务器。

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

问题描述

1 个解决方案

解决方案1
0 2020-12-03 10:14:11

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

问题描述

1 个解决方案

解决方案1 0 2020-12-03 10:14:11

解决方案1
0 2020-12-03 10:14:11