Ionic Native Plugins in ReactJS with Capacitor

Home.tsx

import React from "react";
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButton,
} from "@ionic/react";
import "./Home.css";
import { RouteComponentProps } from "react-router";

import {
  MediaCapture,
  MediaFile,
  CaptureError,
  CaptureImageOptions,
  CaptureVideoOptions,
} from "@ionic-native/media-capture";

const Home: React.FC<RouteComponentProps> = ({ history }) => {

  const doMediaCapture = async () => {
    let options: CaptureVideoOptions = { limit: 1, duration: 30 };
    let capture:any = await MediaCapture.captureVideo(options);
    console.log((capture[0] as MediaFile).fullPath)
  };

  return (
    <IonPage id="home-page">
      <IonHeader>
        <IonToolbar>
          <IonTitle>Video Test</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonButton onClick={() => doMediaCapture()}>VIDEO CAPATURE</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;