Получение сообщения об ошибке при создании приложения для видеовызовов с помощью простого peer и реакции - PullRequest
Новая
       53

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

0 голосов
/ 23 апреля 2020

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

code- 

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)
...