화면 공유 API 만들어보기

https://dev.to/ruppysuppy/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-38bc?utm_source=oneoneone

위 사이트에서 흥미로웠던

Screen Capture API를 직접 사용해보았다.

위는 바닐라로 작성하였기때문에 수정하였는데,

import { useRef } from "react";

export default function Home() {
  const previewRef = useRef<HTMLVideoElement>(null);

  async function startRecording() {
    const previewElem = previewRef.current;
    if (!previewElem) return;

    previewElem.srcObject = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
  }

  return (
    <>
      <video ref={previewRef} autoPlay={true}>
        Your browser doesn't support HTML5.
      </video>
      <button onClick={startRecording}>Start</button>
    </>
  );
}

previewElem 대신에 useRef를 사용하여 previewRef.current로 div값을 가져왔으며,
button onClick 속성을 사용하여 이벤트를 처리했다.

start를 누르면 zoom이나 google Meet처럼 화면 공유가 작동한다.
스크린샷인줄 알았는데 화면공유가 되어서 아쉬웠다
그래도 화면 공유을 구현해본 것이 재밌었다.