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

Question

因此，我对 https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms 进行了改编在 vanilla JS 中工作，我试图适应使用 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, }); 似乎是导致问题的原因，因为它后面的日志没有不会被打印出来。在 consume 函数中，我的日志 'hi' 被执行，但 'blah' 没有。这是客户端控制台的屏幕截图:

最重要的功能如下。对于整个类(class)，请单击上面的 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(... 的那一行放置一个断点，然后单击“step”，它会解析这一行:let answer = await this._pc。 createAnswer() ...这是名为 receive 的函数的一部分，它不是由断点行调用的...请有人帮忙。

Answer 1

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

也许在周围没有任何干扰的情况下创造同样的东西。

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

那会做什么？为什么？

.then 是一个函数，期望被赋予一个函数(当 promise resolves 时被调用...)

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

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

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

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

至少让你更近一步。