Cómo crear una aplicación de grabación de audio/vídeo con React Native: un tutorial en profundidad

1. Breve descripción de la aplicación
   1. Dependencias utilizadas para el desarrollo de aplicaciones
2. Cree funcionalidad de grabación de audio con React Native
3. Reproducción de audio con React Native
4. Funcionalidad de grabación de video con React Native
5. Funcionalidad de reproducción de video con React Native

No todos los desarrolladores son conscientes de lo útil que es realmente React Native. A continuación se ofrecen algunos consejos sobre cómo crear una aplicación de grabación de audio y vídeo utilizando las herramientas de desarrollo de Expo. En este artículo, Oleh Mryhlod compartirá algunas ideas sobre las capacidades de alto nivel de React Native y los productos que puede desarrollar con él en un corto período de tiempo. Al final de esta guía, debería tener todos los conocimientos necesarios para crear la funcionalidad de grabación de vídeo/audio con React Native. Entremos en ello.

React Native es una tecnología joven que ya está ganando popularidad entre los desarrolladores. Es una excelente opción para el desarrollo de aplicaciones móviles sin problemas, rápido y eficiente. Tasas de alto rendimiento para entornos móviles, reutilización de código y una comunidad sólida: estos son solo algunos de los beneficios que ofrece React Native.

En esta guía, compartiré algunas ideas sobre las capacidades de alto nivel de React Native y los productos que puedes desarrollar con él en un corto período de tiempo.

Profundizaremos en el proceso paso a paso de creación de una aplicación de grabación de vídeo/audio con React Native y Expo . Expo es una cadena de herramientas de código abierto construida alrededor de React Native para desarrollar proyectos de iOS y Android con React y JavaScript. Proporciona una serie de API nativas mantenidas por desarrolladores nativos y la comunidad de código abierto.

Después de leer este artículo, debería tener todos los conocimientos necesarios para crear una función de grabación de vídeo/audio con React Native.

Vayamos directo al grano.

Breve descripción de la aplicación

La aplicación que aprenderás a desarrollar se llama cuaderno multimedia. He implementado parte de esta funcionalidad en una solicitud de bolsa de trabajo en línea para la industria cinematográfica. El objetivo principal de esta aplicación móvil es conectar a las personas que trabajan en la industria cinematográfica con los empleadores. Pueden crear un perfil, agregar una introducción en video o audio y solicitar empleo.

La aplicación consta de tres pantallas principales entre las que puedes alternar con la ayuda de un navegador de pestañas:

• la pantalla de grabación de audio,
• la pantalla de grabación de vídeo,
• una pantalla con una lista de todos los medios grabados y la funcionalidad para reproducirlos o eliminarlos.

Vea cómo funciona esta aplicación abriendo este enlace con Expo , pero tenga en cuenta que no se puede abrir la aplicación en iOS con la última versión de expo (SDK 26) (según las pautas de Apple). El cliente iOS ya no podrá abrir proyectos publicados por otros usuarios de Expo. Solo podrá abrir proyectos publicados por la misma cuenta que inició sesión en el cliente Expo. El cliente de Android seguirá con la misma funcionalidad de siempre.

Primero, descarga Expo en tu teléfono móvil. Hay dos opciones para abrir el proyecto:

1. Abre el enlace en el navegador, escanea el código QR con tu teléfono móvil y espera a que se cargue el proyecto.
2. Abre el enlace con tu teléfono móvil y haz clic en “Abrir proyecto usando Expo”.

También puedes abrir la aplicación en el navegador. Haga clic en "Abrir proyecto en el navegador". Si tiene una cuenta paga en Appetize.io , visítela e ingrese el código en el campo para abrir el proyecto. Si no tiene una cuenta, haga clic en "Abrir proyecto" y espere en una cola a nivel de cuenta para abrir el proyecto.

Sin embargo, te recomiendo que descargues la aplicación Expo y abras este proyecto en tu teléfono móvil para comprobar todas las funciones de la aplicación de grabación de vídeo y audio.

Puede encontrar el código completo de la aplicación de grabación multimedia en el repositorio de GitHub.

Dependencias utilizadas para el desarrollo de aplicaciones

Como se mencionó, la aplicación de grabación de medios está desarrollada con React Native y Expo.

Puede ver la lista completa de dependencias en el package.jsonarchivo del repositorio.

Estas son las principales bibliotecas utilizadas:

