Como criar App com camera, gravar videos com React Native

Programador Viking 16 de setembro de 2024 0 Comentários Leitura: 6 min

Neste artigo, vamos explorar como gravar vídeos com React Native, utilizando bibliotecas amplamente usadas no mercado, como a React Native Vision Camera.

Gravar vídeos com React Native é uma tarefa essencial para muitos tipos de aplicativos móveis.

Se você deseja criar funcionalidades como stories do Instagram, gravação de vídeos para perfis ou qualquer outro recurso audiovisual, React Native oferece uma ótima combinação de bibliotecas e ferramentas para atingir esse objetivo.

Confira neste artigo:

Vídeo Aula: Como criar App com camera, gravar videos com React Native

Para facilitar o aprendizado, recomendo assistir esse vídeo completo do Sujeito Programador mostrando como gravar videos com React Native totalmente prática.

Confira os cursos completos de programação para iniciante do Sujeito Programador:

Curso Fábrica de APP Curso FullStack PRO

Por que Usar React Native para Gravar Vídeos?

React Native é uma plataforma poderosa para o desenvolvimento de aplicativos móveis que permite usar JavaScript para criar aplicações tanto para Android quanto para iOS.

Uma de suas principais vantagens é a capacidade de reutilizar o mesmo código para diferentes plataformas, o que economiza tempo e recursos no desenvolvimento.

Ao adicionar a funcionalidade de gravação de vídeos, você pode melhorar ainda mais a experiência do usuário, criando interações dinâmicas e imersivas.

Ferramentas e Bibliotecas Necessárias

Para iniciar a gravação de vídeos em React Native, vamos utilizar as seguintes ferramentas:

Expo: Um conjunto de ferramentas e serviços que ajudam a desenvolver e testar aplicativos React Native.
React Native Vision Camera: Uma biblioteca avançada para capturar vídeos e fotos no React Native, oferecendo grande flexibilidade e personalização.
Typescript: Uma opção que torna o código mais robusto e com menos erros.

Passo a Passo para Gravar Vídeos com React Native

1. Configurando o Ambiente

O primeiro passo é configurar o ambiente de desenvolvimento com Expo e React Native Vision Camera. Se você ainda não tem um projeto React Native configurado, aqui está como começar:

npx create-expo-app meu-app-video
cd meu-app-video
npm install react-native-vision-camera

2. Pedindo Permissões da Câmera

Antes de utilizar a câmera, é importante solicitar as permissões necessárias tanto para Android quanto para iOS. A biblioteca do Expo facilita esse processo. Aqui está um exemplo de como pedir permissão para acessar a câmera:

import { Camera } from 'react-native-vision-camera';

useEffect(() => {
  const getPermissions = async () => {
    const cameraPermission = await Camera.requestCameraPermission();
    const microphonePermission = await Camera.requestMicrophonePermission();
    
    if (cameraPermission === 'authorized' && microphonePermission === 'authorized') {
      console.log('Permissões concedidas');
    }
  };

  getPermissions();
}, []);

3. Configurando a Interface da Câmera

Agora que temos as permissões, podemos configurar a interface da câmera dentro do aplicativo. Vamos usar a biblioteca React Native Vision Camera para capturar os vídeos.

import { Camera, useCameraDevices } from 'react-native-vision-camera';
import React, { useRef } from 'react';
import { View, StyleSheet, Button } from 'react-native';

const App = () => {
  const camera = useRef(null);
  const devices = useCameraDevices();
  const device = devices.back;

  if (device == null) return <View />; // Espera a lista de câmeras carregar

  return (
    <View style={styles.container}>
      <Camera
        ref={camera}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        video={true}
      />
      <Button title="Gravar" onPress={async () => {
        const video = await camera.current.startRecording({
          onRecordingFinished: (video) => console.log(video),
          onRecordingError: (error) => console.error(error),
        });
      }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Aqui, estamos utilizando a câmera traseira do dispositivo para gravar o vídeo. Ao clicar no botão “Gravar”, o vídeo começa a ser capturado. O vídeo gravado pode ser processado conforme necessário, como salvar no dispositivo ou enviar para um servidor.

4. Salvando o Vídeo

Após gravar o vídeo, o próximo passo é salvá-lo no dispositivo. Para isso, você pode usar a biblioteca react-native-fs ou outra similar que permite manipular arquivos locais.

npm install react-native-fs

Em seguida, você pode modificar o código para salvar o vídeo localmente:

import RNFS from 'react-native-fs';

// Dentro da função que termina a gravação
const videoPath = video.path;
const destinationPath = `${RNFS.DocumentDirectoryPath}/meu-video.mp4`;

RNFS.moveFile(videoPath, destinationPath)
  .then(() => {
    console.log('Vídeo salvo com sucesso em:', destinationPath);
  })
  .catch(error => {
    console.error('Erro ao salvar o vídeo:', error);
  });

Com isso, o vídeo gravado será movido para o diretório de documentos do aplicativo, onde poderá ser acessado ou compartilhado.

5. Testando no Dispositivo

Depois de configurar tudo, é hora de testar o aplicativo. Abra o Expo Go em seu dispositivo móvel e execute o aplicativo. Ao clicar em “Gravar”, o aplicativo irá capturar o vídeo e salvá-lo no dispositivo.

Alternativas de Gravação de Vídeo

Além da React Native Vision Camera, existem outras bibliotecas que podem ser usadas para gravar vídeos em React Native, como:

Expo Camera: Ótima para projetos que utilizam Expo, mas com algumas limitações em relação à flexibilidade.
React Native Camera: Uma biblioteca robusta e amplamente usada, com suporte para múltiplas funcionalidades de câmera e vídeo.

Cada uma dessas bibliotecas tem suas próprias vantagens e desvantagens, dependendo do projeto em questão. A React Native Vision Camera se destaca por sua flexibilidade e suporte à gravação de vídeos com alta qualidade.

Conclusão

Neste artigo, exploramos como gravar vídeos com React Native, utilizando a biblioteca React Native Vision Camera. Este processo envolve desde a configuração do ambiente com Expo até a captura e salvamento dos vídeos gravados.

A implementação da câmera dentro de um aplicativo React Native pode trazer uma série de funcionalidades adicionais, permitindo que você crie interações mais ricas para os usuários.

Se você está interessado em continuar aprimorando suas habilidades em desenvolvimento mobile, essa funcionalidade é um excelente ponto de partida para criar aplicativos interativos e dinâmicos.

Para aprender mais sobre programação recomendo dar uma conferida nos cursos do Sujeito Programador que ensina tudo que você precisa para entrar no mercado da programação.

Clique no botão abaixo e faça sua inscrição: