网站首页 > 技术文章 正文
如何使用WebRTC建立一个视频会议App(一)
服务器接收到‘’准备好了‘’的信息并通过发送同样信息通知第一个参与者。这就开始了被称作发信的交换信息过程,因此我们需要添加相应的handlers到client.js文件中。
当第一个参与者接收到准备好了的信息时,它的反馈创建了一个RTCPeerConnection对象,设置对象的onicecandidate和onaddstream listeners为相应的onIceCandidate和onAddStream函数,我们之后将会重温这些函数。最终它将本地流添加到了peer connection对象中。之后它准备一个请求,请求存储在本地并通过setLocalAndOffer函数发送到服务器端。
服务器传递请求到第二个参与者,第二个参与者反过来在请求反馈方面做了同样的事:创建了它自己的peer connection对象并且设置事件听众,接着存储请求准备一个将会存储在本地的应答,接着通过setLocalAndAnswer函数发送到服务器端。
和请求相似,服务器会将回答传递给第一个参与者。当发生这些时,两个peers就在通过向服务器发送candidate信息交换icecandidates,服务器反过来传递它们给其它客户端。Ice candidates被添加到每一个客户端的peer connection 对象中。将如下代码添加到client.js文件中。
第二步就此完成。
当一切准备就绪后,每一个peer接收远程流,接着onAddStream函数将会将它显示在屏幕上。以下是client.js文件中的函数。
现在我们完成了第三步。
然而我们的服务器还没有完成。我们从询问所需的library开始,并且在public文件夹中设置static host来服务客户端文件。
接着我们使用socket.io定义信号处理 程序。首先我们会得到创建或加入事件,它们会统计房间中客户端的数量。如果没有用户说明客户端是第一个peer,因此向它发送一个创建事件。如果房间中已经存在了一个参与者,那么客户端会被添加到房间中,并且向它发送加入事件。如果房间中已经有两个用户,那么这被认为是房间满了的情况,因此不需要再添加客户端。
这一连串的事件都是按照传递顺序工作的,向房间中其它客户端发送接收到的同样的信息。创建一个新文件,粘贴如下代码并保存它到项目文件夹下,名为server.js.
既然我们已经具备了所有所需的文件,我们已经准备好测试我们的应用了。在命令行,进入项目文件夹中并且输入如下命令:
node server.js
接着使用 Google Chrome or Mozilla Firefox,将此链接在两个标签下打开,确保你都输入了同样的房间号。
是不是很酷?
我们已经创建了我们的第一个视频会议App.
原文标题:How to Build a Video Conference Application with WebRTC 作者:‘Hector Zelaya , ‘
猜你喜欢
- 2025-05-27 新式炫富 “土豪摔”请了解一下!假如你摔倒,会摔出什么呢?
- 2025-05-27 谈谈 WebRTC 的 SDP Unified Plan
- 2025-05-27 freeswitch的ACL规则
- 2025-05-27 WebRTC入门篇:WebRTC以及测试驱动开发(TDD)指导
- 2025-05-27 处理 WebRTC ICE重启应对NAT变化
- 2025-05-27 webrtc原理及相关api使用逻辑
- 2025-05-27 pion/webrtc v4.1.0重磅升级,AV1全支持+多编解码协商,实时通!
- 2025-05-27 街拍达人不仅要美,还要懂摄影!
- 2025-05-27 零基础快入门WebRTC:基本概念、关键技术、与WebSocket的区别等
- 2025-05-27 Web前端的WebRTC攻略(一)基础介绍
- 最近发表
-
- 使用这个新的 ECMAScript 运算符告别 Try/Catch!
- 抛弃 try-catch,错误处理的新方案
- 深圳尚学堂Java培训:总结java编程常用的快捷键(二)
- Try-catch speeding up my code?(speeding up)
- 能代替try catch处理异常的优雅方式
- Linux系统stress压力测试工具(linux自带的压力测试)
- ESL-通过事件控制FreeSWITCH(es事务控制)
- 谈JVM xmx, xms等内存相关参数合理性设置
- 嵌入式工程师竟然看不懂这些专业语句,那真别怪人说你菜
- 不会前端也能写官网?没问题,Devbox+Cursor 带你起飞
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)