Uncaught Error : Callback was already called(exchange-files-in-browser)

[hapsody]

• Version:
  js-ipfs version: 0.36.2-
  Repo version: 7
  System version: x64/darwin
  Node.js version: v11.10.1

• Platform:
  Darwin neojuneui-MacBook-Pro-146.local 18.6.0 Darwin Kernel Version 18.6.0: Thu Apr 25 23:16:27 PDT 2019; root:xnu-4903.261.4~2/RELEASE_X86_64 x86_64
  Chrome 74.0.3729.169 (official build) 64-bit

• Subsystem:
  Maybe, it's about libp2p, if I'm correct.

Type: Question

Severity: High

Description:

Exchange-files-in-browser example doensn't work except case in localhost

Steps to reproduce the error:

I've checked a guide right below. It seems to be a perfect guide to me on the same machine.
https://github.com/ipfs/js-ipfs/tree/master/examples/exchange-files-in-browser

But If I tried to download a file on another machine. I got an error message from browser trying to connect
(A computer in the same local network. for example, A server node sharing a file is 192.168.0.22. request node trying to download the file is 192.168.0.33)

Error Message

[Jun 3, 06:11:35 pm] [contentScript]: [INFO]: Initialising TronLink
contentScript.js:2146 [Jun 3, 06:11:35 pm] [contentScript]: [INFO]: TronLink injected
3pageHook.js:38572 [Jun 3, 06:11:35 pm] [ProxiedProvider]: [INFO]: Provider initialised
3pageHook.js:38572 [Jun 3, 06:11:35 pm] [ProxiedProvider]: [INFO]: Received new node: https://api.trongrid.io
pageHook.js:38572 [Jun 3, 06:11:35 pm] [pageHook]: [INFO]: TronLink initiated
bundle.js:55459 Uncaught TypeError: Cannot read property 'generateKey' of undefined
at Object.exports.generateKey (bundle.js:55459)
at Object.generateKeyPair (bundle.js:55757)
at Object.exports.generateKeyPair (bundle.js:55219)
at bundle.js:101414
at nextTask (bundle.js:15583)
at exports.default (bundle.js:15593)
at Function.exports.create (bundle.js:101413)
at bundle.js:127522
at nextTask (bundle.js:15583)
at next (bundle.js:15590)
bundle.js:14046 Uncaught Error: Callback was already called.
at bundle.js:14046
at bundle.js:30301
at bundle.js:52749
at bundle.js:31733
at IDBTransaction.tx.onabort (bundle.js:51676)

[dirkmc]

@hapsody thanks for the bug report. I believe this is due to a restriction with WebCrypto where it will not load in a page unless that page is loaded over https, or the page is served from localhost: libp2p/js-libp2p-crypto#105

I guess the solution is that we should update the example to include a warning about this restriction. Would you be interested in opening a PR to do so?

[hapsody]

@dirkmc Thank you for your reply.

You mean that it's a known problem about libp2p/js-libp2p-crypto#105 not solved yet? so we can only change the guide yet. Do I understand correctly?

I don't know exactly about a sort of PR thing since I'm a newbie for opensource process.
Is there anything that I can help? If there is, I'd like to help.

[dirkmc]

@hapsody that's correct, it's a known issue.

If you would like to contribute a PR we would appreciate it.

To create a PR against this project, you can

1. Fork the project to your local github account
2. Clone the fork locally
3. Create a new branch, eg git checkout -b fix/examples-exchange-files-in-browser-docs
4. Make your changes
5. Commit your change, eg git commit -m "fix: exchange-files-in-browser documentation"
6. Push to your branch
7. Open a PR from your fork to ipfs/js-ipfs

[hapsody]

I think "PR" means "Pull Request"
Thanks for the details! I'll try it and reply.

[dirkmc]

Yes PR means Pull Request, you can find more information here:
https://help.github.com/en/articles/creating-a-pull-request-from-a-fork
Thanks for taking the time to contribute!