为什么用户加入房间时视频不显示？

Question

所以，我有一个在 vanilla JS 中工作的 https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms 的改编版，我正试图适应使用 React。在我的版本中，不是每个用户都是广播者，而是只有房间创建者才是广播者。

我遇到了一个问题。在 React 版本中，当查看者导航到房间时，他们没有收到流！我不知道为什么，因为他们使用相同的 RoomClient 类：https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms/blob/master/public/RoomClient.js

这行const consumer = await this.consumerTransport.consume({ id, producerId, kind, rtpParameters, codecOptions, }); 似乎是导致问题的原因，因为它后面的日志没有被打印出来。在消费函数中，执行了我的日志，上面写着“hi”，但没有执行“blah”。 这是客户端控制台的屏幕截图：

最重要的功能如下所示。全班请点击上面的github链接。

  async consume(producer_id) {
    //let info = await roomInfo()
    console.log('consume ', producer_id);
    console.log('dddddddddddd', await this.getConsumeStream(producer_id));
    this.getConsumeStream(producer_id).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;
    console.log('rtpcaps ', rtpCapabilities);
    const data = await this.socketRequest('consume', {
      rtpCapabilities,
      consumerTransportId: this.consumerTransport.id, // might be
      producerId,
    }).then((data) => {
      console.log('daaatttaaa', data);
      return data;
    });
    const { id, kind, rtpParameters } = data;

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

    let codecOptions = {};
    console.log('aaaaaaaaaaaaaa', this.consumerTransport.consume);
    const consumer = await this.consumerTransport
      .consume({
        id,
        producerId,
        kind,
        rtpParameters,
        codecOptions,
      })
      .then((result) => {
        console.log('bbbbbbb', result);
        return result;
      });
    console.log('consumer === ', consumer);

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

非常感谢您的宝贵时间

---更新---

这条线永远不会解决：const consumer = await this.consumerTransport.consume({ id, producerId, kind, rtpParameters, codecOptions, }) 它最终从包中执行一些看起来很复杂的函数。实际上，在 mediasoup-client 中执行了几行之后，它似乎陷入了一个名为 sdp-transform 的包中的无限循环。

我什至不明白 chrome 调试器是如何工作的。因为如果我在调用...consume(... 的那一行上放一个断点，然后单击“步骤”，它会解析这一行：let answer = await this._pc.createAnswer() ...这是一个名为receive 的函数的一部分，它不是由断点线...请有人帮忙。

Answer 1

你在那里说了一些有趣的话。 'hi' 会被记录，而 'blah' 不会。它们之间没有太多代码。这应该让我们想知道它是怎么可能的。

也许可以在没有任何干扰的情况下创建相同的内容。

Promise.resolve()
    .then(console.log('hi'))
    .then(function() {
        console.log('blah');
    })

那会做什么？为什么？

.then 是一个函数，它期望被赋予一个函数（在 promise 解决时被调用......）

console.log('hi') 返回什么？什么时候执行？

您不想在创建承诺链时执行日志，并且您还想再次返回结果，因为您想使用该值。

所以我的猜测是。将其更改为：

.then(result => {
    console.log('hi')
    return result
})

至少让你更近了一步。