グループ通話で画面共有
グループ通話（カンファレンス）で画面を共有するサンプルコードです。
ネイティブ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
});