Блог

Итак, у меня есть адаптация https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms работаю в ванильном 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, }); , похоже, вызывает проблему, поскольку журнал, следующий за ней, не печатается. Внутри функции потребления выполняется мой журнал с надписью «привет», а «бла» — нет. Вот скриншот клиентской консоли:

Наиболее важные функции приведены ниже. Для просмотра всего класса, пожалуйста, перейдите по ссылке 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 resu<
      });
    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, }) она заканчивается выполнением некоторых сложных функций из пакетов. На самом деле, кажется, что оно застревает в бесконечном цикле в пакете, называемом sdp-transform, после выполнения нескольких строк в mediasoup-client.

Я даже не понимаю, как работает chrome debugger. Потому что, если я поставлю точку останова на той строке, где ...consume(... вызывается, и нажму «шаг», он проанализирует эту строку: let answer = await this._pc.createAnswer() … Который является частью вызываемой функции receive , которая не была вызвана линией точки останова… Пожалуйста, кто-нибудь, помогите.

Вы сказали там что-то интересное. «привет» регистрируется, а «бла» — нет. Между ними не так уж много кода. Это должно заставить нас задуматься, как это вообще возможно.

Возможно, создайте то же самое, просто не отвлекаясь.

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

Что бы это дало? и почему?

.then это функция, которая ожидает, что ей будет предоставлена функция (которая будет вызвана, когда обещание будет выполнено …)

Что console.log('hi') возвращает? И когда это выполняется?

Вы не хотели выполнять журнал при создании цепочки обещаний, и вы также хотите, возможно, вернуть результат снова, поскольку вы хотите работать со значением.

Так что мое предположение было бы таково. Изменение на:

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

приближает вас, по крайней мере, на шаг ближе.