使用WebRTC（無需服務器）在第二個對等方中獲取圖像

Question

我正在創建一個方向呼叫，但無法在第二個對等方收到圖像。

我的應用程序具有以下代碼：

的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>

Java腳本

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，但是我不能在video元素中播放該信息。

誰能幫我這個？

這是我第一次使用WebRTC，我知道我缺少一些東西。

當我再次單擊“開始”按鈕時，它可以在Chrome中運行，但是會在終端中顯示以下折舊消息：

Answer 1

localStorage作為信令通道是演示兩個選項卡之間的調用的巧妙技巧。

但是您只完成了要約/答案交換的一半。 您需要將答案返回給呼叫者。 例如

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

...然后添加接收該代碼的代碼，並在第一個對等設備上調用setRemoteDescription(answer) 。

您還需要交換ICE候選人，這使事情變得復雜。

FWIW我已經寫了localSocket helper類來幫助這個問題。 這是一個演示（在2個選項卡中打開）。

最后，不贊成使用 getRemoteStreams() ，因為您使用ontrack所以這里ontrack 。

Answer 2

多虧了很棒的@jib，我才知道我做錯了什么。 這是傳遞給相同情況的正確代碼。

MUITO OBRIGADO @吉格

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)

使用WebRTC（無需服務器）在第二個對等方中獲取圖像

問題描述

我的應用程序具有以下代碼：

的HTML

Java腳本

2 個解決方案

解決方案1
2 2019-01-29 23:59:39

解決方案2
0 2019-01-30 03:19:16

使用WebRTC（無需服務器）在第二個對等方中獲取圖像

問題描述

我的應用程序具有以下代碼：

的HTML

Java腳本

2 個解決方案

解決方案1 2 2019-01-29 23:59:39

解決方案2 0 2019-01-30 03:19:16

解決方案1
2 2019-01-29 23:59:39

解決方案2
0 2019-01-30 03:19:16