11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件
Posted autofelix
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件相关的知识，希望对你有一定的参考价值。
一、RTCDataChannel
WebRTC不但可以让你进行音视频通话，而且还可以用它传输普通的二进制数据，比如说可以利用它实现文本聊天、文件的传输等WebRTC的数据通道（RTCDataChannel）是专门用来传输除了音视频数据之外的任何数据，模仿了WebSocket的实现RTCDataChannel支持的数据类型也非常多，包括：字符串、Blob、ArrayBuffer以及ArrayBufferViewWebRTC的RTCDataChannel使用的传输协议为SCTP，即Stream Control Transport ProtocolRTCDataChannel既可以在可靠的、有序的模式下工作，也可在不可靠的、无序的模式下工作- 可靠有序模式（TCP 模式）：在这种模式下，消息可以有序到达，但同时也带来了额外的开销，所以在这种模式下消息传输会比较慢
- 不可靠无序模式（UDP 模式）：在此种模式下，不保证消息可达，也不保证消息有序，但在这种模式下没有什么额外开销，所以它非常快
- 部分可靠模式（SCTP 模式）：在这种模式下，消息的可达性和有序性可以根据业务需求进行配置
RTCDataChannel对象是由RTCPeerConnection对象创建，其中包含两个参数：- 第一个参数：是一个标签（字符串），相当于给 RTCDataChannel 起了一个名字
- 第二个参数：是 options，包含很多配置，其中就可以设置上面说的模式，重试次数等
// 创建 RTCPeerConnection 对象
var pc = new RTCPeerConnection();
// 创建 RTCDataChannel 对象
var dc = pc.createDataChannel("dc",
ordered: true // 保证到达顺序
);
// options参数详解, 前三项是经常使用的：
// ordered：消息的传递是否有序
// maxPacketLifeTime：重传消息失败的最长时间
// maxRetransmits：重传消息失败的最大次数
// protocol：用户自定义的子协议, 默认为空
// negotiated：如果为 true，则会删除另一方数据通道的自动设置
// id：当 negotiated 为 true 时，允许你提供自己的 ID 与 channel 进行绑定
// dc的事件处理与 WebSocket 的事件处理非常相似
dc.onerror = (error) =>
// 出错的处理
;
dc.onopen = () =>
// 打开的处理
;
dc.onclose = () =>
// 关闭的处理
;
dc.onmessage = (event) =>
// 收到消息的处理
var msg = event.data;
;
二、文本聊天
- 点击 Start 按钮时，会调用 start方法获取视频流然后 调用 conn 方法
- 然后调用
io.connect()连接信令服务器，然后再根据信令服务器下发的消息做不同的处理 - 数据的发送非常简单，当用户点击
Send按钮后，文本数据就会通过RTCDataChannel传输到远端 - 对于接收数据，则是通过
RTCDataChannel的onmessage事件实现的 RTCDataChannel对象的创建要在媒体协商（offer/answer）之前创建，否则WebRTC就会一直处于connecting状态，从而导致数据无法进行传输RTCDataChannel对象是可以双向传输数据的，所以接收与发送使用一个RTCDataChannel对象即可，而不需要为发送和接收单独创建RTCDataChannel对象
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.preview
display: flex;
.remote
margin-left: 20px;
.text_chat
display: flex;
.text_chat textarea
width: 350px;
height: 350px;
.send
margin-top: 20px;
</style>
</head>
<body>
<div>
<div>
<button onclick="start()">连接信令服务器</button>
<button onclick="leave()" disabled>断开连接</button>
</div>
<div class="preview">
<div>
<h2>本地:</h2>
<video id="localvideo" autoplay playsinline></video>
</div>
<div class="remote">
<h2>远端:</h2>
<video id="remotevideo" autoplay playsinline></video>
</div>
</div>
<!--文本聊天-->
<h2>聊天:</h2>
<div class="text_chat">
<div>
<textarea id="chat" disabled></textarea>
</div>
<div class="remote">
<textarea id="sendtext" disabled></textarea>
</div>
</div>
<div class="send">
<button onclick="send()" disabled>发送</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</body>
<script>
use strict
var localVideo = document.querySelector(video#localvideo);
var remoteVideo = document.4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享