MERN堆栈制作的WEBRTC视频应用中的STUN/TURN服务器问题

Question

我已经在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

Website Link

Answer 1

您正在使用的TURN服务器已经不能使用几年了，这些服务器是从https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/上取来的

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