锐客网

  1. 首页 > 睿知 > it技术 > >

11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件

IT知识视频直播直播系统

【11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件】寸阳分阴须爱惜，休负春色与时光。这篇文章主要讲述11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件相关的知识，希望能为你提供帮助。
一、RTCDataChannel

  • WebRTC 不但可以让你进行音视频通话，而且还可以用它传输普通的二进制数据，比如说可以利用它实现文本聊天、文件的传输等
  • WebRTC 的数据通道（RTCDataChannel）是专门用来传输除了音视频数据之外的任何数据，模仿了 WebSocket 的实现
  • RTCDataChannel 支持的数据类型也非常多，包括：字符串、Blob、ArrayBuffer 以及 ArrayBufferView
  • WebRTC 的 RTCDataChannel 使用的传输协议为 SCTP，即 Stream Control Transport Protocol
  • RTCDataChannel 既可以在可靠的、有序的模式下工作，也可在不可靠的、无序的模式下工作
  • 可靠有序模式（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 对象
< !DOCTYPE html>
< 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="http://img.readke.com/220615/125640L34-0.jpg"> < /script>
< script src="http://img.readke.com/220615/125640JR-1.jpg"> < /script>
< /body>
< script>
use strict

var localVideo = document.querySelector(video#localvideo);
var remoteVideo = document.

    推荐阅读


    上一篇：ACL22挖宝 一个微调思路

    下一篇：讲的很明白！