Simplest example possible

I’m pretty familiar with how to use webrtc in React, but new to using it with React Native.
To get a reference for how it works with react-native-webrtc I’ve created the simplest example possible. It uses RN 0.61.2 and functional components

https://github.com/baconcheese113/react-native-webrtc-minimal

Hope this helps someone

8 Likes

Hi! Hi!
I wanted to compile the project in order to launch it on iOS, but the build failed… it works well on your side?
Jerem’

Hey Jerem, I put it together on my Windows machine and since Android is my priority…I haven’t doubled back to get the iOS side working. Hopefully the changes will be somewhat similar to Android’s.

Unfortunately I didn’t think to make a commit before and after getting the Android folder set up :man_facepalming:

Butttt, I did do that in a different project https://github.com/baconcheese113/chat2getherRN/commit/9a904fa3434daa908c6e7f47e69655c98d087169 . If you get it working on iOS and want to throw a PR my way I’d gladly look over it! Otherwise it might be a few weeks before I prioritize it.

no problem I’ll look into it;) thanks for your reactivity! I’m learning ReactNative, and I’m trying to use web-rtc to make a peer-to-peer chat.

Well after a hard day of hard work, I managed to make your project compatible with ios (tested on an iPhone X). I’m doing a PR for you, I can also make your other project (the chat project) iOS compatible if you want?

Awesome! Yea, just PR me and I’ll test it out!

Hello BaconCheese, after I clone and run yarn to get all the modules, I’m getting the error below:

> pod install

Detected React Native module pod for react-native-webrtc

Analyzing dependencies

Fetching podspec for DoubleConversion from ../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec

Fetching podspec for Folly from ../node_modules/react-native/third-party-podspecs/Folly.podspec

Fetching podspec for glog from ../node_modules/react-native/third-party-podspecs/glog.podspec

[!] CocoaPods could not find compatible versions for pod “react-native-webrtc”:

In Podfile:

react-native-webrtc (from ../node_modules/react-native-webrtc)

Specs satisfying the react-native-webrtc (from …/node_modules/react-native-webrtc) dependency were found, but they required a higher minimum deployment target.

react-native-webrtc-minimal/ios on  master [?] took 2s

>

Did you faced that?

Hi , what about your PR for iOS version ? i also looking for version for ios…
@baconcheese113 @jerem17
Thanks!

@ORI I haven’t touched the ios side of it yet, if I receive a PR i’ll jump on it. Otherwise it’ll be a while.

Hi @baconcheese113, thanks for your posting.
I am working with voice/video call with react-native-webrtc.
Your repository works fine on my pc.
By the way, the problem is I am using RN 0.59.9 and React 16.8.3.
So it doesn’t work at const devices = await mediaDevices.enumerateDevices();
How can I fix this?

And I guess it is just for self-device. How can I implement it to call with another device?
Thanks

@meanking @ORI @Jonathansoufer

Finally got around to the iOS compatibility tonight. Should all work fine now, but I’ve only tested on the emulator which doesn’t have camera functionality…I’ll be able to test it more tmw.

1 Like

@baconcheese113 thanks!
I test that on my real iPhone iOS 13 device and it’s works !
I just have a question about the installation of the react-native-wrbrtc in your example project:

I look at the podFile and can’t see this row

pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'

did you install the library manually ? because I can’t see also the project under ‘libraries’ , so how actually it’s works?

thanks again!!

My understanding is that the 0.60 introduction of Autolinking has removed the need for manually setting dependencies in config/spec files if the library you’re importing has a podSpec in the root folder.

react-native-webrtc’s root podSpec is here https://github.com/react-native-webrtc/react-native-webrtc/blob/master/react-native-webrtc.podspec

1 Like

hi @baconcheese113, I just tried your sample project, and it work perfectly. But I want to ask how to integrate with different devices (with socket.io). As I know the example project can only be used for the same device.

Answered a similar question for another user here recently.

Basically your backend will manage a ledger of created rooms from talking to all the clients through socket connections. This is where you can manage who users connect with.

The main objective is to successfully get an IceCandidate with a session description protocol (sdp) object containing information about who they’re connecting to…to each of the clients in a room.

Believe it or not, the example project I made showcases all that ^ locally. I’m guessing that’s why it’s become so popular. Quite a bit easier to digest than a full stack example imo. Going from the local example to a networked one involves setting up a backend (like an nodejs + express + socketio server) and slightly changing the webRTC flow.

Locally it’s:
Nothing -> (press share video) -> Sharing local video -> (press start call) -> Call immediately negotiated and started

Networked it’s:
Nothing -> (press share video) -> Sharing local video -> (press start call) -> Server puts client in a socketio room and you broadcast you’re there and start negotiating calls if needed and wait for others to broadcast when they join

Here’s some of my code for how that negotiation works frontend

And how that negotiation works backend

I clone and run your project in android studio, this has same error in my post. When I try to run this demo https://github.com/DimitrisTzimikas/RCTWebRTCDemo2 , no error at all. Why?

I get the same warning. My guess is that it’s due to the manual linking in settings.gradle https://github.com/baconcheese113/react-native-webrtc-minimal/blob/master/android/settings.gradle#L5-L6

Should run fine regardless, if not or if you’re trying to run through android studio then you can try removing it.

Thank you, I changed like above and It’s run fine.