Screen Recorder

This project is set up using create-react-native-app by facebook.

Objective

To enable react native app to make use of native modules, in this case, screen recording module.

Accomplishement

The screen recording feature is able to run on both platforms but the implementation is quite different on each platform.

iOS

ASScreenRecorder is included as an external library to handle the screen recording function. All I need to do is to create RecorderManager which exports the "start" and "stop" module functions for react-native app to call.

The output video will be saved into iOS camera roll, therefore CameraRoll module (which is available from react-native) is used to retrieve the video*.

* In this app, it's naively assumed that the recording is always the latest video in the camara roll.

Android

There seems no libraries similar to ASScreenRecorder on Android and due to the lack of experience on native app development, I have to heavily rely on other people's work to come out with a solution for Android.

To implement screen recording on Android, multiple classes from multiple android packages have to be imported, such as MediaProjection, VirtualDisplay, MediaRecorder and etc. The implementation details are mainly in MainActivity.java.

The output video is stored in external storage of Android for the time being (that means it may not work on devices without external storage). Unlike the implementation on iOS which generate a new copy of video file for each recording session, the same video file will be overwritten again and again on Android with current implementation.

Video playing

Initially since there's only one copy of the video all the time, the file path to the video is deterministic, therefore, a package called react-native-fs is used to obtain the full path of the video from the device and supply to the VideoPlayer component to play.

After exploring "Sending Events to JavaScript", the file path of the video is sent back to react side by emitting respective event. Therefore, react-native-fs is no longer needed and the react side also does not need to memorize the file path anymore.

References

http://www.truiton.com/2015/05/capture-record-android-screen-using-mediaprojection-apis/

https://github.com/vinceyuan/ReactRecorder

https://medium.com/jamesob-com/recording-your-android-screen-7e0e75aae260

https://medium.com/@wenchihhsieh/how-to-record-screen-in-android-ece7eff6bb77

How to run this project locally

Run npm install to install all the dependencies.

Available Scripts

In the project directory, you can run:

npm run ios

Open the app in the iOS Simulator if you're on a Mac and have it installed.

npm run android

Open the app on a connected Android device or emulator.