Implementation of latest react-native & react-native-webrtc

Is there an existing example which implement latest RN & RN-webrtc? If not is there a chance of creating one for an example boilerplate for beginners to find an easier way to join the webrtc world?

I only had successfully create a working example for version 1.67.1, but since then the API has change. If there is someone with the same problem please contact. I’m in for contributing as much as I can to create a simple example or a simple documentation for newcomers.

Thanks in advance.

2 Likes

The API has changed ever so slightly, and the changelog contains a list of those changes. What specific problem are you running into?

In my transition from 1.67.1 to 1.69.0 was getUserMedia witch changed to MediaDevice I believe. At least that was what I found, don’t know if there is something else that changed but I didn’t saw.

My point is if we (including my self) could create an example or a very simple doc with those implementations and how to use them.

I know that it’s time consuming to do something like that, but I found it was more time consuming trying to set up an example with code from 2016 with no comments or tuts to compile and run.

Maybe its just me who see this that way, any how. If there is a way to create an easier example or doc to help newcomers get into webrtc I would like to help.

The problem with (relatively) complex examples is that they tend to go out of sync, alas. Now there used to be a demo: https://github.com/oney/RCTWebRTCDemo but it’s outdated.

We can ask Oney to transfer the repo if someone volunteers to update it.

1 Like

What you say its true. I have used the RTCWebRTCDemo to create my project, but I had to research other repos and dig really deep into comments and issues to find the solutions. What I had in mind was an official repo like Oneys that we could update it whenever there are little changes with the library.

If what you say its possible it would be great, is there a way to communicate with Oney to do that, or to create your own example demo in the repo so we can contribute?

Thanks in advance.

That sounds good, but I can’t promise I’ll have the time to fix the demo with every change I make to the plugin. It would be great if you can helpo out with that.

I can get in touch with him. The best course of action here would be the following:

  • You for the project and work on your copy to bring it up to date
  • Once ready we ask Oney to transfer it
  • We apply your changes to the repo and grant you commit access as a maintainer

How does it sound?

Sounds great.

I’ll finish with the example for the main repo on github first and then I’ll try to implement 1.69.1 in Oneys Demo after.

I have a working example for RTCWebRTCDemo (react-nativer & server side) but only with 1.67.1, and no iOS configuration of the library.

When time comes can I ask you for advice on iOS side configuration with the library? (I’m inexperienced with Xcode lib implementation)

And an off topic question, is there a way to create a link for the library config like other repos, something like react-native-webrtc link

Sure, ping me on GitHub.

Not sure I follow. You mean to get react-native link working?

Sorry my bad, yea I meant react-native link react-native-webrtc, is it possible to implement something like that in the future (not by you necessarily).

I think it should almost work, otherwise it should be a minor fix, so yeah.

@saghul
So I finish the simple example witch implements the new API for rn-webrtc 1.69.1 with config for both iOS & Android. The example just open the phone camera and displays it. It also has three buttons to interact with the RTCView props. Pull is on github.

Now for the Oneys Demo.
I have a working example (phone & server side) but, the phone uses version rn-webrtc 1.67.1.
For the server side I don’t believe their must be any changes.

I will upload in my repo the working Demo with the old API (phone & server side) and if you have time you can check it to propose how to implement the new API.

I tried to do it myself but I’m currently stuck. I can’t stream devices image to browser neither the other way.

I’ll upload this repo too for testing if possible.

Thanks! I’ll take a look as soon as I can, but with the easter break around the corner that might slip until next week, sorry.

Please do, and let’s look at it together.

1 Like

RCTWebRTCDemo

Configured on Android
“react-native”: “0.57.8”
“react-native-webrtc”: “1.67.1”
“socket.io-client”: “2.2.0”

branch - master : contains the working code, similar to original
branch - twistcode: refactor code to es6, remove unnecessary code and logic

! note, I remove the datachannels for text exchange for simplicity and to have one problem at time (only camera stream)

RCTWebRCTDemo2

Configured on iOS/Android
“react-native”: “0.59.4”
“react-native-webrtc”: “1.67.1”
“socket.io-client”: “2.2.0”

The reason I’ve create this repository is to implement latest react-native with a working example for a server (for now I can do it with react-native-webrtc 1.67.1)

RCTWebRTCDemo-server

Here is Oneys server example.
socket.io”: “1.3.4”

branch - master : contains the working code, similar to original
branch - clearcode: refactor code to es6 (most of it), remove unnecessary code and logic

! note, I remove the datachannels for text exchange for simplicity and to have one problem at time (only camera stream)

rnWebRTC

Configured on iOS/Android
“react-native”: “0.59.4”
“react-native-webrtc”: “1.69.1”
“socket.io-client”: “2.2.0”

This is my example with the simple demo, but on branch - socketio I tried to implement the sockets to connect to the same server and failed.

1 Like

Hey @DimitrisTzimikas sorry I still had no time to look at this. I just had an idea while taking a shower :slight_smile: how about we work on a https://appr.tc client instead? It’s a pretty simple calling application and we wouldn’t need to have a backend or anything. Google uses if for verifying WebRTC functionality, to some extent.

The servoce itself is open source: https://github.com/webrtc/apprtc

It’s possible we run into interop issues due to plan B / unified, but I guess that adds to the motivation for getting it done :slight_smile:

Hello again! So you mean instead of oneys server demo to use apprtc and keep the RCTWebRTCDemo right?

We can use the original demo code as a starting point, yes, but modify it so it talks to the apprtc backend. Then we can add the project to the org as “rn-apprtc” for example.

Ok I get it. I will check the apprtc repo and test it.

For now I would like your advice, RCTWebRCTDemo2 works just fine with RCTWebRTCDemo-server.

But when I use the same logic in rnWebRTC (socketio branch) I can’t connect to RCTWebRTCDemo-server. I know for sure that server must change the logic and update dependencies, but it must not be that because it works with the other project. Is there any changes that must be applied in rnWebRTC due to new API?

** EDIT **
I’ve also saw mediasoup project which at least for now has good maintenance. Should it be a considuration too?

How to play the audio stream we receive with Incallmanager react native. Audio is not played with rtcview.

do you resolve this problem

I happy to contribute in this community even if I’m a newbie on React Native WebRTC

You can grab the samples here