Reactjs MERN stack制作的WEBRTC视频应用程序中的眩晕/翻转服务器存在问题

我在netlify上主持了一个点对点会议react应用程序。我用Peerjs做视频。除了视频，一切都正常。对于某些网络，远程用户的视频正在工作，而对于另一些网络，则不工作。我抬头一看，发现这可能是一个晕眩/转身问题。然后我在代码中实现了所有的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: 'webrtc@live.com'
      },
      {
        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

import React，{useffect，useState}来自“React”；
从“socket.io客户端”导入{io}；
从'react router dom'导入{useParams}；
从“@material ui/core”导入{Grid}”；
从“peerjs”导入对等体；
变量连接选项={
“强制新连接”：正确，
“重新连接尝试”：“无限”，
“超时”：10000，
“传输”：[“websocket”]
};
常量视频框=（{isVideoMute，isAudioMute}）=>{
var myPeer=新对等(
{
配置：{'iceServers'：[
{URL:'stun:stun01.siphone.com'}，
{URL:'stun:stun.ekiga.net'}，
{URL:'stun:stun.fwdnet.net'}，
{URL:'stun:stun.ideasip.com'}，
{URL:'stun:stun.iptel.org'}，
{url:'stun:stun.rixtelecom.se'}，
{url:'stun:stun.schlund.de'}，
{URL:'stun:stun.l.google.com:19302'}，
{url:'stun:stun1.l.google.com:19302'}，
{URL:'stun:stun2.l.google.com:19302'}，
{URL:'stun:stun3.l.google.com:19302'}，
{URL:'stun:stun4.l.google.com:19302'}，
{URL:'stun:stunserver.org'}，
{URL:'stun:stun.softjoys.com'}，
{URL:'stun:stun.voiparound.com'}，
{url:'stun:stun.voipbuster.com'}，
{url:'stun:stun.voipstunt.com'}，
{URL:'stun:stun.voxgratia.org'}，
{URL:'stun:stun.xten.com'}，
{
URL:'turn:numb.viagenie.ca'，
凭证：“muazkh”，
用户名：'webrtc@live.com'
},
{
URL:'turn:192.158.29.39:3478？传输=udp'，
凭证：“JZEOEt2V3Qb0y27GRntt2u2PAYA=”，
用户名：“2822411:1379330808”
},
{
URL:'turn:192.158.29.39:3478？传输=tcp'，
凭证：“JZEOEt2V3Qb0y27GRntt2u2PAYA=”，
用户名：“2822411:1379330808”
}
]}/*示例服务器，请使用适当的服务器*/
}
);
常量对等点={}
const[socket，setSocket]=useState（）
const{id:videoId}=useParams（）；
const videoGrid=document.getElementById（'video-grid'））
useffect（（）=>{
常数s=io（“https://weconnectbackend.herokuapp.com“，连接选项）；
固定套筒；
return（）=>{
s、 断开连接（）；
}
},[])
//让我的视频流；
const[myVideoStream，setmyVideoStream]=useState（）
常量mutenmute=（）=>{
const enabled=myVideoStream.getAudioTracks（）[0]。已启用；
如果（已启用）{
myVideoStream.getAudioTracks（）[0]。enabled=false；
//setUnmuteButton（）；
}否则{
//setMuteButton（）；
myVideoStream.getAudioTracks（）[0]。enabled=true；
}
}
常量播放停止=（）=>{
//console.log（'object'）
let enabled=myVideoStream.getVideoTracks（）[0]。已启用；
如果（已启用）{
myVideoStream.getVideoTracks（）[0]。enabled=false；
//setPlayVideo（）
}否则{
//setStopVideo（）
myVideoStream.getVideoTracks（）[0]。enabled=true；
}
}
useffect（（）=>{
如果（我的视频流）
播放停止（）
}，[isVideoMute]）
useffect（（）=>{
如果（我的视频流）
mutenmute（）
}，[isAudioMute]）
useffect（（）=>{
if（套接字==null）
返回；
myPeer.on（'open'，id=>{
socket.emit（'join-room'，videoId，id）；
})
const myVideo=document.createElement（'video'））
myVideo.muted=true
navigator.mediaDevices.getUserMedia({
视频：没错，
音频：正确
})。然后（流=>{
//myVideoStream=流；
window.localStream=stream；
setmyVideoStream（流）；
log（myVideoStream，“myVideoStream”）；
添加视频流（myVideo，流）
myPeer.on（'call'，call=>{
呼叫.应答（流）
const video=document.createElement（'video'）
call.on（'stream'，userVideoStream=>{
添加视频流（视频，用户视频流）
})
})
socket.on（'user-connected'，userId=>{
connectToNewUser（用户ID，流）
})
socket.on（'user-disconnected'，userId=>{
if（peers[userId]）peers[userId].close（）
})
})
}，[socket，videoId]）
函数addVideoStream（视频，流）{
video.src对象=流
video.addEventListener（'loadedmetadata'，（）=>{
视频播放（）
})
videoGrid.append（视频）
}
函数connectToNewUser（用户ID，流）{
const call=myPeer.call（userId，stream）
const video=document.createElement（'video'）
call.on（'stream'，userVideoStream=>{
添加视频流（视频，用户视频流）
})
call.on（'关闭'，（）=>{
video.remove（）
})
对等方[userId]=呼叫
}
返回(
{/*  */}
)
}
导出默认视频框

---

您正在使用的TURN服务器已经停止使用几年了，而这些服务器是从

---

从任意位置复制凭据不是TURN的工作方式，您需要运行自己的服务器。

非常感谢您的帮助。事实上，我对晕眩和转身的概念还很陌生。我不知道从哪里设置我自己的服务器。你能帮我解决这个问题吗？你能建议我在哪里设置我自己的回合服务器吗（如果可能的话，最好是免费的）？添加多个眩晕/回合不是一个好的选择，这意味着你向多个人询问你的名字。一次眩晕/转身配置将为您提供您想要的正确答案。另外，我已经在这篇文章中回答了关于sturn/turn的问题。你能告诉我在哪里可以得到我自己的turn/STUN服务器吗？是最常用的服务器。“免费”回合服务器不存在。