Multiple (failed) attempts to use easyRTC with react-js, please help!

[n...@natkuhn.com]

I have managed to put together a great prototype of a synchronized video-app using EasyRTC, which I appreciate very much.

However, for various reasons, I need to migrate the client to React, with the easyrtc server just doing signaling and not serving the HTTPS, as you suggest in the documentation. I have tried many approaches, and put a fair amount of time and research into rescuing each one, but without success. Details below.

I am using create-react-app, which seems to be pretty much the standard; it uses webpack to make a "bundle"

I am really hoping you (or someone) can come up with a solution. Probably the easiest thing would be to post a version of at least the client software on a CDN somewhere; then it could be linked to with a <script> tag.

It seems as though there are problems with the packaging of the code, at least as far as webpack is concerned.  You may or may not feel that this is worth tracking down, which is why the CDN option seems easiest. All of the following approaches have failed, and have resisted rescue attempts.

I was able to reproduce all of the below on a clean create-react-app install.

1. the most obvious thing is to run `npm install easyrtc --save`, and add "import easyrtc" to src/index.js. (Incidentally, it is great that you have an npm module, but I don't see this mentioned anywhere in your documentation.)

When I do that, the following errors are thrown in Chrome:

general_util.js:132 ERROR: Missing module 'async'

general_util.js:132 ERROR: Missing module 'colors'

general_util.js:132 ERROR: Missing module 'underscore'

general_util.js:137 ERROR: Required modules are not installed. Run 'npm install' from command line.

All three of these are present in the node_modules folder, and running `npm install` does nothing.  Google yielded someone else who had come up with the same missing module message, but the answer to his problem didn't seem germane here.  I just tried this on an absolutely clean test install and it reproduced the problem.

And incidentally, it usually throws an exception at line 138: "TypeError: process.exit is not a function".

I thought that this might be a problem with webpack related to https://github.com/webpack/webpack/issues/2030. create-react-app is supposed to be non-configurable, but I found this: https://jaketrent.com/post/change-webpack-config-create-react-app-without-ejecting/. There are a number of suggestions on the webpack issue 2030 page, but none of them solved the problem. I think I tried some other things as well. I finally gave up on this.

Incidentally, webpack throws a lot of warnings, mostly lint-related, but the following may get in the way of webpack producing a clean "bundle," as I understand it.

./src/easyrtc/lib/general_util.js

110:19-43 Critical dependency: the request of a dependency is an expression

./src/easyrtc/node_modules/colors/lib/colors.js

139:29-43 Critical dependency: the request of a dependency is an expression

./src/easyrtc/node_modules/colors/lib/extendStringPrototype.js

95:31-45 Critical dependency: the request of a dependency is an expression

2. So then I tried simply copying my "easyrtc" folder which I'd reconstituted from your zip archive into the create-react-app 'src' folder.  Exactly the same problem.

3. Then I thought maybe I can just take the client modules and it will work.  I started by copying easyrtc.js into easyrtc_client from the api folder.  Obviously that won't work, but I thought maybe I could build up a minimal working client, module by module.  I added `import easyrtc from './easyrtc_client/easyrtc.js';` to index.js. This generated a million errors, but if you put:

/* eslint no-undef: off, no-restricted-globals: off, indent: off, quotes: off, semi: off, no-unused-vars: off,

no-console: off, no-empty: off, no-extra-semi: off */

at the beginning, it actually compiles (only the first two are needed to get it to compile, the others just get rid of a lot of lint warnings).  Now the get-react-app welcome page comes up instead of telling you that modules are missing! (presumably because general_utils is not there). You do get a bunch of lint warnings, plus these which look potentially more significant.:

./node_modules/socket.io/lib/index.js

108:11-32 Critical dependency: the request of a dependency is an expression

./node_modules/ws/lib/BufferUtil.js

Module not found: Can't resolve 'bufferutil' in '/Users/nat/Code/test/node_modules/ws/lib'

./node_modules/ws/lib/Validation.js

Module not found: Can't resolve 'utf-8-validate' in '/Users/nat/Code/test/node_modules/ws/lib'

However, when I then add easyrtc.connect("dummyapp", null, null); (that is hard to read but it is a call to easyrtc.connect) to the index.js file, I get a 'TypeError: io.connect is not a function', displayed by easyrtc.  In my more extended example this was a LOGIN-ERROR, and I traced it to line 8273 of easyrtc.js.

That's when I gave up on this approach as well.

Thanks for your help in solving this problem.  If  I can make this work I can come up with a web app that will be very helpful to a lot of my colleagues.

Best, Nat Kuhn

[n...@natkuhn.com]

After looking again at the documentation, I see (under "Optional" at https://easyrtc.com/docs/easyrtc_with_other_servers.php) that the only necessary client files are at:

• /node_modules/easyrtc/api/
• /node_modules/socket.io/node_modules/socket.io-client/dist/

I put these in a folder "easyrtc" in the "public" directory of my create-react-app project and included the usual

<script type="text/javascript" src="/easyrtc/socket.io.js"></script>

<script type="text/javascript" src="/easyrtc/easyrtc.js"></script>

in my index.html, and it all worked.

It would be great if at some point you could fix the npm module so that it works out of the box with create-react-app.

Thanks! Nat

[faeze Nikoo]

hello

i want to use easrtc in react application .

but i cant 

and this approache is not ok for me.

can you help me please??