Как создать приложение для записи видео для устройств Android и IOS с помощью кода JavaScript.
Привет, нативные разработчики!
Когда вы начинаете изучать React Native, вы читаете различные лекции, руководства и статьи, чтобы создавать различные проекты и изучать материал. Приложение для записи - одно из таких приложений. Для приложения для записи вы должны знать, как работает приложение камеры, как управлять качеством видео, битрейтом, продолжительностью и многим другим. Как остановить запись или воспроизведение видео? Есть еще много интересного. Итак, начнем с чашки кофе.
Если вы предпочитаете видеоруководство, то оно здесь:
Установка и установка
Запустите проект expo-CLI в предпочитаемом вами каталоге с помощью команды: expo init videoRec (вы можете назвать его по своему усмотрению). Выберите пустой шаблон и завершите установку зависимостей JavaScript. После этого установите следующий пакет в родительский каталог с помощью команд:
npm install expo-camera npm install expo-av
expo-camera используется для управления функциями камеры в приложении React Native, а expo-av используется для отображения видео в вашем приложении. С помощью пакета expo-av вы можете воспроизводить, останавливать и пересылать видео в своем приложении.
Мы закончили установку. Приступим сейчас же к взлому.
Код приложения для записи видео (React Native)
App.js
Импортируйте следующие компоненты из соответствующего пакета, поскольку мы собираемся использовать их в нашем проекте.
import React, { useState, useEffect } from 'react';
import { StyleSheet ,Text, View, Button,} from 'react-native';
import { Camera } from 'expo-camera';
import { Video } from 'expo-av';
Сначала мы настроим нашу камеру для записи видео. Затем мы переключимся на отображение этого видео. Теперь для записи видео вам нужно получить доступ к двум вещам от пользователей. Один из них - это, конечно же, камера, а другой - доступ к микрофону для аудио.
const [hasAudioPermission, setHasAudioPermission] = useState(null); const [hasCameraPermission, setHasCameraPermission] =useState(null); const [camera, setCamera] = useState(null); const [record, setRecord] = useState(null); const [type, setType] = useState(Camera.Constants.Type.back);
Мы собираемся использовать react-hook для аудио, видео, разрешения камеры, типа и записи. Поскольку мы запрашиваем разрешение у пользователей на доступ, а затем меняем наше состояние с нуля и устанавливаем его в другие поля.
useEffect(() => {
(async () => {
const cameraStatus = await Camera.requestPermissionsAsync();
setHasCameraPermission(cameraStatus.status === 'granted');
const audioStatus = await Camera.requestMicrophonePermissionsAsync();
setHasAudioPermission(audioStatus.status === 'granted');
})();
}, []);
Приведенный выше код используется для доступа к разрешению камеры и микрофона устройства пользователя. Как только пользователь дает разрешение, нулевое состояние камеры и микрофона заменяется обновленными состояниями.
const takeVideo = async () => {
if(camera){
const data = await camera.recordAsync()
setRecord(data.uri);
console.log(data.uri);
}
}
Эта стрелочная функция позаботится о вашей видеозаписи, и мы установим URI видео как данные. Просто зарегистрируйте этот URI в консоли, как указано выше, и вы увидите ссылку URL-адреса видео во внутреннем хранилище.
const stopVideo = async () => {
camera.stopRecording();
}
Чтобы остановить запись видео, нам понадобится указанная выше стрелочная функция.
if (hasCameraPermission === null || hasAudioPermission === null ) {
return <View />;
}
if (hasCameraPermission === false || hasAudioPermission === false) {
return <Text>No access to camera</Text>;
}
Если пользователь отказывает в разрешении доступа, мы собираемся показать на экране «Нет доступа к камере».
<View style={styles.cameraContainer}>
<Camera
ref={ref => setCamera(ref)}
style={styles.fixedRatio}
type={type}
ratio={'4:3'} />
</View>
Приведенный выше код используется для отображения камеры. Нам нужен экран камеры в соотношении 4: 3. Вы можете настроить их соответствующим образом.
<Button
title="Flip Video"
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
</Button>
<Button title="Take video" onPress={() => takeVideo()} />
<Button title="Stop Video" onPress={() => stopVideo()} />
Это основные кнопки, которые мы собираемся использовать. Первый - перевернуть камеру, что означает, что вы можете записывать видео как с передней, так и с задней камеры. Два других предназначены для записи видео и остановки видео.
Теперь мы можем снимать видео. Как мы будем это играть?
Воспроизвести видео с помощью React Native
Для воспроизведения видео нам понадобятся два новых перехватчика реакции.
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
Теперь добавьте экран воспроизведения видео и кнопку воспроизведения.
<Video
ref={video}
style={styles.video}
source={{
uri: record,
}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.buttons}>
<Button
title={status.isPlaying ? 'Pause' : 'Play'}
onPress={() =>
status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
}
/>
</View>
Для воспроизведения видео вам понадобится URI этого видео. Мы уже сделали URI записанного видео и сохранили его в состоянии записи. Мы просто должны использовать это здесь.
Теперь вы также можете настроить свое видео. Как это сделать?
Настройте качество видео, продолжительность, скорость передачи данных с помощью React Native Expo
const takeVideo = async () => {
if(camera){
const data = await camera.recordAsync({
VideoQuality:['2160p'],
maxDuration:10,
maxFileSize:200,
mute:false,
videoBitrate:5000000
})
setRecord(data.uri);
console.log(data.uri);
}
}
Помните: мы используем камеру для записи видео. Теперь добавьте переменную в соответствии с вашим выбором. Здесь мы устанавливаем качество видео 2160p, максимальная продолжительность рассчитывается в секундах. Размер файла рассчитывается в байтах. Поле отключения звука является логическим. Мы установили битрейт видео 5 Мбит / с. Установите это в соответствии с вашим выбором и требованиями.
Поскольку мы в основном сосредотачиваемся на том, как эти вещи работают, а не на стилизации. Вы можете стилизовать их соответствующим образом. Теперь запустите это приложение в окне терминала и запустите его на своем устройстве с помощью приложения expo. Вы увидите что-то вроде этого на экране вашего устройства.
Это все для этой статьи. Если вы где-то потерялись или вам нужен полный доступ к коду, то код Github находится здесь.
Спасибо за прочтение! И если эта статья будет вам полезна, то смело хлопайте в ладоши, сколько захотите.
Больше контента на plainenglish.io
