PeerJS对等体连接异常：音频通话应用接收端问题求助

Hey there, let's break down the issues with your PeerJS audio call setup and fix them step by step:

1. Misplaced Connection Listener #

Your initiator side's peer.on('connection') is wrapped inside callDialog.init(function(){...}) — if this callback runs after the receiver has already sent the connection request, you'll miss the connection event entirely. You should set up this listener as soon as you initialize your Peer instance, not wait for the call dialog to load.

2. Wrong Stream Assigned to Audio Element #

In your receiver's call.on('stream') handler, you're using your local stream instead of the incoming remoteStream for the audio source. That's why you won't hear the caller's audio even if the call connects.

3. Undefined currentCall on Decline #

When declining the call, you're trying to close window.currentCall, but this variable only gets set when you accept the call. You should directly close the incoming call object instead.

4. Unnecessary Separate Data Connection #

PeerJS's Call object already supports sending data via call.send() — you don't need to create a separate peer.connect() connection just to send ACCEPT/DECLINED messages. This simplifies your code and avoids potential connection race conditions.

Fixed Receiver Code

peer.on('call', function(call) {
    var receiveCall = bootbox.dialog({
        className: "modal-danger nonumpad",
        closeButton: false,
        animate: true,
        title: 'Call Received',
        message: "Accept or Decline",
        onEscape: null,
        buttons: {
            pickup: {
                label: "<i class=\"fa fa-phone\"></i> Answer",
                className: "btn-warning btn-lg pull-left",
                callback: function(){
                    // Send accept directly via the call object
                    call.send('ACCEPT');
                    window.currentCall = call;
                    call.answer(stream); // Answer with local stream
                    call.on('stream', function(remoteStream) {
                        var audio = $('<audio autoplay />').appendTo('body');
                        // Use remoteStream here, not local stream!
                        audio[0].src = (URL || webkitURL || mozURL).createObjectURL(remoteStream);
                    });
                    return false;
                }
            },
            hangup: {
                label: "<i class=\"fa fa-phone\"></i> Decline",
                className: "btn-warning btn-lg pull-left",
                callback: function(){
                    // Send decline directly via the call object
                    call.send('DECLINED');
                    call.close(); // Close the incoming call directly
                    stream.getTracks().forEach(track => track.stop());
                    receiveCall.modal('hide'); // Close the dialog
                    return false;
                }
            }
        }
    });
});

Fixed Initiator Code

// When you initiate the call, listen for data directly on the call object
var call = peer.call(remotePeerId, localStream);
call.on('data', function(data) {
    console.log('Received call status:', data);
    if(data == "ACCEPT"){
        $("#test").text("This is dynamic msg");
        $("#hangup").text("Hangup");
    } else if (data == "DECLINED"){
        call.close();
        // Add your declined logic here (e.g. update UI to show call was rejected)
    }
});

// Keep your callDialog init as is — no need for separate connection listener now
callDialog.init(function(){
    // Your existing dialog initialization logic here
});

内容的提问来源于stack exchange，提问作者sourceplaze