how to get RTCPeerConnection？

[fastalks]

Version:

libp2p v2.0.2

Platform:

windows

Subsystem:

WebRTC

Description:

a relay connects two nodes. The listener first discovers a relay server and makes a reservation, then the dialer connects via the relayed address. now i wanna get the RTCPeerConnection to send media stream from the listener to the dialer。

import { noise } from '@chainsafe/libp2p-noise'
import { yamux } from '@chainsafe/libp2p-yamux'
import { echo } from '@libp2p/echo'
import { circuitRelayTransport, circuitRelayServer } from '@libp2p/circuit-relay-v2'
import { identify } from '@libp2p/identify'
import { webRTC } from '@libp2p/webrtc'
import { webSockets } from '@libp2p/websockets'
import  as filters from '@libp2p/websockets/filters'
import { WebRTC } from '@multiformats/multiaddr-matcher'
import delay from 'delay'
import { pipe } from 'it-pipe'
import { createLibp2p } from 'libp2p'
import type { Multiaddr } from '@multiformats/multiaddr'

// the relay server listens on a transport dialable by the listener and the
// dialer, and has a relay service configured
const relay = await createLibp2p({
  addresses: {
  listen: ['/ip4/127.0.0.1/tcp/0/ws']
  },
  transports: [
    webSockets({filter: filters.all})
  ],
  connectionEncrypters: [noise()],
  streamMuxers: [yamux()],
  services: {
    identify: identify(),
    relay: circuitRelayServer()
  }
})

// the listener has a WebSocket transport to dial the relay, a Circuit Relay
// transport to make a reservation, and a WebRTC transport to accept incoming
// WebRTC connections
const listener = await createLibp2p({
  addresses: {
  listen: ['/webrtc']
  },
  transports: [
    webSockets({filter: filters.all}),
    webRTC(),
    circuitRelayTransport({
      discoverRelays: 1
    })
  ],
  connectionEncrypters: [noise()],
  streamMuxers: [yamux()],
  services: {
    identify: identify(),
    echo: echo()
  }
})

// the listener dials the relay (or discovers a public relay via some other
// method)
await listener.dial(relay.getMultiaddrs(), {
  signal: AbortSignal.timeout(5000)
})

let webRTCMultiaddr: Multiaddr | undefined

// wait for the listener to make a reservation on the relay
while (true) {
  webRTCMultiaddr = listener.getMultiaddrs().find(ma => WebRTC.matches(ma))

  if (webRTCMultiaddr != null) {
    break
  }

  // try again later
  await delay(1000)
}

// the dialer has Circuit Relay, WebSocket and WebRTC transports to dial
// the listener via the relay, complete the SDP handshake and establish a
// direct WebRTC connection
const dialer = await createLibp2p({
  transports: [
    webSockets({filter: filters.all}),
    webRTC(),
    circuitRelayTransport()
  ],
  connectionEncrypters: [noise()],
  streamMuxers: [yamux()],
  services: {
    identify: identify(),
    echo: echo()
  }
})

// dial the listener and open an echo protocol stream
const stream = await dialer.dialProtocol(webRTCMultiaddr, dialer.services.echo.protocol, {
  signal: AbortSignal.timeout(5000)
})

// we can now stop the relay
await relay.stop()

// send/receive some data from the remote peer via a direct connection
await pipe(
  [new TextEncoder().encode('hello world')],
  stream,
  async source => {
    for await (const buf of source) {
      console.info(new TextDecoder().decode(buf.subarray()))
    }
  }
)

[wemeetagain]

I think you should be able to check the peerConnection property on the connection. (It won't be typesafe since the underlying types aren't exposed, just cast to any)
See https://github.com/libp2p/js-libp2p/blob/main/packages/transport-webrtc/src/maconn.ts#L11

eg:

const connection = dialer.getConnections(peerIdFromString(webRTCMultiaddr.getPeerId()))[0]
const rtcPeerConnection = (connection as any).peerConnection as RTCPeerConnection

[fastalks]

I agree with you ,it`s not typesafe . Is there another way to acheive media stream transporting? because according to webrtc protocol RTCPeerConntion is needed .

import { desktopCapturer } from 'electron';
import { RTCPeerConnection } from 'wrtc'; 

const pc = new RTCPeerConnection();


const dataChannel = pc.createDataChannel('screen-stream');


const captureScreen = async () => {
  const sources = await desktopCapturer.getSources({ types: ['screen'] });
  const screenSource = sources[0];

  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          chromeMediaSourceId: screenSource.id,
        },
      },
    });

 
    stream.getTracks().forEach((track) => {
      pc.addTrack(track, stream);
    });
  } catch (err) {
    console.error('Error capturing screen:', err);
  }
};

[wemeetagain]

As far as I know, there's no way (and no plan) to expose the underlying RTCPeerConnection in libp2p in a typesafe way. But just because something isn't typesafe, doesn't mean it can't be done safely. If you can analyze the implementation and pin the exact version, then your application can have assurances that it won't break.

The reason for not exposing the underlying RTCPeerConnection is that we treat all connections / streams / etc as opaque and simply fulfilling the interfaces in @libp2p/interface.
Also @achingbrain has made a valid point that exposing the inner classes / types will make breaking releases much more common.

[ZababurinSergei]

I am creating a connection with another peer.

const stream = await self.libp2p.dialProtocol(ma, protoAudio, {signal});

I'm getting connections

const connections = self.libp2p.getConnections(peerIdFromString(ma.getPeerId()))

I'm trying to get peerConection but I get undefined values.

connections[0].peerConnection

Why might there not be peerConnection ?

I have two connections

How can add audio stream ? It is required there RTCPeerConnection

https://webrtc.org/getting-started/remote-streams

[fastalks]

I am creating a connection with another peer.

const stream = await self.libp2p.dialProtocol(ma, protoAudio, {signal});

I'm getting connections

const connections = self.libp2p.getConnections(peerIdFromString(ma.getPeerId()))

I'm trying to get peerConection but I get undefined values.

connections[0].peerConnection

Why might there not be peerConnection ?

I have two connections

How can add audio stream ? It is required there RTCPeerConnection

https://webrtc.org/getting-started/remote-streams

Have you solved it？

[fastalks]

let multiaddrsArray = [
xxx,
/ip4/x.x.x.x/tcp/1333/ws/p2p/QmcrQZ6RJdpYuGvZqD5QEHAv6qX4BrQLJLQPQUrTrzdcgm/p2p-circuit/webrtc/p2p/12D3KooWGC8wpnpT1ENeyZ9Umxss9wWT7t4HxhbqZYbQPiiNk7FY
xxxx
]

 const stream = await libp2p.dialProtocol(multiaddrsArray[1], '/screenshare/1.0.0');
    console.log(stream)
    for( const connection of libp2p.getConnections()) {
      const rtcPeerConnection = (connection as any).peerConnection as RTCPeerConnection
      console.log(rtcPeerConnection)
    }

rtcPeerConnection is undefined

dependencies in package.json

"dependencies": {
"@chainsafe/libp2p-gossipsub": "^14.0.0",
"@chainsafe/libp2p-noise": "^16.0.0",
"@chainsafe/libp2p-yamux": "^7.0.0",
"@electron/notarize": "^2.3.2",
"@libp2p/bootstrap": "^11.0.1",
"@libp2p/circuit-relay-v2": "^2.0.1",
"@libp2p/echo": "^2.0.1",
"@libp2p/identify": "^3.0.1",
"@libp2p/interface": "^2.0.1",
"@libp2p/kad-dht": "^13.0.1",
"@libp2p/mdns": "^11.0.1",
"@libp2p/peer-id": "^4.2.4",
"@libp2p/pubsub-peer-discovery": "^11.0.0",
"@libp2p/tcp": "^10.0.1",
"@libp2p/webrtc": "^5.0.2",
"@libp2p/websockets": "^9.0.1",
"electron-debug": "^3.2.0",
"electron-log": "^4.4.8",
"electron-updater": "^6.1.4",
"libp2p": "^2.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"uint8arrays": "^5.1.0"
}

Can anyone help me?

[achingbrain]

Dialing a WebRTC address creates a CircuitRelay connection first to perform the SDP handshake so getConnections may return multiple addresses after the dial, some CircuitRelay, some WebRTC.

Either dial the address directly:

const connection = await node.dial(multiaddrsArray[1])
const stream = await connection.newStream('/screenshare/1.0.0')
const rtcPeerConnection = (connection as any).peerConnection as RTCPeerConnection

or use something like @multiformats/multiaddr-matcher to filter your connection list to only contain WebRTC connections:

import { WebRTC } from '@multiformats/multiaddr-matcher'

const conns = libp2p.getConnections()
  .filter(conn => WebRTC.matches(conn.remoteAddr))

for(const connection of conns) {
    const rtcPeerConnection = (connection as any).peerConnection as RTCPeerConnection
    console.log(rtcPeerConnection)
}

[fastalks]

this is my libp2p code

const createLibp2pNode = async () => {
  const libp2p = await createLibp2p({
    start:false,
    addresses: {
      listen: ['/webrtc']
    },
    transports: [
      // support dialing/listening on WebRTC addresses
      webRTC({
        rtcConfiguration: {
          iceServers: [
            {
              // STUN servers help the browser discover its own public IPs
              urls: ['stun:stun.l.google.com:19302', 'stun:83.229.121.237:3478'],
            },
            {
              urls: 'turn:83.229.121.237:3478',
              username: 'username',            
              credential: 'password',       
            }
          ]
        }
      }),
      webSockets({
        // this allows non-secure WebSocket connections for purposes of the demo
        filter: filters.all
      }),
      circuitRelayTransport({
        discoverRelays: 1
      }) 
    ],
    streamMuxers: [
      yamux()
    ],
    connectionEncrypters: [
      noise()
    ],
    peerDiscovery: [
      bootstrap({
        list: [
          '/ip4/83.229.121.237/tcp/1333/ws/p2p/QmcrQZ6RJdpYuGvZqD5QEHAv6qX4BrQLJLQPQUrTrzdcgm'
        ]
      })

    ],
    connectionGater: {
      denyDialMultiaddr: () => {
        // by default we refuse to dial local addresses from browsers since they
        // are usually sent by remote peers broadcasting undialable multiaddrs and
        // cause errors to appear in the console but in this example we are
        // explicitly connecting to a local node so allow all addresses
        return false
      }
    },
    services:{
      identify: identify(),
      dht:kadDHT({
        validators: {
          d: () => {
            return true // this record is always valid
          }
        },
        selectors: {
          d: () => {
            return 0    // when multiple records are found for a given key, just select the first one
          }
        }
      })
    }
  });
  return libp2p;
}

dial the address directly:

    console.log(multiaddrsArray)
    const connection = await libp2p?.dial(multiaddrsArray[1])
    const stream = await connection.newStream('/screenshare/1.0.0')
    console.log(stream)
    console.log(connection)
    const rtcPeerConnection = (connection as any).peerConnection as RTCPeerConnection
    console.log(rtcPeerConnection)
 

i got these logs

and another way

 const stream = await libp2p.dialProtocol(multiaddrsArray[1], '/screenshare/1.0.0');
    console.log(stream)
    const conns = libp2p.getConnections()
    .filter(conn => WebRTC.matches(conn.remoteAddr))

    for(const connection of conns) {
        console.log(connection)
        const rtcPeerConnection = (connection as any).peerConnection as RTCPeerConnection
        console.log(rtcPeerConnection)
    }

got these logs

[fastalks]

The peerConnection is still undefined