Geo Tag Meeting Recordings - JavaScript

To ensure compliance for BFSIs doing vKYC, it very important to include the co-ordinates(location) of the customer in the recordings. VideoSDK provides a very customizable solution to implement this feature. You will be using custom templates for this purpose.

We have created a ready to use template for this use case which can be found here. To integrate this template with your recordings follow the below mentiond instructions.

Host the template

1. Clone the template repository and switch to the branch template/geo-tag-watermark.

git clone https://github.com/videosdk-live/videosdk-rtc-react-prebuilt-ui.git
cd videosdk-rtc-react-prebuilt-ui
git checkout template/geo-tag-watermark

2. Install the dependencies and create a build of the project using below mentioned commands.

npm install
npm run build

3. Host the contents of the build folder on your server and check if the template is up and running.

note

If you want to create the complete template from scratch you can follow this guide.

Using the template for recording

1. To use the template that we deployed earlier, we will be using the templateUrl feature in the startRecording API. To generate the template URL, you will have to append the meetingId, and token has to be added in the query parameters. Also if you are using the template provided above you need to added a few extra paramters mentioned below. Here is the code snippet to generate the URL.

async function main() {
  let meetingId = "Your MeetingID";
  let token = "Your Token";
  const templateUrl = `https://${YOUR Template URL}/?meetingId=${meetingId}&token=${token}&name=recorder&isRecorder=true&joinWithoutUserInteraction=true`;

  console.log(templateUrl);
}

main();

2. Now that we have the template URL, we will use this URL to start the recording using the below provided API call.

async function main() {
  let meetingId = "Your MeetingID";
  let token = "Your Token";
  const templateUrl = `https://${YOUR Template URL}/?meetingId=${meetingId}&token=${token}&name=recorder&isRecorder=true&joinWithoutUserInteraction=true`;

  console.log(templateUrl);

  //Using the previouly created template URL and starting the recording using the API.
  const options = {
    method: "POST",
    headers: {
      Authorization: "$YOUR_TOKEN",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      roomId: "Your MeetingId",
      templateUrl: templateUrl,
    }),
  };
  const url = `https://api.videosdk.live/v2/recordings/start`;
  const response = await fetch(url, options);
  const data = await response.json();
  console.log(data);
}

main();

Updating the Geo Tagging Coordinates

We will be using the PubSub feature of VideoSDK to update the data of latitude and longitude. For the predefined template provided by us we are using GEO_TAG as topic name. We will be publishing the participantName, latitude and longitude of the participant for whom we want to show in the recording.

note

You will have to fetch the longitude and latitude of the participant before sending it using the pubsub.

Here is the code how you will have to publish the message:

function Watermark() {
  const sendCoordinates = () => {
    meeting.pubSub.publish(
      "GEO_TAG",
      "GEO TAG DATA",
      { persist: true },
      {
        latitude: "LATITUDE OF PARTICIPANT",
        longitude: "LONGITUDE OF PARTICIPANT",
        participantName: "NAME OF PARTICIPANT",
      }
    );
  };

  return <></>;
}

After implementing this, you should get the recording in the following format:

If you wish to change how UI looks on recording, you can change it by updating the layout in the template itself.

API Reference

The API references for all the methods utilized in this guide are provided below.

• Start Recording API
• Learn more about Custom Templates