远程视频不显示流

Question

我不知道出了什么问题。调用者和被调用者都接收到在本地视频中设置的相同流，但不会设置远程视频。

我之前看到它在我单击呼叫按钮两次时起作用，但我更改了代码并且不知道如何重新创建它。

感谢任何帮助。谢谢。

video.js

//Starts by calling the user
const callUser = (socketId, mySocket) => {
  navigator.getUserMedia({ video: true, audio: true }, stream => {
      console.log("My Stream: ", stream)
      const localVideo = document.getElementById("local-video");
      localVideo.srcObject = stream;
      localStream = stream
      createAndSendOffer(socketId, mySocket);
    })
}

//Create Offer
const createAndSendOffer = async (socketId, mySocket) => {
  peerConnection = new RTCPeerConnection()
  peerConnection.ontrack = function(event) {
    console.log("Remote Stream", event.streams[0])
    const remoteVideo = document.getElementById("remoteVideo")
    if(remoteVideo.srcObject !== event.stream[0]) {
      remoteVideo.srcObject = event.streams[0];
    }
  }
  localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream))
  await peerConnection.createOffer( offer => {
    peerConnection.setLocalDescription(new RTCSessionDescription(offer),
    function() {
        mySocket.emit("callUser", {offer,to: socketId});
    })
  })
}

//Callee Is getting called
const answerCall = (data, mySocket, inCall) => {
    navigator.getUserMedia({ video: true, audio: true }, stream => {
        console.log("My Stream: ", stream)
        const localVideo = document.getElementById("local-video");
        localVideo.srcObject = stream;
        localStream = stream
        createAndSendAnswer(data, mySocket, inCall);
    })
}

//Create Answer
const createAndSendAnswer = async (data, mySocket, inCall) => {
  peerConnection = new RTCPeerConnection()
  peerConnection.ontrack = function(event) {
    console.log("Remote Stream", event.streams[0])
    const remoteVideo = document.getElementById("remoteVideo")
    if(remoteVideo.srcObject !== event.stream[0]) {
    console.log(event.streams[0])
    remoteVideo.srcObject = event.streams[0];
    }
    inCall(true)
  }
  localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream))
  await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer))
  await peerConnection.createAnswer(answer => {
    peerConnection.setLocalDescription(new RTCSessionDescription(answer),
    function() {
        mySocket.emit("makeAnswer", {answer, to: data.socket});
    })
  })
}

const startSockets = (socket, inCall) => {
  socket = socket
  socket.on("gettingCalled", data => {
    console.log("You are getting called with socketId", data.socket)
    answerCall(data, socket, inCall);
  })

  socket.on("answerMade", async data => {
    await peerConnection.setRemoteDescription(new RTCSessionDescription(data.answer))
  })
}

class Video extends Component {
  constructor(props){
  super(props);
  this.state={
    friends: [],
    mySocket: [],
    inCall: false
  }
 }
 componentDidMount() {
   if(this.props.user) {
    startSockets(this.props.user.socket, this.inCallChange)
   }
 }

 inCallChange = boolean => this.setState({inCall: boolean})
 callUser = socketId => callUser(socketId, this.state.mySocket, this.state.inCall)

 render() {
  if(!this.props.user) {
    return (<div>No User</div>)
  } else {
    return (
      <div>`enter code here`
        <div className="video-chat-container">
              <div className="video-container">
                <video
                  autoPlay
                  className="remote-video"
                  id="remoteVideo"
                ></video>
                <video
                  autoPlay
                  muted
                  className="local-video"
                  id="local-video"
                ></video>
              </div>
            </div>
      </div>
    );
  }
 }
}
export default withRouter(connect(mapStateToProps)(Video))

更新

我不知道为什么会这样，但我必须只发送报价并再次收到答复。现在，我重新发送报价createAndSendOffer()，重新开始流程。我认为这不是最佳做法，如果您找到更好的解决方案，那就太好了:)

Answer 1

首先检查您的 pc.ontrack() 是否触发。 pc.ontrack() 事件在 pc.addTrack() 和 remotedescription 设置后被触发。同时确保在创建答案/报价之前添加轨道