无法在 WebRTC 视频聊天应用程序上呈现 UserVideo

Question

我正在开发 WebRTC 视频聊天应用程序，这是我的代码

这是 SocketContent.js 的代码

import React, {createContext, useState, useRef, useEffect} from 'react';
import {io} from 'socket.io-client';
import Peer from 'simple-peer';

const SocketContext =createContext();

const socket = io('http://localhost:5000');

const ContextProvider = ({children}) => {

    const[stream, setStream] = useState();
    const [me , setMe] = useState('');
    const [call, setCall] = useState({});
    const [callAccepted, setCallAccepted] =useState(false);
    const [callEnded, setCallEnded] = useState(false);
    const [name, setName] = useState('')

    const myVideo =useRef();[enter image description here](https://i.stack.imgur.com/5Iepi.jpg)
    const userVideo =useRef();
    const connectionRef =useRef();

    useEffect(()=>{
            navigator.mediaDevices.getUserMedia({video: true, audio: true})
                .then((currentStream) => {
                    setStream(currentStream);
                
                    if(myVideo.current){
                        myVideo.current.srcObject = currentStream;
                    }

                   
                });
                socket.on('me' , (id)=> setMe(id));

                socket.on('calluser', ({from, name: callerName, signal})=>{
                    setCall({isReceivedCall: true, from, name: callerName, signal})
                });
    }, []);



    const answerCall = () => {
        setCallAccepted(true)

        const peer = new Peer({initiator:false, trickle:false, stream})

        peer.on('signal', (data)=>{
            socket.emit('answerCall', { signal: data, to: call.from });
        });
        peer.on('stream', (currentStream) => {
            userVideo.current.srcObject = currentStream;
        });

        peer.signal(call.signal);

        connectionRef.current = peer;
    }

    const callUser = (id) => {
        const peer = new Peer({initiator:true, trickle:false, stream})
        
        peer.on('signal', (data)=>{
            socket.emit('calluser', {userToCall: id, signalData: data, from:me, name });
        });
        peer.on('stream', (currentStream) => {
            userVideo.current.srcObject = currentStream;
        });

        socket.on('callaccepted', (signal) =>{
            setCallAccepted(true);

            peer.signal(signal);
        });

        connectionRef.current = peer;
    }

    const leaveCall = () => {
        setCallEnded(true);

        connectionRef.current.destroy();

        window.location.reload();
    }
    return (
        <SocketContext.Provider value = {{
            call,
            callAccepted,
            myVideo,
            userVideo,
            stream,
            name,
            setName,
            callEnded,
            me,
            callUser,
            leaveCall,
            answerCall,

        }}>
            {children}
        </SocketContext.Provider>
    )
}

export {ContextProvider, SocketContext};

但是 UserVideo 未渲染。

Answer 1

嘿，你找到解决方案了吗，我面临着完全相同的问题