1

我正在使用这个 webrtc 示例的修改版本。

更新:这似乎实际上是我正在使用的代码示例中的一个错误。如果我正确设置,我仍然只能在呼叫方获得本地视频。任何解决此问题的帮助将不胜感激。

唯一的区别是对远程客户端的报价稍后发送。即:“让对方知道我已经准备好见面,然后发送”

远程对等方(被调用方?)可以完美地看到两个流。

本地调用者只能看到自己,并且永远不会调用 ontrack。

本地和远程对等点都显示稳定的连接,就像我说的,远程对等点工作完美。

是否应该双向发送候选冰?因为我觉得是。我是 webrtc 的新手,所以这让我很惊讶。

“$ ('#ReadyModalButton').click ”是发送通话报价的内容。

    var myPeerConnection = null; // RTCPeerConnection
    var transceiver = null; // RTCRtpTransceiver
    var webcamStream = null; // MediaStream from webcam
    var remoteUser = null;
    var mediaConstraints = {
      audio: true, // We want an audio track
      video: true ,
    };

    function log (text) {
      var time = new Date ();

      console.log ('[' + time.toLocaleTimeString () + '] ' + text);
    }
    function log_error (text) {
      var time = new Date ();

      console.trace ('[' + time.toLocaleTimeString () + '] ' + text);
    }

    async function createPeerConnection () {
      log ('Setting up a connection...');

      // Create an RTCPeerConnection which knows to use our chosen
      // STUN server.
      var configuration = {
        offerToReceiveAudio: true,
        offerToReceiveVideo: true
    }
      myPeerConnection = new RTCPeerConnection ({
        configuration:configuration,
        iceServers: [
          {
            urls: 'turn:...',
            username: '...',
            credential: '...',
          },
          {
            urls: [
              'stun:stun.l.google.com:19302',
              'stun:stun1.l.google.com:19302',
              'stun:stun2.l.google.com:19302',
              'stun:stun3.l.google.com:19302',
            ],
          },
        ],
      });

      // Set up event handlers for the ICE negotiation process.

      myPeerConnection.onicecandidate = handleICECandidateEvent;
      myPeerConnection.oniceconnectionstatechange = handleICEConnectionStateChangeEvent;
      myPeerConnection.onicegatheringstatechange = handleICEGatheringStateChangeEvent;
      myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
      myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
      myPeerConnection.ontrack = handleTrackEvent;
    }

    // Called by the WebRTC layer to let us know when it's time to
    // begin, resume, or restart ICE negotiation.

    async function handleNegotiationNeededEvent () {
      log ('*** Negotiation needed');

      try {
        log ('---> Creating offer');
        const offer = await myPeerConnection.createOffer ();

        // If the connection hasn't yet achieved the "stable" state,
        // return to the caller. Another negotiationneeded event
        // will be fired when the state stabilizes.

        if (myPeerConnection.signalingState != 'stable') {
          log ("     -- The connection isn't stable yet; postponing...");
          return;
        }

        // Establish the offer as the local peer's current
        // description.
        await myPeerConnection.setLocalDescription (offer);

        // Send the offer to the remote peer.

        log ('---> Sending the offer to the remote peer');
        if (remoteUser == null) {
          alert ('remote user is null.');
        }

        sendMessage (
          ws,
          JSON.stringify ({
            remoteUser: remoteUser,
            handler: 'relayOffer',
            callback: 'handleVideoOfferMsg',
            sdp: myPeerConnection.localDescription.toJSON (),
          })
        );
      } catch (err) {
        log (
          '*** The following error occurred while handling the negotiationneeded event:'
        );
        reportError (err);
      }
    }

    // Called by the WebRTC layer when events occur on the media tracks
    // on our WebRTC call. This includes when streams are added to and
    // removed from the call.
    //
    // track events include the following fields:
    //
    // RTCRtpReceiver       receiver
    // MediaStreamTrack     track
    // MediaStream[]        streams
    // RTCRtpTransceiver    transceiver
    //
    // In our case, we're just taking the first stream found and attaching
    // it to the <video> element for incoming media.

    function handleTrackEvent (event) {
      log ('*** Track event');
      document.getElementById ('received_video').srcObject = event.streams[0];
      document.getElementById ('hangup-button').disabled = false;
    }

    // Handles |icecandidate| events by forwarding the specified
    // ICE candidate (created by our local ICE agent) to the other
    // peer through the signaling server.

    function handleICECandidateEvent (event) {
      if (event.candidate) {
        log ('*** Outgoing ICE candidate');

        visitId = getVisitId ();
        if (visitId == null) {
          alert ('No visit ID provided.');
          return;
        }
        if (remoteUser == null) {
          alert ('remote user is null.');
        }
        sendMessage (
          ws,
          JSON.stringify ({
            handler: 'newIceCandidate',
            callback: 'handleNewICECandidateMsg',
            remoteUser: remoteUser,
            candidate: event.candidate.toJSON (),
          })
        );
      }
    }

    // Handle |iceconnectionstatechange| events. This will detect
    // when the ICE connection is closed, failed, or disconnected.
    //
    // This is called when the state of the ICE agent changes.

    function handleICEConnectionStateChangeEvent (event) {
      log (
        '*** ICE connection state changed to ' + myPeerConnection.iceConnectionState
      );

      switch (myPeerConnection.iceConnectionState) {
        case 'closed':
        case 'failed':
        case 'disconnected':
          closeVideoCall ();
          break;
      }
    }

    // Set up a |signalingstatechange| event handler. This will detect when
    // the signaling connection is closed.
    //
    // NOTE: This will actually move to the new RTCPeerConnectionState enum
    // returned in the property RTCPeerConnection.connectionState when
    // browsers catch up with the latest version of the specification!

    function handleSignalingStateChangeEvent (event) {
      log (
        '*** WebRTC signaling state changed to: ' + myPeerConnection.signalingState
      );
      switch (myPeerConnection.signalingState) {
        case 'closed':
          closeVideoCall ();
          break;
      }
    }

    // Handle the |icegatheringstatechange| event. This lets us know what the
    // ICE engine is currently working on: "new" means no networking has happened
    // yet, "gathering" means the ICE engine is currently gathering candidates,
    // and "complete" means gathering is complete. Note that the engine can
    // alternate between "gathering" and "complete" repeatedly as needs and
    // circumstances change.
    //
    // We don't need to do anything when this happens, but we log it to the
    // console so you can see what's going on when playing with the sample.

    function handleICEGatheringStateChangeEvent (event) {
      log (
        '*** ICE gathering state changed to: ' + myPeerConnection.iceGatheringState
      );
    }

    // Close the RTCPeerConnection and reset variables so that the user can
    // make or receive another call if they wish. This is called both
    // when the user hangs up, the other user hangs up, or if a connection
    // failure is detected.

    function closeVideoCall () {
      var localVideo = document.getElementById ('local_video');

      log ('Closing the call');

      // Close the RTCPeerConnection

      if (myPeerConnection) {
        log ('--> Closing the peer connection');

        // Disconnect all our event listeners; we don't want stray events
        // to interfere with the hangup while it's ongoing.

        myPeerConnection.ontrack = null;
        myPeerConnection.onnicecandidate = null;
        myPeerConnection.oniceconnectionstatechange = null;
        myPeerConnection.onsignalingstatechange = null;
        myPeerConnection.onicegatheringstatechange = null;
        myPeerConnection.onnotificationneeded = null;

        // Stop all transceivers on the connection

        myPeerConnection.getTransceivers ().forEach (transceiver => {
          transceiver.stop ();
        });

        // Stop the webcam preview as well by pausing the <video>
        // element, then stopping each of the getUserMedia() tracks
        // on it.

        if (localVideo.srcObject) {
          localVideo.pause ();
          localVideo.srcObject.getTracks ().forEach (track => {
            track.stop ();
          });
        }

        // Close the peer connection

        myPeerConnection.close ();
        myPeerConnection = null;
        webcamStream = null;
      }

      // Disable the hangup button

      document.getElementById ('hangup-button').disabled = true;
      targetUsername = null;
    }

    // Handle the "hang-up" message, which is sent if the other peer
    // has hung up the call or otherwise disconnected.

    function handleHangUpMsg (msg) {
      log ('*** Received hang up notification from other peer');

      closeVideoCall ();
    }

    // Hang up the call by closing our end of the connection, then
    // sending a "hang-up" message to the other peer (keep in mind that
    // the signaling is done on a different connection). This notifies
    // the other peer that the connection should be terminated and the UI
    // returned to the "no call in progress" state.

    function hangUpCall () {
      closeVideoCall ();
      if (remoteUser == null) {
        alert ('remote user is null.');
      }
      sendToServer ({
        remoteUser: remoteUser,
        handler: 'hangupCall',
      });
    }

    // Handle a click on an item in the user list by inviting the clicked
    // user to video chat. Note that we don't actually send a message to
    // the callee here -- calling RTCPeerConnection.addTrack() issues
    // a |notificationneeded| event, so we'll let our handler for that
    // make the offer.
    /*
    async function invite(evt) {
      log("Starting to prepare an invitation");
      if (myPeerConnection) {
        alert("You can't start a call because you already have one open!");
      } else {
        var clickedUsername = evt.target.textContent;

        // Don't allow users to call themselves, because weird.

        if (clickedUsername === myUsername) {
          alert("I'm afraid I can't let you talk to yourself. That would be weird.");
          return;
        }

        // Record the username being called for future reference

        targetUsername = clickedUsername;
        log("Inviting user " + targetUsername);

        // Call createPeerConnection() to create the RTCPeerConnection.
        // When this returns, myPeerConnection is our RTCPeerConnection
        // and webcamStream is a stream coming from the camera. They are
        // not linked together in any way yet.

        log("Setting up connection to invite user: " + targetUsername);
        createPeerConnection();

        // Get access to the webcam stream and attach it to the
        // "preview" box (id "local_video").

        try {
          webcamStream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
          document.getElementById("local_video").srcObject = webcamStream;
        } catch(err) {
          handleGetUserMediaError(err);
          return;
        }

        // Add the tracks from the stream to the RTCPeerConnection

        try {
          webcamStream.getTracks().forEach(
            transceiver = track => myPeerConnection.addTransceiver(track, {streams: [webcamStream]})
          );
        } catch(err) {
          handleGetUserMediaError(err);
        }
      }
    }
    */
    // Accept an offer to video chat. We configure our local settings,
    // create our RTCPeerConnection, get and attach our local camera
    // stream, then create and send an answer to the caller.

    async function handleVideoOfferMsg (data) {
      msg = data.sdp;
      // If we're not already connected, create an RTCPeerConnection
      // to be linked to the caller.
      log ('Received video chat offer');
      if (!myPeerConnection) {
        createPeerConnection ();
      }
      // Get the webcam stream if we don't already have it

      if (!webcamStream) {
        try {
          webcamStream = await navigator.mediaDevices.getUserMedia (
            mediaConstraints
          );
        } catch (err) {
          handleGetUserMediasError (err);
          return;
        }
      }
        document.getElementById ('local_video').srcObject = webcamStream;

        // Add the camera stream to the RTCPeerConnection
        console.log( webcamStream
          .getTracks ())
        try {
          webcamStream
            .getTracks ()
            .forEach (
              (transceiver = track =>
                myPeerConnection.addTransceiver (track, {streams: [webcamStream]}))
            );
        } catch (err) {
          handleGetUserMediaError (err);
        }

      // We need to set the remote description to the received SDP offer
      // so that our local WebRTC layer knows how to talk to the caller.
      try {
        var desc = new RTCSessionDescription ({sdp: msg.sdp, type: msg.type});
      } catch (e) {
        log ('msg.sdp error ' + e);
        console.log (msg.sdp);
      }
      log ('Remote Description added');
      // If the connection isn't stable yet, wait for it...

      if (myPeerConnection.signalingState != 'stable') {
        log ("  - But the signaling state isn't stable, so triggering rollback");

        // Set the local and remove descriptions for rollback; don't proceed
        // until both return.
        await Promise.all ([
          myPeerConnection.setLocalDescription ({type: 'rollback'}),
          myPeerConnection.setRemoteDescription (desc),
        ]);
        return;
      } else {
        log ('  - Setting remote description');
        await myPeerConnection.setRemoteDescription (desc);
      }


      log ('---> Creating and sending answer to caller');

      await myPeerConnection.setLocalDescription (
        await myPeerConnection.createAnswer ()
      );
    console.log( myPeerConnection.localDescription)
      if (remoteUser == null) {
        alert ('remote user is null.');
      }

      sendMessage (
        ws,
        JSON.stringify ({
          remoteUser: remoteUser,
          handler: 'respondToOffer',
          sdp: myPeerConnection.localDescription.toJSON (),
          callback: 'handleVideoAnswerMsg',
        })
      );
    }

    // Responds to the "video-answer" message sent to the caller
    // once the callee has decided to accept our request to talk.

    async function handleVideoAnswerMsg (data) {
      log ('*** Call recipient has accepted our call');
      msg = data.sdp;
      // Configure the remote description, which is the SDP payload
      // in our "video-answer" message.
      try {
        var desc = new RTCSessionDescription ({sdp: msg.sdp, type: msg.type});
      } catch (e) {
        log ('msg.sdp error ' + e);
        console.log (msg.sdp);
      }
      await myPeerConnection.setRemoteDescription (desc).catch (reportError);
    }

    // A new ICE candidate has been received from the other peer. Call
    // RTCPeerConnection.addIceCandidate() to send it along to the
    // local ICE framework.

    async function handleNewICECandidateMsg (msg) {
      if (typeof msg.event.sdpMid === undefined) {
        msg.event.sdpMid = null;
      }
      if (typeof msg.event.sdpMLineIndex === undefined) {
        msg.event.sdpMLineIndex = null;
      }
      if (typeof msg.event.usernameFragment === undefined) {
        msg.event.usernameFragment = null;
      }
      var candidate = new RTCIceCandidate ({
        candidate: msg.event.candidate,
        sdpMid: msg.event.sdpMid,
        sdpMLineIndex: msg.event.sdpMLineIndex,
        usernameFragment: msg.event.usernameFragment,
      });

      //log("*** Adding received ICE candidate: " + JSON.stringify(candidate));
      log ('*** Adding received ICE candidate');
      try {
        await myPeerConnection.addIceCandidate (candidate);
      } catch (err) {
        reportError (err);
      }
    }

    // Handle errors which occur when trying to access the local media
    // hardware; that is, exceptions thrown by getUserMedia(). The two most
    // likely scenarios are that the user has no camera and/or microphone
    // or that they declined to share their equipment when prompted. If
    // they simply opted not to share their media, that's not really an
    // error, so we won't present a message in that situation.

    function handleGetUserMediaError (e) {
      log_error (e);
      switch (e.name) {
        case 'NotFoundError':
          alert (
            'Unable to open your call because no camera and/or microphone' +
              'were found.'
          );
          break;
        case 'SecurityError':
        case 'PermissionDeniedError':
          // Do nothing; this is the same as the user canceling the call.
          break;
        default:
          alert ('Error opening your camera and/or microphone: ' + e.message);
          break;
      }

      // Make sure we shut down our end of the RTCPeerConnection so we're
      // ready to try again.

      closeVideoCall ();
    }

    // Handles reporting errors. Currently, we just dump stuff to console but
    // in a real-world application, an appropriate (and user-friendly)
    // error message should be displayed.

    function reportError (errMessage) {
      log_error (`Error ${errMessage.name}: ${errMessage.message}`);
    }

async function renderVideoPage (videoId) {
  if (getVideoId === undefined || getVideoId === null) {
    toastr.options.closeButton = true;
    toastr.options.timeOut = 5000;
    toastr.error (
      'Cound not determine your visit ID. Please try again.',
      'Warning'
    );
    window.location.hash = '#';
    return false;
  }
  $ ('#videoPage').removeClass ('hiddenPage');
  //**********************
  //Starting a peer connection
  //**********************

  //getting local video stream
  console.log ('Requesting local stream');
  if (myPeerConnection) {
    alert ("You can't start a call because you already have one open!");
  } else {
    // Record the username being called for future reference

    createPeerConnection ();

    // Get access to the webcam stream and attach it to the
    // "preview" box (id "local_video").
    if (!webcamStream) {
      try {
        webcamStream = await navigator.mediaDevices.getUserMedia (
          mediaConstraints
        );
        document.getElementById ('local_video').srcObject = webcamStream;
      } catch (err) {
        handleGetUserMediaError (err);
        return;
      }
    }


  }
}


$ ('#ReadyModalButton').click (function () {
    //This will send the offer.
    console.log( webcamStream
      .getTracks ())
    try {
      webcamStream
        .getTracks ()
        .forEach (
          (transceiver = track =>
            myPeerConnection.addTransceiver (track, {streams: [webcamStream]}))
        );
    } catch (err) {
      handleGetUserMediaError (err);
    }
    toastr.options.closeButton = true;
    toastr.options.timeOut = 5000;
    toastr.info ('Attempting to establish secure connection.', 'Please Hold');

  });
4

1 回答 1

2

(我不能给出正确的答案,因为我不知道正确的规格)我也有这个问题。原因似乎是 addTransceiver()。OfferUser 使用 addTransceiver() 是安全的,但如果 AnswerUser 在 setRemoteDescription() 之前使用 addTransceiver() 向 peerConnection 添加跟踪,它似乎是与 setRemoteDescription() 无关的收发器。

我能想到两种可能的解决方案。1. 如果 AnswerUser 使用 peerConnection.addTrack() 而不是 addTransceiver() 那么它可以工作。2、协商完成一次后,用getTransceivers()获取收发器,添加track并改变方向,再进行协商。

于 2020-05-04T03:50:23.183 回答