Проблема с серверами STUN/TURN в видеоприложении WEBRTC, сделанном в стеке MERN

Я разместил приложение для реагирования на одноранговые встречи на netlify. Я использовал Peerjs для своего видео. Все работает как положено, кроме видео. Для некоторых сетей видео удаленного человека работает, а для некоторых нет. Я посмотрел и обнаружил, что это может быть проблема STUN / TURN. Затем я реализовал все серверы STUN/TURN в своем коде. Однако в некоторых случаях видео по-прежнему не настраивается. В некоторых случаях он работает нормально, в других видео не отображается. При этом прилагаю код видео и ссылку на сайт.

import React,{useEffect,useState} from 'react';
import {io} from "socket.io-client";
import {useParams} from 'react-router-dom';
import {Grid} from "@material-ui/core";
import Peer from 'peerjs';
var connectionOptions =  {
"force new connection" : true,
"reconnectionAttempts": "Infinity", 
"timeout" : 10000,                  
"transports" : ["websocket"]
};
const Videobox = ({isVideoMute,isAudioMute}) => {


var myPeer = new Peer(
  {
    config: {'iceServers': [
      {urls:'stun:stun01.sipphone.com'},
      {urls:'stun:stun.ekiga.net'},
      {urls:'stun:stun.fwdnet.net'},
      {urls:'stun:stun.ideasip.com'},
      {urls:'stun:stun.iptel.org'},
      {urls:'stun:stun.rixtelecom.se'},
      {urls:'stun:stun.schlund.de'},
      {urls:'stun:stun.l.google.com:19302'},
      {urls:'stun:stun1.l.google.com:19302'},
      {urls:'stun:stun2.l.google.com:19302'},
      {urls:'stun:stun3.l.google.com:19302'},
      {urls:'stun:stun4.l.google.com:19302'},
      {urls:'stun:stunserver.org'},
      {urls:'stun:stun.softjoys.com'},
      {urls:'stun:stun.voiparound.com'},
      {urls:'stun:stun.voipbuster.com'},
      {urls:'stun:stun.voipstunt.com'},
      {urls:'stun:stun.voxgratia.org'},
      {urls:'stun:stun.xten.com'},
      {
        urls: 'turn:numb.viagenie.ca',
        credential: 'muazkh',
        username: '[email protected]'
      },
      {
        urls: 'turn:192.158.29.39:3478?transport=udp',
        credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
        username: '28224511:1379330808'
      },
      {
        urls: 'turn:192.158.29.39:3478?transport=tcp',
        credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
        username: '28224511:1379330808'
      }
    ]} /* Sample servers, please use appropriate ones */
  }
);
const peers = {}
const [socket, setSocket] = useState()
const {id:videoId} = useParams();
const videoGrid = document.getElementById('video-grid')

useEffect(()=> {
    const s=io("https://weconnectbackend.herokuapp.com",connectionOptions);
    setSocket(s);
    return () => {
      s.disconnect();
    }
  },[])

// let myVideoStream;
const [myVideoStream, setmyVideoStream] = useState()
const muteUnmute = () => {
  const enabled = myVideoStream.getAudioTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getAudioTracks()[0].enabled = false;
    //setUnmuteButton();
  } else {
    //setMuteButton();
    myVideoStream.getAudioTracks()[0].enabled = true;
  }
}

const playStop = () => {
  //console.log('object')
  let enabled = myVideoStream.getVideoTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getVideoTracks()[0].enabled = false;
    //setPlayVideo()
  } else {
    //setStopVideo()
    myVideoStream.getVideoTracks()[0].enabled = true;
  }
}
useEffect(() => {
  if(myVideoStream)
    playStop()
}, [isVideoMute])
useEffect(() => {
  if(myVideoStream)
    muteUnmute()
}, [isAudioMute])

useEffect(() => {
    
  if(socket== null)
      return;
  myPeer.on('open',id=>{
    socket.emit('join-room',videoId,id);
  })
  const myVideo = document.createElement('video')
  myVideo.muted = true
  navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  }).then(stream => {
    // myVideoStream = stream;
    window.localStream=stream;
    setmyVideoStream(stream);
    console.log(myVideoStream,"myvideostream");
    addVideoStream(myVideo, stream)
    myPeer.on('call', call => {
      call.answer(stream)
      const video = document.createElement('video')
      call.on('stream', userVideoStream => {
        addVideoStream(video, userVideoStream)
      })
    })
  
    socket.on('user-connected',userId =>{
      connectToNewUser(userId, stream)
    })

    socket.on('user-disconnected', userId => {
      if (peers[userId]) peers[userId].close()
    })
  })
  
}, [socket,videoId])


function addVideoStream(video, stream) {
  video.srcObject = stream
  video.addEventListener('loadedmetadata', () => {
    video.play()
  })
  videoGrid.append(video)
}

function connectToNewUser(userId, stream) {
  const call = myPeer.call(userId, stream)
  const video = document.createElement('video')
  
  call.on('stream', userVideoStream => {
    addVideoStream(video, userVideoStream)
  })
  call.on('close', () => {
    video.remove()
  })

  peers[userId] = call
}

return (

    <div id="video-grid" className="videoStyleFromDiv">
        {/* <Video srcObject={srcObject}/> */}
    </div>
  
)
}

export default Videobox

Ссылка на сайт


person Sayak China    schedule 30.05.2021    source источник


Ответы (1)


Серверы TURN, которые вы используете, были выведены из строя в течение нескольких лет в случае с серверами, взятыми с https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

Копирование учетных данных из случайных мест — это не то, как работает TURN, вам нужно будет запускать свои собственные серверы.

person Philipp Hancke    schedule 31.05.2021
comment
Большое вам спасибо за вашу помощь. На самом деле я довольно новичок в концепциях STUN и TURN. Я не знаю, где настроить свой собственный сервер. Можете ли вы помочь мне с этим? Можете ли вы предложить мне, где я могу настроить свой собственный сервер TURN (желательно бесплатный, если это возможно)? - person Sayak China; 31.05.2021
comment
Добавление нескольких оглушений/поворотов не является хорошим вариантом, это означает, что вы спрашиваете свое имя у нескольких человек. одна конфигурация оглушения / поворота даст вам правильный ответ, который вы хотите. Также я уже ответил в этом посте выбор ледяного кандидата">stackoverflow.com/questions/63570120/ о развороте/повороте. - person Biju Kalanjoor; 31.05.2021
comment
Можете ли вы сказать мне, где я могу получить свой собственный сервер TURN / STUN? - person Sayak China; 31.05.2021
comment
github.com/coturn/coturn — наиболее часто используемый сервер. Бесплатных серверов TURN не существует. - person Philipp Hancke; 31.05.2021