mediasoupClient study notes [four] Consumer data consumer

I have already introduced the Producer. Let’s talk about the Consumer today. Before we officially enter, we need to say that
Producer and Consumer are not users here. The same user can create consumers and producers .
Just for example. WeChat voice chat, two people can talk at the same time can also hear each other's words.
Here is the need to change the thinking.

Another point worth noting is that in the entire official demo, the signaling service only undertakes data transmission, and should not be confused with transport.

The overall process and process (the process only lists the important links)

1. (Producer side) client initialization
2. (Producer side) Create transport; createSendTransport is created and listens to related events. The connect and produce events need to send related data through websocket
3. The produce() mentioned in the previous article will trigger the produce event of transport, and then send relevant data through the signaling service
4. (Consumer side) The createRecvTransport event listens to connect in the same step above
5. (Signaling service) After receiving the connect and produce channel creation and server-side mediasoup operations, it will also forward the produced data to the consumer (more on this later in the article)
6. (Consumer) Receive the data of the signaling service and consume it

The complete process is relatively brief. If you want technical details, you need to analyze the code.

Back to the topic of this article

In fact, it is the sixth step above. After the client
signaling server receives the producer data, it needs to find the corresponding consumer and forward the data.

The code given on the official website is not difficult to see that it is actually very short and clear. Here I will point it out

mySignaling.on('newConsumer', async (data) =>
{
    
    
  const consumer = await transport.consume(
    {
    
    
      id            : data.id,
      producerId    : data.producerId,
      kind          : data.kind,
      rtpParameters : data.rtpParameters
    });

  // Render the remote video track into a HTML video element.
  const {
    
     track } = consumer;

  videoElem.srcObject = new MediaStream([ track ]);
});

• transport is actually the consumer channel createRecvTransport()
• Track acquisition of media data consumption during conversion

In fact, there are not too many difficulties in consumption. The previous article and this article belong to some relevant knowledge points of the client. Later, I will have time to update the related processing procedures of the server.

The code word is not easy, thanks for your support