TypeError：“函数”不是函数

Question

目前正在尝试学习 React，我正在制作一个视频通话网络应用程序。 Web 应用程序的全部目的是简单地与另一个人一起进入会话并共享您的视频和音频。但是我遇到了以下问题：

TypeError: sendStream 不是函数

显然函数 sendStream 不是一个函数，该函数被分配给一个按钮，它应该工作的方式是每次我们点击“分享我的视频”时，其他人的视频和音频也在同一会话中应该分享。

他们在这里：

发送流

const sendStream = async(stream) => {
        const tracks = stream.getTracks();
        for(const track of tracks){
            peer.addTrack(track,stream);
        }
    };

在哪里使用

return(
        <div className='session-page-container'>
            <h1>Hi mom, Im on TV :D</h1>
            <h4>You are now online with {remoteUserID}</h4>
            <button onClick={(e) => sendStream(myStream)}>Share my video</button>
            <ReactPlayer url={myStream} playing muted/>
            <ReactPlayer url={remoteStream} playing/>
        </div>
    )

整个组件

** 文件 Peer.jsx（创建函数 sendStream 的地方**

import React, { useMemo, useEffect, useState, useCallback } from "react";

const peerContext = React.createContext(null);

export const usePeer = () => React.createContext(null);

    export const PeerProvider = (props) => {
            const [remoteStream, setRemoteStream] = useState(null);
            const peer = useMemo(() => 
            new RTCPeerConnection({
                iceServers: [
                    {
                        urls: [
                            "stun:stun.l.google.com:19302",
                            "stun:global.stun.twilio.com:3478",
                        ],
                    },
                ],
            }),
        []
    );

    const createOffer = async() => {
        const offer = await peer.createOffer();
        await peer.setLocalDescription(offer);
        return offer;
    };      

    const createAnswer = async (offer) => {
        await peer.setRemoteDescription(offer);
        const answer = await peer.createAnswer();
        await peer.setLocalDescription(answer);
        return answer;
    };

    const setRemoteAns = async(ans) =>{
        await peer.setRemoteDescription(ans);
    };

    const sendStream = async(stream) => {
        const tracks = stream.getTracks();
        for(const track of tracks){
            peer.addTrack(track,stream);
        }
    };

    const handleTrackEvent = useCallback((ev) =>{
        const streams = ev.streams;
        setRemoteStream(streams[0]);
    }, []);


    useEffect(() => {
        if (!peer) return
        peer.addEventListener("track",handleTrackEvent); 
        return () =>{
           peer.removeEventListener("track",handleTrackEvent)
        }
    },[handleTrackEvent, peer]);

    return(
    <peerContext.Provider value={{ peer, createOffer, createAnswer, setRemoteAns, sendStream,remoteStream}}>{props.children}</peerContext.Provider>
    );
};

文件Session.jsx使用的地方

import React, {useEffect, useCallback, useState} from 'react';
import  ReactPlayer from "react-player";
import { useSocket} from "../providers/Socket";
import { usePeer } from "../providers/Peer";


const SessionPage = () => {
    const { socket } = useSocket();
    const { peer, createOffer, createAnswer,setRemoteAns,sendStream,remoteStream } = usePeer();

    const [myStream,setMyStream] = useState(null);
    const [remoteUserID, setRemoteUserID] = useState();

    const handleNewUserJoined = useCallback(
        async(data) =>{
        const {userID} = data
        console.log("New user joined the session",userID);
        const offer =  await createOffer();
        socket.emit('call-user',{ userID, offer });
        setRemoteUserID(userID);
        },
        [createOffer,socket]
    );

    const handleIncomingCall = useCallback( async(data) => {
        const {from, offer} = data;
        console.log("Incoming Call from", from, offer);
        const ans = await createAnswer(offer);
        socket.emit("call-accepted",{userID: from, ans});
        setRemoteUserID(from);
    }, 
    [createAnswer, socket] );


    const handleCallAccepted = useCallback(async(data) => {
        const {ans} = data;
        console.log("Call Got Accepted",ans);
        await setRemoteAns(ans);

    }, [setRemoteAns]);

    const getUserMediaStream = useCallback(async() => {
        const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
        setMyStream(stream);
    }, []);

    const handleNegotiation = useCallback(() => {
        const localOffer = peer.localDescription;
        socket.emit("call-user",{userID: remoteUserID, offe: localOffer });
    }, []);

    useEffect(() => {
        socket.on("user-joined",handleNewUserJoined);
        socket.on("incomming-call",handleIncomingCall);
        socket.on("call-accepted",handleCallAccepted);


        //return () =>{
           // socket.off("user-joined",handleNewUserJoined);
            //socket.off("incomming-call", handleIncomingCall);
            //socket.off("call-accepted",handleCallAccepted);
       //};
    }, [handleCallAccepted,handleIncomingCall, handleNewUserJoined, socket]);

    /*useEffect(() => {
        peer.addEventListener("negationneeded",handleNegotiation);
        return () =>{
            peer.removeEventListener("negotionneeded",handleNegotiation);
        };
    },[]);*/

    useEffect(() => {
        getUserMediaStream();
    },[]);


    return(
        <div className='session-page-container'>
            <h1>Hi mom, Im on TV :D</h1>
            <h4>You are now online with {remoteUserID}</h4>
            <button onClick={(e) => sendStream(myStream)}>Share my video</button>
            <ReactPlayer url={myStream} playing muted/>
            <ReactPlayer url={remoteStream} playing/>
        </div>
    )
}

export default SessionPage

任何人都可以帮助我并确保它按应有的方式工作吗？

Answer 1

你在这里创建了两个不同的上下文：

const peerContext = React.createContext(null);

export const usePeer = () => React.createContext(null);

应该是：

const peerContext = React.createContext(null);

export const usePeer = () => useContext(peerContext);