Geo Tag Meeting Recordings - Flutter
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
- 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
- Install the dependencies and create a build of the project using below mentioned commands.
npm install
npm run build
- Host the contents of the build folder on your server and check if the template is up and running.
If you want to create the complete template from scratch you can follow this guide.
Using the template for recording
- To use the template that we deployed earlier, we will be using the
templateUrl
feature in thestartRecording
API. To generate the template URL, you will have to append themeetingId
, andtoken
has to be added in the query parameters. Also if you are using the template provided above you need to added a few extra parameters 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();
- 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.
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:
ElevatedButton(
onPressed:(){
_room.pubSub.publish(
"GEO_TAG",
"GEO TAG DATA",
const PubSubPublishOptions(persist: true),
{
"latitude": "LATITUDE OF PARTICIPANT",
"longitude": "LONGITUDE OF PARTICIPANT",
"participantName": "NAME OF PARTICIPANT",
})
},
child: const Text("Send Message"),
)
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.
Got a Question? Ask us on discord