Add support for react-native

[Anton Mikhailov]

Please read first!

Please use discuss-webrtc for general technical discussions and questions.

• I have provided steps to reproduce (e.g. a link to a jsfiddle)
• I have provided browser name, version and adapter.js version
• This issue only happens when adapter.js is used

Note: If the checkboxes above are not checked (which you do after the issue is posted), the issue will be closed.

Versions affected: 7.7.1

react-native 0.71.4

adapter-rn.js (none)

Description

There's a package called [react-native-peerjs](https://github.com/Zemke/react-native-peerjs) which has list of necessary changes in order peerJs would work with [react-native-webrtc](https://github.com/react-native-webrtc/react-native-webrtc). What it does is uses peerConnection.onaddstream instead of peerConnection.ontrack, peerConnection.addStream instead of peerConnection.addTrack and declares that it does not support unified plan.

Steps to reproduce

1. Setup rn project: npx react-native@latest init AwesomeProject
2. install react react-native-webrtc: npm install react-native-webrtc
3. create shim.js: const {registerGlobals} = require('react-native-webrtc'); registerGlobals()
4. add to index.js: import './shim'
5. install peer js: npm install react-native-peerjs

Expected results

Actual results

[Philipp Hancke]

Recent react-native-webrtc versions should work out of the box.
https://github.com/Zemke/react-native-peerjs looks like it was last updated four years ago?

[Anton Mikhailov]

There is no navigator.userAgent and webrtc-adapter says it’s unsupported.

this line

[Anton Mikhailov]

Sorry, not unsupported, it just throws on trying to access userAgent.match, ‘cause userAgent is undefined

[Anton Mikhailov]

In rn environment ‘navigator.product === 'ReactNative'’ can be used to detect environment

[Anton Mikhailov]

Here is the patch to this package I made in the end.

diff --git a/node_modules/webrtc-adapter/dist/adapter_factory.js b/node_modules/webrtc-adapter/dist/adapter_factory.js
index 429b275..89bcf5c 100644
--- a/node_modules/webrtc-adapter/dist/adapter_factory.js
+++ b/node_modules/webrtc-adapter/dist/adapter_factory.js
@@ -170,6 +170,8 @@ function adapterFactory() {
       commonShim.shimSendThrowTypeError(window, browserDetails);
       commonShim.removeExtmapAllowMixed(window, browserDetails);
       break;
+    case 'ReactNative':
+      break;
     default:
       logging('Unsupported browser!');
       break;
diff --git a/node_modules/webrtc-adapter/dist/utils.js b/node_modules/webrtc-adapter/dist/utils.js
index 2ebf1e0..c695398 100644
--- a/node_modules/webrtc-adapter/dist/utils.js
+++ b/node_modules/webrtc-adapter/dist/utils.js
@@ -183,6 +183,8 @@ function detectBrowser(window) {
     // more complicated fallback to webkitRTCPeerConnection.
     result.browser = 'chrome';
     result.version = extractVersion(navigator.userAgent, /Chrom(e|ium)\/(\d+)\./, 2);
+  } else if (navigator.product && navigator.product === 'ReactNative') {
+    result.browser = 'ReactNative';
   } else if (navigator.mediaDevices && navigator.userAgent.match(/Edge\/(\d+).(\d+)$/)) {
     // Edge.
     result.browser = 'edge';