Skip to main content
Version: 5.3

Group video call

This page provides a code example for implementing a group video call.

Prerequisites​

Before you begin, you must do the following:

Implementing audio and video elements​​

Prepare an audio element to play group audio and a video element to play video in a group video call.

<html>
    <div>
        <video id="my-video" muted autoplay playsinline></video>
        <audio id="room-audio" autoplay></audio>
    </div>
</html>

<script>
    const myVideoElement = document.getElementById("my-video");
    const roomAudioElement = document.getElementById("room-audio");
</script>

Preview the local user's video (Optional)​

WebPlanetKit provides MediaStreamManager which allows you to easily create and manage MediaStream. Using MediaStreamManager, you can provide a video preview feature that allows the local user to preview their own video independent of the call session.

Let's look at example code for video preview using MediaStreamManager. First, prepare a video element that will play the video preview.

<html>
    <div>
        <video id="preview-video" muted autoplay playsinline></video>
    </div>
</html>

Play the video in the 'preview-video' video element using MediaStreamManager.

// Init MediaStreamManager
import { MediaStreamManager } from "@line/planetKit";

const mediaStreamManager = new MediaStreamManager();
const previewVideoElement = document.getElementById('preview-video');

// Create media stream with param
const mediaStreamParam = {
  videoElement: previewVideoElement
};
const mediaStream = await mediaStreamManager.createMediaStream(mediaStreamParam);

If you add the MediaStreamManager used in the video preview function to the ConferenceParams of joinConference(), the MediaStream created for the video preview can also be used in the call.

If you do not use the created MediaStreamManager in a call, use releaseMediaStream() of MediaStreamManager to clean it up.

Join a group call​

Create a ConferenceParams object for creating and setting up the group call. This example uses the MediaStreamManager we created earlier in the video preview function. If you are not using a MediaStream created with MediaStreamManager, omit mediaStreamManager.

const onEvtConnected = () => {
    // Triggered when conference join is completed
};

const onEvtDisconnected = (disconnectedParam) => {
    // Triggered when the local user leaves the conference
};

const onEvtPeerListUpdated = (peerListUpdatedParam) => {
    // Triggered when one or more peers join or leave
};

const onEvtPeersVideoUpdated = (peersVideoUpdatedParam) => {
    // Triggered when the video status of one or more peers are changed
};

const conferenceParams = {
    myId: 'MY_ID',
    myServiceId: 'MY_SERVICE_ID',
    roomId: 'ROOM_ID',
    roomServiceId: 'ROOM_SERVICE_ID',
    accessToken: 'ACCESS_TOKEN',
    mediaType: 'video',
    mediaHtmlElement: {
        myVideo: myVideoElement
        roomAudio: roomAudioElement
    },
    delegate: {
        // For each of the following, add your own implementation or assign an event handler that matches the signature
        evtConnected: onEvtConnected,
        evtDisconnected: onEvtDisconnected,
        evtPeerListUpdated: onEvtPeerListUpdated,
        evtPeersVideoUpdated: onEvtPeersVideoUpdated
    },
    mediaStreamManager: mediaStreamManager // Optional
};

Call joinConference() with the ConferenceParams object. If the call to joinConference() fails, you can determine the cause of failure in the following two cases.

  • If the call joining attempt fails
    • You can determine the cause of failure by checking START_FAIL_REASON in JoinConferenceError returned by Promise.reject().
  • If the call fails after joining
    • After the call is connected, you can determine the cause of the failure through the evtDisconnected event of ConferenceParams.delegate. For more information about the reason for the call disconnection, see Disconnect reason.
planetKit.joinConference(conferenceParams)
    .then(() => {
        // Successfully joined a conference
    })
    .catch((joinConferenceError) => {
        // Failed to join a conference
        // joinConferenceError.reason: START_FAIL_REASON
        // joinConferenceError.message: A descriptive message about the failure.
    });

Check whether a peer joins or leaves the group call​

You can check when the peer joins or leaves the group call through the evtPeerListUpdated event of ConferenceParams.delegate.

// Example function called in the evtPeerListUpdated callback.
const onEvtPeerListUpdated = (peerListUpdatedParam) => {
    // Triggered when one or more peers join or leave
    const { addedPeers, removedPeers, totalPeersCount } = peerListUpdatedParam;

    // Process added peers
    addedPeers.forEach(peer => {
        console.log(`${peer.userId} is added`);
    });

    // Process removed peers
    removedPeers.forEach(peer => {
        console.log(`${peer.userId} is removed`);
    });
};

Receive and render a peer's video​

To receive and render video from a peer, call requestPeerVideo() with the peer's user ID, the resolution you want to request, and the video element on which to render the video.

<html>
    <div>
        <video id="peer-video" muted autoplay playsinline></video>
    </div>
</html>
// Example params to request peer video
const peerVideoElement = document.getElementById('peer-video');
const requestVideoParams = {
    userId: 'userId',
    resolution: 'vga',
    videoViewElement: peerVideoElement
};

// Request the video of peer
planetKit.requestPeerVideo(requestVideoParams)
    .then(() => {
        // Successfully requested peer's video
    })
    .catch((error) => {
        // Failed to request peer's video
    });

Change the view for rendering the peer's video​

To change the video element for rendering the peer's video, call changePeerView() 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 used for rendering and remove the video that was being rendered.

const newPeerVideoElement = document.getElementById('new-peer-video');
const cleanOldElement = true;

planetKit.changePeerView(userId, newPeerVideoElement, cleanOldElement)
    .then(() => {
        // Successfully changed peer's view
    })
    .catch((error) => {
        // Failed to change peer's view
    });

Stop receiving video from the peer​

To stop receiving the peer's video, call removePeerVideo() with the peer user ID as an argument.

planetKit.removePeerVideo(userId)
    .then(() => {
        // Successfully removed peer's video
    })
    .catch((error) => {
        // Failed to remove peer's video
    });

Leave a group call​

To leave a group call, call leaveConference().

planetKit.leaveConference();