그룹 통화에서 화면 공유
그룹 통화(컨퍼런스)에서 화면을 공유하는 예제 코드입니다.
네이티브 PlanetKit과는 달리 WebPlanetKit에는 상대방의 화면 공유 수신을 시작하기 위한 별도의 API가 없습니다. LINE Planet Cloud가 자동으로 WebPlanetKit 클라이언트에 공유 화면 비디오를 전달하기 때문입니다. 상세한 내용은 프레젠테이션 - 화면 공유를 참고하세요.
필수 조건
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
});
수신 측 - 화면 공유 업데이트 이벤트 수신
수신자는 evtPeerScreenShareStarted 및 evtPeerScreenShareStopped와 같은 화면 공유 관련 이벤트 콜백을 통해 화면 공유 업데이트 이벤트를 수신할 수 있습니다.
상대방이 화면 공유를 시작했거나 종료했을 때의 이벤트를 처리하기 위해서 통화 시작 시 ConferenceParams의 delegate에 evtPeerScreenShareStarted와 evtPeerScreenShareStopped를 설정하세요.
const conferenceParams = {
...,
delegate: {
evtPeerScreenShareStarted: (userId) => {},
evtPeerScreenShareStopped: (userId) => {}
}
};
수신 측 - 상대방의 화면 공유 비디오를 렌더링할 뷰 추가
상대방의 화면 공유 비디오 렌더링을 시작하려면 상대방의 사용자 ID와 화면 공유 비디오를 렌더링할 비디오 엘리먼트를 인자로 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(userId, peerScreenShareVideoElement)
.then(() => {
// Successfully added peer's screen share view
})
.catch((error) => {
// Failed to add peer's screen share view
});
수신 측 - 상대방의 화면 공유 비디오를 렌더링하는 뷰 변경
화면 공유 수신 시작 후 상대방의 화면 공유가 렌더링되는 비디오 엘리먼트를 변경하려면 상대방의 사용자 ID와 새 비디오 엘리먼트를 인자로 changePeerScreenShareView()를 사용하세요. 이때 cleanOldElement 인자를 함께 전달하면 이전에 화면 공유를 렌더링하던 비디오 엘리먼트의 비디오를 정지하고 렌더링되던 비디오를 제거합니다.
const newPeerScreenShareVideoElement = document.getElementById('new-peer-screen-share-video');
const cleanOldElement = true;
planetKit.changePeerScreenShareView(userId, newPeerScreenShareVideoElement, cleanOldElement)
.then(() => {
// Successfully changed peer's screen share view
})
.catch((error) => {
// Failed to change peer's screen share view
});
수신 측 - 상대방의 화면 공유 비디오 렌더링을 중지하기 위한 뷰 제거
상대방의 화면 공유 비디오 렌더링을 중지하려면 상대방의 사용자 ID를 인자로 removePeerScreenShareView()를 호출하세요.
planetKit.removePeerScreenShareView(userId)
.then(() => {
// Successfully removed peer's screen share view
})
.catch((error) => {
// Failed to remove peer's screen share view
});