个人中心
gpt4 book ai didi

javascript - 使用 WebRTC 在第二个对等点获取图像(无需服务器)

转载 作者：行者123 更新时间：2023-12-01 01:19:01 26 4
gpt4 key购买 nike

我正在创建一个方向调用，但无法在第二个对等点中接收图像。

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

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)

caller() 将信息保存在 localStorage 中，called() 读取并使用它来接受调用，后者接收 getRemoteStreams，但我无法在视频元素中播放它。

谁能帮我解决这个问题吗？

这是我第一次使用 WebRTC，我知道我错过了一些东西。

<小时/>

当我第二次单击开始按钮时，它可以在 Chrome 中运行，但它会在终端中显示以下折旧消息:

depreciation message

最佳答案

localStorage 作为信号 channel 是演示两个选项卡之间调用的巧妙技巧。

但是您只完成了提议/答案交换的一半循环。您需要将答案返回给调用者。例如

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

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

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

FWIW我写过localSocket帮助这个的帮助类。这是 demo (在 2 个选项卡中打开)。

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

关于javascript - 使用 WebRTC 在第二个对等点获取图像(无需服务器)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54429197/

26 4 0
文章推荐： xcode - 打开 xcode 不断添加旧证书
文章推荐： javascript - 动态添加到 JSON 文件
文章推荐： javascript - c[num] 和 c.num 一样吗
文章推荐： javascript - 从远程位置加载 Javascript 附带的资源
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com