kurento教程_如何使用WebRTC和Kurento媒体服务器,来建立视频会议App(一)
原文标题:[TUTORIAL] How to Build a Video Conference Application with WebRTC & Kurento Media Server
作者:‘Hector Zelaya’
了解WebRTC如何工作的一种简单方式是通过学习如何使用WebRTC和Kurento媒体服务器建立视频会议App。尽管WebRTC最初的想法是建立peer-to-peer连接,媒体服务器对于添加先进的诸如录制,多方通话等功能是非常有用的。我们将会使用Kurento,它是一个开源媒体服务器,来为我们App中多于两个用户的情况下提供支持。让我们来回顾整体的过程,我们将通过WebRTC建立连接的过程分为三步:
1.浏览器获取媒体设备(摄像头和麦克风)
2.每一个peer通过发信过程与其它所有peer交换信息。
3.交换信息过后,peers可以通过媒体服务器连接,并开始通信。
注意,对于交换信息我们依然需要一个信令服务器,对于NAT穿透我们需要STUN或TURN服务器。另外,我们添加了一个媒体服务器用来将流引到各个peers.
App
我们的App包括一个登陆界面,在此用户输入名字和他想加入和交谈的房间号,在这个房间里他可以看到视频会议的其他参与者。
此教程的代码可以在Github上一个公共目录下获得,你可以将它克隆到你的计算机上,或跟随本文一步步建立它。
如果你跟随本文,请下载adapter.js和kurento-utils.min.js,之后我们将会用到。
我们使用javascript作为编程语言,使用Node.js作为运行引擎,因此如果你没有node的话需要安装它。我们还会使用Docker来在本地运行媒体服务器。请查看关于安装docker的官方链接。
让我们从创建新文件夹开始,这将会是项目文件夹。
接着在里面创建一个叫做public的文件夹,现在将下载的library复制到这里。使用命令行,导航到项目文件夹,并输入如下命令来安装所需要的环境。在下载library的时候需要网络连接。
另外, 启动媒体服务器,在命令行输入以下命令。
开始时,我们需要创建一个html文件包含两个divs,一个是用来登录,另一个用来实际交流。同样,我们添加kurento-utils library,它需要adapter.js , socket.io客户端library和client.js文件。
使用你最喜欢的文本编辑器,建立一个新文件夹,粘贴如下代码并保存到项目文件夹下,在public文件夹里命名为index.html.
很好,现在我们来创建客户端的JS文件。我们从得到网页元素的reference和声明客户用户名和房间号的变量开始,我们同样需要声明一个变量用来储存一系列的会议参与者。接着,就像一对一版本的app一样,我们使用socket.io连接信令服务器,并注册一个点击事件,用来向服务器发送第一条信息,这是一个‘’加入房间‘’的信息。这次我们不直接使用socket.emit()函数,而是使用一个sendMessage()函数,它被定义在文件底部。我们还需要声明服务器信息的handlers。
使用文本编辑器创建client.js文件,并保存在项目里的public文件夹下。
接着,我们创建服务器。我们首先添加所需的node packages.接着声明一对变量来存储Kurento 客户端reference,一个队列来存储在Kurento断点建立之前接收的ice candidates。
接着将App和Kurento服务器的URL设置成as_uri和ws_uri。注意,运行的时候,我们尽量少的使用package来为使用命令行设置这些值提供支持。
接着我们对public文件夹建立一个static的host,并定义通过socket.io接收的events的handlers.最终我们建立一个函数来从媒体服务器得到Kurento客户端的reference,并将App的听众设置在端口3000.
使用你最喜欢的文本编辑器来建立server.js文件并将其保存在项目文件夹下。
现在继续交谈过程,在服务器端,当我们接收客户端发送的加入房间的信息之后,我们调用joinRoom函数,它使用getRoom函数来管理房间。
在getRoom函数里,当第一个客户到达时,我们创建一个新的房间,和一个新的Kurento MediaPipeline, 这个pipeline与房间和一个空的参与者的列表被分到一起。当另一个客户到达时,我们不需要创建新的pipeline,因此仅仅将客户添加到房间中。
回到joinRoom函数,在我们得到房间之后,我们创建一个Kurento WebRTC断点,它被分配到用户。接着如果队列中存在任何ice candidate,它将会被通过调用断点的addIceCandidate函数添加进去,接着我们建立onIceCandidate 事件。
通过发送两条信息,函数结束:一条信息是对于其它在房间中的用户通知他们有新的参与者,另一条信息是对当前用户通知当前存在的参与者。向server.js添加函数如下。
在客户端,两个函数管理服务器发送的newParticipantArrived’ 和 ‘existingParticipants事件,它们是receiveVideo和onExistingParticipants函数。
在onNewParticipants函数中我们首先要建立视频元素来展示流,创建一个用户为当前参与者。用户对象将会存储新创建的视频元素和一个rtcPeer field.
在将用户对象存入全局参与者数组之后,我们实现Kurento的API对象,并将其分配到rtcPeer filed,并准备一个请求来开始发信过程。通过调用receiveVideo函数结束函数。
每个函数都具有它们自己的对于onOffer和onIceCandidate事件的内部函数,事件由rtcPeer对象激发,当准备好的时候,它们负责向服务器发送实际请求和ice candidates,发送receiveVideoFrom和candidate信息。将如下代码添加到client.js.
到目前为止,我们完成了第一步,并且开始发信过程。
kurento教程_如何使用WebRTC和Kurento媒体服务器,来建立视频会议App(一)相关推荐
- kurento教程_[译]WEBRTC开发框架Kurento和Jitsi的比较
Kurento和Jitsi是基于WebRTC的开源媒体服务器开发的两大开源框架,乍看到这两个项目,很难知道他们有什么具体区别,本文对这两个框架进行点对点的比较. 如果你仅仅想获得一个简单的类似&quo ...
- kurento教程_Kurento应用开发指南(以Kurento 6.0为模板) 之七:Kurento API 参考
13.1 Kurento API 参考 Kurento媒体服务器提供了一套API给高级语言使用,以用于应用程序开发人员来控制它. 这些API可以被用于Java或Javascript开发的Kurento ...
- kurento教程_Kurento Room Demo 教程 (发布)
在满足以下要求的机器上,可以将Kurento Room应用程序安装为系统服务(例如kurento-room-demo). 本节介绍如何部署(安装,配置和执行)Room Demo应用程序. 我们还提供了 ...
- ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区 1 Desktop简介 1.1 ArcGIS for Desktop ...
- Esfog_UnityShader教程_前言
很多人在学习Unity的时候对Shader都是一知半解,作为刚入职半年的新人接触Shader的时间也并不长,正因为是新人才能体会到学习Shader时候所遇到的困难和迷茫,无奈于资料不好找,网上难得的几 ...
- 只能输入字母的c语言程序设计教程课后答案,c语言程序设计基础教程_习题答案20120319...
<c语言程序设计基础教程_习题答案20120319>由会员分享,可在线阅读,更多相关<c语言程序设计基础教程_习题答案20120319(54页珍藏版)>请在技术文库上搜索. 1 ...
- Webservice入门教程_教程目录以及地址
场景 项目专栏: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/column/info/37726 实现 1.WebService入门简介教程 https://b ...
- Webservice入门教程_用Eclipse的TCP_IP工具监听请求实现端口转接
场景 项目专栏: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/column/info/37726 Webservice入门教程_用JDK开发Webservice ...
- WMI 使用教程_.NET 入门教程
WMI 使用教程_.NET 入门教程 先介绍一下WMI 相关知识: 什么是WMI 呢? Windows 管理规范 (Windows Management Instrumentation ),它的主要 ...
最新文章
- AI教父Hinton胶囊模型又出新作——胶囊如何表示视觉层次结构
- 从对比学习(Contrastive Learning)到对比聚类(Contrastive Clustering)
- java filter 失效_为何java中的过滤器filter不起作用
- POJ 2653 Pick-up sticks (线段相交)
- 【最新合集】编译原理习题(含答案)_4-7语法分析_MOOC慕课 哈工大陈鄞
- java 使用反射调用可变参数方法
- 计算机数控系统的软件结构模式,第四章 计算机数控系统(CNC系统)
- Vue — 第三天(计算属性和json-server)
- 矩形脉冲信号的_IQ信号的解调学习
- 前端学习(1258):then参数中的函数返回值
- 自制操作系统Antz -- 系列文章
- LeetCode 1042. 不邻接植花(图的数据结构)
- Swift 新建 APP 黑屏问题
- 问题 A: 【一本通提高组合数学】Bullcow 牡牛和牝牛
- iOS build 编译错误 Failed to emit precompiled header for bridging header
- 三角网导线平差实例_导线三角网平差计算中的Wd是什么意思啊?怎么的算出来的?...
- linux更新后不能进入系统,Ubuntu内核升级后无法进入系统的解决办法
- W2019SRV and W10 (1809) Office2019 CN
- php实现对ppt的编辑,如何对PPT图示进行修改和编辑
- c#:list转datatable;xtraReport打印
热门文章
- 怎么将音频音量进行扩大?分享三个简单好用的方法!
- 微信网站链接提示已停止访问该网页怎么办
- .NET C# 将数据保留一位小数并四舍五入
- 第7天 Recyclerview万能的适配器(基本使用、分割线、增加删除动画)
- 缺少成本票怎么解决?首选自然人代开,方便又快捷!
- 深度学习中matplotlib的使用看我就够啦
- spring框架巨巨巨巨详细
- Python opencv 库cv.imread()读取图片为空None,cv.imshow()报错:error: (-215:Assertion failed) _src.empty() in ..
- wps文档怎样添加表格
- 序列化对象为什么需要定义UID值