It-pipe streaming in libp2p 0.29

1

Hi,
I am trying to replicate the webcam example [https://github.com/prcolaco/webcam-stream-libp2p]. I am able to connect with with other peers but cannot stream data to other connected peers. I have used ‘it-pipe’ to stream data to other connected peers. I cannot figure out where am wrong. Please help me.
Also please suggest me a protocol for this application.

App.js

 node.connectionManager.on('peer:connect', (connection) => {
          console.log("Ccconnected to " + connection.remotePeer.toB58String())
          connpeer = connection.remotePeer.toB58String();
          ; (async () => {
            const { stream } = await connection.newStream('/secio/1.0.0');
            const p = pushable();
            pipe(p,stream);
            _OPEN_CONNECTIONS[id] = p;
            App.createCanvas(connection.remotePeer.toB58String());
          })();
        })

................................
................................

 node.handle('/secio/1.0.0', ({ stream }) => {
          console.log("enter in peer:" + connpeer)
          pipe(
            stream,
            async function (source) {
              for await (const data of source) {
                if (connpeer !== undefined) {
                  const canvas = App.getCanvas(connpeer);
                  if (canvas !== undefined) {
                    const dataToRender = new ImageData(new Uint8ClampedArray(data), SIZES.width, SIZES.height)
                    canvas.putImageData(dataToRender, 0, 0);
                  }

                }
              }
            }
          )
        })

Screenshot from 2020-10-19 12-15-46
Screenshot from 2020-10-19 12-15-461920×1080 395 KB

2

You shouldn’t be adding custom application code to existing protocols. /secio/1.0.0 is already taken by an internal protocol. This is the equivalent of doing an HTTP POST to the wrong endpoint. Try namespacing this to your application and the specific feature. ‘/myapp/canvas/1’ or something for example.

Do you have a log in your handler code?

pipe(
  stream,
  async function ( source ) {
    for await ( const data of source ) {
      console.log('Received data:', data.toString()). // <--- Are logs happening here
      if ( connpeer !== undefined ) {
        const canvas = App.getCanvas( connpeer );
        if ( canvas !== undefined ) {
          const dataToRender = new ImageData( new Uint8ClampedArray( data ), SIZES.width, SIZES.height )
          canvas.putImageData( dataToRender, 0, 0 );
        }
      }
    }
  }
)
3

Yes, am getting the log as shown in the screenschot.

Screenshot from 2020-10-22 17-52-03
Screenshot from 2020-10-22 17-52-031920×1080 558 KB

4

So you’re sending and receiving data fine. I assume the problem is that ImageData isn’t being formed properly.

data is actually going to a bufferlist, https://github.com/rvagg/bl, so you’ll need to join the underlying buffer arrays. I’m not very familiar with ImageData but based on the MDN docs you should be able to do something like:

const dataToRender = new ImageData( Uint8ClampedArray.from( data.slice() ), SIZES.width, SIZES.height )

data.slice() will return the underlying buffer so you should be able to just transform that into a clamped array via Uint8ClampedArray.from(data.slice())

5

@jacobheun Thank you so much for your help, that solved my issue.

But sometimes am getting the below error and the peer is disconnecting. Is it because of the connection establishment error?

Uncaught (in promise) RTCErrorEvent {isTrusted: true, code: “ERR_DATA_CHANNEL”, error: RTCError: Failure to send data, type: “error”, target: RTCDataChannel, …}

7

The above problem mostly happens in chrome browser while in firefox, it is working fine.
Anyone have any idea?