Question

你好，我是 peerjs 的新手。目前我正在尝试编写视频通话应用程序。我面临着一个问题。它只显示我的视频。它没有显示其他用户的视频和音频。请帮助我被卡住了。

控制台（前端）上的错误是

websocket.js:87 WebSocket 连接到“ws://localhost:3000/socket.io/?EIO=4&transport=websocket&sid=uaFPNhLHfKuVgldiAAAA”失败：帧头无效

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

server.listen(3000, () => {
  console.log('running...');
});

room.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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>

    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      #video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 250px);
        grid-template-rows: 160px;
      }

      video {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div id="video-grid"></div>
    <script src="script.js"></script>
  </body>
</html>

script.js

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

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

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

    myPeer.on('call', (call) => {
      call.answer(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);
  });
  call.on('close', () => {
    video.remove();
  });

  // peers[userId] = call
}

function addVideoStream(video, stream) {
  video.srcObject = stream;
  video.addEventListener('loadedmetadata', () => {
    video.play();
  });
  videoGrid.append(video);
}

无法连接到其他人的视频和音频

0 个答案: