Я часто вижу, как разработчики Ionic Framework не понимают, как использовать плагины Cordova и плагины Ionic Native в Reactjs или Vuejs, которые все еще находятся в стадии бета-тестирования, но в этом нет ничего особенного.

Ниже приведен быстрый шаг за шагом, как интегрировать плагин video-capture-plus в приложение reactjs и развернуть его на устройстве ios с помощью Ionic Capacitor.

Мы будем использовать проект из предыдущего поста, который я написал, используя настраиваемый перехватчик реакции для загрузки файлов в firebase. В проект будет добавлен плагин видеозахвата, а затем мы изменим перехватчик firebase для загрузки большого двоичного объекта из видеоданных.



React Ionic Framework и хуки
Пожалуйста, оформляйте заказ и подпишитесь на мой видеоконтент на YouTube. Не стесняйтесь оставлять комментарии и предложения о том, что… dev.to



Я видел, как в прошлом люди рекомендовали cordova-plugin-media-capture, но качество получаемого видео ужасно

Установите компоненты, плагины

npm install cordova-plugin-video-capture-plus
npm install @ionic-native/video-capture-plus
npm install @ionic-native/core

Добавьте импорт

import {
  MediaFile,
  VideoCapturePlusOptions,
  VideoCapturePlus,
} from "@ionic-native/video-capture-plus";

При использовании компонентов VideoCapturePlus в ReactJS машинописный текст - ваш друг, потому что он показывает, какие свойства и методы доступны для объектов.

В этом случае вам нужен MediaCapture.captureVideo, который возвращает обещание, которое является носителем, который вы искали, или сгенерированной ошибкой.

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

Базовый код для домашнего компонента, содержащего кнопку. Событие щелчка запускает функцию активации камеры, и мы записываем вывод, чтобы подтвердить, что мы получили данные. Мы делаем этот первый шаг, так как нам нужно развернуть его на устройстве для записи видео.

//.. removed ionic imports for brevity
const Home: React.FC<RouteComponentProps> = ({ history }) => {
  return (
    <IonPage id="home-page">
      <IonHeader>
        <IonToolbar>
          <IonTitle>Inbox</IonTitle>
      </IonHeader>
      <IonContent>
        <IonButton onClick={() => doMediaCapture()}>
          VIDEO CAPATURE
        </IonButton>
      </IonContent>
    </IonPage>
  );
};
export default Home;

Если ваш код работает нормально и вы видите вывод в консоли, то вы готовы к следующему шагу, который заключается в развертывании приложения на вашем устройстве, чтобы вы могли фактически записывать видео.

Ниже приведены шаги по запуску приложения на iOS, шаги для Android аналогичны. Дополнительные сведения см. В документации по конденсаторам.

Развертывание на устройство с помощью конденсатора / интерфейса командной строки

ionic build
ionic cap sync ios

После внесения изменений в веб-код обычно выполняется следующая команда.

ionic cap copy ios

После изменений в собственном коде / плагинах

ionic cap sync ios

Откройте IDE

ionic cap open ios

Использование Live Reload для отладки приложения

При разработке остальной части приложения я использовал команды перезагрузки в реальном времени, которые перечислены ниже.

ionic cap run ios -l --external
ionic cap run android -l --external

Изменения в обработчике загрузки файлов Firebase

Необходимо изменить перехватчик реакции для обработки загружаемых видео. Чтобы упростить интерфейс ловушки, мы извлечем дополнительную информацию о типе mime и имени файла для видео в ловушке.

Посмотрев на тип большого двоичного объекта, можно определить, нужно ли добавлять правильное расширение к имени файла при его загрузке. мы сталкиваемся с этой проблемой, потому что в IOS тип пантомимы «quicktime» должен быть сопоставлен с расширением «.mov».

В этом примере мы предполагаем, что если это dataUrl, который мы получаем, то это изображение, поэтому мне не нужно вносить какие-либо изменения в ловушку на этом этапе, но для Blob мы должны учитывать изменение в типе mime со следующим кодом.

