| 多客户端云会议系统（vue+spring boot） | 您所在的位置：网站首页 › 音频会议系统图 › 多客户端云会议系统（vue+spring boot） |
多客户端云会议系统（vue+spring boot）
|
多客户端云会议系统
一.项目介绍
本项目采用vue+spring boot的方式开发，是一个网页版的多客户端云会议系统 二.架构及技术介绍 2.1 架构图如下图所示是系统的整体架构，从前端页面请求，到后端持久层数据库；通过采用微服务部署的思路，以及结合日志收集，运维报警等模块，使得项目整体更加完善。 Vue 是一款用于构建用户界面的JavaScript框架。它基于标准HTML，CSS和JavaScript构建，并提供了一套声明式的，组件化的编程模型，帮助开发者高效地开发用户界面。 2.Vue框架原理Vue对象将页面中 要改变的元素 和 data中变量 进行绑定，绑定后它会一直监听data中变量值的改变，当值发生改变时，会自动找到与其绑定的元素并且让元素跟着发生改变，改变元素的过程不需要人工干预，提高了开发效率，而且这个过程不需要像 JavaScript 那样频繁DOM操作去改变页面结构，只是监听一片区域，提高了执行效率。 3. MVC设计模式把一个业务实现分成三部分： Model：模型，数据模型是服务器获取到数据的部分代码 View：视图，页面部分代码 Controller：控制器，把数据模型中的数据通过实现 展示到页面中 4.创建一个vue项目为项目配备环境，在idea中，为项目编辑运行配置，选择npm，脚本填写为serve，点击确定 在界面创建完成后创建一个route文件夹，建立一个js文件来为每个页面添加路由，以及一些路由跳转限制 import Vue from 'vue'; import VueRouter from 'vue-router'; import Login from '@/views/login.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'login', component: Login, }, { path: '/login', name: 'login', component: Login, }, { path: '/home', name: 'home', component: () => import('../views/home.vue'), }, { path: '/room', name: 'room', component: () => import('../views/room.vue'), }, { path: '/personal_center', name: 'PersonalCenter', component: () => import('../views/personalcenter.vue'), }, { path: '/register', name: 'register', component: () => import('../views/register.vue'), }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); export default router;添加路由后，使用vue的一些组件为页面渲染和添加动作，使其从静态页面变为动态页面 （1）首先created是最先执行的，它是一个生命周期，也叫钩子函数，用于页面还没加载完毕时发送请求，初始化data里的值。 （2）data一般用来存放vue中的变量，通过return将数据返回到created中 （3)methods用来写相关模块的函数以及功能的实现，格式为async+方法名，通常通过发送请求请求到后台数据 (4)computed是界于created和mounted之间发生的，此时正是页面进行渲染的时候 (5)mounted是加载完dom操作后才会触发，它和created一样只会执行一次，此时页面已经渲染完成，通常用于存放需要渲染的内容 2.3 后端技术 2.3.1 SpringBoot框架 1.简介springboot是spring家族中的一个全新框架，用来简化spring程序的创建和开发过程。在以往我们通过SpringMVC+Spring+Mybatis框架进行开发的时候，我们需要配置web.xml，spring配置，mybatis配置，然后整合在一起，而springboot抛弃了繁琐的xml配置过程，采用大量默认的配置来简化我们的spring开发过程。 2.特性 能够快速创建基于spring的程序能够直接使用Java main方法启动内嵌的Tomcat服务器运行springboot程序，不需要部署war包提供约定的starter POM来简化Maven配置，让Maven的配置变得简单自动化配置，根据项目的Maven依赖配置，springboot自动配置spring、springmvc等提供了程序的健康检查功能基本可以完全不使用xml配合文件，采用注解配置 3.构建一个 springboot 项目（1）创建 maven 工程，项目只有一个 pom.xml 文件 （2）用 pom.xml 继承 springboot 提供的 spring-boot-starter-parent ，并引入 web 相关依赖。 org.springframework.boot spring-boot-starter-parent 2.3.4.RELEASE org.springframework.boot spring-boot-starter-web（3）引入以上内容后，刷新 maven 仓库，下载依赖的 jar 包 （5）运行启动类，到浏览器访问：localhost:8080/hello springboot 内嵌了 tomcat，无需将项目打包成 war 包启动，可直接打包成 jar 包，通过 java 的命令运行。 （1）引入springboot 提供的 maven 打包插件，并刷新 maven 仓库。 org.springframework.boot spring-boot-maven-plugin（2）在命令行使用 mvn package 命令 或 直接使用 IDEA 中的 Maven 插件打包 WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。 2. WebRTC架构
(1) 调用音视频检测模块，检测终端是否有可用的音视频设备 (2)调用音视频采集模块，采集用户音视频数据 (3) 根据用户选择，是否开启录制（授权） (4) 通过信令模块交换SDP (5) 创建WebRTC的核心对象RTCPeerConnection，之后添加采集到的音视频数据 (6) RTCPeerConnection向STUN(SessionTraversal Utilities forNAT)/TURN(Traversal Using Relays aroundNAT)服务器发送请求，返回caller的外网ip地址和端口号 (7) 通过信令服务器，caller和callee互相传递对方的外网ip地址和端口（媒体协商） (8) 最终P2P链接建立完成，后面就会源源不断的发送音视频数据到对端 4. 属性 属性名描述canTrickleIceCandidates如果远端支持UDP打洞或支持通过中继服务器连接，则该属性值为true。否则，为false。该属性的值依赖于远端设置且仅在本地的 RTCPeerConnection.setRemoteDescription() 方法被调用时有效，如果该方法没被调用，则其值为null.connectionState返回由枚举RTCPeerConnectionState指定的字符串值之一来指示对等连接的当前状态。currentLocalDescription返回一个描述连接本地端的RTCSessionDescription对象。currentRemoteDescription返回一个描述连接远程端的RTCSessionDescription对象iceConnectionState返回与RTCPeerConnection关联的ICE代理的状态类型为RTCIceConnectionState的枚举。 5. 方法 方法名描述createOffer生成一个offer，它是一个带有特定的配置信息寻找远端匹配机器（peer）的请求。这个方法的前两个参数分别是方法调用成功以及失败的回调函数，可选的第三个参数是用户对视频流以及音频流的定制选项（一个对象）。createAnswer在协调一条连接中的两端offer/answers时，根据从远端发来的offer生成一个answer。这个方法的前两个参数分别是方法调用成功以及失败时的回调函数，可选的第三个参数是生成的answer的可供选项。setLocalDescription改变与连接相关的本地描述。这个描述定义了连接的属性，例如：连接的编码方式。连接会受到它的改变的影响，而且连接必须能同时支持新的以及旧的描述。这个方法可以接收三个参数，一个 RTCSessionDescription 对象包含设置信息，还有两个回调函数，它们分别是方法调用成功以及失败的回调函数。addIceCandidate添加iceCandidate时调用的方法getConfiguration获取配置信息时调用的方法getLocalStreams返回连接的本地媒体流数组。这个数组可能是空数组 6. 事件 事件名描述onaddstream当 MediaStream 被远端机器添加到这条连接时，该事件会被触发。 当调用 RTCPeerConnection.setRemoteDescription() 方法时，这个事件就会被立即触发，它不会等待SDP协商的结果。ondatachannel当一个 RTCDataChannel 被添加到连接时，这个事件被触发。onicecandidate当一个 RTCICECandidate 对象被添加时，这个事件被触发。oniceconnectionstatechange当 iceConnectionState 改变时，这个事件被触发onnegotiationneeded浏览器发送该事件以告知在将来某一时刻需要协商。onremovestream当一条 MediaStream 从连接上移除时，该事件被触发。onsignalingstatechange当 signalingState 的值发生改变时，该事件被触发。ontrack当新轨道加入时，该事件被触发。 7.交互式连接建立 ICE当各端调用 setLocalDescription 后，WebRTC就开始建立网络连接，主要包括收集candidate、交换candidate和按优先级尝试连接，该过程被称为ICE（Interactive Connectivity Establishment，交互式连接建立）。其中每个 candidate 都包含IP地址、端口、传输协议、类型等信息。 根据 RFC5245 协议，WebRTC将 candidate分为了四个类型：host、srflx、prflx、relay，它们的优先级依次降低。 三. 总结在本次项目中，通过团队合作的协同开发方式，明白了团队合作的重要性及高效性。我专业水平并不强，但队员们给了我很多的帮助，让我更快的适应到项目的开发中去。我想只有大家齐心协力，及时沟通才能顺利完成任务。在这十天的时间里我们体会到了成功与失败，在老师的指导下，最终完成了本项目，在之后的开发过程中，我将积极学习更多的知识，不断提高自己，为团队做出更多贡献。 |
（4）创建启动类与业务类 
（3）得到一个 jar 包，直接用 java -jar xxx.jar 的命令运行它。 
（4）到浏览器访问 localhost:8080/hello
WebRTC大体可以分为四层：接口层、Session层、引擎层、设备层：
一个正常音视频通信架构如上图所示，通信双方分别是 caller（主叫） 与 callee（被叫），两边的内部逻辑相似，下面以caller端为例，了解内部流程：【本文地址】