使用 WebRTC 创建视频聊天应用程序的问题答案

【问题标题】：Problem in creating A Video Chat App With WebRTC使用 WebRTC 创建视频聊天应用程序的问题
【发布时间】：2020-11-26 12:38:11
【问题描述】：

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

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

【问题讨论】：

标签： javascript node.js webrtc videochat peerjs

【解决方案1】：

您需要STUN 和TURN 服务器。这两个服务器帮助连接/查找 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>",
            }
        ]
    }
});

您可以使用coturn 设置自己的STUN/TURN 服务器，安装免费且简单。

我相信谷歌提供免费的STUN 服务器，但我发现没有人提供免费的TURN 服务器。

【讨论】：