console.log("processing as File/Blob");
let fName = `${new Date().getTime()}`;
if (_value instanceof Blob) {
  if (_value.type.split("/")[1] === "quicktime") {
    fName = fName + ".mov";
  } else {
    fName = fName + "." + _value.type.split("/")[1];
  }
}
// setting the firebase properties for the file upload
let ref = storageRef.child("media/" + fName);
return ref.put(_value);}

Получение большого двоичного объекта из файла

Нам нужно сделать дополнительный импорт, чтобы получить информацию о текущей платформе Capacitor.getPlatform, и мы собираемся использовать файловую систему, поэтому нам также нужно импортировать File и DirectoryEntry.

import { CameraResultType, Capacitor } from "@capacitor/core";
import { File, DirectoryEntry } from "@ionic-native/file";

Я уверен, что есть лучший способ справиться с этим беспорядком, связанный с преобразованием пути к файлу, но это то, что у меня есть.

Нам нужно получить путь и имя файла из медиафайла и использовать комбинацию, чтобы преобразовать его в формат, который может быть прочитан файловой системой мобильного устройства. Мы достигаем этого, получая `DirectoryEntry с помощью плагина File

let resolvedPath: DirectoryEntry;
let path = media.fullPath.substring(0, media.fullPath.lastIndexOf("/"));
if (Capacitor.getPlatform() === "ios") {
  resolvedPath = await File.resolveDirectoryUrl("file://" + path);
} else {
  resolvedPath = await File.resolveDirectoryUrl(path);
}

Как только мы получим разрешенный путь, мы можем прочитать файл в большой двоичный объект, используя File.readAsArrayBuffer, и загрузить этот большой двоичный объект в firebase.

return File.readAsArrayBuffer(resolvedPath.nativeURL, media.name).then(
  (buffer: any) => {
    // get the buffer and make a blob to be saved
    let imgBlob = new Blob([buffer], {
      type: media.type,
    });
    setFileData(imgBlob);
  },
  (error: any) => console.log(error)
)

Хук пытается загрузить файл в firebase, когда когда-либо setFileData вызывается с dataUrl или Blob, поэтому последняя часть - это вызов функции, предоставляемой хук useFirebaseUpload, и запуск загрузки.

Вывод

Настоящая цель сообщения в блоге заключалась в том, чтобы попытаться объяснить, что происходит в соответствующем видео, и, надеюсь, это было полезно. Пожалуйста, посмотрите видео и предоставленный исходный код, а также оставьте комментарии и вопросы ниже.

Причуды Android

Конфигурация в plugin.xml вызывает проблемы с плагином VideoCapturePlus, и ее необходимо отредактировать для правильной работы. А пока я просто быстро отредактировал файл в каталоге node_modules, чтобы раздел android выглядел так

<!-- android -->
<platform name="android">
  <config-file target="res/xml/config.xml" parent="/*">
    <feature name="VideoCapturePlus">
      <param name="android-package" value="nl.xservices.plugins.videocaptureplus.VideoCapturePlus"/>
    </feature>
  </config-file>
  <config-file target="AndroidManifest.xml" parent="/*">
    <uses-permission  
      android:name="android.permission.RECORD_AUDIO" />
    <uses-permission 
      android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.CAMERA" />
  </config-file>
  <source-file 
src="src/android/nl/xservices/plugins/videocaptureplus/VideoCapturePlus.java"
   target-dir="src/nl/xservices/plugins/videocaptureplus"/>
  <source-file src="src/android/nl/xservices/plugins/videocaptureplus/FileHelper.java"
   target-dir="src/nl/xservices/plugins/videocaptureplus"/>
  <source-file src="src/android/nl/xservices/plugins/videocaptureplus/xml/provider_paths.xml" target-dir="res/xml" />
</platform>

🔥 Связанные руководства 🔥

🔥 Ссылки 🔥