Why is video not displaying when user joins room?

So, I have an adaptation of https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms working in vanilla JS that I am attempting to adapt to use React. Instead of every user being a broadcaster, in my version, only the room creator is the broadcaster.

I've hit an issue. In the React version, when a viewer navigates to the room, they are not receiving the stream! I have no idea why since they use the same RoomClient class: https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms/blob/master/public/RoomClient.js

This line const consumer = await this.consumerTransport.consume({ id, producerId, kind, rtpParameters, codecOptions, }); seems to be causing the problem, since the log following it doesn't get printed. Inside the consume function, my log that says 'hi' is executed, but 'blah' is not. Here is a screenshot of the client console:

The most important functions are found below. For the entire class, please click the github link above.

  async consume(producer_id) {
    //let info = await roomInfo()
    console.log('consume ', producer_id);

    this.getConsumeStream(producer_id)
.then(result => {
    console.log('hi')
    return result
})      .then(
        function ({ consumer, stream, kind }) {
          console.log('blah');
          this.consumers.set(consumer.id, consumer);

          let elem;
          console.log('clg kind === ', kind);
          if (kind === 'video') {
            console.log('cons vid');
            elem = document.createElement('video');
            elem.srcObject = stream;
            elem.id = consumer.id;
            elem.playsinline = false;
            elem.autoplay = true;
            elem.className = 'vid';
            this.remoteVideoEl.appendChild(elem);
          } else {
            elem = document.createElement('audio');
            elem.srcObject = stream;
            elem.id = consumer.id;
            elem.playsinline = false;
            elem.autoplay = true;
            this.remoteAudioEl.appendChild(elem);
          }

          consumer.on(
            'trackended',
            function () {
              this.removeConsumer(consumer.id);
            }.bind(this)
          );
          consumer.on(
            'transportclose',
            function () {
              this.removeConsumer(consumer.id);
            }.bind(this)
          );
        }.bind(this)()
      );
  }

  async getConsumeStream(producerId) {
    const { rtpCapabilities } = this.device;
    const data = await this.socketRequest('consume', {
      rtpCapabilities,
      consumerTransportId: this.consumerTransport.id, // might be
      producerId,
    });
    const { id, kind, rtpParameters } = data;

    console.log('data === ', data);

    let codecOptions = {};
    console.log(this.consumerTransport);
    const consumer = await this.consumerTransport.consume({
      id,
      producerId,
      kind,
      rtpParameters,
      codecOptions,
    });
    console.log('consumer === ', consumer);

    const stream = new MediaStream();
    console.log('stream === ', stream);
    stream.addTrack(consumer.track);
    console.log('kind ', kind);
    return {
      consumer,
      stream,
      kind,
    };
  }

Many thanks for your time

---update---

This line never resolves: const consumer = await this.consumerTransport.consume({ id, producerId, kind, rtpParameters, codecOptions, }) It ends up executing some complex-looking functions from packages. In fact, It seems to get stuck in an infinite loop in the package called sdp-transform, after executing a few lines in mediasoup-client.

I don't even understand how chrome debugger's working. Because if I put a breakpoint on that line where ...consume(... is called, and click 'step', it parses this line: let answer = await this._pc.createAnswer() ... Which is part of a function called receive, which wasn't called by the breakpoint line... Please, somebody help.

from Why is video not displaying when user joins room?