Получение изображений во втором узле с использованием WebRTC (без сервера) - PullRequest
Новая
       106

Получение изображений во втором узле с использованием WebRTC (без сервера)

0 голосов
/ 29 января 2019

Я создаю однонаправленный вызов, но не могу получить изображения во втором узле.

Мое приложение имеет следующий код:

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebRTC</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #20262E;
        }

        video {
            width: 100%
        }
    </style>
</head>

<body>
    <button id="initialize">initialize</button>
    <video autoplay></video>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="carai.js"></script>
</body>

</html>

Javascript 

const startButton = document.querySelector('button#initialize')
const video = document.querySelector('video')
const confPeer = {}
const channel = new BroadcastChannel('loc')
const peer = new RTCPeerConnection(confPeer)

//
// SIMULATE WEBSOCKET
//

channel.addEventListener('message', message => {
    let {
        action,
        value
    } = message.data

    switch (action) {
        case 'offer':
            startButton.remove()
            answer(value)
            break

        case 'answer':
            done(value)
            break

        default:
            console.error('wtf')
    }
})

// 
// START CALL
// 

const start = async () => {
    console.log('----- start')

    const localStream = await navigator.mediaDevices.getUserMedia({
        // audio: true,
        video: true
    })

    video.srcObject = localStream

    localStream.getTracks().forEach(track => peer.addTrack(track, localStream));

    let offer = await peer.createOffer()

    peer.setLocalDescription(offer)

    channel.postMessage({
        action: 'offer',
        value: JSON.stringify(offer)
    })
}

//
// ANSWER CALL
//

const done = receivedAnswer => {
    console.log('----- done')
    peer.setRemoteDescription(JSON.parse(receivedAnswer))
}

//
// ESTABLISH CALL
// 

const answer = async receivedOffer => {
    console.log('----- answer')

    peer.ontrack = e => {
        console.log('----- ontrack', e)
        video.srcObject = e.streams[0];
    }

    receivedOffer = JSON.parse(receivedOffer)

    let desc = new RTCSessionDescription(receivedOffer)

    peer.setRemoteDescription(desc)

    let answer = await peer.createAnswer()

    await peer.setLocalDescription(answer)

    channel.postMessage({
        action: 'answer',
        value: JSON.stringify(answer)
    })
}

//
// INITIALIZE
//

startButton.addEventListener('click', start)

Вызывающая сторона () сохраняет информацию в localStorage, который вызвал () читает и использует для принятия вызова, который получает getRemoteStreams, но я не могу воспроизвести его в видеоelement.

Может ли кто-нибудь помочь мне с этим?

Я впервые использую WebRTC, я знаю, что что-то упустил.

Это работает вChrome, когда я нажимаю кнопку запуска второй раз, но в терминале отображается следующее сообщение об амортизации:

depreciation message

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Благодаря великолепному @jib я понял, что делаю не так.Вот правильный код для тех, кто переходит в ту же ситуацию.

MUITO OBRIGADO @ jig 

const startButton = document.querySelector('button#initialize')
const video = document.querySelector('video')
const confPeer = {}
const channel = new BroadcastChannel('loc')
const peer = new RTCPeerConnection(confPeer)

//
// SIMULATE WEBSOCKET
//

channel.addEventListener('message', message => {
    let {
        action,
        value
    } = message.data

    switch (action) {
        case 'offer':
            startButton.remove()
            answer(value)
            break

        case 'icecandidate':
            icecandidate(value)
            break

        case 'answer':
            done(value)
            break

        default:
            console.error('wtf')
    }
})

// 
// PEER A: START CALL
// 

const start = async () => {
    console.log('----- start')

    const localStream = await navigator.mediaDevices.getUserMedia({
        // audio: true,
        video: true
    })

    peer.onicecandidate = ev => {
        console.log('candidate', ev.candidate)
        channel.postMessage({
            action: 'icecandidate',
            value: JSON.stringify(ev.candidate)
        })
    }

    video.srcObject = localStream

    localStream.getTracks().forEach(track => peer.addTrack(track, localStream));

    let offer = await peer.createOffer()

    peer.setLocalDescription(offer)

    channel.postMessage({
        action: 'offer',
        value: JSON.stringify(offer)
    })
}

//
// PEER A: ANSWER CALL
//

const done = receivedAnswer => {
    console.log('----- done')
    peer.setRemoteDescription(JSON.parse(receivedAnswer))
}

//
// PEER B: ICE CANDIDATE
//

const icecandidate = receivedIcecandidate => {
    let candidate = JSON.parse(receivedIcecandidate)
    console.log('received icecandidate', candidate)
    peer.addIceCandidate(candidate)
}

//
// PEER B: ESTABLISH CALL
// 

const answer = async receivedOffer => {
    console.log('----- answer')

    peer.ontrack = e => {
        console.log('----- ontrack', e)
        video.srcObject = e.streams[0];
    }

    receivedOffer = JSON.parse(receivedOffer)

    let desc = new RTCSessionDescription(receivedOffer)

    peer.setRemoteDescription(desc)

    let answer = await peer.createAnswer()

    await peer.setLocalDescription(answer)

    channel.postMessage({
        action: 'answer',
        value: JSON.stringify(answer)
    })
}

//
// INITIALIZE
//

startButton.addEventListener('click', start)
0 голосов
/ 30 января 2019

localStorage в качестве канала сигнализации - удобный способ демонстрации вызовов между двумя вкладками.

Но вы завершили только половину круга обмена предложением / ответом.Вы должны получить ответ обратно звонящему.Например, 

localStorage.setItem('b', JSON.stringify(answer))

... и затем добавьте код, который получает его и вызывает setRemoteDescription(answer) на 1-м узле.

Вам также необходимо обменяться кандидатами ICE, что усложняет ситуацию.

FWIW Я написал localSocket вспомогательный класс, который помогает с этим.Вот демоверсия (открывается в 2 вкладках).

Наконец, getRemoteStreams() устарела и здесь не нужна, так как вы используете ontrack.

...