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