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()
let mediaStream = null

async function captureScreen(){
 
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',mediaStream)

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

<서버코드>

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을 서버에 data로 보내서 다시 다른유저들에게 뿌려주면 되겠지
라고 생각을 해서 state에 mediaStream을 담았지만 값이 담기지가 않았습니다.
어떻게 하면 좋을까요?
좀 더 깔끔한 코드의 모습은 제가 스택오버플로우에 올린걸 봐주시면 감사하겠습니다. 
https://stackoverflow.com/questions/75532946/socket-io-sharing-screen-with-nodejs-react

[codingapple]

mediaStream이 영상같은거아닌가요
서버랑은 문자만 주고받을 수 있어서 영상을 문자로 변환하거나 webRTC같은걸 쓰거나 해야할듯요

[강현우]

화면공유라는게 제 실시간 pc화면을 말하는건데 이것도 문자로 변환이 되나요? 된다면 채팅 기능처럼 똑같이 하면 되는건가요?

[codingapple]

영상도 binary 형식으로 바꾸면 문자처럼 주고받을 수 있습니다 socket io로 비디오 전송하는법 한번 검색해봅시다

[글쓴이]

글