• React-navigation, para navegar por la aplicación,
• Redux, para guardar el estado de la aplicación,
• React-redux, que son enlaces de React para Redux,
• Recomponer, para escribir la lógica de los componentes,
• Vuelva a seleccionar, para extraer los fragmentos de estado de Redux.

Veamos la estructura del proyecto:

• src/index.js: componente de la aplicación raíz importado en el app.jsarchivo;
• src/components: componentes reutilizables;
• src/constants: constantes globales;
• src/styles: estilos, colores, tamaños de fuente y dimensiones globales.
• src/utils: utilidades útiles y potenciadores de recomposición;
• src/screens: componentes de pantallas;
• src/store: Tienda Redux;
• src/navigation: navegador de la aplicación;
• src/modules: Módulos Redux divididos por entidades como módulos/audio, módulos/vídeo, módulos/navegación.

Pasemos a la parte práctica.

Cree funcionalidad de grabación de audio con React Native

Primero, es importante consultar la documentación de Expo Audio API , relacionada con la grabación y reproducción de audio. Puedes ver todo el código en el repositorio . Recomiendo abrir el código mientras lees este artículo para comprender mejor el proceso.

Al iniciar la aplicación por primera vez, necesitará el permiso del usuario para grabar audio, lo que implica acceso al micrófono. Usemos Expo.AppLoadingy pidamos permiso para grabar usando Expo.Permissions(ver src/index.js) durante startAsync.

Esperar Permissions.askAsync(Permissions.AUDIO_RECORDING);

Las grabaciones de audio se muestran en una pantalla separada cuya interfaz de usuario cambia según el estado.

Primero, puedes ver el botón "Iniciar grabación". Después de hacer clic, comienza la grabación de audio y encontrará la duración del audio actual en la pantalla. Después de detener la grabación, tendrás que escribir el nombre de la grabación y guardar el audio en la tienda Redux .

Mi interfaz de usuario de grabación de audio se ve así:

Puedo guardar el audio en la tienda Redux en el siguiente formato:

audioItemsIds: [‘id1’, ‘id2’],audioItems: { ‘id1’: { id: string, title: string, recordDate: date string, duration: number, audioUrl: string, }},

Escribamos la lógica de audio usando Recompose en el contenedor de la pantalla src/screens/RecordAudioScreenContainer.

Antes de comenzar a grabar, personalice el modo de audio con la ayuda de Expo.Audio.set.AudioModeAsync(modo), donde modo es el diccionario con los siguientes pares clave-valor :

• playsInSilentModeIOS: un booleano que selecciona si el audio de su experiencia debe reproducirse en modo silencioso en iOS. Este valor por defecto es falso.
• allowsRecordingIOS: un valor booleano que selecciona si la grabación está habilitada en iOS. Este valor por defecto es falso. Nota: Cuando este indicador está establecido en verdadero, la reproducción puede dirigirse al receptor del teléfono, en lugar de al altavoz.
• interruptionModeIOS: una enumeración que selecciona cómo el audio de su experiencia debe interactuar con el audio de otras aplicaciones en iOS.
• shouldDuckAndroid: Un valor booleano que selecciona si el volumen del audio de su experiencia debe bajar automáticamente ("bajar") si el audio de otra aplicación interrumpe su experiencia. Este valor por defecto es verdadero. Si es falso, el audio de otras aplicaciones lo pausará.
• interruptionModeAndroid: una enumeración que selecciona cómo el audio de su experiencia debe interactuar con el audio de otras aplicaciones en Android.

Nota : Puede obtener más información sobre la personalización de AudioMode en la documentación .

He utilizado los siguientes valores en esta aplicación:

interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX, — Nuestro registro interrumpe el audio de otras aplicaciones en IOS.

playsInSilentModeIOS: verdadero ,

shouldDuckAndroid: verdadero ,

interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX— Nuestro registro interrumpe el audio de otras aplicaciones en Android.

allowsRecordingIOSCambiará a verdadero antes de la grabación de audio y a falso después de su finalización.

Para implementar esto, escribamos el controlador setAudioModecon Recompose .

