Web Real-Time Communications (WebRTC) is an open-source project created by Google to enable peer-to-peer communication in web browsers and mobile applications through application programming interfaces. This includes audio, video, and data transfers. React Native is a framework created by Facebook for easy cross-platform app development. For React-Native WebRTC Developers the WebRTC solutions have historically had a high barrier of entry. Expo has not yet (as of May 2020) integrated the react-native-webrtc native module into their framework despite having demand for it. Of course, it is not Expo's responsibility to implement the things that we claim for, that is not how open-source works.
If you want to have WebRTC on your React-Native project you must go with the official npx react-native CLI.
UsageNow, you can use WebRTC in React Native in the browser. In your index.ios.js/index.android.js, you require WebRTC to import RTCPeerConnection, RTCSessionDescription, etc.
iOS SetupiOS integration is a simple one because cocoapods will do most of the legwork. On the project's root, locate the podfile under ./ios/podfile, the first line is where we set the platform version, we will change this to version 10: platform: ios, '10.0.'
On the podfile, locate your project's target pods and add the following line:
pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc.'
Once you've made these changes save everything and open a terminal on your project's root and run npx pod-install.
Now that you've completed the first step, it's time to ask (nicely) for some permissions, locate the info.plist file under ./ios/myApp and add the following lines after the first
This completes the iOS setup portion. If you only work for the iOS platform, then all you need to do now is to run the project on an iPhone.
Android SetupThe setup process for Android is more complex but we will try to keep it as simple as possible.
On the project's root, locate gradle settings under ./android/settings.gradle and replace the last line with the following:
include ': WebRTCModule', ':app'
project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')
Locate the project's gradle properties under ./android/gradle.properties and add the following line:
Locate Android's build properties under ./android/build.gradle and look for the build script dependencies, make sure the tooling is on version 3.5.2:
On different build properties located under ./android/app/build.gradle locate the dependencies and add the following line within its scope:
Go into the project's Android MainApplication.java located at ./android/app/src/java/com/all/the/things/ and add the namespace for react-native-webrtc by adding the following import:
Then add the permissions on AndroidManifest.xml under ./android/app/src/main and the same scope as the
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
That completes the Android setup portion. You need to do now is to run the project on an Android phone.
CommunityEveryone is welcome to the Discourse community to discuss any React Native and WebRTC related topics and React Native WebRTC examples.
Community URL: https://react-native-webrtc.discourse.group/
CONCLUSIONSo basically all you need to do is to start WebRTC implementation on your React Native application today. If you can handle the uncertainty that comes with working with new technology, and want to develop React Native mobile applications with WebRTC in React Native, then you should go for this.
What OdiTek offers
Refer our Skills page:
We had a tough deadline to launch our .Net based application that processes a lot of data, and got very frustrated with our development agency we hired. Fortunately we got Oditek, and they took over seamlessly the product development, launched the app & continued feature development. Just awesome!
They were very attentive to our needs as clients and went out of the way to make sure our projects were taken care of. They were always able to get projects done in the specifications we requested. They are passionate about getting things done; I would definitely recommend them to lead any IT projects.
I worked with OdiTek on few high profile banking application projects. They did a fantastic job with web applications & manual testing on the VAS apps for two leading banks of UK that included rigorous UAT phases. I recommend them for any application development where security matters.
OdiTek is our extended team who works on our key software projects. They are dependable, good in collaboration and technically very much to the level what we expect a global team should be. They had transformed our web applications, CRM and added mobility to existing business platforms here.
It's been more than 4 years now that we are working with OdiTek on our cloud based web product development. It's been amazing working together, they are very competent on designing scalable, high performance apps. Their technical support is outstanding to say the least, even at odd hours.
I am a fan of Team OdiTek since 2014 and have worked on many product development projects together. Specially worth mentioning their deliveries on VAS Banking web application development & manual testing services for Smarta, UK. They are highly skilled & a professional team to work with.
OdiTek has been working on our Integrated Web-scale Mobile Platform i.e. Optimal Health since 2014. They are very professional and takes care of the requirements meticulously. They are technically very sound and sincere in ensuring quality & performance. Wonderful working with them!
You can trust the team, with minimum supervision you get the work done. They are honest, professional & committed to schedule & quality. I had been successfully running 3 business applications designed, developed and maintained by Oditek developers. It’s been a pleasure working with them.
OdiTek has been working in custom software development, including services for test automation. Many of them have worked with me in 2009-10 when I was R&D Manager in NetHawk India. They have great enthusiasm & a passion to excel in bringing customer success. Their work has been very impressive.
It's amazing to see these guys are turning their experience into a global delivery excellence at OdiTek. I am sure their past large scale product development experience will be handy to product companies. I would always recommend Oditek for software development, especially performance-driven solutions.