CODEWITHSUNDEEP
reactjsionic-framework
Nahuel Tarricone
Nahuel Tarricone

Reputation: 35

React + Ionic Video Recording

I´m building an app with Ionic and React.

I need to use the phone´s camera to record video but I don´t have a clue how to do this. I´ve been looking around the internet a lot but I cannot find any documentation or tutorial where this is explained. Please remember it needs to be with REACT - not Angular-.

Upvotes: 2

Views: 1478

Answers (2)

Stephen Romero
Stephen Romero

Reputation: 3032

You can start with the Media Capture Plugin Here. Ionic has the Cordova or Capacitor plugin that you can work with and with the link there is more documentation for usage. Most video tutorials are created with Angular, but you can use the same approach.

Upvotes: 1

Aaron Saunders
Aaron Saunders

Reputation: 33345

Install the components, plugins

npm install cordova-plugin-media-capture
npm install @ionic-native/media-capture
npm install @ionic-native/core

Add the imports

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

When using the components in ReactJS, typescript is your friend because it shows you what properties and methods are available on the objects.

In this case what you want is MediaCapture.captureVideo which returns a promise that is the media you were looking for or the error that was generated

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

Deploying To Device Using Capacitor/CLI

ionic build
ionic cap sync ios

After changes to web code

ionic cap copy ios

After changes to native code/plugins

ionic cap sync ios

Open up the IDE

ionic cap open ios

Upvotes: 1

Related Questions