Are there limits around storage. Can I exclude audio from session recordings. You can use markers to specify certain points in the recording. If additional editing is required, you can use the WebEx Network Recording Player to convert the recording to a Glad Media File. Select the Start and End times, as well as the Interval for the time lapse. You can record the audio, video, desktop sharing, annotations, chat, and so on. Be aware that this will erase all of the existing contents of the microSD card, so be north to back up your files if there are any you want to save. The downloaded recording does not contain active speaker video camera feeds, the participant list, chat, and polling. Just start or join your WebEx meeting, event, or session, and then press the red Record button. For clips recording, you should tap the button again then it will save automatically.
React Native is a young technology, already gaining popularity among developers. It is a great option for smooth, fast, and efficient mobile app development. High-performance rates for mobile environments, code reuse, and a strong community: These are just some of the benefits React Native provides. In this guide, I will share some insights about the high-level capabilities of React Native and the products you can develop with it in a short period of time. Expo is an open-source toolchain built around React Native for developing iOS and Android projects with React and JavaScript. It provides a bunch of native APIs maintained by native developers and the open-source community. Let's get right to it. Brief Description Of The Application The application you will learn to develop is called a multimedia notebook. I have implemented part of this functionality in an online job board application for the film industry. The main goal of this mobile app is to connect people who work in the film industry with employers. They can create a profile, add a video or audio introduction, and apply for jobs. Check out how this app works by , but please note that opening the app on iOS with the latest expo version SDK 26 can't be performed falling back to Apple's guidelines. The iOS client will no longer be able to open projects published by other Expo users. The Android client will continue with the same functionality as always. First, download Expo to your mobile phone. You can also open the app in the browser. If you have a paid account on , visit it and enter the code in the field to open the project. However, I recommend that you download the Expo app and open this project on your mobile phone to check out all of the features of the video and audio recording app. You can find the full code for the media recording app in the on GitHub. Dependencies Used For App Development As mentioned, the media recording app is developed with React Native and Expo. Create Audio Recording Functionality With React Native First, it's important to сheck the , related to audio recording and playback. You can see all of the code in the. I recommend opening the code as you read this article to better understand the process. AppLoading and ask permission for recording by using Expo. After it is clicked, the audio recording begins, and you will find the current audio duration on the screen. Before you start recording, customize the audio mode with the help of Expo. This value defaults to false. This value defaults to false. Note: When this flag is set to true, playback may be routed to the phone receiver, instead of to the speaker. This value defaults to true. If false, audio from other apps will pause your audio. Note: You can learn more about the customization of AudioMode in. I have used the following values in this app: interruptionModeIOS: Audio. To implement this, let's write the handler setAudioMode with Recompose. Recording ; After creating the recording instance, you will be able to receive the status of the Recording with the help of recordingInstance. You can also set a function to be called at regular intervals with recordingInstance. To update the UI, you will need to call setOnRecordingStatusUpdate and set your own callback. To make the UI update valid, set the 200 milliseconds interval with the help of setProgressUpdateInterval: recording. It must be called before calling startAsync. This method can be used if the recording instance has never been prepared. The parameters of this method include such options for the recording as sample rate, bitrate, channels, format, encoder and extension. You can find a list of all recording options in this. After the recording has been prepared, you can start recording by calling the method recordingInstance. Before creating a new recording instance, check whether it has been created before. LibraryTab ; } }, Audio Playback With React Native You can play the audio on the screen with the saved audio notes. To start the audio playback, click one of the items on the list. Below, you can see the audio player that allows you to track the current position of playback, to set the playback starting point and to toggle the playing audio. If you want to display the player at any point of the application, I recommend writing the logic of the player and audio playback in Redux operations using redux-thunk. Let's customize the audio mode in the same way we did for the audio recording. First, set allowsRecordingIOS to false. As for audio playback, we need to create the sound instance. The second method is a static convenience method to construct and load a sound. It сreates and loads a sound from source with the optional initialStatus, onPlaybackStatusUpdate and downloadFirst parameters. The source parameter is the source of the sound. The initialStatus parameter is the initial playback status. PlaybackStatus is the structure returned from all playback API calls describing the state of the playbackObject at that point of time. It is a dictionary with the key-value pairs. You can check all of the keys of the PlaybackStatus in the. It is called at regular intervals while the media is in the loaded state. The interval is 500 milliseconds by default. In my application, I set it to 50 milliseconds interval for a proper UI update. Before creating the sound instance, you will need to implement the onPlaybackStatusUpdate callback. If a sound instance is already created, you need to unload the media from memory by calling playbackInstance. It will automatically load and play the audio. Let's add the pause and play functionality toggle playing to the audio player. If audio is already playing, you can pause it with the help of playbackInstance. If audio is paused, you can resume playback from the paused point with the help of the playbackInstance. If you want to stop audio playback and put it into the 0 playing position, you can use the method playbackInstance. When you start sliding, the audio playback should be paused with playbackInstance. After the sliding is complete, you can set the audio playing position with the help of playbackInstance. Video Recording Functionality With React Native Let's proceed to video recording. Camera for this purpose. To record video, you need permission for access to the camera and microphone. After switching to this screen, the camera will turn on. You can change the camera type front or back and start video recording. During recording, you can see its general duration and can cancel or stop it. When recording is finished, you will have to type the name of the video, after which it will be saved in the Redux store. You can see the full list of all props in the Expo. In this application, we will use the following props for Expo. You won't be able to start recording if the camera is not ready. In this case, the size is 4:3. Let's add the variable for saving the type and handler for its changing. Now, when calling toggleCameraType after clicking the button, the camera will switch from the front to the back. Currently, we have access to the camera component via the reference, and we can start video recording with the help of cameraRef. The method recordAsync starts recording a video to be saved to the cache directory. If the chosen quality is not available for the device, choose the highest one. The promise is returned if stopRecording was invoked, one of maxDuration and maxFileSize is reached or the camera preview is stopped. Because the ratio set for the camera component sides is 4:3, let's set the same format for the video quality. That's why I have created a function to set video duration. To start the video playback, click the selected item in the list. Then, switch to the playback screen, where you can watch or delete the video. The UI for video playback looks like this: To play back the video, use Expo. Video, a component that displays a video inline with the other React Native UI elements in your app. The video will be displayed on the separate screen, PlayVideo. You can check out all of the. In our application, the Expo. The same forms as for Expo. The function passes a single error message string as a parameter. When the video is uploaded, the play button should be rendered on top of it. When you click the play button, the video turns on and the native playback controls are displayed. Sound objects and Expo. Video components share a unified imperative API for media playback. That's why you can create custom controls and use more advanced functionality with the Playback API. Check out the video playback process: See the full code for the application in the. You can also install the app on your phone by using and check out how it works in practice. Wrapping Up I hope you have enjoyed this article and have enriched your knowledge of React Native. You can use this audio and video recording tutorial to create your own custom-designed media player. As you can see, there is a wide scope for imagination. If you have any questions about the process of developing an audio or video recording app with React Native, feel free to drop a comment below.
