3

因此，我对https://github.com/Dirvnn/mediasoup-sfu-webrtc-video-rooms进行了改编，我正在尝试适应使用 React 的 vanilla JS。在我的版本中，不是每个用户都是广播者，而是只有房间创建者才是广播者。

我遇到了一个问题。在 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(...，然后单击'step'，它会解析这一行：let answer = await this._pc.createAnswer()...这是一个名为 的函数的一部分，receive断点行没有调用它...拜托，有人帮助。

4

1 回答 1

0

你在那里说了一些有趣的事情。'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
})

至少让你更近了一步。

于 2021-03-10T23:10:28.937 回答