socket.io 与 nodejs 共享屏幕，react

Question

我想使用 socket.io 分享我的屏幕 我已完成聊天，但无法完成屏幕共享。 这是我的前端代码

import {Nav, Navbar, Container,Row,Col} from 'react-bootstrap';
import { useParams,useNavigate } from "react-router-dom";
import {Button} from 'react-bootstrap';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { io } from "socket.io-client";

const socket = io()

function Lectures(){
    let [msg,setMsg] = useState()
    let [datas,setData] = useState([])
    let {id} = useParams()
    let [media,setMedia] = useState(null)
    
    async function captureScreen(){
        let mediaStream = null
        try{
            mediaStream = await navigator.mediaDevices.getDisplayMedia({
                video: {
                    cursor: "always",
                    displaySurface : 'monitor',
                    logicalSurface : false
                },
                audio: false
            })
            //document.getElementById('local-video').srcObject = mediaStream
            console.log(mediaStream)
            setMedia(mediaStream)
        } catch(ex){
            console.log("error",ex)
        }
    }

    async function captureAudio(){
        let audioSteam = null
        try{
            audioSteam = await navigator.mediaDevices.getUserMedia({
                audio: true,
                video: false
            })
        } catch(ex){
            console.log('error',ex)
        }
    }
    
    useEffect(()=>{
        socket.emit('joinroom',id)
    },[])

    useEffect(()=>{
        socket.on('broadcast',function(data){
            setData([...datas,data])
        })
    })
    
    return (
        <>
        <div>채팅방</div>
        <input onChange={(e)=>{
            setMsg(e.target.value)
        }}></input>
        
        <button onClick={()=>{
            socket.emit('user-send',msg) 
        }}>서버에 메시지 보내기</button>

        <button onClick={()=>{
            captureScreen()
            captureAudio()
            socket.emit('shareScreen',media)

            socket.on('sharing',function(data){
                console.log(data)
                document.getElementById('local-video').srcObject = data
                console.log('공유받았음')
            })
        }}>화면공유하기</button>

        <video id='local-video' muted autoPlay style={{width:'300px', height:'300px'}}></video>

        <div className='container'>
            {
                datas.map((a,i)=>{
                    return(
                        <Chat datas={datas[i]}/>
                    )
                })
            }
        </div>
        </>
    )
}

function Chat({datas}){
    return (
        <div>
            <h3>{datas}</h3>
        </div>
    )
}



export default Lectures

Ant 这是我服务器代码中套接字的一部分

io.on('connection',function(socket){
        let prev_room = ''
        let lecture_room = ''

        socket.on('joinroom', function(data){
            lecture_room = 'room'+data // 지금 방
            console.log('방번호:'+lecture_room)

            if(prev_room != lecture_room){
                console.log('1. 이전 방번호:'+ prev_room)
                socket.leave(prev_room)
                socket.join(lecture_room) //지금 방입장
            }
           /* else{
                console.log('2. 이전 방번호:'+ prev_room)
                socket.join(lecture_room) //지금 방입장
            } */
            prev_room = lecture_room
        })
        
        socket.on('user-send', function(data){
            console.log(data) // 유저->서버
            io.to(lecture_room).emit('broadcast',data) // 서버-> 다 뿌리기
        })

        socket.on('shareScreen', function(media){
            console.log(media)
            io.to(lecture_room).emit('sharing',media)
        })
    })

我想到的是像聊天功能一样把mediaStream发送到服务器，然后再发回给其他用户。 首先，我尝试将 mediaStream 放入状态。例如（让 [media,setMedia] = useState([]) 但是 console.log 说 []。我认为状态无法保存 mediaStream。 我不知道该怎么做，因为我还没有使用 socket.io 进行开发。