WebRTC 教程五：WebRTC搭建视频聊天室

时间：2023-07-22 09:21:02 | 来源：网站运营

时间：2023-07-22 09:21:02 来源：网站运营

WebRTC 教程五：WebRTC搭建视频聊天室：

这篇文章主要介绍了 WebRTC 聊天室的整体演示，以及 WebRTC 视频聊天的功能设计，代码逻辑以及整体演示。

目录

• WebRTC 聊天室：总体演示
• WebRTC 视频聊天: 设计
• WebRTC 视频聊天: 客户端实现
• WebRTC 视频聊天：Full Demo

附上教程（1）：WebRTC信令、架构和 API

附上教程（2）：WebRTC API和Leak

附上教程（3）：WebRTC特性，调试方法以及相关服务器搭建方法

附上教程（4）：WebRTC 聊天室设计

WebRTC 聊天室：总体演示

讲者会展示整个 WebRTC 聊天室应用的 demo。在下载了源码之后，运行 demo 之前，首先需要使用 node 命令运行信令服务器。之后就可以看到已经登录的用户列表。

点击用户，就开始创建 RTCDataChannel，并弹出请求用户界面，

在对端用户界面，就会弹出收到的聊天室请求内容，用户可以选择接收或者拒绝请求。

如果用户选择同意接收请求，就会创建一个聊天室，两个用户的状态也会从 "online" 变为 "busy"。

如果用户想要退出，可以直接点击右上角的 "Leave"，即可退出聊天室，用户状态也会从 "busy" 变回 "online"。

一旦有用户关闭了浏览器，就等同于退出登录状态，其他用户也不会在在线列表中看到该用户。

讲者继续讲了一些这个聊天室 demo 的限制：

• 聊天室不支持苹果的 Safari 浏览器；
• 暂时不支持文件共享；
• 不能存储聊天记录；
• 仅支持一对一聊天。

LinuxC++音视频开发视频：免費】FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发
【文章福利】：音视频学习资料、视频和学习路线图资料、以及面试题（资料包括C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等），免費分享，有需要的可以加君羊领取哦！~学习交流君羊994289133点击加入领取资料

WebRTC 视频聊天: 设计

对于客户端网页 UI 设计，还是选择 HTML 和 CSS 来进行设计，而对于服务端逻辑设计，选择用 JavaScript 和 WebSocket 来进行设计。

讲者介绍了这个视频聊天应用的一些功能：

• 用户可以登录应用；
• 服务端会保持在线用户列表；
• 用户可以请求与其他用户的视频聊天；
• 一旦两个用户都就绪，就会创建一个视频聊天室；
• 用户可以视频聊天同时打字聊天；
• 用户可以退出聊天室；
• 应用仅支持一对一聊天。

对于客户端的 UI 设计，需要使用 CSS 和 JavaScript 来创建 HTML 页面，通过 Json 信息与信令服务器交互。信令服务器则需要处理用户状态，处理用户的回话，双方信令转发等功能。这些信令服务器部分的代码可以直接使用上个 WebRTC Chat Room 应用的信令服务器代码。

WebRTC 视频聊天: 客户端实现

服务器部分的 node.js 代码与之前的 demo 相同，讲者不再赘述。

讲者展示了客户端 app 的代码。

一个用户 a 向另一个用户 b 发送请求后，首先服务器会判断用户 b 是否已在会议中，若用户可用，则运行 getUserMedia() API 来获取麦克风和相机。这些都是在 permission_camera_before_call 函数中处理的。

在获取了麦克风和相机权限后，就通过 create_videocall_page 函数来创建一个动态的视频会议页面，还可以显示麦克风和摄像头的设备名。流建立完成后，就可以开始创建 RTCPeerConnection，并通过 addTrack API 来把流加入到 RTCPeerConnection 中。

对于客户端的搭建，还需要添加 DataChannel 用于打字聊天。在 DataChannel 搭建完成后，就可以创建请求，并把客户端用户本地描述设置为此请求，最后把这个新创建好的请求发送给信令服务器，并由服务器转发给另一个客户端。

一旦对端用户点击接收请求后，就会开始创建答复，并设置 SDP，答复 ICE 请求。在用户准备好后，就会在两边用户页面上弹出聊天窗口，也需要把用户的状态设置为"busy"。

接下来讲者展示了该应用的 demo，首先我们可以在浏览器中加载 index.html 页面，并通过用户名登录。

在左侧可以看到在线用户列表，并点击 call 发起通话，对端可以选择接收或者拒绝。在接收后，还要在左上角允许摄像头权限，就会弹出视频聊天界面。

除视频聊天界面外，还可以在右侧进行打字聊天。

WebRTC 视频聊天：Full Demo

讲者展示了该视频聊天的总体演示。在启动聊天应用前，需要先把信令服务器开启。

在打开 HTML 页面之后，通过用户名登录进应用。

在成功登陆应用后，就可以看到主界面，左侧可以看到在线用户列表。可以直接点击用户来发起聊天请求。

在发起聊天请求后，左上角会弹出摄像头硬件授权申请，而在接收端会弹出接收或者拒绝请求窗口。

在另一端接受请求后，就可以看到聊天室界面，其中左侧为视频画面，右侧为聊天窗口。

用户可以在视频画面下方选择关闭或开启摄像头或者麦克风。在想要退出聊天室时，直接点击 Leave 即可退出聊天室。