withHandlers({ setAudioMode: () = async ({ allowsRecordingIOS }) = { try { await Audio.setAudioModeAsync({ allowsRecordingIOS, interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX, playsInSilentModeIOS: true, shouldDuckAndroid: true, interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX, }); } catch (error) { console.log(error) // eslint-disable-line } },}),

Para grabar el audio, necesitarás crear una instancia del archivo Expo.Audio.Recording class.

const recording = new Audio.Recording();

Después de crear la instancia de grabación, podrá recibir el estado de la grabación con la ayuda de recordingInstance.getStatusAsync().

El estado de la grabación es un diccionario con los siguientes pares clave-valor:

• canRecord:un booleano.
• isRecording:un booleano que describe si la grabación se está grabando actualmente.
• isDoneRecording:un booleano.
• durationMillis:duración actual del audio grabado.

También puede configurar una función para que se llame a intervalos regulares conrecordingInstance.setOnRecordingStatusUpdate(onRecordingStatusUpdate).

Para actualizar la interfaz de usuario, deberá llamar setOnRecordingStatusUpdatey configurar su propia devolución de llamada.

Agreguemos algunos accesorios y una devolución de llamada de grabación al contenedor.

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 }), }),

La configuración de devolución de llamada setOnRecordingStatusUpdatees:

recording.setOnRecordingStatusUpdate(props.recordingCallback);

onRecordingStatusUpdatese llama cada 500 milisegundos de forma predeterminada. Para que la actualización de la interfaz de usuario sea válida, establezca el intervalo de 200 milisegundos con la ayuda de setProgressUpdateInterval:

recording.setProgressUpdateInterval(200);

Después de crear una instancia de esta clase, llame prepareToRecordAsyncpara grabar el audio.

recordingInstance.prepareToRecordAsync(options)carga la grabadora en la memoria y la prepara para grabar. Se debe llamar antes de llamar startAsync(). Este método se puede utilizar si la instancia de grabación nunca se ha preparado.

Los parámetros de este método incluyen opciones de grabación como frecuencia de muestreo, tasa de bits, canales, formato, codificador y extensión. Puede encontrar una lista de todas las opciones de grabación en este documento .

En este caso usaremos Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY.

Una vez preparada la grabación, puede comenzar a grabar llamando al método recordingInstance.startAsync().

Antes de crear una nueva instancia de grabación , verifique si se ha creado antes. El controlador para comenzar la grabación tiene este aspecto:

onStartRecording: props = async () = { try { if (props.recording) { props.recording.setOnRecordingStatusUpdate(null); props.setState({ recording: null }); } await props.setAudioMode({ allowsRecordingIOS: true }); const recording = new Audio.Recording(); recording.setOnRecordingStatusUpdate(props.recordingCallback); recording.setProgressUpdateInterval(200); props.setState({ fileUrl: null });await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY); await recording.startAsync(); props.setState({ recording }); } catch (error) { console.log(error) // eslint-disable-line } },

Ahora necesita escribir un controlador para completar la grabación de audio. Después de hacer clic en el botón Detener, debe detener la grabación, deshabilitarla en iOS, recibir y guardar la URL local de la grabación y configurar OnRecordingStatusUpdatela instancia de grabación como nula :Te recomendamos Juguetes educativos

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

Después de esto, escriba el nombre del audio, haga clic en el botón "continuar" y la nota de audio se guardará en la tienda Redux .

onSubmit: props = () = { if (props.audioName props.fileUrl) { const audioItem = { id: uuid(), recordDate: moment().format(), title: props.audioName, audioUrl: props.fileUrl, duration: props.durationMillis, }; props.addAudio(audioItem); props.setState({ audioName: '', isDoneRecording: false, }); props.navigation.navigate(screens.LibraryTab); } },

Reproducción de audio con React Native

Puede reproducir el audio en la pantalla con las notas de audio guardadas. Para iniciar la reproducción de audio, haga clic en uno de los elementos de la lista. A continuación, puede ver el reproductor de audio que le permite rastrear la posición actual de reproducción, establecer el punto de inicio de la reproducción y alternar la reproducción de audio.

Así es como se ve mi interfaz de usuario de reproducción de audio:

Los objetos Expo.Audio.Sound y los componentes Expo.Video comparten una API imperativa unificada para la reproducción multimedia.

Escribamos la lógica de la reproducción de audio usando Recompose en el contenedor de pantalla src/screens/LibraryScreen/LibraryScreenContainer, ya que el reproductor de audio solo está disponible en esta pantalla.

Si desea mostrar el reproductor en cualquier punto de la aplicación, le recomiendo escribir la lógica del reproductor y la reproducción de audio en operaciones de Redux usando redux-thunk .

Personalicemos el modo de audio de la misma manera que lo hicimos para la grabación de audio. Primero, configúrelo allowsRecordingIOSen falso .

lifecycle({ async componentDidMount() { await Audio.setAudioModeAsync({ allowsRecordingIOS: false, interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX, playsInSilentModeIOS: true, shouldDuckAndroid: true, interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX, }); }, }),

Hemos creado la instancia de grabación para grabación de audio. En cuanto a la reproducción de audio, necesitamos crear la instancia de sonido . Podemos hacerlo de dos maneras diferentes:

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

Si usa el primer método, necesitará llamar a playbackObject.loadAsync(), que carga los medios desde el origen en la memoria y los prepara para reproducir, después de la creación de la instancia.

El segundo método es un método estático de conveniencia para construir y cargar un sonido. Crea y carga un sonido desde la fuente con los parámetros opcionales initialStatusy .onPlaybackStatusUpdatedownloadFirst

El parámetro de fuente es la fuente del sonido. Soporta las siguientes formas:

• un diccionario del tipo { uri: 'https://path/to/file' }con una URL de red que apunta a un archivo de audio en la web;
• require('path/to/file')para un recurso de archivo de audio en el directorio del código fuente;
• un objeto Expo.Asset para un recurso de archivo de audio.

The initialStatusEl parámetro es el estado de reproducción inicial. PlaybackStatuses la estructura devuelta por todas las llamadas a la API de reproducción que describen el estado playbackObjecten ese momento. Es un diccionario con los pares clave-valor. Puede consultar todas las claves de PlaybackStatusen la documentación .

onPlaybackStatusUpdatees una función que toma un solo parámetro, PlaybackStatus. Se llama a intervalos regulares mientras el medio está cargado. El intervalo es de 500 milisegundos de forma predeterminada. En mi aplicación, lo configuré en un intervalo de 50 milisegundos para una actualización adecuada de la interfaz de usuario.

Antes de crear la instancia de sonido, deberá implementar el archivo onPlaybackStatusUpdate callback. Primero, agregue algunos accesorios al contenedor de la pantalla:

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

Ahora, implemente onPlaybackStatusUpdate. Deberá realizar varias validaciones basadas en PlaybackStatuspara una visualización adecuada de la interfaz de usuario:

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({ position, duration: status.durationMillis, shouldPlay: status.shouldPlay, isPlaying, isBuffering: status.isBuffering, }); } }, }),

