类型错误：无法设置未定义的属性（设置“srcObject”）

Question

我们目前正在开发一个视频通话网络系统，问题是用户看不到自己，但是当他们打电话时，他们可以看到自己在打电话给谁。但他们看不到他自己的视频。

附加问题：是否有可能创建一个永久 ID，例如 Google Meet 代码，即使在刷新页面后也可以使用？

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 socket = io('https://socketproject.bjmpbaliwag.xyz');
const socket = io('https://bjmp-socket-server.herokuapp.com');

const ContextProvider = ({ children }) => {
    const [stream, setStream] = useState(null);
    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();
    const userVideo = useRef();
    const connectionRef = useRef();

    useEffect(() => {
        const getUserMedia = async () => {
            try {
                const currentStream = await navigator.mediaDevices.getUserMedia({video:true, audio:true})
                setStream(currentStream)
                myVideo.current.srcObject = currentStream
            } catch (error) {
                console.log(error)
            }
        }
        getUserMedia();
        // navigator.mediaDevices.getUserMedia({video:true, audio:true})
        // .then((currentStream) => {
        //     setStream(currentStream);

        //     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 };

Answer 1

如果您发现此类错误， 所以你可以使用

    if (myVideo.current) 
    {
        myVideo.current.srcObject = currentStream;
    }

代替 userVideo.current.srcObject = currentStream; 该函数在 useEffect 字段中调用。

Answer 2

请更换这个...

userVideo.current.srcObject = currentStream;

到这个

userVideo.current.srcObject = currentStream.streams[0];

我认为它应该有效...

Answer 3

删除 useState 为我解决了这个问题。