Получение ошибки при сборке приложения для видеозвонков с помощью простого однорангового узла и реагирования

Недавно я сделал веб-сайт для видеозвонков, используя simple-peer, react.js и socket.io. Он отлично работает между веб-браузерами ноутбуков, но я получаю ошибку при видеозвонках из мобильного веб-браузера в веб-браузер ноутбука. Может кто-нибудь посоветовать, что вызывает эту ошибку и как ее исправить.

код-

function VideoComponent(props) {

  //const [yourID, setYourID] = useState("");
  //const [users, setUsers] = useState({});
  const [stream, setStream] = useState();
  const [receivingCall, setReceivingCall] = useState(props.receivingCall);
  const [caller, setCaller] = useState(props.caller);
  const [callerSignal, setCallerSignal] = useState(props.callerSignal);
  const [callAccepted, setCallAccepted] = useState(props.callAccepted);
  const [open, setOpen] = useState(false)
  const [calling, setCalling] = useState(false)

  const userVideo = useRef();
  const partnerVideo = useRef();
  const socket = props.socket
  //const ENDPOINT = '/'

  useEffect(() => {
    if(props.useAudio && props.useVideo){
    navigator.mediaDevices.getUserMedia({ video: props.useVideo, audio: props.useAudio }).then(stream => {
      setStream(stream);
      if (userVideo.current && props.useAudio && props.useVideo) {
        userVideo.current.srcObject = stream;
      }
    })
  }
    //socket = io(ENDPOINT);
    /*socket.on("hey", (data) => {
      setReceivingCall(true);
      setCaller(data.from);
      setCallerSignal(data.signal);
    })*/
  }, []);

  const callPeer=()=> {
    setCalling(true)
    if(props.selectedUser[0]['status'] !== 'online'){
      setOpen(true)
    }
    if(props.useAudio && props.useVideo){
    const peer = new Peer({
      initiator: true,
      trickle: false,
      stream: stream,
    });

    peer.on("signal", data => {
      socket.emit("callUser", { userToCall: props.selectedUser[0]['_id'], 
        signalData: data, from:  props.userDetail[0]['_id']})
    })

    peer.on("stream", stream => {
      if (partnerVideo.current) {
        console.log('receiving stream from partner')
        partnerVideo.current.srcObject = stream;
      }
    });

    socket.on("callAccepted", signal => {
      setCallAccepted(true);
      peer.signal(signal);
    })
}
  }

  function acceptCall() {
    setCallAccepted(true);
    if(props.useAudio && props.useVideo){
    const peer = new Peer({
      initiator: false,
      trickle: false,
      stream: stream,
    });
    peer.on("signal", data => {
      socket.emit("acceptCall", { signal: data, receiverID: caller })
    })

    peer.on("stream", stream => {
      partnerVideo.current.srcObject = stream;
    });

    peer.signal(callerSignal);
  }
  }

  let UserVideo;
  if (stream) {
    UserVideo = (
      <video className='newVideo1' playsInline muted ref={userVideo} autoPlay />
    );
  }

  let PartnerVideo;
  if (callAccepted) {
    PartnerVideo = (
      <video className='newVideo' playsInline  ref={partnerVideo} autoPlay />
    );
  }

  let incomingCall;
  if (receivingCall && !callAccepted) {
    incomingCall = (
      <div className='incomingCall'>
        <h1>{caller} is calling you</h1>
        <Button
        variant="contained"
        color="secondary"
        onClick={acceptCall}
        className='acceptButton'
      >
        Accept call
        </Button>
      </div>
    )
  }

Ошибка при вызове из мобильного веб-браузера (Chrome) в веб-браузер ноутбука (Chrome)

index.js:17 Uncaught Error: Connection failed.
    at h (index.js:17)
    at f.value (index.js:654)
    at RTCPeerConnection.t._pc.onconnectionstatechange (index.js:119)


person anonymous    schedule 23.04.2020    source источник


Ответы (1)


Это могло быть связано с сервером TURN. Вам необходимо настроить его, если вы планируете развернуть это приложение.

на основе вашего кода он выглядит вдохновленным https://github.com/coding-with-chaim/react-video-chat/blob/master/client/src/App.js

Используйте те же настройки TURN, что и в его коде, и посмотрите, работает ли это. У меня это сработало.

person gopikrishnan    schedule 08.06.2020
comment
@ gopikrishnan - Я новичок в этом, не могли бы вы поставить здесь настройки TURN - person Rajeev Akotkar; 19.08.2020