Después de esto, debes implementar un controlador para la reproducción de audio. Si ya se creó una instancia de sonido, debe descargar los medios de la memoria llamando playbackInstance.unloadAsync()y borrando OnPlaybackStatusUpdate:

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

Llame al controlador loadPlaybackInstance(true)haciendo clic en el elemento de la lista. Cargará y reproducirá automáticamente el audio.

Agreguemos la funcionalidad de pausar y reproducir (alternar reproducción) al reproductor de audio. Si el audio ya se está reproduciendo, puedes pausarlo con la ayuda de playbackInstance.pauseAsync(). Si el audio está en pausa, puedes reanudar la reproducción desde el punto de pausa con la ayuda del playbackInstance.playAsync()método:

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

Cuando haces clic en el elemento de reproducción, debería detenerse. Si desea detener la reproducción de audio y ponerlo en la posición de reproducción 0, puede utilizar el método playbackInstance.stopAsync():

onStop: props = () = { if (props.playbackInstance() !== null) { props.playbackInstance().stopAsync(); props.setShowPlayer(false); props.setClassVariable({ playingAudio: null }); } },

El reproductor de audio también te permite rebobinar el audio con la ayuda del control deslizante. Cuando comiences a deslizarte, la reproducción de audio debe pausarse con playbackInstance.pauseAsync().

Una vez completado el deslizamiento, puede configurar la posición de reproducción de audio con la ayuda de playbackInstance.setPositionAsync(value)o reproducir el audio desde la posición establecida con playbackInstance.playFromPositionAsync(value):

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 }); } },

Después de esto, puede pasar los accesorios a los componentes MediaListy AudioPlayer(ver el archivo src/screens/LibraryScreen/LibraryScreenView).

Funcionalidad de grabación de video con React Native

Procedamos a la grabación de vídeo.

Usaremos Expo.Camerapara este propósito. Expo.Cameraes un componente de React que muestra una vista previa de la cámara frontal o trasera del dispositivo. Expo.CameraTambién puede tomar fotos y grabar videos que se guardan en el caché de la aplicación.

Para grabar video, necesita permiso para acceder a la cámara y al micrófono. Agreguemos la solicitud de acceso a la cámara como hicimos con la grabación de audio (en el archivo src/index.js):

await Permissions.askAsync(Permissions.CAMERA);

La grabación de video está disponible en la pantalla "Grabación de video". Después de cambiar a esta pantalla, la cámara se encenderá.

Puede cambiar el tipo de cámara (frontal o trasera) e iniciar la grabación de vídeo. Durante la grabación, puedes ver su duración general y puedes cancelarla o detenerla. Cuando finalice la grabación, tendrás que escribir el nombre del vídeo, tras lo cual se guardará en la tienda Redux .

Así es como se ve mi interfaz de usuario de grabación de video:

Escribamos la lógica de grabación de video usando Recompose en la pantalla del contenedor src/screens/RecordVideoScreen/RecordVideoScreenContainer.

Puede ver la lista completa de todos los accesorios del Expo.Cameracomponente en el documento .

En esta aplicación, usaremos los siguientes accesorios para Expo.Camera.

• type: El tipo de cámara está configurado (frontal o trasera).
• onCameraReady: esta devolución de llamada se invoca cuando se configura la vista previa de la cámara. No podrás comenzar a grabar si la cámara no está lista.
• style: Esto establece los estilos para el contenedor de la cámara. En este caso, el tamaño es 4:3.
• ref: Esto se utiliza para acceso directo al componente de la cámara.

Agreguemos la variable para guardar el tipo y el controlador para cambiarlo.

cameraType: Camera.Constants.Type.back,toggleCameraType: state = () = ({ cameraType: state.cameraType === Camera.Constants.Type.front ? Camera.Constants.Type.back : Camera.Constants.Type.front, }),

Agreguemos la variable para guardar el estado de lista de la cámara y la devolución de llamada para onCameraReady.

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

Agreguemos la variable para guardar la referencia y el configurador del componente de la cámara.

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

Pasemos estas variables y controladores al componente de la cámara.

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

Ahora, cuando llame toggleCameraTypedespués de hacer clic en el botón, la cámara cambiará de adelante hacia atrás.

Actualmente, tenemos acceso al componente de la cámara a través de la referencia y podemos iniciar la grabación de vídeo con la ayuda de cameraRef.recordAsync().

El método recordAsynccomienza a grabar un video para guardarlo en el directorio de caché.

Argumentos:

Opciones (objeto): un mapa de opciones:

• quality(VideoQuality): especifique la calidad del vídeo grabado. Uso: Cámara.Constantes.VideoQuality[''], valores posibles: para resolución 16:9 2160p, 1080p, 720p, 480p (solo Android) y para 4:3 (el tamaño es 640x480). Si la calidad elegida no está disponible para el dispositivo, elija la más alta.
• maxDuration(número): Duración máxima del vídeo en segundos.
• maxFileSize(número): Tamaño máximo de archivo de vídeo en bytes.
• mute(booleano): si está presente, el vídeo se grabará sin sonido.

recordAsyncdevuelve una promesa que se resuelve en un objeto que contiene la propiedad URI del archivo de vídeo. Deberá guardar el URI del archivo para poder reproducir el vídeo a partir de ahora. La promesa se devuelve si se invocó, se alcanzó stopRecordinguno de maxDurationy o se detuvo la vista previa de la cámara.maxFileSize

Debido a que la relación establecida para los lados de los componentes de la cámara es 4:3, configuremos el mismo formato para la calidad del video.

Así es como se ve el controlador para iniciar la grabación de video (consulte el código completo del contenedor en el repositorio):

onStartRecording: props = async () = { if (props.isCameraReady) { props.setState({ isRecording: true, fileUrl: null }); props.setVideoDuration(); props.cameraRef.recordAsync({ quality: '4:3' }) .then((file) = { props.setState({ fileUrl: file.uri }); }); } },

Durante la grabación de video, no podemos recibir el estado de la grabación como lo hicimos con el audio. Por eso he creado una función para establecer la duración del vídeo.

Para detener la grabación de video, tenemos que llamar a la siguiente función:

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

Consulta todo el proceso de grabación de vídeo.

Funcionalidad de reproducción de video con React Native

Puede reproducir el vídeo en la pantalla "Biblioteca". Las notas de video se encuentran en la pestaña "Video".

Para iniciar la reproducción del video, haga clic en el elemento seleccionado

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Cómo crear una aplicación de grabación de audio/vídeo con React Native: un tutorial en profundidad

Breve descripción de la aplicaciónCree funcionalidad de grabación de audio con React NativeReproducción de audio con React NativeFuncionalidad de grabació

programar

es

2025-01-14

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente