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.addTrack（）和remotedescription设置后会触发pc.ontrack（）事件，并确保在创建答案/要约之前添加了曲目

远程视频未显示流

1 个答案: