0

Создаю медиа приложение на основе webrtc на фреймворке adonis. Приложение для ведения стрима. Архитектуру выбрал такую: стример (webrtc)-> сервер (webrtc)-> зрители. По началу решил реализовать тест, который возвращает поток обратно стримеру: стример (webrtc)-> сервер (webrtc)-> стример. Соединение создается, По каналу данных(RTCDataChannel) данные передаются, но видео связь никак не удается поднять. Что я делаю не так? Вот реализация схемы стример (webrtc)-> сервер (webrtc)-> стример:

index.html

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js"></script>
  <script src="https://unpkg.com/@adonisjs/websocket-client"></script>
  <script src='index.js'></script>
</head>

<body></body>

</html>

index.js

let connection = new RTCPeerConnection({ //экземпляр RTCPeerConnection
  sdpSemantics: 'unified-plan',
  iceServers: [ // Information about ICE servers
    {
      urls: "stun:stun.stunprotocol.org"
    }
  ]
});

connection.onicecandidate = async function({
  candidate
}) { //событие появления ice кандидата
  socket.emit('candidate', candidate)
}
connection.ontrack = function(e) { //это не работает(
  console.log('track!')
}



const Ws = adonis.Ws('ws://localhost:3333').connect(); //Соединяемся к серверу по WebSocket (реализация adonis)
let socket = Ws.subscribe("connections"); // Подписываемся на канал "connections"
// Ws.on("open", () => {
// });
socket.on('candidate', async(candidate) => { //событие приема ice кандидата от сервера
  //console.log(1,candidate)
  if (candidate) {
    await connection.addIceCandidate(candidate)
  }
})
socket.on('sdp', async(answer) => { //событие приема sdp ответа от сервера
  await connection.setRemoteDescription(answer)
})


let remoteVideo
let localVideo
let localStream


async function f() { //установить на странице объекты <video>, привязав к ним потоки
  localVideo = document.createElement('video');
  localVideo.autoplay = true;
  localVideo.muted = true;

  remoteVideo = document.createElement('video');
  remoteVideo.autoplay = true;

  const videos = document.createElement('div');
  videos.className = 'grid';
  videos.appendChild(localVideo);
  videos.appendChild(remoteVideo);
  window.onload = function() {
    document.body.appendChild(videos);
  }

  localStream = await window.navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true
  })

  localStream.getTracks().forEach(track => connection.addTrack(track, localStream));
  localVideo.srcObject = localStream;
  const remoteStream = new MediaStream(connection.getReceivers().map(receiver => receiver.track));
  remoteVideo.srcObject = remoteStream;
}

// ---------------------Тест канала данных - нужно для проверки соедининия---------
let dc = connection.createDataChannel("channel");

dc.onmessage = function(event) {
  console.log("received: " + event.data);
};


connection.ondatachannel = function(e) {
  dc = e.channel
  dc.send('to Server')
}
// ---------------------Тест канала данных - нужно для проверки соедининия---------


async function connect() {
  let offer = await connection.createOffer({ //создаем offer
    offerToReceiveAudio: true,
    offerToReceiveVideo: true
  })
  await connection.setLocalDescription(offer)
  socket.emit('sdp', offer) //отправляем серверу
}


f()
connect()

server.js(условно(структура adonis))

'use strict'

const RTCPeerConnection = require('wrtc').RTCPeerConnection;


class ConnectionController { //реализация adonis
  constructor({
    socket,
    request
  }) {
    this.socket = socket
    this.request = request


    this.connection = new RTCPeerConnection({ //экземпляр RTCPeerConnection
      configuration: {
        offerToReceiveAudio: true,
        offerToReceiveVideo: true
      },
      sdpSemantics: 'unified-plan',
      iceServers: [ // Information about ICE servers - Use your own!
        {
          urls: "stun:stun.stunprotocol.org"
        }
      ]
    })


    this.connection.onicecandidate = async({
      candidate
    }) => { //событие появления ice кандидата
      this.socket.emit('candidate', candidate)
    }
    this.connection.ontrack = function(e) { //это не работает(
      console.log('track!')
    }

    // ---------------------Тест канала данных - нужно для проверки соедининия---------
    let dc = this.connection.createDataChannel("channel");
    dc.onmessage = function(event) {
      console.log("received: " + event.data);
    };
    this.connection.ondatachannel = function(e) {
      dc = e.channel
      dc.send('to Client')
    }
    // ---------------------Тест канала данных - нужно для проверки соедининия---------


    //создать петлю для перенаправления стрима обратно
    const audioTransceiver = this.connection.addTransceiver('audio');
    const videoTransceiver = this.connection.addTransceiver('video');
    console.log(audioTransceiver.receiver.track)
    Promise.all([
      audioTransceiver.sender.replaceTrack(audioTransceiver.receiver.track),
      videoTransceiver.sender.replaceTrack(videoTransceiver.receiver.track)
    ]);



  }


  async onCandidate(candidate) { //событие приема ice кандидата от сервера
    if (candidate) {
      await this.connection.addIceCandidate(candidate)
    }
  }

  async onSdp(offer) { //событие приема sdp ответа от сервера
    await this.connection.setRemoteDescription(offer)
    let answer = await this.connection.createAnswer()
    await this.connection.setLocalDescription(answer)
    this.socket.emit('sdp', answer)
  }

}

module.exports = ConnectionController

1 ответ 1

0

Разобрался! Проблема была в том, что addTrack нужно вызывать до offer-а. Асинхронность js сыграла против меня, из-за чего последовательность вызовов была нарушена и как следствие система не заводилась

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.