我的应用程序具有以下代码：

Question

我正在创建一个方向呼叫，但无法在第二个对等方收到图像。

我的应用程序具有以下代码：

HTML

qs = (TestCaseResult.objects
    .filter(run_result=run_result)
    .values('result')
    .annotate(result_count=Count('result'))
    .annotate(result_duration=Sum('duration'))
    )

Javascript

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

caller（）将信息保存在localStorage中，被叫方法读取并用于接受呼叫，该方法接收getRemoteStreams，但是我不能在video元素中播放它。

有人可以帮我吗？

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

当我再次单击“开始”按钮时，它可以在Chrome浏览器中使用，但是会在终端中显示以下折旧消息：

Answer 1

localStorage 作为信令通道，是演示两个选项卡之间调用的巧妙技巧。

但是您只完成了报价/答案交换的半个周期。您需要将答案返回给呼叫者。例如

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

...，然后添加接收它的代码并在第一个对等方上调用setRemoteDescription(answer)。

您还需要交换ICE候选人，这使事情变得复杂。

FWIW，我编写了localSocket帮助程序类，以帮助解决此问题。这是demo（在2个标签中打开）。

最后，getRemoteStreams()是deprecated，在这里不需要，因为您使用ontrack。

Answer 2

感谢出色的@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)

使用WebRTC（无需服务器）在第二个对等方中获取图像

我的应用程序具有以下代码：

HTML

Javascript

2 个答案: