# Simplest example possible

**URL:** <https://react-native-webrtc.discourse.group/t/simplest-example-possible/302>\
**Category:** General\
**Created:** [October 17, 2019, 5:04am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302 "2019-10-17T05:04:39Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![baconcheese113](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/baconcheese113/32/123_2.png) [@baconcheese113](https://react-native-webrtc.discourse.group/u/baconcheese113)\
**Post date:** [October 17, 2019, 5:04am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/1 "2019-10-17T05:04:39Z")

</div>

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](https://github.com/baconcheese113/react-native-webrtc-minimal)

Hope this helps someone

---

<div class="post-metadata">

**Author:** ![jerem17](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@jerem17](https://react-native-webrtc.discourse.group/u/jerem17)\
**Post date:** [October 28, 2019, 7:37pm UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/2 "2019-10-28T19:37:31Z")

</div>

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’

---

<div class="post-metadata">

**Author:** ![baconcheese113](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/baconcheese113/32/123_2.png) [@baconcheese113](https://react-native-webrtc.discourse.group/u/baconcheese113)\
**Post date:** [October 28, 2019, 9:00pm UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/3 "2019-10-28T21:00:53Z")

</div>

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 🤦‍♂️

Butttt, I did do that in a different project [https://github.com/baconcheese113/chat2getherRN/commit/9a904fa3434daa908c6e7f47e69655c98d087169](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.

---

<div class="post-metadata">

**Author:** ![jerem17](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@jerem17](https://react-native-webrtc.discourse.group/u/jerem17)\
**Post date:** [October 29, 2019, 12:06am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/4 "2019-10-29T00:06:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jerem17](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@jerem17](https://react-native-webrtc.discourse.group/u/jerem17)\
**Post date:** [October 29, 2019, 6:13pm UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/5 "2019-10-29T18:13:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![baconcheese113](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/baconcheese113/32/123_2.png) [@baconcheese113](https://react-native-webrtc.discourse.group/u/baconcheese113)\
**Post date:** [October 30, 2019, 3:12am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/6 "2019-10-30T03:12:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jonathansoufer](https://avatars.discourse-cdn.com/v4/letter/j/7bcc69/32.png) [@Jonathansoufer](https://react-native-webrtc.discourse.group/u/Jonathansoufer)\
**Post date:** [October 30, 2019, 9:11am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/7 "2019-10-30T09:11:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ORI](https://avatars.discourse-cdn.com/v4/letter/o/ecae2f/32.png) [@ORI](https://react-native-webrtc.discourse.group/u/ORI)\
**Post date:** [November 6, 2019, 7:29pm UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/8 "2019-11-06T19:29:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![baconcheese113](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/baconcheese113/32/123_2.png) [@baconcheese113](https://react-native-webrtc.discourse.group/u/baconcheese113)\
**Post date:** [November 7, 2019, 12:18am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/9 "2019-11-07T00:18:46Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![meanking](https://avatars.discourse-cdn.com/v4/letter/m/f9ae1b/32.png) [@meanking](https://react-native-webrtc.discourse.group/u/meanking)\
**Post date:** [November 14, 2019, 8:42pm UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/10 "2019-11-14T20:42:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![baconcheese113](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/baconcheese113/32/123_2.png) [@baconcheese113](https://react-native-webrtc.discourse.group/u/baconcheese113)\
**Post date:** [December 11, 2019, 5:41am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/11 "2019-12-11T05:41:24Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![ORI](https://avatars.discourse-cdn.com/v4/letter/o/ecae2f/32.png) [@ORI](https://react-native-webrtc.discourse.group/u/ORI)\
**Post date:** [December 14, 2019, 9:42pm UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/12 "2019-12-14T21:42:12Z")

</div>

@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

```auto
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!!

---

<div class="post-metadata">

**Author:** ![baconcheese113](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/baconcheese113/32/123_2.png) [@baconcheese113](https://react-native-webrtc.discourse.group/u/baconcheese113)\
**Post date:** [December 14, 2019, 11:28pm UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/13 "2019-12-14T23:28:33Z")

</div>

My understanding is that the 0.60 introduction of [Autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) 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](https://github.com/react-native-webrtc/react-native-webrtc/blob/master/react-native-webrtc.podspec)

---

<div class="post-metadata">

**Author:** ![isonnymichael](https://avatars.discourse-cdn.com/v4/letter/i/b5a626/32.png) [@isonnymichael](https://react-native-webrtc.discourse.group/u/isonnymichael)\
**Post date:** [January 19, 2020, 11:52am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/14 "2020-01-19T11:52:46Z")

</div>

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](http://socket.io)). As I know the example project can only be used for the same device.

---

<div class="post-metadata">

**Author:** ![baconcheese113](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/baconcheese113/32/123_2.png) [@baconcheese113](https://react-native-webrtc.discourse.group/u/baconcheese113)\
**Post date:** [January 20, 2020, 3:12am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/15 "2020-01-20T03:12:43Z")

</div>

Answered a similar question for another user [here](https://react-native-webrtc.discourse.group/t/testing-react-native-webrtc/436) 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)](https://webrtchacks.com/sdp-anatomy/) 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](https://github.com/baconcheese113/chat2getherRN/blob/master/src/helpers/socketHelper.js#L101)

[And how that negotiation works backend](https://github.com/baconcheese113/chat2gether/blob/master/server/src/socket.js#L3)

---

<div class="post-metadata">

**Author:** ![ViralS-Truongnh](https://avatars.discourse-cdn.com/v4/letter/v/9d8465/32.png) [@ViralS-Truongnh](https://react-native-webrtc.discourse.group/u/ViralS-Truongnh)\
**Post date:** [January 25, 2020, 4:30am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/16 "2020-01-25T04:30:53Z")

</div>

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](https://github.com/DimitrisTzimikas/RCTWebRTCDemo2) , no error at all. Why?

 ![Screen Shot 2020-01-25 at 11.30.40](https://global.discourse-cdn.com/free1/uploads/reactnativewebrtc1/original/1X/d81adc744a4470d547c2c9e8ed202c1367bb2f2a.png)

---

<div class="post-metadata">

**Author:** ![baconcheese113](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/baconcheese113/32/123_2.png) [@baconcheese113](https://react-native-webrtc.discourse.group/u/baconcheese113)\
**Post date:** [January 25, 2020, 9:58pm UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/17 "2020-01-25T21:58:13Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![ViralS-Truongnh](https://avatars.discourse-cdn.com/v4/letter/v/9d8465/32.png) [@ViralS-Truongnh](https://react-native-webrtc.discourse.group/u/ViralS-Truongnh)\
**Post date:** [January 26, 2020, 10:39am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/18 "2020-01-26T10:39:05Z")

</div>

![Screen Shot 2020-01-26 at 17.38.12](https://global.discourse-cdn.com/free1/uploads/reactnativewebrtc1/original/1X/7de67706e216eb527de21063450b27b6cf51217a.png)

---

<div class="post-metadata">

**Author:** ![ViralS-Truongnh](https://avatars.discourse-cdn.com/v4/letter/v/9d8465/32.png) [@ViralS-Truongnh](https://react-native-webrtc.discourse.group/u/ViralS-Truongnh)\
**Post date:** [January 26, 2020, 10:39am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/19 "2020-01-26T10:39:37Z")

</div>

![Screen Shot 2020-01-26 at 17.38.22](https://global.discourse-cdn.com/free1/uploads/reactnativewebrtc1/original/1X/83b26413d9d471209adeab4ec72f4c61ac9deb14.png)

---

<div class="post-metadata">

**Author:** ![ViralS-Truongnh](https://avatars.discourse-cdn.com/v4/letter/v/9d8465/32.png) [@ViralS-Truongnh](https://react-native-webrtc.discourse.group/u/ViralS-Truongnh)\
**Post date:** [January 26, 2020, 11:07am UTC](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302/20 "2020-01-26T11:07:23Z")

</div>

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

[Next page](https://react-native-webrtc.discourse.group/t/simplest-example-possible/302.md?page=2)
