Webrtc, как настроить видео пульт после того, как получатель вернул ответ - PullRequest
Новая
       11

Webrtc, как настроить видео пульт после того, как получатель вернул ответ

1 голос
/ 08 марта 2019

привет всем, я новичок в этом, я почти все сделал, но только на моем инициаторе, чтобы сказать что-то, я не знаю способ получения удаленного видеопотока после получения ответа, может кто-нибудь помочь мне, пожалуйста?

это мой клиент 

$(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);
    });

Я получаю удаленное видео на моем приемнике от инициатора, но не от инициатора, я не знаю, что мне не хватает для получения удаленного видео, спасибо, ребята

Ответы [ 2 ]

2 голосов
/ 09 марта 2019

Инициатор вызывает addTrack(), но не получатель - нет, так что это только отправка мультимедиа в одну сторону.

В prepareToReceiveOffer вы звоните getUserMedia(), но никогда не добавляете результирующие треки в одноранговый узелподключение.Если вам нужен двусторонний вызов, он должен позвонить addTrack() в рамках согласования предложения / ответа.

Просто обязательно позвоните getUserMedia() после setRemoteDescription до не пропустите кандидаты ICE : 

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];
        };
    });
}
0 голосов
/ 11 марта 2019

Я получаю разрешение, в данном конкретном случае я использую функцию initiateSignaling, когда я получаю предложение, мне нужно включить это 

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

, теперь работает для меня

...