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
});