220802 공통 프로젝트 개발일지

·2022년 8월 3일
0

개발일지 & 회고

목록 보기
5/72
post-thumbnail

openvidu 연결

kurento 작업에서 한 번 큰 패배를 맛보고, 결국 openvidu로 연결하는 작업으로 변경하기로 했다. 부랴부랴 tutorial을 보면서, 예제코드를 하나하나 우리의 리액트에 반영하기 시작했다.

몇번의 코드를 지우고 다시쓰고를 반복하면서 느낀건, 처음 도전하는 과제일수록 크게 욕심내지 말고, 조금씩 조금씩 과정을 나눠서 처리를 하는게 좋다는 것이다. 방을 생성하고, publisher와 subscriber를 정해주고, 응답을 console.log로 찍어가면서 해보니까 어떻게 어떻게 되긴 되더라.

이전 작업들이 원할하게 잘되면서, 기고만장해 있지 않았나 싶다. 자중하면서, 현재 반영한 openvidu 코드를 우리 프로젝트 형식에 맞게 프로세스를 구축해봐야겠다.

import React, { useState, useEffect, useCallback } from 'react'
import VideoDisplay from './VideoDisplay'
import VideoControlBtns from './VideoControlBtns'
import Chatting from './Chatting'
import QuestionSection from './QuestionSection'
import classes from './Meeting.module.css'
import Button from '../common/Button'
import { peerUserActions } from '../../store/peerUser-slice'

import { useNavigate } from 'react-router-dom'

// import axios from 'axios'
import { useDispatch, useSelector } from 'react-redux'
import { ovActions } from '../../store/ov-slice'
import {} from 'react-icons/'

// const DUMMYUSER_1 = {
//   country: '🇰🇷',
//   nickName: '싸피조아조아',
//   hearts: 2300,
// }

// const DUMMYUSER_2 = {
//   country: '🇨🇦',
//   nickName: '만수르',
//   hearts: 200,
// }

const Meeting = () => {
  const user = useSelector(state => state.user)
  const openvidu = useSelector(state => state.openvidu)
  const peerUser = useSelector(state => state.peerUser)
  const dispatch = useDispatch()
  const room = useSelector(state => state.room)

  // // 기기 껐다 켰다
  const toggleDevice = async (audio, video) => {
    try {
      let devices = await openvidu.OV.getDevices()
      let videoDevices = devices.filter(device => device.kind === 'videoinput')

      let newPublisher = openvidu.OV.initPublisher(undefined, {
        audioSource: undefined, // The source of audio. If undefined default microphone
        videoSource: videoDevices[0].deviceId, // The source of video. If undefined default webcam
        publishAudio: audio, // Whether you want to start publishing with your audio unmuted or not
        publishVideo: video, // Whether you want to start publishing with your video enabled or not
        resolution: '640x480', // The resolution of your video
        frameRate: 30, // The frame rate of your video
        insertMode: 'APPEND', // How the video is inserted in the target element 'video-container'
        mirror: false, // Whether to mirror your local video
      })

      await openvidu.session.unpublish(openvidu.mainStreamManager)

      await openvidu.session.publish(newPublisher)

      const dataObj = {
        currentVideoDevice: videoDevices[0],
        publisher: newPublisher,
      }
      dispatch(ovActions.createPublisher(dataObj))
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    const userData = {
      nickname: user.nickname,
      heart: user.heart,
      country: user.country,
      email: user.email,
      id: user.id,
      createdRoom: room.isCreatedRoom ? true : false,
    }

    if (userData.id) {
      openvidu.publisher.session.signal({
        data: JSON.stringify(userData),
        type: 'peerUser',
      })
    }
  }, [])

  useEffect(() => {
    console.log('현재 : peerUser ', peerUser)
  }, [peerUser.nickname])

  return (
    <div className={classes.meeting_wrapper}>
      <div className={`${classes.meeting}`}>
        <div className={classes.left_display}>
          {peerUser.nickname && (
            <VideoDisplay
              size="wide"
              userData={peerUser}
              streamManager={openvidu.subscribers[0]}
            />
          )}
          <QuestionSection />
        </div>
        <div className={classes.right_display}>
          <div>
            <VideoDisplay
              size="narrow"
              userData={user}
              streamManager={openvidu.publisher}
            />
            <VideoControlBtns
              // devices={OV && OV.getDevices()}
              // onLeaveSession={leaveSession}
              onToggleDevice={toggleDevice}
            />
          </div>
          <Chatting />
        </div>
      </div>
    </div>
  )
}

export default Meeting
profile
새로운 것에 관심이 많고, 프로젝트 설계 및 최적화를 좋아합니다.

0개의 댓글