[javascript] [project] 비디오,음성 채팅 getUserMedia

이번 프로젝트에선 비디오는 아직 미정이지만
실시간 채팅과 음성채팅 기능을 구현하기로 하였습니다.

구현이 완료 되지 않았지만 작성한 코드먼저 확인하겠습니다!

Card.jsx

//외부모듈
import styled from 'styled-components';
import React from 'react';
import { useRef, useEffect } from 'react';
let stream;
function Card() {
  const videoRef = useRef(null);
  const muteBtn = useRef(null);
  const cameraBtn = useRef(null);
  let muted = false;
  let cameraOff = false;

  function onClickCameraOffHandler() {
    stream
      .getVideoTracks()
      .forEach((track) => (track.enabled = !track.enabled));
    if (!cameraOff) {
      cameraBtn.current.innerText = 'OFF';
      cameraOff = !cameraOff;
    } else {
      cameraBtn.current.innerText = 'ON';
      cameraOff = !cameraOff;
    }
  }
  function onClickMuteHandler() {
    stream
      .getAudioTracks()
      .forEach((track) => (track.enabled = !track.enabled));
    if (!muted) {
      muteBtn.current.innerText = 'Unmute';
      muted = !muted;
    } else {
      muteBtn.current.innerText = 'Mute';
      muted = !muted;
    }
  }

  async function getCameras() {
    try {
      const devices = await navigator.mediaDevices.enumerateDevices();
    } catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {
    const getUserMedia = async () => {
      try {
        stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true,
        });
        videoRef.current.srcObject = stream;
        await getCameras();
      } catch (err) {
        console.log(err);
      }
    };
    getUserMedia();
  }, []);

  return (
    <StCard>
      Card
      <h4>키워드</h4>
      <span>OOO님</span>
      <div>
        <video
          ref={videoRef}
          id="myFace"
          autoPlay
          playsInline
          width={200}
          height={200}
        >
          비디오
        </video>
        <button ref={muteBtn} onClick={onClickMuteHandler}>
          mute
        </button>
        <button ref={cameraBtn} onClick={onClickCameraOffHandler}>
          camera OFF
        </button>
      </div>
      <button>방장일 경우 시작버튼?</button>
    </StCard>
  );
}

export default Card;

const StCard = styled.div`
  border: 1px solid green;
`;

게임방 페이지 내의 입장한 유저들의 프로필을 확인할수 있는 유저카드 컴포넌트 코드입니다

 stream = navigator.mediaDevices.getUserMedia();

를 이용하여 사용자의 마이크와 비디오 미디어를 얻어오고 인자로

{
	video: true,
	audio: true,
}

위의 객체를 전달하여 줍니다.

 const videoRef = useRef(null);

useRef 훅을 이용하여 video 요소를 불러오고

videoRef.current.srcObject = stream;

srcObject에 얻어온 미디어를 할당하여주었습니다.