Skip to main content
Version: 5.3

Screen share in a group call

This page provides a code example for implementing screen share in a group call (conference).

Note

Unlike native PlanetKit, WebPlanetKit does not provide an API to start receiving a peer's screen share. This is because LINE Planet Cloud automatically sends the screen share video to the WebPlanetKit client. For more information, see Presentation - screen share.

Prerequisites​

To use the screen share function of WebPlanetKit, the user must first grant screen share permission to the browser on the system.

Sender - Start sending screen share​

To start sending screen share, call startMyScreenShare(). You can set the video element where you want to render the screen share video as an argument. If not set, the screen share video will not be rendered on the sender side.

planetKit.startMyScreenShare()
    .then(() => {
        // Successfully started screen share
    })
    .catch((error) => {
        // Failed to start screen share
    });

Sender - Change the video element​

After starting screen share transmission, you can change the video element that renders the screen share video using changeMyScreenShareView(). If you pass the cleanOldElement argument, it will stop the video of the video element that was previously rendering the screen share and remove the video that was being rendered.

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

Sender - Stop sending screen share​

​To stop sending screen share, call stopMyScreenShare().

planetKit.stopMyScreenShare()
    .then(() => {
        // Successfully stopped my screen share
    })
    .catch((error) => {
        // Failed to stop my screen share
    });

Receiver - Receive screen share update events​

Receivers can listen for screen share update events via screen share related event callbacks such as evtPeerScreenShareStarted and evtPeerScreenShareStopped.

To handle event when the peer starts or ends screen share , set evtPeerScreenShareStarted and evtPeerScreenShareStopped in the delegate of ConferenceParams when starting a call .

const conferenceParams = {
    ...,
    delegate: {
        evtPeerScreenShareStarted: (userId) => {},
        evtPeerScreenShareStopped: (userId) => {}
    }
};

Receiver - Add a view to render the peer's screen share video​

To start rendering the screen share video of the peer, call addPeerScreenShareView() with the peer's user ID and the video element where you want to render the screen share video.

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

Receiver - Change the view for rendering the peer's screen share video​​

To change the video element in which the peer's screen share is rendered after receiving the screen share reception has started, use changePeerScreenShareView() with the peer's user ID and the new video element as arguments. If you pass the cleanOldElement argument, it will stop the video of the video element that was previously rendering the screen share and remove the video that was being rendered.

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

Receiver - Remove the view to stop rendering the peer's screen share video​​

To stop rendering the peer's screen share video, call removePeerScreenShareView() with the peer's user ID.

planetKit.removePeerScreenShareView(userId)
    .then(() => {
        // Successfully removed peer's screen share view
    })
    .catch((error) => {
        // Failed to remove peer's screen share view
    });