将文本聊天添加到 webRTC 音频/视频聊天答案

【问题标题】：Add text chat to webRTC audio/video chat将文本聊天添加到 webRTC 音频/视频聊天
【发布时间】：2016-06-29 15:51:05
【问题描述】：

我使用tutorial 创建了一个与 webRTC 的音频/视频聊天，现在我想添加一个文本聊天；我阅读了有关通道的信息并检查了此 example ，但由于该示例未使用套接字，因此我仍有一些问题。

我是否需要创建另一个通道来传输文本？我应该使用与音频/视频相同的频道吗？如果是这样，这会影响流媒体的质量吗？有人可以告诉我一些开始添加聊天的准则吗？

提前致谢！

更新：

我添加了这段代码

function doCall() {
    console.log('Sending offer to peer');
    //create channel for chat
    var dataChannelParams = {
        reliable: true,
        ordered: true
    };
    var sendChannel = pc.createDataChannel("chat", dataChannelParams);

    pc.ondatachannel = function(event) {
        var receiveChannel = event.channel;
        receiveChannel.onmessage = function(event) {
            console.log("ricevo questo messaggio: " + event.data);
            document.querySelector("textarea#receiveText").innerHTML = event.data;
        };
    };

    document.querySelector("button#sendData").onclick = function() {
        var data = document.querySelector("textarea#inputText").value;
        console.log("invio questo messaggio: " + data);
        sendChannel.send(data);
    };

    pc.createOffer(setLocalAndSendMessage, handleCreateOfferError);
}

我创建了两个textarea 对象，一个带有发送按钮，另一个用于接收文本。但是，它只在一个方向上起作用：当我在同一页面上有 2 台电脑时，如果我将文本从 pc1 发送到 pc2 它可以工作，但如果我将文本从 pc2 发送到 pc1 它不会。你知道为什么吗？

【问题讨论】：

标签： javascript node.js text chat webrtc

【解决方案1】：

是的，使用相同的连接，因为它不会比单独的连接更影响质量。

只需添加：

var dataChannel = yourPeerConnection.createDataChannel("chat");

在您致电createOffer 之前，这里有您的数据通道。

更新：

请注意，ondatachannel 仅在未创建数据通道的末尾触发。

每个数据通道都是双向的，所以只需将onmessage添加到创建的dataChannel：

var dataChannel = pc.createDataChannel("chat", dataChannelParams);

dataChannel.onmessage = function(event) {
    document.querySelector("textarea#receiveText").innerHTML = event.data;
};

【讨论】：