• Главная
  • Карта сайта
Не найдено

Как создать приложение для записи аудио / видео с помощью React Native: подробное руководство

  1. Об авторе Олег Мрихлод - разработчик React Native в Apiko , Компания по развитию рынка B2B и...
  2. Зависимости, используемые для разработки приложений
  3. Создать функциональность записи звука с React Native
  4. Воспроизведение аудио с React Native
  5. Функциональность записи видео с React Native
  6. Аргументы:
  7. Функциональность воспроизведения видео с React Native
  8. Завершение

Об авторе

Олег Мрихлод - разработчик React Native в Apiko , Компания по развитию рынка B2B и B2C. Олег любит изучать информатику и новые технологии JS. ... Подробнее об Олеге ...

Не все разработчики знают, насколько полезен React Native. Вот несколько советов о том, как создать приложение для записи аудио и видео с помощью инструментов разработки Expo.

React Native - это молодая технология, уже завоевывающая популярность среди разработчиков. Это отличный вариант для быстрой, быстрой и эффективной разработки мобильных приложений. Высокая производительность для мобильных сред, повторного использования кода и сильного сообщества: это лишь некоторые из преимуществ, которые предоставляет React Native.

В этом руководстве я поделюсь некоторыми соображениями о высокоуровневых возможностях React Native и продуктах, которые вы сможете разработать с его помощью за короткий промежуток времени.

Мы углубимся в пошаговый процесс создания приложения для записи видео / аудио с React Native и Экспо , Expo - это набор инструментов с открытым исходным кодом, созданный на основе React Native, для разработки проектов для iOS и Android с использованием React и JavaScript. Он предоставляет набор собственных API-интерфейсов, поддерживаемых разработчиками и сообществом открытого исходного кода.

Прочитав эту статью, вы должны обладать всеми необходимыми знаниями для создания функциональности записи видео / аудио с помощью React Native.

Давайте получим право на это.

Краткое описание приложения

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

Приложение состоит из трех основных экранов, которые вы можете переключать с помощью навигатора вкладок:

  • экран аудиозаписи,
  • экран видеозаписи,
  • экран со списком всех записанных носителей и функциями для их воспроизведения или удаления.

Проверьте, как это приложение работает открыв эту ссылку с Экспо , но имейте в виду, что открытие приложения на iOS с последней версией expo (SDK 26) не может быть выполнено (отступая от рекомендаций Apple). Клиент iOS больше не сможет открывать проекты, опубликованные другими пользователями Expo. Вы сможете открывать проекты, опубликованные только в том же аккаунте, который зарегистрирован в клиенте Expo. Клиент Android продолжит работать с той же функциональностью, что и всегда.

Сначала загрузите Expo на свой мобильный телефон. Есть два варианта открыть проект:

  1. Откройте ссылку в браузере, отсканируйте QR-код с помощью мобильного телефона и дождитесь загрузки проекта.
  2. Откройте ссылку на своем мобильном телефоне и нажмите «Открыть проект с помощью Expo».

Вы также можете открыть приложение в браузере. Нажмите «Открыть проект в браузере». Если у вас есть платный аккаунт на Appetize.io , посетите его и введите код в поле, чтобы открыть проект. Если у вас нет учетной записи, нажмите «Открыть проект» и подождите в очереди на уровне учетной записи, чтобы открыть проект.

Однако я рекомендую вам загрузить приложение Expo и открыть этот проект на своем мобильном телефоне, чтобы проверить все функции приложения для записи видео и аудио.

Вы можете найти полный код приложения для записи мультимедиа в хранилище на GitHub.

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

Как уже упоминалось, приложение для записи мультимедиа разработано совместно с React Native и Expo

Вы можете увидеть полный список зависимостей в файле package.json репозитория.

Это основные используемые библиотеки:

  • React-навигация, для навигации по приложению,
  • Redux, для сохранения состояния приложения,
  • React-redux, которые являются привязками React для Redux,
  • Рекомендовать, для написания логики компонентов,
  • Повторно выберите для извлечения фрагментов состояния из Redux.

Давайте посмотрим на структуру проекта:

Большой предварительный просмотр Большой предварительный просмотр

  • src / index.js: корневой компонент приложения, импортированный в файл app.js;
  • SRC / компоненты: многоразовые компоненты;
  • src / constants: глобальные константы;
  • src / styles: глобальные стили, цвета, размеры и размеры шрифтов.
  • src / utils: полезные утилиты и перекомпоновочные энхансеры;
  • SRC / экраны: компоненты экранов;
  • источник / магазин: магазин Redux;
  • src / navigation: навигатор приложения;
  • src / modules: модули Redux, разделенные на сущности в виде модулей / аудио, модулей / видео, модулей / навигации.

