您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > APP

如何使用WebRTC建立一个视频会议App

时间:2021-07-29 10:11:51  来源:  作者:易简视源云会议
如何使用WebRTC建立一个视频会议App

 

本篇博文将会提供一个关于如何使用WebRTC建立一个视频会议App的教程。

我们不会将其设计的太复杂,它将会是一个简单的一对一视频会议App,并且仅仅使用了WebRTC APIs和一些其他的library来建立一个信令服务器。

在开始之前,让我们首先进行一个快速摘要简述。

为此我们应该观察如下WebRTC通信过程的图。

如何使用WebRTC建立一个视频会议App

 

WebRTC的通信过程可以看成如下三步:

1.浏览器获取媒体设备(摄像头和麦克风)。

2.通过信令过程,每一个peer和其它所有peer交换信息。

3.发信之后,peers可以直接连接,并开始通信交流。

为了实现这个过程,对于交换信息需要一个信令服务器。同样需要一对STUN/TURN服务器来实现NAT穿透。并且在不能直接通信的情况下传递媒体。

让我们转到App设计的部分。

App

就如之前所说,我们将会建立一个简单的一对一视频会议App.它将会有一个房间功能,在每个房间将会主持不同的会议。

用户首先看到一个需要输入房间号的屏幕界面,可以是用户想去的任意一个房间,接着当另一个用户想要加入的时候,他可以输入同样的房间号来开始交流通话。

此教程的代码在Github的一个公共目录下可以查到,你可以克隆到你的电脑上或跟着文章在纸上描绘出来。

我们使用了JAVAScript作为编程语言,Node.JS作为运行引擎,所以如果你没有的话可以安装它。

让我们从创建一个文件夹开始,这将会是我们的项目文件夹。接着在里面创建另一个名字叫做public的文件夹。现在使用命令行,转到项目文件夹并将如下命令粘贴到命令行里来安装所需。为了下载library需要确保网络连接正常。

npm init -y
npm install -S express@4.15.4 socket.io@2.0.3

现在让我们创建一个简单的html文件。它将会包含两个div元素,一个为了输入房间号,另一个为了显示视频流。这个文件也会包含socket.io客户端library脚本标签,另一个文件我们之后会创建。

使用你最喜爱的文本编辑器,创建一个新文件,粘贴如下代码并且保存在项目文件夹中,在public文件夹里保存为index.html文件。

如何使用WebRTC建立一个视频会议App

 


如何使用WebRTC建立一个视频会议App

 

很棒。下一步是创建一个客户端的JavaScript文件。在这个文件中将会得到网页元素就像div元素的引用,用户用来输入房间号的输入文本,用户点击的按钮,等等。接着我们声明一些全局变量来存储像房间号,本地和远程视频音频流,和点点连接对象和使用的TURN/STUN服务器。

我们还会连接到socket.io服务器并添加一个点击按钮的事件,在这个事件中,我们向服务器发送一条创建或加入的信息。粘贴如下代码到新文件中并且在public文件夹下保存为client.js文件。

如何使用WebRTC建立一个视频会议App

 


如何使用WebRTC建立一个视频会议App

 

在向服务器发送了初始信息之后,我们需要等待响应,我们可以在同一个client.js文件中建立一些event handlers.

当第一个参与者加入了会话,服务器创建一个新房间接着发送给用户‘’加入‘’事件。接着对第二个参与者同样如此:浏览器获取媒体设备,存储视频音频流,在屏幕上展示视频,但是发生了另一个动作,一条‘’准备好了‘’的信息发送到了服务器端。添加如下代码到client.js文件底部。

如何使用WebRTC建立一个视频会议App

 

到目前为止第一步完成。

当第一个参与者接收到准备好了的信息时,它的反馈创建了一个RTCPeerConnection对象,设置对象的onicecandidate和onaddstream listeners为相应的onIceCandidate和onAddStream函数,我们之后将会重温这些函数。最终它将本地流添加到了peer connection对象中。之后它准备一个请求,请求存储在本地并通过setLocalAndOffer函数发送到服务器端。

服务器传递请求到第二个参与者,第二个参与者反过来在请求反馈方面做了同样的事:创建了它自己的peer connection对象并且设置事件听众,接着存储请求准备一个将会存储在本地的应答,接着通过setLocalAndAnswer函数发送到服务器端。

和请求相似,服务器会将回答传递给第一个参与者。当发生这些时,两个peers就在通过向服务器发送candidate信息交换icecandidates,服务器反过来传递它们给其它客户端。Ice candidates被添加到每一个客户端的peer connection 对象中。将如下代码添加到client.js文件中。

如何使用WebRTC建立一个视频会议App

 


如何使用WebRTC建立一个视频会议App

 

第二步就此完成。

当一切准备就绪后,每一个peer接收远程流,接着onAddStream函数将会将它显示在屏幕上。以下是client.js文件中的函数。

