1대1 통화에서 화면 공유
1대1 통화에서 화면 공유를 구현하는 예제 코드입니다.
필수 조건
WebPlanetKit의 화면 공유 기능을 사용하려면 먼저 사용하는 시스템에서 브라우저에 화면 공유 권한을 부여해야 합니다.
송신 측 - 화면 공유 전송 시작
화면 공유 전송을 시작하려면 startMyScreenShare()를 호출하세요. 이때 화면 공유 비디오를 렌더링할 비디오 엘리먼트를 인자로 설정할 수 있으며, 설정하지 않으면 송신 측에는 화면 공유 비디오를 렌더링하지 않습니다.
planetKit.startMyScreenShare()
.then(() => {
// Successfully started screen share
})
.catch((error) => {
// Failed to start screen share
});
송신 측 - 비디오 엘리먼트 변경
화면 공유 전송 시작 이후 changeMyScreenShareView()를 사용해 화면 공유 비디오를 렌더링하는 비디오 엘리먼트를 변경할 수 있습니다. 이때 cleanOldElement 인자를 함께 전달하면 이전에 화면 공유를 렌더링하던 비디오 엘리먼트의 비디오를 정지하고 렌더링되던 비디오를 제거합니다.
<html>
<div>
<video id="screen-share-video" muted autoplay playsInline></video>
</div>
</html>
const screenShareVideoElement = document.getElementById('screen-share-video');
const cleanOldElement = true;
planetKit.changeMyScreenShareView(screenShareVideoElement, cleanOldElement)
.then(() => {
// Successfully changed my screen share view
})
.catch((error) => {
// Failed to change my screen share view
});
송신 측 - 화면 공유 전송 종료
화면 공유 전송을 종료하려면 stopMyScreenShare()를 호출하세요.
planetKit.stopMyScreenShare()
.then(() => {
// Successfully stopped my screen share
})
.catch((error) => {
// Failed to stop my screen share
});
수신 측 - 화면 공유 업데이트 이벤트 수신
상대방이 화면 공유를 시작했거나 종료했을 때의 이벤트를 처리하기 위해서 통화 시작 시 MakeCallParams 또는 VerifyCallParams의 delegate에 evtPeerScreenShareStarted와 evtPeerScreenShareStopped를 설정하세요.
const makeCallParams = {
...,
delegate: {
evtPeerScreenShareStarted: () => {},
evtPeerScreenShareStopped: () => {},
}
};
const verifyCallParams = {
...,
delegate: {
evtPeerScreenShareStarted: () => {},
evtPeerScreenShareStopped: () => {},
}
};
수신 측 - 상대방의 화면 공유 비디오 수신 및 렌더링 뷰 추가
상대방의 화면 공유 비디오 렌더링을 시작하려면 화면 공유 비디오를 렌더링할 비디오 엘리먼트를 인자로 addPeerScreenShareView()를 호출하세요.
<html>
<div>
<video id="peer-screen-share-video" muted autoplay playsInline></video>
</div>
</html>
const peerScreenShareVideoElement = document.getElementById('peer-screen-share-video');
planetKit.addPeerScreenShareView(peerScreenShareVideoElement)
.then(() => {
// Successfully added peer's screen share view
})
.catch((error) => {
// Failed to add peer's screen share view
});
수신 측 - 상대방의 화면 공유 비디오를 렌더링하는 뷰 변경
화면 공유 수신 시작 후 상대방의 화면 공유가 렌더링되는 비디오 엘리먼트를 변경하려면 changePeerScreenShareView()를 사용하세요. 이때 cleanOldElement 인자를 함께 전달하면 이전에 화면 공유를 렌더링하던 비디오 엘리먼트의 비디오를 정지하고 렌더링되던 비디오를 제거합니다.
const newScreenShareVideoElement = document.getElementById('new-screen-share-video');
const cleanOldElement = true;
planetKit.changePeerScreenShareView(newScreenShareVideoElement, cleanOldElement)
.then(() => {
// Successfully changed peer's screen share view
})
.catch((error) => {
// Failed to change peer's screen share view
});
수신 측 - 상대방의 화면 공유 비디오 렌더링을 중지하기 위한 뷰 제거
상대방의 화면 공유 비디오 렌더링을 중지하려면 removePeerScreenShareView()를 호출하세요.
planetKit.removePeerScreenShareView()
.then(() => {
// Successfully removed peer's screen share view
})
.catch((error) => {
// Failed to remove peer's screen share view
});