Давайте перейдем к практической части.

Создать функциональность записи звука с React Native

Во-первых, важно проверить документация для Expo Audio API , связанные с аудиозаписью и воспроизведением. Вы можете увидеть весь код в хранилище , Я рекомендую открыть код, когда вы читаете эту статью, чтобы лучше понять процесс.

При первом запуске приложения вам понадобится разрешение пользователя на запись звука, что влечет за собой доступ к микрофону. Давайте используем Expo.AppLoading и запрашиваем разрешение на запись с помощью Expo.Permissions (см. Src / index.js) во время startAsync.

Await Permissions.askAsync (Permissions.AUDIO_RECORDING);

Аудиозаписи отображаются на отдельном экране, пользовательский интерфейс которого изменяется в зависимости от состояния.

Сначала вы можете увидеть кнопку «Начать запись». После щелчка начинается запись звука, и на экране отображается текущая продолжительность звука. После остановки записи вам нужно будет ввести имя записи и сохранить звук в магазине Redux .

Мой аудио интерфейс записи выглядит так:

Большой предварительный просмотр

Я могу сохранить аудио в магазине Redux в следующем формате:

audioItemsIds: ['id1', 'id2'], audioItems: {'id1': {id: строка, заголовок: строка, recordDate: строка даты, продолжительность: число, audioUrl: строка,}},

Давайте напишем звуковую логику, используя Recompose в контейнере экрана src /screen / RecordAudioScreenContainer.

Перед началом записи настройте режим аудио с помощью Expo.Audio.set.AudioModeAsync (mode), где mode - это словарь со следующими парами ключ-значение :

  • playsInSilentModeIOS: логическое значение, определяющее, должно ли звучание вашего опыта воспроизводиться в тихом режиме на iOS. Это значение по умолчанию равно false.
  • allowRecordingIOS: логическое значение, указывающее, включена ли запись на iOS. Это значение по умолчанию равно false. Примечание. Если для этого флага установлено значение true, воспроизведение может быть направлено на приемник телефона, а не на динамик.
  • interruptModeIOS: перечисление, выбирающее, как аудио вашего опыта должно взаимодействовать со звуком из других приложений на iOS.
  • shouldDuckAndroid: логическое значение, определяющее, будет ли звук вашего опыта автоматически понижаться по громкости («утка»), если звук из другого приложения прерывает ваш опыт. По умолчанию это значение равно true. Если false, звук из других приложений приостановит звук.
  • interruptModeAndroid: перечисление, выбирающее, как аудио вашего опыта должно взаимодействовать со звуком из других приложений на Android.

Примечание . Подробнее о настройке AudioMode можно узнать в документация ,

Я использовал следующие значения в этом приложении:

interruptModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX, - наша запись прерывает звук из других приложений на IOS.

playsInSilentModeIOS: правда ,

shouldDuckAndroid: правда ,

interruptModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX - наша запись прерывает звук из других приложений на Android.

allowRecordingIOS изменится на true до аудиозаписи и на false после ее завершения.

Чтобы реализовать это, давайте напишем обработчик setAudioMode с Recompose .