如何使用WebRTC建立一个视频会议App

 


如何使用WebRTC建立一个视频会议App

 

现在我们完成了第三步。

然而我们的服务器还没有完成。我们从询问所需的library开始,并且在public文件夹中设置static host来服务客户端文件。

接着我们使用socket.io定义信号处理 程序。首先我们会得到创建或加入事件,它们会统计房间中客户端的数量。如果没有用户说明客户端是第一个peer,因此向它发送一个创建事件。如果房间中已经存在了一个参与者,那么客户端会被添加到房间中,并且向它发送加入事件。如果房间中已经有两个用户,那么这被认为是房间满了的情况,因此不需要再添加客户端。

这一连串的事件都是按照传递顺序工作的,向房间中其它客户端发送接收到的同样的信息。创建一个新文件,粘贴如下代码并保存它到项目文件夹下,名为server.js.

如何使用WebRTC建立一个视频会议App

 


如何使用WebRTC建立一个视频会议App

 

既然我们已经具备了所有所需的文件,我们已经准备好测试我们的应用了。在命令行,进入项目文件夹中并且输入如下命令:

node server.js

接着使用 google Chrome or Mozilla Firefox,将此链接在两个标签下打开,确保你都输入了同样的房间号。

是不是很酷?

我们已经创建了我们的第一个视频会议App.



Tags:视频会议App   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
本篇博文将会提供一个关于如何使用WebRTC建立一个视频会议App的教程。我们不会将其设计的太复杂,它将会是一个简单的一对一视频会议App,并且仅仅使用了WebRTC APIs和一些其他...【详细内容】
2021-07-29  Tags: 视频会议App  点击:(113)  评论:(0)  加入收藏
▌简易百科推荐
  1、明确产品的需求分析+功能  这是最基本的也是第一步,我们要明确自己或者客户真的想要开发一款app应用,其次就要了解到底要开发什么功能什么类别和种类的app应用。所...【详细内容】
2021-12-27  木子科技    Tags:App   点击:(0)  评论:(0)  加入收藏
前言目前,即时通讯在app中逐渐成了不可或缺的功能,尤其是在疫情期间,音视频会议功能更是火了一把,但是想自己开发即时通讯功能,却一点都不简单,如果用原生开发的话,那么Android、iO...【详细内容】
2021-07-29  中控易动    Tags:APP   点击:(104)  评论:(0)  加入收藏
本篇博文将会提供一个关于如何使用WebRTC建立一个视频会议App的教程。我们不会将其设计的太复杂,它将会是一个简单的一对一视频会议App,并且仅仅使用了WebRTC APIs和一些其他...【详细内容】
2021-07-29  易简视源云会议    Tags:视频会议App   点击:(113)  评论:(0)  加入收藏
开发一款app需要多少钱?这是一个比较笼统的问题,没有确切的需求,拥有不同技术经验的团队往往报价都各不相同,因为不知道开发需求,所以无法给出一个准确的价格。因此,想知道app开发...【详细内容】
2021-07-13  hey衡道    Tags:app   点击:(79)  评论:(0)  加入收藏
Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 原生是Native APP,H5就是Web App在Hybrid 当中,如...【详细内容】
2021-04-28  扣丁学堂  今日头条  Tags:APP页面   点击:(289)  评论:(0)  加入收藏
介绍MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页...【详细内容】
2021-04-12  爱分享Coder  今日头条  Tags:WebApp   点击:(309)  评论:(0)  加入收藏
在开发直播APP时,核心要素和基本要素是稳定性,一般各大服务商都有提供demo,并且可以免费测试的,测试可以初步评估下稳定性,看看视频流畅度如何,卡顿是不是很频繁,延时效果怎么样,视...【详细内容】
2021-03-19      Tags:直播APP   点击:(292)  评论:(0)  加入收藏
TOKEN作为用户身份凭证并不能保证数据安全,别人通过抓包等方式很容易拿到TOKEN,带上TOKEN请求我们的API接口就能获取数据;其实换一个角度想:我们只需保证即使TOKEN被别人冒用,也...【详细内容】
2021-02-18      Tags:APP,API   点击:(229)  评论:(0)  加入收藏
在当今移动互联网盛行的时代,网络的形态除了有线连接,还有2G/3G/4G/5G/WiFi等多种手机网络连接方式。不同的协议、不同的制式、不同的速率,使移动应用运行的场景更加丰富。目前...【详细内容】
2021-02-05      Tags:APP   点击:(201)  评论:(0)  加入收藏
虽然目前许多企业都进行了长沙APP开发,开始了移动互联网转型之路,但由于其中绝大部分企业都属于传统行业,对APP应用了解并不多,故而对开发工作也不是很清楚。为了大家能更好的了...【详细内容】
2021-02-01      Tags:APP应用   点击:(214)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条