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

我得到了解决，在这种特殊情况下，当我收到我必须包含这个的报价时，我使用了initialSignaling 函数

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];
    };
});

现在为我工作