withHandlers ({setAudioMode: () => async ({allowRecordingIOS}) => {try {await Audio. ;} catch (error) {console.log (error) // eslint-disable-line}},}),

Для записи аудио вам нужно создать экземпляр класса Expo.Audio.Recording.

запись const = новый Audio.Recording ();

После создания экземпляра записи вы сможете получить статус записи с помощью recordingInstance.getStatusAsync ().

Статус записи представляет собой словарь со следующими парами ключ-значение:

  • canRecord: логическое значение.
  • isRecording: логическое значение, описывающее, записывается ли запись в данный момент.
  • isDoneRecording: логическое значение.
  • durationMillis: текущая продолжительность записанного аудио.

Вы также можете установить функцию, которая будет вызываться через регулярные промежутки времени с помощью recordingInstance.setOnRecordingStatusUpdate (onRecordingStatusUpdate).

Чтобы обновить пользовательский интерфейс, вам нужно вызвать setOnRecordingStatusUpdate и установить свой собственный обратный вызов.

Давайте добавим некоторые реквизиты и запись обратного вызова в контейнер.

withStateHandlers ({recording: null, isRecording: false, durationMillis: 0, isDoneRecording: false, fileUrl: null, audioName: '',}, {setState: () => obj => obj, setAudioName: () => audioName = > ({audioName}), recordingCallback: () => ({durationMillis, isRecording, isDoneRecording}) => ({durationMillis, isRecording, isDoneRecording}),}),

Настройка обратного вызова для setOnRecordingStatusUpdate:

recording.setOnRecordingStatusUpdate (props.recordingCallback);

onRecordingStatusUpdate вызывается каждые 500 миллисекунд по умолчанию. Чтобы сделать обновление пользовательского интерфейса действительным, установите интервал в 200 миллисекунд с помощью setProgressUpdateInterval:

recording.setProgressUpdateInterval (200);

После создания экземпляра этого класса вызовите prepareToRecordAsync для записи звука.

recordingInstance.prepareToRecordAsync (параметры) загружает рекордер в память и подготавливает его к записи. Он должен быть вызван перед вызовом startAsync (). Этот метод можно использовать, если экземпляр записи никогда не был подготовлен.

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

В этом случае давайте использовать Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY.

После подготовки записи вы можете начать запись, вызвав метод recordingInstance.startAsync ().

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

onStartRecording: props => async () => {try {if (props.recording) {props.recording.setOnRecordingStatusUpdate (null); props.setState ({recording: null}); } await props.setAudioMode ({allowRecordingIOS: true}); запись const = новый Audio.Recording (); recording.setOnRecordingStatusUpdate (props.recordingCallback); recording.setProgressUpdateInterval (200); props.setState ({fileUrl: null}); ожидайте записи.prepareToRecordAsync (Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY); ожидайте записи.startAsync (); props.setState ({запись}); } catch (error) {console.log (error) // eslint-disable-line}},

Теперь вам нужно написать обработчик для завершения записи звука. После нажатия кнопки «Стоп» необходимо остановить запись, отключить ее на iOS, получить и сохранить локальный URL-адрес записи и установить для параметра OnRecordingStatusUpdate и экземпляра записи значение null :

onEndRecording: props => async () => {try {await props.recording.stopAndUnloadAsync (); await props.setAudioMode ({allowRecordingIOS: false}); } catch (error) {console.log (error); // eslint-disable-line} if (props.recording) {const fileUrl = props.recording.getURI (); props.recording.setOnRecordingStatusUpdate (нуль); props.setState ({recording: null, fileUrl}); }},

После этого введите имя аудио, нажмите кнопку «Продолжить» , и звуковая заметка будет сохранена в магазине Redux .

onSubmit: props => () => {if (props.audioName && props.fileUrl) {const audioItem = {id: uuid (), recordDate: moment (). format (), заголовок: props.audioName, audioUrl: props .fileUrl, duration: props.durationMillis,}; props.addAudio (audioItem); props.setState ({audioName: '', isDoneRecording: false,}); props.navigation.navigate (screens.LibraryTab); }}, onSubmit: props => () => {if (props ( Большой предварительный просмотр )

Воспроизведение аудио с React Native

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

Вот как выглядит мой пользовательский интерфейс для воспроизведения аудио:

Большой предварительный просмотр

Экспо.Аудио.Звуковые объекты и Экспо.Видео компоненты поделиться единым императивным API для воспроизведения мультимедиа.

Давайте напишем логику воспроизведения аудио с помощью команды «Восстановить» в контейнере экрана src /screen / LibraryScreen / LibraryScreenContainer, поскольку аудиопроигрыватель доступен только на этом экране.

Если вы хотите отобразить проигрыватель в любой точке приложения, я рекомендую написать логику проигрывателя и воспроизведения звука в операциях Redux с использованием redux-thunk .

Давайте настроим аудио режим так же, как мы сделали для аудио записи. Во-первых, установите для параметра allowRecordingIOS значение false .

жизненный цикл ({async componentDidMount () {await Audio.setAudioModeAsync ({позволяет

Мы создали экземпляр записи для аудиозаписи. Что касается воспроизведения аудио, нам нужно создать экземпляр звука . Мы можем сделать это двумя разными способами:

  1. const playObject = new Expo.Audio.Sound ();
  2. Expo.Audio.Sound.create (source, initialStatus = {}, onPlaybackStatusUpdate = null, downloadFirst = true)

Если вы используете первый метод, вам нужно будет вызвать PlayObject.loadAsync (), который загружает носитель из источника в память и подготавливает его для воспроизведения после создания экземпляра.

Второй метод - это статический удобный метод для создания и загрузки звука. Он создает и загружает звук из источника с дополнительными параметрами initialStatus, onPlaybackStatusUpdate и downloadFirst.

Параметр source является источником звука. Поддерживаются следующие формы:

  • словарь в форме {uri: 'http: // path / to / file'} с сетевым URL, указывающим на аудиофайл в сети;
  • требовать ('путь / к / файлу') для ресурса аудиофайла в каталоге исходного кода;
  • Expo.Asset объект для аудио файла актива.

Параметр initialStatus является начальным состоянием воспроизведения. PlaybackStatus - это структура, возвращаемая всеми вызовами API воспроизведения, описывающая состояние воспроизведения объекта в данный момент времени. Это словарь с парами ключ-значение. Вы можете проверить все ключи PlaybackStatus в документация ,

onPlaybackStatusUpdate - это функция, принимающая единственный параметр PlaybackStatus. Он вызывается через равные промежутки времени, когда носитель находится в загруженном состоянии. Интервал составляет 500 миллисекунд по умолчанию. В моем приложении я установил интервал 50 миллисекунд для правильного обновления пользовательского интерфейса.

Перед созданием экземпляра звука вам необходимо реализовать обратный вызов onPlaybackStatusUpdate. Сначала добавим несколько реквизитов в контейнер контейнера:

withClassVariableHandlers ({playInstance: null, isSeeking: false, shouldPlayAtEndOfSeek: false, playingAudio: null,}, 'setClassVariable'), withStateHandlers ({position: null, duration: null, shouldPlay: false, isLoading: true, isBuing : false, showPlayer: false,}, {setState: () => obj => obj,}),

Теперь реализуем onPlaybackStatusUpdate. Вам потребуется сделать несколько проверок на основе PlaybackStatus для правильного отображения пользовательского интерфейса:

withHandlers ({soundCallback: props => (status) => {if (status.didJustFinish) {props.playbackInstance (). stopAsync ();} else if (status.isLoaded) {const position = props.isSeeking ()? props .position: status.positionMillis; const isPlaying = (props.isSeeking () || status.isBuffering)? props.isPlaying: status.isPlaying; props.setState ({позиция, продолжительность: status.durationMillis, mustPlay: status.shouldPlay, isPlaying, isBuffering: status.isBuffering,});}},}),

После этого вам нужно реализовать обработчик для воспроизведения аудио. Если экземпляр звука уже создан, необходимо выгрузить носитель из памяти, вызвав воспроизведениеInstance.unloadAsync () и очистить OnPlaybackStatusUpdate:

loadPlaybackInstance: props => async (shouldPlay) => {props.setState ({isLoading: true}); if (props.playbackInstance ()! == null) {await props.playbackInstance (). unloadAsync (); props.playbackInstance () setOnPlaybackStatusUpdate (нуль). props.setClassVariable ({PlayInstance: null}); } const {sound} = await Audio.Sound.create ({uri: props.playingAudio (). audioUrl}, {shouldPlay, position: 0, duration: 1, progressUpdateIntervalMillis: 50}, props.soundCallback,); props.setClassVariable ({playInstance: sound}); props.setState ({isLoading: false}); },

Вызовите обработчик loadPlaybackInstance (true), щелкнув элемент в списке. Он автоматически загрузит и воспроизведет аудио.

Давайте добавим функциональность паузы и воспроизведения (переключение воспроизведения) в аудиоплеер. Если звук уже воспроизводится, вы можете приостановить его с помощью playInstance.pauseAsync (). Если воспроизведение звука приостановлено, вы можете возобновить воспроизведение с точки приостановки с помощью метода playInstance.playAsync ():

onTogglePlaying: props => () => {if (props.playbackInstance ()! == null) {if (props.isPlaying) {props.playbackInstance (). pauseAsync (); } else {props.playbackInstance (). playAsync (); }}},

Когда вы нажимаете на элемент воспроизведения, он должен остановиться. Если вы хотите остановить воспроизведение звука и установить его в положение воспроизведения 0, вы можете использовать метод playInstance.stopAsync ():

onStop: props => () => {if (props.playbackInstance ()! == null) {props.playbackInstance (). stopAsync (); props.setShowPlayer (ложь); props.setClassVariable ({playingAudio: null}); }},

Аудиоплеер также позволяет перематывать звук с помощью ползунка. Когда вы начинаете скольжение, воспроизведение звука должно быть приостановлено с помощью selectionInstance.pauseAsync ().

После того, как скольжение завершено, вы можете установить позицию воспроизведения звука с помощью playInstance.setPositionAsync (значение) или воспроизвести аудио с установленной позиции с помощью PlayInstance.playFromPositionAsync (значение):

onCompleteSliding: props => async (value) => {if (props.playbackInstance ()! == null) {if (props.shouldPlayAtEndOfSeek) {await props.playbackInstance (). playFromPositionAsync (value); } else {await props.playbackInstance (). setPositionAsync (value); } props.setClassVariable ({isSeeking: false}); }},

После этого вы можете передать реквизиты компонентам MediaList и AudioPlayer (см. Файл src / Screens / LibraryScreen / LibraryScreenView).

Файл src / Screens / LibraryScreen / LibraryScreenView)

Функциональность записи видео с React Native

Давайте перейдем к записи видео.

Мы будем использовать Expo.Camera для этой цели. Expo.Camera - это компонент React, который выполняет предварительный просмотр передней или задней камеры устройства. Expo.Camera также может делать фотографии и записывать видео, которые сохраняются в кеше приложения.

Для записи видео вам необходимо разрешение на доступ к камере и микрофону. Давайте добавим запрос на доступ к камере, как мы сделали с аудиозаписью (в файле src / index.js):

ожидайте Permissions.askAsync (Permissions.CAMERA);

Видеозапись доступна на экране «Видеозапись». После переключения на этот экран камера включится.

Вы можете изменить тип камеры (передняя или задняя) и начать запись видео. Во время записи вы можете видеть его общую продолжительность и можете отменить или остановить его. Когда запись будет завершена, вам нужно будет ввести название видео, после чего оно будет сохранено в магазине Redux .

Вот как выглядит мой интерфейс записи видео:

Большой предварительный просмотр Большой предварительный просмотр

Давайте напишем логику записи видео с помощью команды «Восстановить» на экране контейнера src /screen / RecordVideoScreen / RecordVideoScreenContainer.

Вы можете увидеть полный список всех реквизитов в компоненте Expo.Camera в документ ,

В этом приложении мы будем использовать следующие реквизиты для Expo.Camera.

  • тип: тип камеры установлен (передний или задний).
  • onCameraReady: этот обратный вызов вызывается, когда установлен предварительный просмотр камеры. Вы не сможете начать запись, если камера не готова.
  • style: устанавливает стили для контейнера камеры. В этом случае размер 4: 3.
  • ref: используется для прямого доступа к компоненту камеры.

Добавим переменную для сохранения типа и обработчик для его изменения.

cameraType: Camera.Constants.Type.back, toggleCameraType: state => () => ({cameraType: state.cameraType === Camera.Constants.Type.front? Camera.Constants.Type.back: Camera.Constants.Type .фронт, }),

Давайте добавим переменную для сохранения состояния готовности камеры и обратного вызова для onCameraReady.

isCameraReady: false, setCameraReady: () => () => ({isCameraReady: true}),

Давайте добавим переменную для сохранения ссылки на компонент камеры и установщика.

cameraRef: null, setCameraRef: () => cameraRef => ({cameraRef}),

Давайте передадим эти переменные и обработчики компоненту камеры.

<Camera type = {cameraType} onCameraReady = {setCameraReady} style = {s.camera} ref = {setCameraRef} />

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

В настоящее время у нас есть доступ к компоненту камеры через ссылку, и мы можем начать запись видео с помощью cameraRef.recordAsync ().

Метод recordAsync начинает запись видео для сохранения в каталог кэша.

Аргументы:

Параметры (объект) - карта параметров:

  • качество (VideoQuality): укажите качество записанного видео. Использование: Camera.Constants.VideoQuality [''], возможные значения: для разрешения 16: 9, 2160p, 1080p, 720p, 480p (только для Android) и для 4: 3 (размер 640x480). Если выбранное качество недоступно для устройства, выберите самое высокое.
  • maxDuration (число): максимальная продолжительность видео в секундах.
  • maxFileSize (число): максимальный размер видеофайла в байтах.
  • mute (булево): если присутствует, видео будет записано без звука.

recordAsync возвращает обещание, которое разрешается в объект, содержащий свойство URI видеофайла. Вам нужно будет сохранить URI файла, чтобы воспроизвести видео в дальнейшем. Обещание возвращается, если был вызван stopRecording, достигнуто одно из значений maxDuration и maxFileSize или предварительный просмотр камеры остановлен.

Поскольку соотношение сторон компонентов камеры равно 4: 3, давайте установим одинаковый формат для качества видео.

Вот как выглядит обработчик для начала записи видео (см. Полный код контейнера в репозитории):

onStartRecording: props => async () => {if (props.isCameraReady) {props.setState ({isRecording: true, fileUrl: null}); props.setVideoDuration (); props.cameraRef.recordAsync ({качество: '4: 3'}) .then ((файл) => {props.setState ({fileUrl: file.uri});}); }},

Во время записи видео мы не можем получить статус записи, как мы сделали для аудио. Вот почему я создал функцию для установки продолжительности видео.

Чтобы остановить запись видео, мы должны вызвать следующую функцию:

stopRecording: props => () => {if (props.isRecording) {props.cameraRef.stopRecording (); props.setState ({isRecording: false}); clearInterval (props.interval); }},

Проверьте весь процесс записи видео.

Функциональность воспроизведения видео с React Native

Вы можете воспроизвести видео на экране «Библиотека». Видео заметки находятся на вкладке «Видео».

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

Интерфейс для воспроизведения видео выглядит следующим образом:

Большой предварительный просмотр Большой предварительный просмотр

Для воспроизведения видео используйте Expo.Video, компонент, который отображает видео, встроенное в другие элементы пользовательского интерфейса React в вашем приложении.

Видео будет отображаться на отдельном экране PlayVideo.

Вы можете проверить все реквизит для Expo.Видео здесь ,

В нашем приложении компонент Expo.Video использует собственные элементы управления воспроизведением и выглядит следующим образом:

<Источник видео = {{uri: videoUrl}} style = {s.video} shouldPlay = {isPlaying} resizeMode = "содержать" useNativeControls = {isPlaying} onLoad = {onLoad} onError = {onError} />

  • источник
    Это источник видео данных для отображения. Поддерживаются те же формы, что и для Expo.Audio.Sound.
  • ResizeMode
    Это строка, описывающая, как видео должно быть масштабировано для отображения в границах представления компонента. Это может быть «растянуть», «содержать» или «крышка».
  • shouldPlay
    Это логическое значение описывает, должны ли медиа воспроизводиться.
  • useNativeControls
    Это логическое значение, если установлено значение true, отображает собственные элементы управления воспроизведением (например, воспроизведение и пауза) в компоненте видео.
  • в процессе
    Эта функция вызывается после загрузки видео.
  • OnError
    Эта функция вызывается, если при загрузке или воспроизведении произошла неустранимая ошибка. Функция передает единственную строку сообщения об ошибке в качестве параметра.

Когда видео загружено, кнопка воспроизведения должна отображаться поверх него.

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

Давайте напишем логику видео, используя «Перекомпоновать» в контейнере экрана src /screen / PlayVideoScreen / PlayVideoScreenContainer:

const defaultState = {isError: false, isLoading: false, isPlaying: false,}; const extension = compose (paramsToProps ('videoUrl'), withStateHandlers ({... defaultState, isLoading: true,}, {onError: () => () => ({... defaultState, isError: true}), onLoad: () => () => defaultState, onTogglePlaying: ({isPlaying}) => () => ({... defaultState, isPlaying:! isPlaying}),}),);

Как упоминалось ранее, объекты Expo.Audio.Sound и компоненты Expo.Video совместно используют единый императивный API для воспроизведения мультимедиа. Вот почему вы можете создавать собственные элементы управления и использовать более продвинутые функции с API воспроизведения.

Проверьте процесс воспроизведения видео:

Смотрите полный код приложения в хранилище ,

Вы также можете установить приложение на свой телефон, используя Экспо и посмотрите, как это работает на практике.

Завершение

Я надеюсь, что вам понравилась эта статья и вы обогатили свои знания о React Native. Вы можете использовать это руководство по записи аудио и видео, чтобы создать свой собственный медиаплеер. Вы также можете масштабировать функциональность и добавить возможность сохранять мультимедийные данные в памяти телефона или на сервере, синхронизировать мультимедийные данные между различными устройствами и обмениваться мультимедийными данными с другими.

Как видите, здесь есть широкие возможности для воображения. Если у вас есть какие-либо вопросы о процессе разработки приложения для записи аудио или видео с помощью React Native, не стесняйтесь оставлять комментарии ниже.

Похожие

Как сегодня погода?
Снегопад в близлежащих горах, дождь по месту жительства и солнечный свет на острове мечты: с помощью подходящего приложения на смартфоне или планшете вы сможете в любое время прекрасно и даже по всему миру наблюдать за погодой. Но какое из небольших практических приложений на смартфонах и планшетах предлагает какие услуги и на что следует обратить внимание при использовании приложений? Ниже приведены три
Как использовать Kindle
... видео, музыке и играм. Шаг 9: Вы также можете отправлять личные документы по электронной почте на свои зарегистрированные устройства Kindle, поддерживаемые приложения для чтения Kindle и библиотеку Kindle в облаке. На странице « Ваша учетная запись» в Amazon используйте раскрывающееся меню, чтобы выбрать « Управление своим Kindle» . Нажмите
НОК как услуга
Успех вашего бизнеса во многом зависит от работы вашей сети. Для обеспечения стабильности и функциональности очень важно постоянно контролировать вашу сеть. Службы сетевого мониторинга FirstLight позволяют организациям любого размера отслеживать, измерять и анализировать
Как создать успешный блог - мой доклад на #iCamp
... ступал во Львове на конференции iCamp с докладом Как создать успешный блог"> 27 ноября я выступал во Львове на конференции iCamp с докладом "Как создать успешный блог". Был рад поделиться тем опытом, который я получил за последние четыре года в блогосфере, работая над различными проектами и блогами. В презентацию я попытался максимально кратко втиснуть все то, о чем рассказываю на страницах этого блога, а также в многочисленных комментариях и дискуссиях на других сайтах. Доклад состоит
Как Google видит это? Стоит использовать Скачать как Google
Если вы боретесь с индексацией своего сайта, вы наверняка не можете забыть о простом и удобном инструменте, доступном в Инструментах для веб-мастеров. Эта функция особенно полезна, когда страница была взломана или появились новые страницы или соответствующий контент, который мы хотели бы быстро проиндексировать. Стоит использовать этот инструмент также после запуска нового веб-сайта или после внесения исправлений на веб-сайте, чтобы мы хотели, чтобы они были включены в процесс индексации.
Как скачать видео с YouTube бесплатно
Вы искали видео с YouTube или хотите загрузить их на компьютеры или импортировать на устройство iOS? Теперь прочитайте следующую статью, и тогда вы сможете скачать видео с YouTube бесплатно и быстро! Вы искали фильм или замечательные видео на YouTube, но стоит ли платить за это? Вы также хотите загрузить несколько видео, которые могут стоить десятки евро. Так есть ли способ скачать видео с YouTube бесплатно? В этом случае вы можете использовать другой загрузчик, но он не может загрузить
Как Bash работает в Windows 10?
Когда Microsoft объявлено на конференции Build Интеграция Bash с Windows несколько удивленно подняла брови. Значит ли это, что мы будем запускать приложения Linux на Windows, а его ядро ​​где-то застряло? Что именно Bash? Это системная оболочка и интерпретатор сценариев и команд, который позволяет управлять и автоматизировать из командной строки.
Что такое блог и как его создать?
Блог (англ. Blog, от «web log», «дневник событий или сетевой журнал») - это сайт, на котором записи, мультимедиа или изображения, которые добавляются регулярно, является основным содержанием. Отличается блог от сайта достаточно просто. Во-первых, блог как правило посвящается определенной тематике (от манимейкинга к астрологии). Во-вторых, блоги в свободном доступе и к каждой записи читатели имеют возможность
Как освободить место на диске C в Windows
... ��та на диске C, и вам нужно немного больше свободного места? Знаете ли вы, какие данные удалить? Не беспокойтесь, есть несколько способов получить свободное место и проверить, какие папки занимают больше всего дискового пространства.
Как вы используете Google Drive для размещения веб-страниц?
Google Drive является одним из самых популярных виртуальных жестких дисков. Тем не менее, сервис не должен использоваться только для хранения файлов в облаке. Он также будет работать как бесплатная альтернатива хостинга, которая позволяет публиковать свои собственные веб-сайты в Интернете. Это могут быть простые статические сайты, использующие только базовый
Как вернуться из Windows 10 в Windows 7 или Windows 8.1?
29 июля 2015 года состоялась мировая премьера новой системы Microsoft, Windows 10, с самого начала доступной в качестве бесплатного обновления для владельцев Windows 7 и Windows 8.1. Некоторые из вас, вероятно, решили воспользоваться предложением бесплатного обновления, однако стоит напомнить, что последний день неизбежно приближается к возможному возвращению к более ранней версии системы. Вот небольшая поправка. Возврат к Windows 7 (или Windows 8.1) возможен через 30 дней, но в этой ситуации

Комментарии

Как они это сделали?
Как они это сделали? Отправляя смс клиентам из списков контактов во вторник (ранним днем) и предлагая им попробовать бутерброд по более низкой цене. Отправка электронной почты не всегда приносит такие эффекты, как текстовые сообщения. Компания Gdynia из приведенного выше примера нашла эффективный способ связаться с занятыми мамами, которые остаются в своих домах, а люди выполняют свои поручения во время обеденных перерывов. Отправка электронной почты не принесет
Что такое блог и как его создать?
Что такое блог и как его создать? Чтобы зарабатывать на блоге, нужно раскрутить блог и выполнить два условия - хорошие пузомерки (тИЦ и PR) и (или) активные читачи.Якщо в блога (сплога) будут хорошие пузомерки, например, его примут в каталог Dmoz , То покупать рекламные ссылки будут оптимизаторы - они заинтересованы в покупке ссылок "навсегда" за умеренную плату. Раскрутить блог можно с помощью всем известных способов - прогон по каталогам сайтов,
3. Как производятся платежи?
3. Как производятся платежи? Комиссия будет взиматься автоматически заранее (в начале расчетного периода, для всех это будет другой день, потому что в другой день он настроил учетную запись на Netflix) с банковского счета или со счета PayPal. 4. Как насчет испытательного срока? Это доступно для новых людей, создающих учетную запись, и занимает месяц. По истечении пробного периода следующий месяц уже оплачивается в соответствии с выбранным планом.
Но какое из небольших практических приложений на смартфонах и планшетах предлагает какие услуги и на что следует обратить внимание при использовании приложений?
Но какое из небольших практических приложений на смартфонах и планшетах предлагает какие услуги и на что следует обратить внимание при использовании приложений? Ниже приведены три примера погодных приложений. WetterApp (Поставщик: WetterOnline GmbH) Бесплатный WeatherApp от WeatherOnline дает возможность получить обзор различных мест по всему миру. Таким образом, вы можете сразу увидеть, какая именно погода преобладает. Нажав на соответствующее
Как написать é, è или в HTML?
Как написать é, è или в HTML? Как отображать кавычки, кавычки или открывающие и закрывающие шевроны? Ответ в 2 таблицах. Стандарт HTML соблюдает кодировку символов 7-битный ASCII то есть он не использует акцентированные символы. Таким образом, есть HTML-код для написания каждого письма с ударением. Вот они: Написать буквы с акцентом в HTML Описание буквы с акцентом Буква HTML
В то время как рычаг поворотного стола проходил через дорожку записи на диске, не отличается ли рука головок дисков?
В то время как рычаг поворотного стола проходил через дорожку записи на диске, не отличается ли рука головок дисков? он должен быть установлен так, чтобы головки находились выше читаемой дорожки (или, скорее, «читайте« цилиндр »). В первых конструкциях жестких дисков позиционирование головок осуществлялось с помощью механизма с шаговым двигателем (такое решение до сих пор используется в дисководах). Поскольку требования к скорости увеличились, были использованы другие решения, из которых звуковая
Как восстановить поврежденный файл EDB сервера Exchange с помощью программы восстановления EDB?
Как восстановить поврежденный файл EDB сервера Exchange с помощью программы восстановления EDB? Выполните следующие шаги последовательно, чтобы конвертировать EDB в PST: Откройте приложение EdbMails для восстановления Exchange EDB. Просмотрите поврежденный файл EDB с помощью опции «Восстановление в автономном режиме». Приложение загружает все восстанавливаемые почтовые ящики в виде дерева со структурой папок на левой боковой панели.
Как YouTube может скачать видео бесплатно?
Как YouTube может скачать видео бесплатно? Следуйте приведенным ниже инструкциям, чтобы использовать AnyTrans для загрузки бесплатных видео прямо на свой компьютер или устройство iOS! Шаг 1: Скачать AnyTrans для iOS на компьютер и установить на компьютер> запустить AnyTrans> нажать на кнопку "
Png bognam 2016-05-10 13:48:03 2016-05-10 13:48:03 Истинно мужские интерьеры - как их расположить?
png bognam 2016-05-10 13:48:03 2016-05-10 13:48:03 Истинно мужские интерьеры - как их расположить? https://www.homesquare.pl/files/uploads/2016/05/Nowoczesna-wanna-w-oryginalnej-stylizacji.jpg 600 900 bognam https://www.homesquare.pl/files/uploads/2016/10/ Logo-HomeSquare-PNG.png bognam 2016-05-09 15:16:05 2016-11-25 15:48:41
Как формируются сборы для студентов?
Как формируются сборы для студентов? Что вы должны смотреть? Где подвох? Давайте проверим, не врут ли реклама, что аккаунт на 100% бесплатный. Банк Пекао принадлежит к гиганту польского сектора. По активам, количеству обслуживаемых лицевых счетов, количеству клиентов, размеру занятости или размеру сети собственных торговых точек - он занимает второе место на рынке (для PKO BP).
Как вы делаете декупаж?
Как вы делаете декупаж? Инфографика показывает ей основные шаги для декупажа. Подготавливает поверхность, на которой должна быть оформлена бумага, по своему усмотрению. Однако это также можно оставить без лечения. Важно то, что все чисто и без жира. Инфографика Декупаж учебник

IsSeeking ()?
IsBuffering)?
Front?
Но какое из небольших практических приложений на смартфонах и планшетах предлагает какие услуги и на что следует обратить внимание при использовании приложений?
Вы искали фильм или замечательные видео на YouTube, но стоит ли платить за это?
Так есть ли способ скачать видео с YouTube бесплатно?
Значит ли это, что мы будем запускать приложения Linux на Windows, а его ядро ​​где-то застряло?
Что именно Bash?
Что такое блог и как его создать?
?та на диске C, и вам нужно немного больше свободного места?
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

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

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью