Error when closing local Consumer and invoking Transport.consume(...) again

I might have a wrong understanding fo the local consumer create with the below code

const consumer: mediasoupClientTypes.Consumer = await this.recvTransport?.consume(
        {
          id,
          producerId,
          kind,
          rtpParameters,
          appData: { ...appData, peerId },
        }
      )

This works every time I close and open a view (reactjs component) showing the stream. Now, I have the impression that this is creating a connection to the server and since closing the view I donā€™t need this to waste bandwidth why not close the local consumer; so I am doing the below in my client.

const localConsumers = Array.from(this.consumers.values())
localConsumers.forEach((c) => c.close())
this.consumers = new Map()

But when I reopen the view I get the below and canā€™t seem to understand what is it asking; Iā€™d normally assume here that it should just create a new consuming connection.

The error I see in the web console.

Uncaught (in promise) TypeError: Cannot read property 'push' of undefined
    at OfferMediaSection.planBReceive (MediaSection.js:415)
    at RemoteSdp.receive (RemoteSdp.js:130)
    at Safari12.receive (Safari12.js:338)
    at Object.task (Transport.js:303)
    at AwaitQueue.<anonymous> (index.js:128)
    at Generator.next (<anonymous>)
    at index.js:8
    at new Promise (<anonymous>)
    at push../node_modules/awaitqueue/lib/index.js.__awaiter (index.js:4)
    at AwaitQueue.executeTask (index.js:123)
    at AwaitQueue.<anonymous> (index.js:115)
    at Generator.next (<anonymous>)
    at index.js:8
    at new Promise (<anonymous>)
    at push../node_modules/awaitqueue/lib/index.js.__awaiter (index.js:4)
    at AwaitQueue.next (index.js:109)
    at index.js:79
    at new Promise (<anonymous>)
    at AwaitQueue.<anonymous> (index.js:68)
    at Generator.next (<anonymous>)
    at index.js:8
    at new Promise (<anonymous>)
    at push../node_modules/awaitqueue/lib/index.js.__awaiter (index.js:4)
    at AwaitQueue.push (index.js:57)
    at Transport.consume (Transport.js:298)

Closing a local consumer will not make mediasoup to stop sending its RTP to the receiver.

Other than that, Iā€™m afraid there is some bug in your code, not in mediasoup-client.

So actually thereā€™s no performance gain if I do it. Do I get any hit if I invoke Transport.consume(ā€¦) every time the view reopened?

That might be true but when logging all parameters passed in this call except appData which could be undefined canā€™t seem to find what else is undefined. If I donā€™t close the consumers and set the ā€˜consumersā€™ instance field to a new Map() works fine.

I cannot help you with your frontend app, sorry. I donā€™t know what ā€œthe view reopenedā€ means and I wonā€™t comment about that. Please check the mediasoup and mediasoup-client API and use them as per your app needs and design.

I understand you canā€™t help me about my client reactjs app, Iā€™d appreciate your comment on this? Wondering if calling Transport.consume(ā€¦) for the same remote consumer ID is a performance hit client side?

Pause the server side consumer when its view is hidden and resume it when it becomes visible again.

I insist: go to the mediasoup and mediasoup-client API documentation and read their Consumer API.

Thanks for the tip, that makes complete sense. Will continue checking the documentation, .close() didnā€™t really give me info if closing the local consumer will also close the remote too so I was just trying thing.

What did you expect? As the documentation says, actions in client do not cause the same action in server (and vice-versa). You must signal them from one to each other.

1 Like