PeerJS：Peer.call 在部署时不起作用

Question

我正在使用 React 和 NodeJS 构建一个视频聊天应用程序。 在本地运行应用程序时，一切正常，但在部署应用程序时，我收到此错误：“Uncaught TypeError：无法访问属性“on”，n.call（...）在peerHelpers.js上未定义 line: 25 “在恢复呼叫的用户上（我仅在第一次尝试连接时收到此错误）。 并且：“Firefox 无法与位于 wss://omerisra6-video-chat.onrender.com:10000/peerjs/peerjs?key=peerjs&id=qzaaYXW2ISuIgjUiAAAZ&token=5e4kimoxoc 的服务器建立连接。”每次我尝试向聊天中添加新成员时，都会在双方上进行。

应用程序网址：https://omerisra6-video-chat.onrender.com

//useOnPeerEvents.js

import Peer from 'peerjs';
import { useEffect, useRef, useState } from 'react';
import { useAppSettingsContext } from '../context/appSettingsContext';
import { useSocket } from '../context/socketContext';
import { removeStream, connectToNewUser, answerCall } from '../utils/peerHelpers'; 
import useStreamTrackProps from './useStreamTrackProps';

export default function useOnPeerEvents( ) {

    const socket                  = useSocket()
    const streamRef               = useRef( null );
    const { room }                = useAppSettingsContext()
    const roomId                  = room[ 'id' ]
    const [ streams, setStreams ] = useState( [] )
    const currentId               = socket.id
    
    useStreamTrackProps( streamRef )
    
    useEffect( () => {

        const host = process.env.REACT_APP_SERVER_HOST || window.location.hostname
        const port = process.env.REACT_APP_SERVER_PORT || window.location.port
        const peer = new Peer( socket.id , { path: '/peerjs', host , port } );

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

            streamRef.current = stream

            setStreams( streams => [ ...streams, { stream: streamRef.current, id: currentId } ] )

            peer.on( 'call', ( call ) => { answerCall( call, streamRef, setStreams ) } )

            socket.on( 'stream-ready', ( id ) => {  connectToNewUser( id, streamRef.current, peer, setStreams ) })
            
            
            socket.on( 'left-room', ( peerId ) => { removeStream( peerId, setStreams ) })

            socket.emit( 'stream-ready', roomId )
        } )
        
        return () => {

            socket.off( 'left-room' )
            socket.off( 'stream-ready' )
        }
      
    }, [ currentId, roomId, socket ])

    return{ streams }  
}

//peerHelpers.js

const addStream = ( newStream, id, setStreams ) => {

    setStreams( streams => { 

        if ( ! streamExists( streams , newStream ) ) {

            return [ ...streams, { stream: newStream, id } ]    
        }
        
        return streams
    })

}

//Removes stream 
const removeStream = ( id, setStreams ) =>  {

    setStreams( ( streams ) => streams.filter( stream => stream[ 'id' ] !== id )  );

}

//Call new user and add his stream
const connectToNewUser = ( id, stream, peer, setStreams ) => {

    const call = peer.call( id, stream )
    call.on( 'stream', ( userVideoStream ) => {

       addStream(  userVideoStream, id, setStreams  )
        
    })
}

//Checks if the given stream exists
const streamExists = ( streams, newStream ) => {

    let exists = false
    streams.forEach( stream => {

        if( stream[ 'stream' ].id === newStream.id){
            exists = true
        }
    })

    return exists
}

const answerCall = ( call, stream, setStreams ) => {

    call.answer( stream.current );
    call.on('stream', ( userVideoStream ) => {
        
        addStream( userVideoStream, call[ 'peer' ], setStreams )
    });
}

export {
    connectToNewUser,
    addStream,
    streamExists,
    removeStream,
    answerCall
}

//index.js

require('dotenv').config();

const express               = require( 'express' )
const app                   = express()
const io                    = require( 'socket.io' )()
const PORT                  = process.env.PORT || 80;
const CORS_ORIGIN           = process.env.CORS_ORIGIN || "*"
const { ExpressPeerServer } = require('peer');

const server = require('http').createServer( app );

const peerServer = ExpressPeerServer( server );

app.use( '/peerjs', peerServer );
app.use( express.static( './public' ) );

server.listen( PORT , () => {
    console.log( 'Server listening to port ' + PORT )
});

const { socketConnection,
        socketJoinRoom, 
        socketCreateRoom,
        socketLeaveRoom, 
        socketStreamReady
} = require( './socket-events.js' )

io.listen( server, {
    cors: {
        origin: CORS_ORIGIN,
        methods: [ "GET", "POST" ],
        transports: [ 'websocket', 'polling' ],
        credentials: true
    },
    allowEIO3: true
});

io.on( 'connection', ( socket ) => {

    socketConnection( socket.id )

    socket.on( 'join-room', ( data ) => {

        socketJoinRoom( data, socket )
    })

    socket.on( 'create-room', ( data ) => {

        socketCreateRoom( data, socket )
    })

    socket.on( 'leave-room', () => {

        socketLeaveRoom( socket )
    })

    socket.on( 'disconnect', () => {

        socketLeaveRoom( socket )
    })  

    socket.on( 'stream-ready', ( roomId ) => {

        socketStreamReady( socket,  roomId )
    })

})

exports.io = io

我尝试向“connectToNewUser”函数添加超时，但得到了相同的结果。

Answer 1

我的应用程序也面临同样的问题。你有解决办法吗？