![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
山东大学2019级项目实训
文章平均质量分 78
小栗帽今天吃什么
求求你们去看看《赛马娘2》吧!!!
展开
-
【山大会议】多人视频通话 WebRTC 工具类搭建
山大会议 基于 WebRTC 技术实现多人同时在线的视频会议功能。但是 WebRTC 技术是一项针对 P2P 实现的实时通讯技术,这意味着我们无法直接使用 WebRTC 实现多人的视频会议,因此,在对 WebRTC 技术有一定程度的熟悉后,我将 WebRTC 技术封装为了一组能够支持多人在线的视频会议工具类。目前,要使用 WebRTC 实现支持多人的视频聊天功能,主流的架构有三种:Mesh 架构对流量和带宽的要求极大,它本质上就是在每一个与会者之间建立起完全图网络,每个用户之间互相进行 P2P 通信。这种架原创 2022-06-09 16:59:50 · 846 阅读 · 1 评论 -
【山大会议】软件性能优化及bug修复
这篇文章主要用于记录几个项目中客户端代码的性能优化以及恶性bug的修复。在测试中发现,软件在进行视频通话时,CPU 负载较高,经过检测发现是由于 WebRTC 默认使用 VP8 的编码器、解码器。为了降低 CPU 负载,我允许用户自行选择使用 CPU 或是 GPU 进行渲染。当使用 GPU 进行视频渲染时,会使用 H264 的编码器进行实现。将编码器进行保存,如果有需要则使用 H264 的编码器/解码器。由于我们的 WebRTC 默认用户上传音视频两条轨道,一旦用户不具备某种设备可能会导致整套流程无法走下原创 2022-06-07 11:57:04 · 293 阅读 · 0 评论 -
【山大会议】私人聊天频道 WebRTC 工具类
在山大会议中,我们不仅要实现多人视频会议,我们还需要实现一个类似 QQ、微信 这样的即时通讯服务。在这个一对一的私人聊天服务中,我们添加了一个一对一的私人视频通话功能,一来是增加软件功能的多样性,二来也是为实现多人聊天做铺垫,先熟悉 WebRTC 在实际环境下的运行。首先,我们需要对私人视频通话的代码逻辑进行设计。我们之前在 【山大会议】WebRTC基础之对等体连接 这篇文章中介绍过基本的 WebRTC 对等体连接的过程。它的建立本质上是一个两次握手的过程:在私人视频聊天模块中,我们决定采用去中心化的、P2原创 2022-06-07 11:38:02 · 2038 阅读 · 0 评论 -
【山大会议】一些基本工具类定义
要想实现 山大会议 客户端的各种功能,并提高开发效率,我需要在开发的途中设计一些供其他组件使用的工具类,并把一些可以复用的代码提取出来进行封装。这是一个我用于发送 Http 异步请求的工具类,我在项目中引入了 axios 模块,并根据 axios 模块进行封装,得到了自己的用于发送网络请求的工具类。整个工具类的代码如下:事件总线由于 React 倡导单向数据流,我们如果不通过一些特殊写法很难实现类似于 Vue 那样的双向绑定。Redux 是一种解决方案,然而 Redux 的部分写法太过繁琐,如果是一些原创 2022-06-03 16:56:47 · 181 阅读 · 0 评论 -
【山大会议】应用设置模块
在本篇文章中,我将介绍我对山大会议客户端的设置页面所作的设计。整个设置模块被封装在一个 模块中,在客户端内将以 模态屏的形式展示给用户。其整体结构被划分为四个部分:每个部分都被细分为独立的模块,便于维护。下面先来介绍一下通用设置模块,它负责对应用的某些通用功能进行管理。包括是否需要在启动应用时自动登录,是否允许应用开机时自动启动,以及私人视频通话是否开启加密。整个通用设置的模块代码如下:其中自动登录功能实现较为简单,我将着重介绍开机自启动功能的实现。要实现本功能,需要对用户的注册表进行修改。而前端原创 2022-06-03 14:45:05 · 195 阅读 · 0 评论 -
【山大会议】WebRTC基础之对等体连接
在上一篇文章中,我们简单介绍了一下如何通过 WebRTC 提供的 API 实现用户设备媒体流的获取。在这篇文章中,我将着重介绍如何使用 WebRTC 搭建一个简单的 WebRTC 一对一音视频通话的 Demo。首先,我们先编写我们的 HTML 代码,搭好页面的骨架。我们搭建了一个简单的页面骨架,两个 标签分别对应自己发出的视频流以及对方发送给自己的视频流。两个 分别存储双方的 SDP 。在搭建好骨架后,我们来编写具体的逻辑。首先,我们需要点击 id 为 的按钮,获取用户本地的音视频流。代码如下:建原创 2022-06-02 23:04:19 · 408 阅读 · 0 评论 -
【山大会议】WebRTC基础之用户媒体的获取
WebRTC 是一种支持网页浏览器进行实时语音视频通话的技术,于2011年6月1日开源并在 Google、Mozilla、Opera 的支持下被纳入万维网联盟的 W3C 推荐标准。这是我第一次接触该技术,因此在正式使用之前先对该技术进行基本的学习。要开发音视频通话功能,首先我们需要获取到音视频流。现代浏览器基本已经实现了 WebRTC 的 API,我们可以通过调用这些 API 实现最基本的功能。首先我们来认识一下如何通过 WebRTC 的 API 获取用户的默认麦克风的音频流,用到的代码很简单:我们通过原创 2022-06-02 22:25:33 · 367 阅读 · 0 评论 -
【山大会议】使用TypeScript为项目进行重构
文章目录TypeScript 简介依赖安装tsconfig.json修改 webpack.config.js修改旧的代码index.tsx登录页Victor.ts注册页Reduxactions.tsreducers.tsstore.ts增加新的代码Constraints.tsGlobal.tsTypes.tsTypeScript 简介TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。其设计目标是开发大原创 2022-05-31 17:25:02 · 625 阅读 · 0 评论 -
【山大会议】注册页的编写
文章目录渲染进程代码index.jsxApp.jsx修改登录页代码渲染进程代码在 src/Views 文件夹下,我们新建一个 Register 文件夹,其中是我们的注册页面。index.jsx首先,我们来书写注册页的入口文件import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementBy原创 2022-05-31 17:06:18 · 107 阅读 · 0 评论 -
【山大会议】项目引入 Redux
文章目录前言安装依赖定义活动定义分发器导出 Redux前言React 使用的是单向数据流,为了实现数据流在不同组件中实现共享,我为项目引入了 Redux 进行全局的数据状态管理。安装依赖首先需要安装 redux 核心依赖:yarn add @reduxjs/toolkit定义活动我们在 src/Utils 下创建新的文件夹 Store,在其中新建文件 actions.js 。/** * action 类型 */export const UPDATE_AVAILABLE_VIDEO_D原创 2022-05-31 16:49:25 · 151 阅读 · 0 评论 -
【山大会议】项目初始化
文章目录技术选型electron.jsReact.jsWebpack5项目初始化添加依赖添加 webpack添加 React.js添加 electron.js编写基本文件编写前端静态文件electron.js 主进程React 入口文件及登录页Webpack 配置在本文中,我将描述为开发山大会议的客户端做的环境准备以及部分初始化工作。技术选型本人专精于 web 前端开发,更想将本次项目作为未来面试其他公司时的项目经历,因此选择采用 JavaScript 进行客户端的开发。但是 JavaScript原创 2022-05-31 16:29:08 · 110 阅读 · 0 评论