WebRTC系列-RTCDataChannel发送非音视频数据
数据 系列 发送 音视频 Webrtc
2023-09-27 14:26:28 时间
文章目录
即时通讯中我们除了媒体数据的发送需求外,有时候需要发送非媒体数据;WebRTC提供了一种发送非音视频数据的方式就是打他RTCDataChannel,在之前的版本里是使用rtp来传输数据,在最新的版本里已经采用sctp协议来发送数据;这篇文章主要介绍js端的实现;
1. RTCDataChannel基本介绍
RTCDataChannel
接口是WebRTC API的一个功能,可以在两个设备间建立一个对等的通道(ice穿透通道),然后就可以通过该通道发送和接收任意数据。
RTCDataChannel 可以通过RTCPeerconnection 创建,接口函数定义如下:
createDataChannel(label: string, dataChannelDict?: RTCDataChannelInit): RTCDataChannel;
其中label是一个标识表示两边的通道是一个,dataChannelDict是一个可选参数用来配置datachannal的一个设置项目,定义如下:
{
id?: number;
maxPacketLifeTime?: number;
maxRetransmits?: number;
negotiated?: boolean;
ordered?: boolean;
protocol?: string;
}
这些参数一般不用设置,也能使用,如果特殊要求需要设置,这里介绍一下参数的含义:
- ordered 表示通过 RTCDataChannel 的发送的信息的到达顺序需要和发送顺序一致(true), 或者到达顺序不需要和发送顺序一致 (false).也就是是否保证包的顺序性; 属性的默认值是: true.
- maxPacketLifeTime 最大存活时间,在不可靠模式下尝试传输消息的最大毫秒数,也就是一个包持续尝试发送的超时时间,默认是null;
- maxRetransmits 消息尝试重新发送的次数,这个和maxPacketLifeTime只能同时设置一个,默认值是null;
- protocol datachanal 使用的字协议名称,默认是 空字符串;
- negotiated false的时候其中一方调用createDataChannel创建通道,另一方在peerConnection的onDataChannal事件中处理另外一方的datachannal,如果是true那么两端都可以使用createDataChannel来创建数据通道,使用ID来标识数据通道;默认是false;
- id 通道的唯一标识ID ,如果不设置会默认设置一个作为标识;
接下来,看下实际项目中的使用;
2. RTCDataChannel实战
2.1 negotiated=false 创建及事件处理
在之前的demo中新增两个变量:
let sendDC = null;
let recvDC = null;
sendDC是发送方的ID通过peer的create方法生成:
sendDC = peerconnetion.createDataChannel('my channal');
sendDC.onopen = function () {
console.log("sendDC datachannel open");
};
sendDC.onclose = function () {
console.log("sendDC datachannel close");
};
通过设置两个监听用于接收数据通道的状态变化;
recvDC是在对方创建成功后,用于接收远端的消息的,通过peerconnection的ondatachannel可以获取到:
peerconnetion.ondatachannel = (ev)=>{
recvDC = ev.channel;
recvDC.onmessage = function (event) {
console.log(" recvDC received: " + event.data);
};
recvDC.onopen = function () {
console.log("recvDC datachannel open");
};
recvDC.onclose = function () {
console.log("recvDC datachannel close");
};
};
上述代码中同senDC一样监听的打开和关闭的方法;同时需要监听收消息的方法,用来处理对方发送过来的数据;
2.2 negotiated= true 创建及事件处理
同上一节不同的是这里本地和远端的dataChannal都可以使用createDataChanal来创建;创建及监听的设置如下:
const opt = {
negotiated: true,
id : 0
};
sendDC = peerconnetion.createDataChannel('my channal',opt);
sendDC.onopen = function () {
console.log("sendDC datachannel open");
};
sendDC.onclose = function () {
console.log("sendDC datachannel close");
};
sendDC.onmessage = function (event) {
console.log(" recvDC received: " + event.data);
};
运行后在收消息里断点,如下:
2.3 发送消息
RTCDataChannel支持发送文本,二进制数据等内容的数据,其接口定义如下:
send(data: string): void;
send(data: Blob): void;
send(data: ArrayBuffer): void;
send(data: ArrayBufferView): void;
在demo中为了便于测试先发送文本数据,如: sendDC.send('你好 我是 ' + selfid);
;这样就将数据发送出去,在两外一端的recvDC的onmessage中就能收到消息;
如果需要关闭数据通道直接调用close方法就可以关闭,如下:
sendDC.close();
recvDC.close();
sendDC = null;
recvDC = null;
datachannal的基本使用就是以上的接口;
相关文章
- Flink+Kafka 接收流数据并打印到控制台
- Postman使用json提交数据
- 【iOS开发-59】LOL案例:单组tabView、alertView样式、实现监听,以及用reloadData数据刷新
- Google Earth Engine ——LANDSAT/LT04/C02/T1系列数据介绍!
- Google Earth Engine ——LANDSAT 4系列归一化燃烧比热(NBRT)指数8天/32天/年际合成数据集
- 【模式分类】基于基因数据的神经网络模式分类的MATLAB仿真
- 数据科学中的“数据智慧”
- 【大数据新手上路】“零基础”系列课程--日志服务(Log Service)采集 ECS 日志数据到 MaxCompute
- ASM 翻译系列第三十二弹:自制数据抽取小工具
- ASM 翻译系列第五弹:高级知识 ASM 元数据概述
- 分享课丨微软研究院资深主任研究员郑宇教授:多源数据融合与时空数据挖掘(一)
- 网络安全系列-十七: Mothra 用于处理网络流量数据的库和工具的入门示例
- Android系列---JSON数据解析
- Hive分组取Top K数据
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
- 《数据分析实战 基于EXCEL和SPSS系列工具的实践》一3.3 耗时耗力的数据整理过程
- SQL 教程之 使用 T-SQL 分析数据
- 数据集大全之 披萨店销售含披萨配料、销售信息、订单信息(含数据集)
- JDBC 元数据信息 getMetaData()
- 大数据的商业化:从数据、模型到业务逻辑
- 神秘大数据公司卷入诉讼:创始人售股份给中国私募遭阻
- SQL Server 分组排序后取第N条数据(或前N条)
- openstack资源统计监控系列之ceilometer+gnocchi获取VM虚拟机网卡数据流量统计项目实战及实现源码(四)
- 键桥通讯4000万投资创投布局大数据