使用 WebRTC 創建視頻聊天應用程序時出現問題

Question

我想創建一個視頻聊天應用程序。 但我的應用程序沒有顯示其他人參與的視頻。 請幫忙。 當其他人參與時加入。 它沒有在我的 window 上顯示他的視頻。 這是我的代碼。 提前致謝。

這是服務器的代碼。 服務器.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 文件。 房間.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

你需要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服務器。

使用 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