Блог

Главная - Вопросы по программированию - Я не могу вывести поток(видео) клиентов, подключенных к комнате

Я не могу вывести поток(видео) клиентов, подключенных к комнате

#node.js #sockets #peerjs

Вопрос:

Я создаю приложение для видеочата с помощью сокета.io и peerjs, но я застрял в этой проблеме, из-за которой я не могу подключить поток(видео) клиента к комнате. Я могу видеть только свой видеопоток. Я в основном сослался на видео умного программиста на YouTube(Zoom-клон). Так что любой, кто прошел через проблему или знает решение, ответьте, пожалуйста.

 > server.js

var express = require('express');
var app = express();
const httpServer = require("http").Server(app);
var cors = require('cors')
const io = require("socket.io")(httpServer);
const { ExpressPeerServer } = require('peer');
const { v4: uuidV4 } = require('uuid')
const peerServer = ExpressPeerServer(httpServer, {
  debug: true,

});

app.use(cors({
  origin:'http://localhost:3000',
  methods:["GET","POST"]
}))


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).emit('user-connected',userId);

  })
})

httpServer.listen(process.env.PORT || 3000);


> script.js

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
  path: '/peerjs',
  host: '/',
  port: '443'
})
let myVideoStream;

const myVideo = document.createElement('video')
myVideo.muted = true;


navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
}).then(stream => {
  myVideoStream = stream;
  addVideoStream(myVideo, stream)

  myPeer.on('call', call => {
    
    call.answer(stream)
    // console.log(stream)
    const video = document.createElement('video')
    
    call.on('stream', userVideoStream => {
      addVideoStream(video, userVideoStream)
    })
  })

  socket.on('user-connected', userId => {
    connectToNewUser(userId, stream)
  })
 
 
})

myPeer.on('open', id => {
  socket.emit('join-room', ROOM_ID, id)
})

function connectToNewUser(userId, stream) {
  const call = myPeer.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)
  console.log(videoGrid)
}

  

> 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>
      const ROOM_ID = "<%= roomId %>"
   </script>
 
  <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
 
  <script src="/socket.io/socket.io.js" ></script>
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/c939d0e917.js"></script>
   
   <style>
      #video-grid{
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
      }
      video{
         height: 300px;
         width: 400px;
         object-fit: cover;
         padding: 8px;
      }
   </style>
</head>
<body>
   
   <div id="video-grid">
      
   </div>
  
   <script src="script.js" ></script>
   
</body>
</html>
Метки: ,