[TIL] WebRTC 화면 공유 구현!

🍎유저 화면 받기

WebRTC에 화면 공유 기능을 추가하고 싶어서 튜토리얼 코드를 찾아보고 있다. 기본적으로는 stream을 받아올 때, navigator.mediaDevices.getUserMedia를 통해서 받아올 수 있었던 것처럼 navigator.mediaDevices.getDisplayMedia를 통해서 화면 stream을 받을 수 있다.

🍏화면 전환

화면 전환은 replaceTrack() 메소드를 이용해서 할 수 있다. 미디어의 끝에 도달할 때 이벤트를 발생시키는 onended 이벤트 핸들러를 통해 화면 공유가 중단됐을 때 원래 stream으로 전환시켜주는 코드도 추가해야 한다.

🍑내가 작성한 코드

const shareScreen = () => {
    navigator.mediaDevices
      .getDisplayMedia({
        video: { cursor: 'always' },
        audio: { echoCancellation: true, noiseSuppression: true },
      })
      .then((stream) => {
        myVideo.current.srcObject = stream; // 내 비디오 공유 화면으로 변경
        const videoTrack = stream.getVideoTracks()[0];
        connectionRef.current
          .getSenders()
          .find((sender) => sender.track.kind === videoTrack.kind)
          .replaceTrack(videoTrack);
        videoTrack.onended = function () {
          const screenTrack = userStream.current.getVideoTracks()[0];
          connectionRef.current
            .getSenders()
            .find((sender) => sender.track.kind === screenTrack.kind)
            .replaceTrack(screenTrack);
          stream.getTracks().forEach((track) => track.stop());
          myVideo.current.srcObject = userStream.current; // 내 비디오로 변경
        };
      });
  };