使用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