Question

我正在尝试使用浏览器中提供的API来实现webRTC。我正在使用本教程作为我的指南：https://www.webrtc-experiment.com/docs/WebRTC-PeerConnection.html

这就是我目前正在做的事情。首先，我在页面中获取音频元素。我还有一个audioStream变量用于存储我从navigator.webkitGetUserMedia获取的流，当初始用户点击呼叫按钮或接收用户点击应答按钮时。然后是一个用于存储当前调用的变量。

var audio = document.querySelector('audio');
var audioStream;
var call = {};

然后我有以下设置：

var iceServers = [
    { url: 'stun:stun1.l.google.com:19302' },
    { url: 'turn:numb.viagenie.ca', credential: 'muazkh', username: 'webrtc@live.com' }
];

var sdpConstraints = {
    optional: [],
    mandatory: {
        OfferToReceiveAudio: true,
        OfferToReceiveVideo: false
    }
};

var DtlsSrtpKeyAgreement = {
   DtlsSrtpKeyAgreement: true
};

在页面加载时，我创建了一个新的对等体：

var peer = new webkitRTCPeerConnection({
    'iceServers': iceServers
});

在添加流事件中，我只是将事件分配给调用变量。

peer.onaddstream = function(event){
    call = event;
};

在冰候选人事件中，我将候选人发送给同伴。

peer.onicecandidate = function(event){

    var candidate = event.candidate;

    if(candidate){
        SocketService.emit('message', {
            'conversation_id': me.conversation_id,
            'targetUser': to,
            'candidate': candidate
        });
    }

    if(typeof candidate == 'undefined'){
        send_SDP();
    }

};

收集状态完成后，我发送SDP。

peer.ongatheringchange = function(e){

    if(e.currentTarget && e.currentTarget.iceGatheringState === 'complete'){

        send_SDP();
    }
};

send_SDP方法的作用是将本地描述发送给对等方。

function send_SDP(){
    SocketService.emit('message', {
        'conversation_id': me.conversation_id,
        'targetUser': to,
        'sdp': peer.localDescription
    });
}

这是我在CALL按钮的事件监听器中所拥有的内容。首先它获取音频然后将流分配给当前对等对象。然后它创建一个新的商品，它成功了，设置了本地描述，一旦完成，它就会向另一个同行发送商品。

getAudio(
    function(stream){
        peer.addStream(stream);
        audioStream = stream;
        peer.createOffer(function(offerSDP){
            peer.setLocalDescription(offerSDP, function(){

                    SocketService.emit('message', {
                        'conversation_id': me.conversation_id,
                        'targetUser': to,
                        'offerSDP': offerSDP
                    });
                },
                function(){});
            }, 
            function(){}, 
            sdpConstraints
        );
    },
    function(err){});

在接收对等体上，捕获了商品，因此它显示了某人正在调用的模式。然后，接收对等方可以单击ANSWER按钮。但是在这里，我甚至在点击ANSWER按钮之前就使用优惠来设置会话描述。

SocketService.on('message', function(msg){
    if(msg.offerSDP){
        //show calling modal on the receiving peer
        var remoteDescription = new RTCSessionDescription(msg.offerSDP);
        peer.setRemoteDescription(remoteDescription, function(){
        createAnswer(msg.offerSDP);
        },
        function(){});

    }
});

设置远程描述后，将创建答案。首先获取音频，然后将流添加到本地对等体对象。接下来，使用offerSDP创建远程会话描述，然后将此远程会话描述设置为本地对等方对象。之后，创建答案，在本地对等体上设置本地描述，然后将answerSDP发送给发起呼叫的对等体。

function createAnswer(offerSDP) {
    getAudio(
        function(stream){
            peer.addStream(stream);
            audioStream = stream;

            var remoteDescription = new RTCSessionDescription(offerSDP);
            peer.setRemoteDescription(remoteDescription);

            peer.createAnswer(function(answerSDP) {

                peer.setLocalDescription(answerSDP, function(){

                    SocketService.emit('message', {
                        'conversation_id': me.conversation_id,
                        'targetUser': to,
                        'answerSDP': answerSDP
                    });
                },
                function(){});
            }, function(err){}, sdpConstraints);

        },
        function(err){
        }
    );
};

发起呼叫的对等方收到answerSDP。完成后，它会使用answerSDP创建远程描述并使用它来设置其本地对等对象的远程描述

if(msg.answerSDP){

        var remoteDescription = new RTCSessionDescription(msg.answerSDP);
        peer.setRemoteDescription(remoteDescription, function(){
        },
        function(){});
}

之后，我不确定接下来会发生什么。根据我的理解，onicecandidate事件在启动对等体（调用者）上触发，并将候选者发送给接收对等体。然后执行以下代码：

if(msg.candidate){

    var candidate = msg.candidate.candidate;
    var sdpMLineIndex = msg.candidate.sdpMLineIndex;

    peer.addIceCandidate(new RTCIceCandidate({
        sdpMLineIndex: sdpMLineIndex,
        candidate: candidate
    }));
}

现在，单击ANSWER按钮后，会向接收对等方接收的发起对等方发送一条消息。它使用调用流作为音频元素的源，一旦所有元数据加载，它就播放音频。

SocketService.emit('message', {
    'answerCall': true,
    'conversation_id': me.conversation_id,
    'targetUser': to
});

audio.src = window.URL.createObjectURL(call.stream);
audio.onloadedmetadata = function(e){
    audio.play();
}

这里可能有问题。这就是为什么音频只是单向的。只有发起呼叫的用户才能听到来自接收用户的输入。也可以听到初始用户产生的声音，所以它就像回应你所说的那样。有什么想法吗？

如果您知道任何教程或书籍，说明如何使用本机API调用实现webRTC，那也会有所帮助。提前谢谢。

Answer 1

我可以推荐的最简单的例子是用于基本对等连接的webrtc示例Peer Connection。

对于回声，您可以在本地对等音频元素上设置audio.muted，以防止它播放并产生回声（用户不需要听到自己的音频，所以你可以静音那个元素）。

webRTC音频只能以一种方式工作

1 个答案: