Webrtc如何在接收器回答后设置视频远程

Question

你好，我是新手，我已经差不多完成了，但只是在我的发起人上说了一些我不知道接收器的方式接收器后接收答案的远程视频流，有人可以帮我吗？

这是我的客户

$(document).ready(() => {

    const configuration = {
        iceServers: [{ url: 'stun:stun2.1.google.com:19302' }]
    }

    var peerConection = null;
    // var btnCall = $('body #call');
    var list = $('#mylist');
    var TitlePrint = $('#titleUser');
    var localVideo = document.getElementById('local');
    var remoteVideo = document.getElementById('remote');
    var userid = null;

    var socket = io();


    socket.on('connect', () => {
        userid = socket.id
        TitlePrint.text(userid);
    });



    socket.on('users', data => {
        var users = [];
        list.empty();
        for (let index = 0; index < data.user.length; index++) {
            if (data.user[index] != userid) {
                users.push(`<button id="call" class="list-group-item list-group-item-action" data-ids="${data.user[index]}">${data.user[index]}</button>`);
            }
        }
        if (users.length != 0) {

            list.html(users);
        } else {
            list.html(`<div class="list-group-item"> Any users connected! </div>`);
        }
    });


    $('body').on('click', '#call', function () {
        let toId = $(this).attr('data-ids');
        socket.emit('initiator', { initiatorid: userid, receiverid: toId });
    });


    socket.on('initiator', data => {

        peerConection = createRTC(socket);

        if (data.initiatorid === userid) {
            console.log('this is the initiator');
            initiateSignaling(socket, peerConection, data.receiverid, data.initiatorid);
        } else {
            console.log('this is the receiver');
            prepareToReceiveOffer(socket, peerConection, data.initiatorid, data.receiverid);
        }
    });


    // =============== HELPERS =====================//

    function createRTC(socket) {
        console.log('createRTC')
        var peerConection = new RTCPeerConnection(configuration);
        peerConection.onicecandidate = (e) => {
            if (e.candidate) {
                console.log('emit candidate')
                socket.emit('send-candidate', e.candidate);
            }
        }

        socket.on('receiver-candidate', (candidate) => {
            peerConection.addIceCandidate(candidate);
        });

        return peerConection;
    }

    function initiateSignaling(socket, peerConection, targetID, from) {
        navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then((stream) => {
            stream.getTracks().forEach(function (track) {
                peerConection.addTrack(track, stream);
            });
            localVideo.srcObject = stream;
            peerConection.createOffer().then(function (offer) {
                return peerConection.setLocalDescription(offer);
            })
                .then(function () {
                    socket.emit('send-offer', {
                        from: from,
                        target: targetID,
                        type: "send-offer",
                        sdp: peerConection.localDescription
                    });
                })
                .catch(function (reason) {
                    console.log('error on create offer', reason);
                });

        })

        socket.on('receiver-answer', (answer) => {
            console.log(answer);
            peerConection.setRemoteDescription(answer.sdp);
            peerConection.ontrack = function (event) {
                remoteVideo.srcObject = event.streams[0];
            };
        });


    }



    function prepareToReceiveOffer(socket, peerConection, targetID, from) {
        socket.on('receiver-offer', (offer) => {
            console.log(offer);
            peerConection.setRemoteDescription(offer.sdp);
            peerConection.createAnswer().then(function (answer) {
                return peerConection.setLocalDescription(answer);
            })
                .then(function () {
                    socket.emit('send-answer', {
                        from: from,
                        target: targetID,
                        type: "send-answer",
                        sdp: peerConection.localDescription
                    });
                });

            peerConection.ontrack = function (event) {
                remoteVideo.srcObject = event.streams[0];
            };
            navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then((stream) => {
                localVideo.srcObject = stream;
            })
        });
    }

});

我只是使用socket.io我处理提供并然后在我刚刚设置的套接字服务器上回答

socket.on('initiator', (init) => {
        console.log(init);
        io.to('video').emit('initiator', init);
    });

    socket.on('send-offer', offer => {
        console.log('sending offer', offer);
        socket.broadcast.emit('receiver-offer', offer);
    });

    socket.on('send-answer', answer => {
        console.log('sending answer', answer);
        socket.broadcast.emit('receiver-answer', answer);
    });

    socket.on('send-candidate', candidate => {
       console.log(candidate);
       socket.broadcast.emit('receiver-candidate',candidate);
    });

我从发起人那里得到了我的接收器上的视频远程，但没有在发起人那里，我不知道我为了获得远程视频而错过了什么感谢

Answer 1

发起者调用addTrack()，但接收者不调用，所以这只是单向发送媒体。

在prepareToReceiveOffer中，您调用getUserMedia()但从未将结果轨道添加到对等连接。如果您想要双向呼叫，则需要在提供/应答协商中调用addTrack()。

务必在getUserMedia()之后给setRemoteDescription打电话给not miss ICE candidates：

function prepareToReceiveOffer(socket, peerConection, targetID, from) {
    socket.on('receiver-offer', (offer) => {
        console.log(offer);
        peerConection.setRemoteDescription(offer.sdp)
            .then(() => navigator.mediaDevices.getUserMedia({video: true, audio: false}))
            .then(stream => {
                localVideo.srcObject = stream;
                for (const track of stream.getTracks()) {
                    peerConection.addTrack(track, stream);
                }
                return peerConection.createAnswer();
            })
            .then(function (answer) {
                return peerConection.setLocalDescription(answer);
            })
            .then(function () {
                socket.emit('send-answer', {
                    from: from,
                    target: targetID,
                    type: "send-answer",
                    sdp: peerConection.localDescription
                });
            })
            .catch(err => console.log(err.message));

        peerConection.ontrack = function (event) {
            remoteVideo.srcObject = event.streams[0];
        };
    });
}

Answer 2

我得到了解决方案，在这个特殊情况下，当我接收报价时，我必须将此信号包含在我的启动信号功能中

socket.on('receiver-answer', (answer) => {
    console.log(answer);
    peerConection.setRemoteDescription(answer.sdp)
    .then(function () {
        return navigator.mediaDevices.getUserMedia({video:true, audio: false});
    })
    .then(function (stream) {
        return peerConection.addStream(stream);
    })

    peerConection.ontrack = function (event) {
        remoteVideo.srcObject = event.streams[0];
    };
});

现在正在为我工​​作