Play video captured using cordova-plugin-media-capture / @ionic-native/media-capture in html tag in my app

Question

I want to display video capture using MediaCapture.videoCapture in an html tag on my app screen. I am using ionic v7. I have tried all tutorials and stack overflow answers, but nothing worked out for me.

  const captureVideo = async () => {
   try {
    const options = { limit: 1, duration: 10 }; // Adjust duration as needed
    const mediaFiles: any = await MediaCapture.captureVideo(options);

    //From a youtube tutorial but notWorked
    const dir = mediaFiles[0]?.localURL.split("/");
    dir.pop();
    const from = dir.join("/");
    const toDir = File.dataDirectory;
    const response = await File.copyFile(
      from,
      mediaFiles[0].name,
      toDir,
      mediaFiles[0].name
    );
    // const result = await File.readAsDataURL(File.dataDirectory, response.name);

    newVideoStore.url = response.fullPath;
    routeTo("select-animation");
   } catch (error) {
    console.error("Error capturing video:", error);
    router.go(-1);
   }
  };

I want to display captured video like this: