1

我正在尝试使用 WebRTC 数据通道将从画布捕获的图像发送到我的 NodeJS 后端服务器。那就是我试图让我的服务器成为对等点。但由于某种原因，我无法建立连接。

客户端

async function initChannel()
{
    const offer = await peer.createOffer();
    await peer.setLocalDescription(offer);

    const response = await fetch("/connect", {
        headers: {
            'Content-Type': 'application/json',
        },
        method: 'post',
        body: JSON.stringify({ sdp: offer, id: Math.random() })
    }).then((res) => res.json());

    peer.setRemoteDescription(response.sdp);

    const imageChannel = peer.createDataChannel("imageChannel", { ordered: false, maxPacketLifeTime: 100 });

    peer.addEventListener("icecandidate", console.log);
    peer.addEventListener("icegatheringstatechange",console.log);

     // drawCanvas function draws images got from the server.
    imageChannel.addEventListener("message", message => drawCanvas(remoteCanvasCtx, message.data, imageChannel));
                                   
     // captureImage function captures and sends image to server using imageChannel.send()
    imageChannel.addEventListener("open", () => captureImage(recordCanvasCtx, recordCanvas, imageChannel));
}

const peer = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.stunprotocol.org:3478" }] });
initChannel();

这里两者captureImage都drawCanvas没有被调用。

服务器端

import webrtc from "wrtc"; // The wrtc module ( npm i wrtc )

function handleChannel(channel)
{
    console.log(channel.label); // This function is not being called. 
}

app.use(express.static(resolve(__dirname, "public")))
    .use(bodyParser.json())
    .use(bodyParser.urlencoded({ extended: true }));

app.post("/connect", async ({ body }, res) =>
{
    console.log("Connecting to client...");

    let answer, id = body.id;

    const peer = new webrtc.RTCPeerConnection({ iceServers: [{ urls: "stun:stun.stunprotocol.org:3478" }] });
    await peer.setRemoteDescription(new webrtc.RTCSessionDescription(body.sdp));
    await peer.setLocalDescription(answer = await peer.createAnswer());

    peer.addEventListener("datachannel",handleChannel)

    return res.json({ sdp: answer });
});

app.listen(process.env.PORT || 2000);

在这里，post 请求处理得很好，但从handleChannel未被调用。

当我运行它时，我没有收到任何错误，但是当我检查连接状态时，它永远显示“新”。我控制台记录了远程和本地描述，它们似乎都设置好了。我在这里做错了什么？

我对 WebRTC 很陌生，我什至不确定这是否是从服务器连续发送图像（用户网络摄像头的帧）和从服务器返回的正确方法，如果有人能告诉我更好的方法，请这样做。

canvas.toBlob()还有一件事，我怎样才能通过数据通道以低延迟发送图像 blob（从）。

4

1 回答 1

1

在我朋友的帮助下，我终于想通了。问题是我必须在调用之前创建 DataChannel peer.createOffer()。peer.onnegotiationneeded仅在创建通道后才调用回调。通常，当您通过将流传递给 WebRTC 创建媒体通道（音频或视频）时，就会发生这种情况，但在这里，由于我不使用它们，所以我必须这样做。

客户端

const peer = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }] });
const imageChannel = peer.createDataChannel("imageChannel");

imageChannel.onmessage = ({ data }) => 
{
    // Do something with received data.
};

imageChannel.onopen = () => imageChannel.send(imageData);// Data channel opened, start sending data.

peer.onnegotiationneeded = initChannel

async function initChannel()
{
    const offer = await peer.createOffer();
    await peer.setLocalDescription(offer);

    // Send offer and fetch answer from the server
    const { sdp } = await fetch("/connect", { 
        headers: {
            "Content-Type": "application/json",
        },
        method: "post",
        body: JSON.stringify({ sdp: peer.localDescription }),
    })
        .then(res => res.json());

    peer.setRemoteDescription(new RTCSessionDescription(sdp));
}

服务器

接收客户通过 post 请求发送的报价。为它创建一个答案并作为响应发送。

app.post('/connect', async ({ body }, res) =>
{
    const peer = new webrtc.RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
    });
    console.log('Connecting to client...');
    peer.ondatachannel = handleChannel;

    await peer.setRemoteDescription(new webrtc.RTCSessionDescription(body.sdp));
    await peer.setLocalDescription(await peer.createAnswer());

    return res.json({ sdp: peer.localDescription });
});

处理数据通道的函数。

/**
 * This function is called once a data channel is ready.
 *
 * @param {{ type: 'datachannel', channel: RTCDataChannel }} event
 */
function handleChannel({ channel })
{
    channel.addEventListener("message", {data} =>
    {
        // Do something with data received from client. 
    });
    
    // Can use the channel to send data to client.
    channel.send("Hi from server");
}

所以这就是发生的事情：

  1. 客户端创建一个数据通道。
  2. 一旦创建了数据通道，就会onnegotiationneeded调用回调。
  3. 客户端创建一个报价并将其发送到服务器（作为发布请求）。
  4. 服务器收到报价并创建答案。
  5. 服务器将答案发送回客户端（作为发布响应）。
  6. 客户端使用收到的答案完成初始化。
  7. ondatachannel在服务器和客户端上调用回调。

我在这里使用了发布请求来交换报价和​​答案，但是如果您喜欢的话，使用 Web Socket 做同样的事情应该很容易。

于 2021-06-24T07:09:57.510 回答