我正在使用简单对等，并且无法在reactjs中显示远程流

Question

function callPeer(id: string) {
    const peer = initializePeerInstance({ initiator: true, stream: stream! });
    peer.on("signal", (data: any) => {
      socket.current.emit("callUser", {
        userToCall: id,
        signalData: data,
        from: yourID,
      });
    });
    peer.on("stream",  (stream: any) => {
      if (partnerVideo.current) {
        partnerVideo.current.srcObject = stream;
      }
    });
    socket.current.on("callAccepted", (signal: any) => {
      setCallAccepted(true);
      peer.signal(signal);
    });
  }
  function acceptCall() {
    setCallAccepted(true);
    const peer = initializePeerInstance({ initiator: false, stream: stream! });
    peer.on("signal", (data: any) => {
      socket.current.emit("acceptCall", { signal: data, to: caller });
    });
    peer.on("stream",  (stream: any) => {
      if (partnerVideo.current) partnerVideo.current.srcObject = stream;
    });
    peer.signal(callerSignal);
}

我必须功能：callPeer和acceptCall，但是当触发on('stream')时，我成功获取流并可以将其设置为ref.current.srcObj，但接受此ref的视频不显示任何内容。 它在 Firefox 中有效，但在 Chrome 或任何其他浏览器中无效，我不知道问题出在哪里。 尝试了不同的方法来设置 video.srcObj=stream 但不起作用

Answer 1

尝试使用 navigator.mediaDevices 获取对用户设备的媒体访问权限..

   peer.on("signal", (data: any) => {
      socket.current.emit("callUser", {
        userToCall: id,
        signalData: data,
        from: yourID,
      });
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: true })
        .then((stream) => {
            localVideoRef.current.srcObject = stream;
            localVideoRef.current.onloadedmetadata = () => {
                localVideoRef.current.play();
            };
        };
  });

这里localVideoRef用于用户的视频，您可以使用partnerVideo ref来设置媒体...

此外，当您接受呼叫时（在您的acceptCall()函数中）添加navigator.mediaDevices，以确保您也获得合作伙伴的媒体屏幕..

我希望这有帮助...