React - getDisplayMedia()로 화면공유하기

1. 문제상황

google-meet을 클론하던 중 화면 공유에서 막힘

 

2. getDisplayMedia()로 해결!

import React,{useRef} from "react"

const Stream = () => {
const video_ref = useRef();

  //화면공유
  const onClickScreenBtn = async () => {
    let captureStream;
    try {
      captureStream = await navigator.mediaDevices.getDisplayMedia();
    } catch (err) {
      console.log(err);
    }
    return captureStream;
  };
  return (
    <div>
      <video controls ref={video_ref}></video>
      <button onClick={onClickScreenBtn}>screen</button>
    </div>
  );
};

export default Stream;

결과

버튼을 눌렀을 때 화면공유 팝업 등장!

 

 

출처 : https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

MediaDevices.getDisplayMedia() - Web APIs | MDN