A live video streaming app created with React Native and Mux.
Full tutorial is available at: http://pusher.com/tutorials/video-streaming-app-mux-react-native
- React Native development environment
- Node.js
- Yarn
- Mux Account
- Channels app instance
- ngrok account
- Clone the repo:
git clone https://github.com/anchetaWern/React-Native-Mux-Stream.git
cd RNStream
- Install the app dependencies:
yarn
- Eject the project (re-creates the
iosandandroidfolders):
react-native eject
- Link the packages:
react-native link @react-native-community/async-storage
react-native link @react-native-community/netinfo
react-native link react-native-config
react-native link react-native-gesture-handler
react-native link react-native-nodemediaclient
react-native link react-native-permissions
react-native link react-native-video
- Put additional config on
android/app/build.gradlefile:
apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" // add this
And android/build.gradle file:
allprojects {
repositories {
mavenLocal()
google()
jcenter()
maven {
url "$rootDir/../node_modules/react-native/android"
}
// add this:
maven {
url 'https://jitpack.io'
}
}
}
- Add permissions to
android/app/src/main/AndroidManifest.xmlfile:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnstreamer">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<!-- add the following -->
<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<!-- end -->
<application>
...
</application>
</manifest>
-
Update the
.envfile with your Mux and Channels app credentials, and theserver/.envfile with your Channels app credentials. -
Set up the server:
cd server
yarn
- Run the server:
yarn start
- Run ngrok:
./ngrok http 5000
-
Update the
src/screens/Index.jsfile with your ngrok HTTPS URL. -
Run the app:
react-native run-android
react-native run-ios
If this project helped you reduce time to develop, please consider buying me a cup of coffee :)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent