添加文本聊天到 webRTC audio/video 聊天
Add text chat to webRTC audio/video chat
我使用这个 tutorial, and now I want to add a text chat; I read about channels and I checked this example 创建了一个 audio/video 与 webRTC 的聊天,但是由于示例不使用套接字,我还有一些问题。
我是否需要创建另一个频道来传输文本?我应该使用与 audio/video 相同的频道吗?如果是这样,这会影响流媒体的质量吗?
有人可以告诉我一些开始添加聊天的指南吗?
提前致谢!
更新:
我添加了这段代码
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 个 pc 时,如果我将文本从 pc1 发送到 pc2 它可以工作,但如果我将文本从 pc2 发送到 pc1 则不能。你知道为什么吗?
是的,使用相同的连接,因为它对质量的影响不会超过单独的连接。
只需添加:
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;
};
我使用这个 tutorial, and now I want to add a text chat; I read about channels and I checked this example 创建了一个 audio/video 与 webRTC 的聊天,但是由于示例不使用套接字,我还有一些问题。
我是否需要创建另一个频道来传输文本?我应该使用与 audio/video 相同的频道吗?如果是这样,这会影响流媒体的质量吗? 有人可以告诉我一些开始添加聊天的指南吗?
提前致谢!
更新:
我添加了这段代码
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 个 pc 时,如果我将文本从 pc1 发送到 pc2 它可以工作,但如果我将文本从 pc2 发送到 pc1 则不能。你知道为什么吗?
是的,使用相同的连接,因为它对质量的影响不会超过单独的连接。
只需添加:
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;
};