видеоприложение в браузере p2p с использованием webrtc - PullRequest
Новая
       133

видеоприложение в браузере p2p с использованием webrtc

0 голосов
/ 12 июля 2020

Я использую службу обхода сети Twilio для STUN / TURN. Кроме того, я использую веб-сокеты, передающие сообщения между клиентами для всех рукопожатий. Проблема, которую я обнаружил, заключается в том, что когда одноранговые узлы находятся в одной локальной сети, они могут подключаться и делиться своими видео- и аудиоканалами, но когда я пытаюсь подключиться к друзьям, находящимся далеко, в другой сети, соединение устанавливается, но одноранговые узлы не может отправлять или получать видео- и аудиоканалы. Я разместил сигнальный сервер на Heroku, а клиент - это приложение React, размещенное на страницах Github. Фрагмент кода сервера выглядит следующим образом: 

require('dotenv').config();
//...    
const server = http.createServer(app);
const io = socketIO(server);
const twilio = twilioAPI(
  process.env.TWILIO_ACCOUNT_SID,
  process.env.TWILIO_ACCOUNT_TOKEN
);

io.on('connection', (socket) => {
//...
  socket.on('token', () => {
    twilio.tokens.create((err, token) => {
      console.log(token);
      if (err) {
        console.log(err);
      } else {
        socket.emit('token', token);
      }      
    });
  });
//...
});


server.listen(port, () => console.log("server is running on port " + port));

Фрагмент кода клиента выглядит следующим образом: 

import React, { Component, createRef } from 'react';
import './App.css';
import io from 'socket.io-client';

class App extends Component {
//...   
  onToken = (callback) => (token) => {
    this.peerConnection.current = new RTCPeerConnection({
      iceServers: token.iceServers
    });
    this.peerConnection.current.addStream(this.state.localStream);
    this.peerConnection.current.onicecandidate = this.onIceCandiate;
    this.peerConnection.current.onAddStream = this.onAddStream;
    this.socket.current.on('candidate', this.onCandidate);
    this.socket.current.on('answer', this.onAnswer);
    callback();
  }
//...
}

export default App;
...