Can't connect peers on in-browser environment

[fenicento]

Hi, I'm trying to build a simple test app with OrbitDB, relying only on the browser. This is my code:

import { createOrbitDB } from '@orbitdb/core';
import { createLibp2p } from 'libp2p';
import { createHelia } from 'helia';
import { identify } from '@libp2p/identify';
import { webSockets } from '@libp2p/websockets';
import { webRTC } from '@libp2p/webrtc';
import { all } from '@libp2p/websockets/filters';
import { noise } from '@chainsafe/libp2p-noise';
import { yamux } from '@chainsafe/libp2p-yamux';
import { gossipsub } from '@chainsafe/libp2p-gossipsub';
import { circuitRelayTransport } from '@libp2p/circuit-relay-v2';

const customConfig = {
    addresses: {
        listen: ['/webrtc']
    },
    transports: [
        webSockets({
            filter: all
        }),
        webRTC(),
        circuitRelayTransport({
            discoverRelays: 1
        })
    ],
    connectionEncryption: [noise()],
    streamMuxers: [yamux()],
    connectionGater: {
        denyDialMultiaddr: () => false
    },
    services: {
        identify: identify(),
        pubsub: gossipsub({
            allowPublishToZeroTopicPeers: true,
            emitSelf: true
        })
    }
};

export const initNewDb = async (name) => {
	
	const libp2p = await createLibp2p({ ...customConfig });
	const ipfs = await createHelia({ libp2p });
	const orbitdb = await createOrbitDB({ ipfs });
	let mydb = await orbitdb.open(name, { type: 'documents' });
	
        //return db address
	console.log(mydb.address);
        const addr =mydb.address;
        return addr;
}

export const openDb = async (address) => {
        console.log("opening existing db ", address)
        const libp2p = await createLibp2p({ ...customConfig });
	const ipfs = await createHelia({ libp2p });
        const orbitdb = await createOrbitDB({ ipfs });
        console.log("just before open");
        let mydb = await orbitdb.open(address);
    
        // OPEN DB AND READ DOCS
        console.log("opened mydb", mydb);
        for await (const record of mydb.iterator()) {
            console.log(record)
         }

}

Basically I use the initNewDB function to create a new db. In another piece of code I'm putting some documents in and everything works as expected.

In another browser instance I'm running the openDb function with the address of the first instance as parameter (e.g. /orbitdb/zdpuAkcwe7f3qrHSwmqKeUa55RJVC4pJxYv6YbYCSVypXUgGc). The function hangs for a while on

let mydb = await orbitdb.open(address);

and then in the browser console i get:

Uncaught (in promise) AggregateError: All promises were rejected

the error itself doesn't provide much information and I'm struggling to find some working examples for my case. Is there any configuration problem or is it a bug?

Thanks

[haydenyoung]

If you are opening a remote db, the error indicates that the remote db cannot be reached.

In a browser environment, peers cannot find each other directly, they need a relay to help each browser peer find the other.

You can find more information about peer connections in our docs and also within Libp2p's own documentation.

The easiest way to deploy a relay node for OrbitDB is via this code base. Once you have a local copy, run:

npm i
npm run

You will see that one of the options runs a webrtc server.

npm run webrtc

A number of addresses will be printed out. Have your browser peers use one of these addresses to aid in the connection process. Again, the browser-to-browser connection documentation should help walk you through a basic process.

Unfortunately, the connection process for Libp2p and, by extension, OrbitDB is laborious but we hope to make this easier with projects such as orbitdb/quickstart and orbitdb/voyager. However, with limited time and budget, some of these features will take time to develop.

[LinSoap]

You can refer to this libp2p official WebRTC article, the browser needs to connect through the relay node, by referring to this article to improve your libp2p configuration, you can solve this problem.
https://docs.libp2p.io/guides/getting-started/webrtc/

[haydenyoung]

Closing this due to inactivity but feel free to re-open if you are still having issues.