React +离子视频录制

Question

我正在使用Ionic和React构建一个应用程序。

我需要用手机的摄像头来录制视频，但我不知道该怎么做。我已经在互联网上找了很久，但我找不到任何文档或教程来解释这一点。请记住，它需要使用REACT，而不是Angular。

Answer 1

您可以从Media Capture Plugin Here开始。Ionic有你可以使用的Cordova或Capacitor插件，通过链接可以找到更多的使用文档。大多数视频教程都是使用Angular创建的，但您也可以使用相同的方法。

Answer 2

安装组件、插件

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

添加导入

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

在使用ReactJS中的组件时，typescript是您的朋友，因为它向您展示了对象上可用的属性和方法。

在本例中，您需要的是MediaCapture.captureVideo，它返回一个promise，即您正在查找的媒体或生成的错误

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

使用电容器/CLI部署到设备

ionic build
ionic cap sync ios

更改web代码后

ionic cap copy ios

更改本机代码/插件后

ionic cap sync ios

打开IDE

ionic cap open ios